[feature] allow hex value for accent colour

Author: zombieFox

package.json

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

@@ -86,8 +86,8 @@
 </div>
 <divclass="header-item header-button header-accent">
 <divclass="input-wrap input-button input-color-dot input-color-dot-accent py-0">
-<inputid="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
-<labelfor="control-theme-accent-current">Accent</label>
+<inputid="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" tabindex="1">
+<labelfor="control-theme-accent-current-quick">Accent</label>
 </div>
 </div>
 <divclass="header-item header-button header-menu">
@@ -105,7 +105,6 @@
 
 </main>
 
-
 <sectionclass="menu" tabindex="-1">
 <divclass="menu-area">
 
@@ -967,33 +966,17 @@ <h1 class="menu-item-header-text">Accent override</h1>
 <divclass="menu-content-area menu-content-area-theme is-hidden">
 <divclass="menu-item">
 <divclass="menu-item-header">
-<h1class="menu-item-header-text">Style</h1>
+<h1class="menu-item-header-text">Accent</h1>
 </div>
 <divclass="menu-item-form">
-<divclass="input-wrap">
-<inputid="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
-<labelfor="control-theme-style-dark">Dark</label>
-</div>
-<divclass="input-wrap">
-<inputid="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
-<labelfor="control-theme-style-light">Light</label>
+<labelfor="control-theme-accent-current-picker">Colour</label>
+<divclass="input-wrap"><divclass="form-group mb-0">
+<inputid="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
+<inputid="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7">
+</div>
 </div>
-<pclass="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
+<pclass="control-theme-style-light-helper form-helper small">Accent Colour can also be changed from the Header area.</p>
 <hr>
-<divclass="input-wrap">
-<labelfor="control-theme-radius">Radius</label>
-<inputid="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="-1">
-</div>
-<divclass="button-wrap">
-<buttonclass="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
-</div>
-</div>
-</div>
-<divclass="menu-item">
-<divclass="menu-item-header">
-<h1class="menu-item-header-text">Accent</h1>
-</div>
-<divclass="menu-item-form">
 <divclass="input-wrap">
 <inputid="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="-1">
 <labelfor="control-theme-accent-random-active">Random Accent colour on load/refresh</label>
@@ -1025,6 +1008,30 @@ <h1 class="menu-item-header-text">Accent</h1>
 </div>
 </div>
 </div>
+<divclass="menu-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">Style</h1>
+</div>
+<divclass="menu-item-form">
+<divclass="input-wrap">
+<inputid="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
+<labelfor="control-theme-style-dark">Dark</label>
+</div>
+<divclass="input-wrap">
+<inputid="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
+<labelfor="control-theme-style-light">Light</label>
+</div>
+<pclass="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
+<hr>
+<divclass="input-wrap">
+<labelfor="control-theme-radius">Radius</label>
+<inputid="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="-1">
+</div>
+<divclass="button-wrap">
+<buttonclass="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
+</div>
+</div>
+</div>
 </div>
 
 <divclass="menu-content-area menu-content-area-background is-hidden">

src/js/control.js

@@ -69,11 +69,13 @@ var control = (function(){
 render.class();
 }
 },{
-element: helper.e(".control-theme-accent-current"),
+element: helper.e(".control-theme-accent-current-quick"),
 path: "theme.accent.current",
 type: "color",
 func: function(){
 theme.accent();
+theme.render.input.picker();
+theme.render.input.hex();
 link.items();
 }
 },{
@@ -2016,6 +2018,27 @@ var control = (function(){
 link.mod.accent.rainbow();
 link.items();
 }
+},{
+element: helper.e(".control-theme-accent-current-picker"),
+path: "theme.accent.current",
+type: "color",
+func: function(){
+theme.accent();
+theme.render.input.quick();
+theme.render.input.hex();
+link.items();
+}
+},{
+element: helper.e(".control-theme-accent-current-hex"),
+path: "theme.accent.current",
+type: "text",
+valueMod: ["hexTextString"],
+func: function(){
+theme.accent();
+theme.render.input.picker();
+theme.render.input.quick();
+link.items();
+}
 },{
 element: helper.e(".control-theme-style-dark"),
 path: "theme.style",
@@ -2280,6 +2303,9 @@ var control = (function(){
 },
 float: function(value,object){
 returnvalue/100;
+},
+hexTextString: function(value,object){
+returnhelper.hexToRgb(value);
 }
 };
 varchangeValue=function(object){
@@ -3066,6 +3092,9 @@ var control = (function(){
 },
 float: function(value,element){
 returnvalue*100;
+},
+hexTextString: function(value,element){
+returnhelper.rgbToHex(value);
 }
 };
 varsetValue={
@@ -3082,10 +3111,16 @@ var control = (function(){
 })).checked=true;
 },
 text: function(object){
-object.element.value=helper.getObject({
+varnewValue=helper.getObject({
 object: state.get(),
 path: object.path
 });
+if(object.valueMod){
+object.valueMod.slice().reverse().forEach(function(arrayItem,index){
+newValue=valueMod[arrayItem](newValue,object.element);
+});
+};
+object.element.value=newValue;
 },
 number: function(object){
 object.element.value=helper.getObject({

src/js/header.js

@@ -135,13 +135,13 @@ var header = (function(){
 varaction={
 box: function(){
 helper.removeClass(helper.getClosest(helper.e(".control-link-edit"),".input-wrap"),"input-button-link");
-helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"),".input-wrap"),"input-button-link");
+helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"),".input-wrap"),"input-button-link");
 helper.removeClass(helper.e(".control-link-add"),"button-link");
 helper.removeClass(helper.e(".control-menu-open"),"button-link");
 },
 clear: function(){
 helper.addClass(helper.getClosest(helper.e(".control-link-edit"),".input-wrap"),"input-button-link");
-helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"),".input-wrap"),"input-button-link");
+helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"),".input-wrap"),"input-button-link");
 helper.addClass(helper.e(".control-link-add"),"button-link");
 helper.addClass(helper.e(".control-menu-open"),"button-link");
 }

src/js/theme.js

@@ -99,11 +99,25 @@ var theme = (function(){
 path: "theme.accent.current",
 newValue: randomColor
 });
-helper.e(".control-theme-accent-current").value=helper.rgbToHex(randomColor);
+helper.e(".control-theme-accent-current-quick").value=helper.rgbToHex(randomColor);
+helper.e(".control-theme-accent-current-picker").value=helper.rgbToHex(randomColor);
+helper.e(".control-theme-accent-current-hex").value=helper.rgbToHex(randomColor);
 };
 }
 };
 
+render.input={
+quick: function(){
+helper.e(".control-theme-accent-current-quick").value=helper.rgbToHex(state.get().theme.accent.current);
+},
+picker: function(){
+helper.e(".control-theme-accent-current-picker").value=helper.rgbToHex(state.get().theme.accent.current);
+},
+hex: function(){
+helper.e(".control-theme-accent-current-hex").value=helper.rgbToHex(state.get().theme.accent.current);
+}
+};
+
 vartoggle=function(){
 mod.theme.toggle();
 render.theme();

src/js/version.js

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="3.74.2";
+varcurrent="3.75.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.74.2",
+"version": "3.75.0",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"