popup: Add support for themes

adtac · adtac · commit e5b30a321010 · 2019-04-16T00:30:09.000-04:00
diff --git a/src/background.js b/src/background.js
@@ -23,7 +23,8 @@ var defaultSettings = {
     gpgPath: null,
     stores: {},
     foreignFills: {},
-    username: null
+    username: null,
+    theme: "dark"
 };
 
 var authListeners = {};
diff --git a/src/options/interface.js b/src/options/interface.js
@@ -52,6 +52,9 @@ function view(ctl, params) {
     nodes.push(createInput.call(this, "username", "Default username", "john.smith"));
     nodes.push(createInput.call(this, "gpgPath", "Custom gpg binary", "/path/to/gpg"));
 
+    nodes.push(m("h3", "Theme"));
+    nodes.push(createDropdown.call(this, "theme", [m("option", { value: "dark" }, "Dark")]));
+
     nodes.push(m("h3", "Custom store locations"));
     nodes.push(
         m("div", { class: "notice" }, "(this overrides default store and $PASSWORD_STORE_DIR)")
@@ -146,6 +149,29 @@ function createInput(key, title, placeholder) {
     ]);
 }
 
+/**
+ * Generates vnode for a dropdown setting
+ *
+ * @since 3.0.13
+ *
+ * @param string key     Settings key
+ * @param array options  Array of objects with value and text fields
+ * @return Vnode
+ */
+function createDropdown(key, options) {
+    return m(
+        "select",
+        {
+            value: this.settings[key],
+            onchange: e => {
+                this.settings[key] = e.target.value;
+                this.saveEnabled = true;
+            }
+        },
+        options
+    );
+}
+
 /**
  * Generates vnode for a checkbox setting
  *
diff --git a/src/popup/colors-dark.less b/src/popup/colors-dark.less
@@ -0,0 +1,18 @@
+@import "colors.less";
+
+.colors-dark {
+    .colors(
+        @bg-color: #414141,
+        @default-bg-color: #393939,
+        @hover-bg-color: #363636,
+        @text-color: #c4c4c4,
+        @error-text-color: #f00,
+        @dim-text-color: #a0a0a0,
+        @badge-color: #626262,
+        @input-bg-color: #4a4a4a,
+        @active-input-bg-color: #4f4f4f,
+        @input-text-color: #eee,
+        @hint-bg-color: #d79921,
+        @hint-color: #363636
+    );
+}
diff --git a/src/popup/colors.less b/src/popup/colors.less
@@ -0,0 +1,77 @@
+.colors(
+    @bg-color,
+    @default-bg-color,
+    @hover-bg-color,
+    @text-color,
+    @error-text-color,
+    @dim-text-color,
+    @badge-color,
+    @input-bg-color,
+    @active-input-bg-color,
+    @input-text-color,
+    @hint-bg-color,
+    @hint-color) {
+    @match-text-color: @hint-bg-color;
+
+    html,
+    body {
+        background-color: @bg-color;
+        color: @text-color;
+    }
+
+    .badge {
+        background-color: @badge-color;
+    }
+
+    .part.error {
+        color: @error-text-color;
+    }
+
+    .part.search {
+        background-color: @input-bg-color;
+    }
+
+    .part.search:focus-within {
+        background-color: @active-input-bg-color;
+    }
+
+    .part.search > .hint {
+        background-color: @hint-bg-color;
+        color: @hint-color;
+    }
+
+    .part.search > input[type="text"] {
+        background-color: transparent;
+        color: @input-text-color;
+    }
+
+    .part.search > input[type="text"]::placeholder {
+        color: @dim-text-color;
+    }
+
+    .logins:not(:hover):not(:focus-within) .part.login:first-child > .name {
+        background-color: @default-bg-color;
+    }
+
+    .part.login > .name:hover,
+    .part.login > .name:focus,
+    .part.login > .action:hover,
+    .part.login > .action:focus,
+    .part.login:focus > .name {
+        background-color: @hover-bg-color;
+        outline: none;
+    }
+
+    .part.login em {
+        color: @match-text-color;
+    }
+
+    .updates {
+        border-top: 1px solid @hover-bg-color;
+
+        span,
+        a {
+            color: @error-text-color;
+        }
+    }
+}
diff --git a/src/popup/popup.js b/src/popup/popup.js
@@ -117,6 +117,10 @@ async function run() {
         }
         var popup = new Interface(settings, logins);
         popup.attach(document.body);
+
+        document
+            .getElementsByTagName("html")[0]
+            .setAttribute("class", "colors-" + settings["theme"]);
     } catch (e) {
         handleError(e);
     }
diff --git a/src/popup/popup.less b/src/popup/popup.less
@@ -1,18 +1,4 @@
-@bg-color: #414141;
-@default-bg-color: #393939;
-@hover-bg-color: #363636;
-@text-color: #c4c4c4;
-@error-text-color: #f00;
-@dim-text-color: #a0a0a0;
-
-@input-bg-color: #4a4a4a;
-@active-input-bg-color: #4f4f4f;
-@input-text-color: #eee;
-
-@hint-bg-color: #d79921;
-@hint-color: #363636;
-
-@match-text-color: @hint-bg-color;
+@import "colors-dark.less";
 
 @login-height: 53px;
 @max-logins-height: @login-height * 7;
@@ -42,8 +28,6 @@ body {
     min-width: 260px;
     overflow-x: hidden;
     white-space: nowrap;
-    background-color: @bg-color;
-    color: @text-color;
 }
 
 @media (min-resolution: 192dpi) {
@@ -75,7 +59,6 @@ body {
 .badge {
     display: flex;
     align-items: center;
-    background-color: #626262;
     border-radius: 4px;
     font-size: 12px;
     margin-right: 8px;
@@ -98,7 +81,6 @@ body {
 }
 
 .part.error {
-    color: @error-text-color;
     white-space: normal;
     padding: 7px;
 }
@@ -114,16 +96,9 @@ body {
     background-position: top 6px right 6px;
     background-repeat: no-repeat;
     background-size: 18px;
-    background-color: @input-bg-color;
-}
-
-.part.search:focus-within {
-    background-color: @active-input-bg-color;
 }
 
 .part.search > .hint {
-    background-color: @hint-bg-color;
-    color: @hint-color;
     line-height: 19px;
 }
 
@@ -138,32 +113,16 @@ body {
 }
 
 .part.search > input[type="text"] {
-    background-color: transparent;
     border: none;
     outline: none;
     width: 100%;
-    color: @input-text-color;
     font-family: "Open Sans";
 }
 
 .part.search > input[type="text"]::placeholder {
-    color: @dim-text-color;
     opacity: 1;
 }
 
-.logins:not(:hover):not(:focus-within) .part.login:first-child > .name {
-    background-color: @default-bg-color;
-}
-
-.part.login > .name:hover,
-.part.login > .name:focus,
-.part.login > .action:hover,
-.part.login > .action:focus,
-.part.login:focus > .name {
-    background-color: @hover-bg-color;
-    outline: none;
-}
-
 .part.login {
     display: flex;
     cursor: pointer;
@@ -221,16 +180,9 @@ body {
 }
 
 .part.login em {
-    color: @match-text-color;
     font-style: normal;
 }
 
 .updates {
     padding: @login-part-padding;
-    border-top: 1px solid @hover-bg-color;
-
-    span,
-    a {
-        color: @error-text-color;
-    }
 }

Original file line number	Diff line number	Diff line change
`@@ -117,6 +117,10 @@ async function run() {`
`117`	`117`	`}`
`118`	`118`	`var popup = new Interface(settings, logins);`
`119`	`119`	`popup.attach(document.body);`
	`120`	`+`
	`121`	`+ document`
	`122`	`+ .getElementsByTagName("html")[0]`
	`123`	`+ .setAttribute("class", "colors-" + settings["theme"]);`
`120`	`124`	`} catch (e) {`
`121`	`125`	`handleError(e);`
`122`	`126`	`}`