Refactor/UI

colors.js

@@ -1,25 +1,30 @@
 import { Color } from 'lively.graphics';
 import { string } from 'lively.lang';
 export const COLOR_SCHEME = {
-  PRIMARY: Color.rgb(0, 176, 255),
-  PRIMARY_VARIANT: Color.rgb(0, 72, 255),
-  PRIMARY_LIGHTER: Color.rgb(133, 193, 233),
-  SECONDARY: Color.rgb(240, 100, 0),
-  SECONDARY_VARIANT: Color.rgb(255, 160, 92),
+  PRIMARY: Color.rgb(0, 110, 230),
+  PRIMARY_VARIANT: Color.rgb(0, 93, 194),
+  ON_PRIMARY: Color.white,
+  SECONDARY: Color.rgb(255, 120, 0),
   ON_SECONDARY: Color.white,
   BACKGROUND: Color.white,
-  BACKGROUND_VARIANT: Color.rgb(200, 200, 200),
-  ON_BACKGROUND: Color.black,
-  ON_BACKGROUND_VARIANT: Color.rgb(220, 220, 220),
+  BACKGROUND_VARIANT: Color.rgb(215, 215, 215),
+  ON_BACKGROUND: Color.rgb(40, 40, 40),
+  ON_BACKGROUND_VARIANT: Color.rgb(230, 230, 230),
+  ON_BACKGROUND_DARKER_VARIANT: Color.rgb(200, 200, 200),
+
   PROMPT_BACKGROUND: Color.rgb(236, 240, 241),
   SURFACE: Color.white,
-  SURFACE_VARIANT: Color.rgb(220, 220, 220),
-  ON_SURFACE: Color.black,
-  ERROR: Color.rgb(210, 31, 44),
+  SURFACE_VARIANT: Color.rgb(230, 230, 230),
+  SURFACE_DARKER_VARIANT: Color.rgb(200, 200, 200),
+  ON_SURFACE: Color.rgb(40, 40, 40),
+  ON_SURFACE_VARIANT: Color.rgb(220, 220, 220),
+  ON_SURFACE_DARKER_VARIANT: Color.rgb(130, 130, 130),
+  ERROR: Color.rgb(255, 0, 14),
+  ON_ERROR: Color.white,
   TRANSPARENT: Color.transparent,
+
   KEYFRAME_FILL: Color.rgb(134, 134, 134),
-  KEYFRAME_BORDER: Color.rgb(69, 69, 69),
-  BUTTON_BLUE: Color.rgb(0, 110, 230)
+  KEYFRAME_BORDER: Color.rgb(69, 69, 69)
 };
 
 // use this function to get a color for a property name

components/qinoq-button.js

@@ -5,15 +5,14 @@ import { COLOR_SCHEME } from '../colors.js';
 export class QinoqButton extends Label {
   static get properties () {
     return {
-      fontColor: {
-        defaultValue: COLOR_SCHEME.BUTTON_BLUE
-      },
-      // use to show a state e.g. toggle snapping
-      filled: {
-        defaultValue: false,
-        set (filled) {
-          this.setProperty('filled', filled);
+      styleSet: {
+        // cannot use defaultValue, otherwise this.updateStyle won't be triggered initially
+        initialize () {
+          if (this._deserializing) return;
           this.styleSet = 'default';
+        },
+        set (styleSet) {
+          this.setProperty('styleSet', styleSet);
           this.updateStyle();
         }
       },
@@ -28,11 +27,8 @@ export class QinoqButton extends Label {
       borderRadius: {
         defaultValue: 4
       },
-      borderColor: {
-        defaultValue: COLOR_SCHEME.BACKGROUND
-      },
       borderWidth: {
-        defaultValue: 1
+        defaultValue: 0
       },
       padding: {
         defaultValue: rect(3, 3, 0, 0)
@@ -42,21 +38,24 @@ export class QinoqButton extends Label {
           Icon.setIcon(this, icon);
         }
       },
-      styleSet: {
-        defaultValue: 'default',
-        set (styleSet) {
-          this.setProperty('styleSet', styleSet);
-          this.updateStyle();
-        }
-      },
       previousMouseUpTime: {
         defaultValue: 0
       },
       enabled: {
         after: ['styleSet'],
+        defaultValue: true,
         set (enabled) {
           this.setProperty('enabled', enabled);
-          if (enabled) this.enable(); else this.disable();
+          this.updateStyle();
+          this.reactsToPointer = enabled;
+        }
+      },
+      active: {
+        after: ['enabled'],
+        defaultValue: false,
+        set (active) {
+          this.setProperty('active', active);
+          this.updateStyle();
         }
       }
     };
@@ -68,12 +67,14 @@ export class QinoqButton extends Label {
 
   onMouseDown (event) {
     super.onMouseDown(event);
-    this.styleSet = this.filled ? 'unfilled' : 'filled';
+    this.styleSet = 'pressed';
   }
 
   onDoubleMouseDown () {
     if (!this.doubleCommand && !this.doubleAction) return;
-    this.doubleCommand ? this.target.execCommand(this.doubleCommand) : this.target[this.doubleAction]();
+    this.doubleCommand
+      ? this.target.execCommand(this.doubleCommand)
+      : this.target[this.doubleAction]();
   }
 
   onMouseUp () {
@@ -82,40 +83,55 @@ export class QinoqButton extends Label {
   }
 
   onHoverIn () {
-    this.borderColor = COLOR_SCHEME.BUTTON_BLUE;
+    this.styleSet = 'hovered';
   }
 
   onHoverOut () {
-    this.borderColor = COLOR_SCHEME.BACKGROUND;
     this.styleSet = 'default';
   }
 
   updateStyle () {
+    if (!this.enabled) {
+      this.fill = COLOR_SCHEME.SURFACE_VARIANT;
+      this.fontColor = COLOR_SCHEME.ON_SURFACE_DARKER_VARIANT;
+      return;
+    }
+
     switch (this.styleSet) {
       case 'default':
-        this.styleSet = this.filled ? 'filled' : 'unfilled';
-        break;
-      case 'unfilled':
-        this.fill = COLOR_SCHEME.BACKGROUND;
-        this.fontColor = COLOR_SCHEME.BUTTON_BLUE;
+        if (this.active) {
+          this.fill = COLOR_SCHEME.PRIMARY;
+          this.fontColor = COLOR_SCHEME.ON_PRIMARY;
+        } else {
+          this.fill = COLOR_SCHEME.SURFACE;
+          this.fontColor = COLOR_SCHEME.PRIMARY;
+        }
         break;
-      case 'disabled':
-        this.fill = COLOR_SCHEME.BACKGROUND;
-        this.fontColor = COLOR_SCHEME.BACKGROUND_VARIANT;
+      case 'hovered':
+        if (this.active) {
+          this.fill = COLOR_SCHEME.PRIMARY_VARIANT;
+          this.fontColor = COLOR_SCHEME.ON_PRIMARY;
+        } else {
+          this.fill = COLOR_SCHEME.SURFACE_VARIANT;
+          this.fontColor = COLOR_SCHEME.PRIMARY;
+        }
         break;
-      case 'filled':
-        this.fill = COLOR_SCHEME.BUTTON_BLUE;
-        this.fontColor = COLOR_SCHEME.BACKGROUND;
+      case 'pressed':
+        if (this.active) {
+          this.fill = COLOR_SCHEME.SURFACE_VARIANT;
+          this.fontColor = COLOR_SCHEME.PRIMARY;
+        } else {
+          this.fill = COLOR_SCHEME.PRIMARY;
+          this.fontColor = COLOR_SCHEME.ON_PRIMARY;
+        }
     }
   }
 
   enable () {
-    this.styleSet = 'default';
-    this.reactsToPointer = true;
+    this.enabled = true;
   }
 
   disable () {
-    this.styleSet = 'disabled';
-    this.reactsToPointer = false;
+    this.enabled = false;
   }
 }