[feature] add header button colour dot control

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.5.0",
+  "version": "4.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.5.0",
+  "version": "4.4.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {

src/index.html

@@ -784,6 +784,12 @@
                 <label for="control-header-button-coloraccent-show"><span class="label-icon"></span> Show Colour/Accent</label>
               </div>
               <p class="control-header-button-coloraccent-show-helper form-helper small">Colour and Accent can also be found under Theme.</p>
+              <div class="form-indent">
+                <div class="input-wrap">
+                  <input id="control-header-button-coloraccent-dot-show" class="control-header-button-coloraccent-dot-show" type="checkbox" tabindex="-1">
+                  <label for="control-header-button-coloraccent-dot-show"><span class="label-icon"></span> Show colour dots</label>
+                </div>
+              </div>
               <hr>
               <div class="input-wrap">
                 <label for="control-header-button-size">Size</label>

src/js/control.js

@@ -1663,6 +1663,13 @@ var control = (function() {
       render.class();
       render.dependents();
     }
+  }, {
+    element: helper.e(".control-header-button-coloraccent-dot-show"),
+    path: "header.button.colorAccent.dot.show",
+    type: "checkbox",
+    func: function() {
+      header.render.button.dot();
+    }
   }, {
     element: helper.e(".control-header-button-size"),
     path: "header.button.size",
@@ -3482,6 +3489,12 @@ var control = (function() {
           _disable.input(".control-header-radius", true);
         };
       };
+      var _button = function() {
+        _disable.input(".control-header-button-coloraccent-dot-show", true);
+        if (state.get.current().header.button.colorAccent.show) {
+          _disable.input(".control-header-button-coloraccent-dot-show", false);
+        };
+      };
       var _search = function() {
         if (state.get.current().header.search.show) {
           _disable.element(".control-header-search-style-label", false);
@@ -3613,6 +3626,7 @@ var control = (function() {
       _clock();
       _date();
       _shade();
+      _button();
       _search();
       _greeting();
       _transitional();

src/js/header.js

@@ -149,6 +149,23 @@ var header = (function() {
         }
       };
       action[state.get.current().header.button.style]();
+    },
+    dot: function() {
+      if (state.get.current().header.button.colorAccent.dot.show) {
+        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot-accent");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-hide");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot-accent");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-hide");
+      } else {
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot-accent");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-hide");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot-accent");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-hide");
+      };
     }
   };
 

src/js/state.js

@@ -105,7 +105,10 @@ var state = (function() {
           show: true
         },
         colorAccent: {
-          show: true
+          show: true,
+          dot: {
+            show: true
+          }
         },
         style: "box",
         size: 1

src/js/update.js

@@ -716,6 +716,12 @@ var update = (function() {
       data.state.header.button.colorAccent = data.state.header.button.accent;
       delete data.state.header.button.accent;
       return data;
+    },
+    "4.4.0": function(data) {
+      data.state.header.button.colorAccent.dot = {
+        show: true
+      };
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.5.0";
+  var current = "4.4.0";
 
   var name = "Naughty Goose";
 

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "4.5.0",
+  "version": "4.4.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"