[feature] allow hex value for background colour

Author: zombieFox

package.json

@@ -1,6 +1,6 @@
 {
 "name": "nighttab",
-"version": "3.75.2",
+"version": "3.76.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

@@ -1051,7 +1051,10 @@ <h1 class="menu-item-header-text">Colour</h1>
 </div>
 <divclass="form-indent">
 <divclass="input-wrap">
-<inputid="control-background-color-custom-current" class="control-background-color-custom-current mb-0" type="color" tabindex="1">
+<divclass="form-group mb-0">
+<inputid="control-background-color-custom-current-picker" class="form-group-item-half control-background-color-custom-current-picker mb-0" type="color" value="#000000" tabindex="1">
+<inputid="control-background-color-custom-current-hex" class="form-group-item-half control-background-color-custom-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7">
+</div>
 </div>
 <pclass="control-background-color-theme-helper form-helper small">Take care as some colours may make the Clock, Date and other text unreadable.</p>
 </div>

src/js/background.js

@@ -115,8 +115,13 @@ var background = (function(){
 
 render.input={
 clear: function(){
-varinput=helper.e(".control-background-image-file");
-input.value="";
+helper.e(".control-background-image-file").value="";
+},
+picker: function(){
+helper.e(".control-background-color-custom-current-picker").value=helper.rgbToHex(state.get().background.color.custom);
+},
+hex: function(){
+helper.e(".control-background-color-custom-current-hex").value=helper.rgbToHex(state.get().background.color.custom);
 }
 };
 

src/js/control.js

@@ -2137,11 +2137,21 @@ var control = (function(){
 render.class();
 }
 },{
-element: helper.e(".control-background-color-custom-current"),
+element: helper.e(".control-background-color-custom-current-picker"),
 path: "background.color.custom",
 type: "color",
 func: function(){
 background.render.color();
+background.render.input.hex();
+}
+},{
+element: helper.e(".control-background-color-custom-current-hex"),
+path: "background.color.custom",
+type: "text",
+valueMod: ["hexTextString"],
+func: function(){
+background.render.color();
+background.render.input.picker();
 }
 },{
 element: helper.e(".control-background-image-show"),
@@ -3071,10 +3081,12 @@ var control = (function(){
 _disable.element(".control-background-image-url-helper",true);
 };
 if(state.get().background.color.by=="theme"){
-_disable.input(".control-background-color-custom-current",true);
+_disable.input(".control-background-color-custom-current-picker",true);
+_disable.input(".control-background-color-custom-current-hex",true);
 _disable.element(".control-background-color-theme-helper",true);
 }elseif(state.get().background.color.by=="custom"){
-_disable.input(".control-background-color-custom-current",false);
+_disable.input(".control-background-color-custom-current-picker",false);
+_disable.input(".control-background-color-custom-current-hex",false);
 _disable.element(".control-background-color-theme-helper",false);
 };
 };

src/js/version.js

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="3.75.2";
+varcurrent="3.76.0";
 
 varcompare=function(a,b){
 varpa=a.split(".");

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": "3.75.2",
+"version": "3.76.0",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"