[feature] accept hex code for tile colour

Author: zombieFox

src/css/form.css

@@ -13,6 +13,7 @@ input[type="text"]{
 font-family:var(--font-regular);
 line-height:2.5em;
 height:2.5em;
+min-width:0;
 width:100%;
 border-width:var(--form-input-border);
 border-style: solid;
@@ -1039,6 +1040,18 @@ input[type="range"][disabled]::-moz-range-progress{
 width:100%;
 }
 
+.form-group-item-shrink{
+flex-grow:0;
+}
+
+.form-group-item-grow{
+flex-grow:1;
+}
+
+.form-group-item-half{
+flex-basis:50%;
+}
+
 .form-groupbutton,
 .form-group .button,
 .form-group>input[type="email"],

src/js/helper.js

@@ -564,6 +564,15 @@ var helper = (function(){
 returntrue;
 };
 
+varisHexNumber=function(string){
+varregex=/[0-9A-Fa-f]{6}/g;
+if(regex.test(string)&&string.length==7&&string.substring(0,1)=="#"){
+returntrue;
+}else{
+returnfalse;
+};
+};
+
 // exposed methods
 return{
 e: e,
@@ -589,7 +598,8 @@ var helper = (function(){
 toWords: toWords,
 ordinalWords: ordinalWords,
 ordinalNumber: ordinalNumber,
-isJsonString: isJsonString
+isJsonString: isJsonString,
+isHexNumber: isHexNumber
 };
 
 })();

src/js/link.js

@@ -497,7 +497,21 @@ var link = (function(){
 form.querySelector(".link-form-input-name").value=stagedLink.data.name;
 form.querySelector(".link-form-input-url").value=stagedLink.data.url;
 if(stagedLink.data.accent.override){
-form.querySelector(".link-form-input-color").value=helper.rgbToHex(stagedLink.data.accent.color);
+form.querySelector(".link-form-input-accent-global").checked=false;
+form.querySelector(".link-form-input-accent-custom").checked=true;
+form.querySelector(".link-form-input-accent-picker").removeAttribute("disabled");
+form.querySelector(".link-form-input-accent-hex").removeAttribute("disabled");
+helper.removeClass(form.querySelector(".link-form-input-accent-helper"),"disabled");
+}else{
+form.querySelector(".link-form-input-accent-global").checked=true;
+form.querySelector(".link-form-input-accent-custom").checked=false;
+form.querySelector(".link-form-input-accent-picker").setAttribute("disabled","");
+form.querySelector(".link-form-input-accent-hex").setAttribute("disabled","");
+helper.addClass(form.querySelector(".link-form-input-accent-helper"),"disabled");
+};
+if(stagedLink.data.accent.color.r!=null&&stagedLink.data.accent.color.g!=null&&stagedLink.data.accent.color.b!=null){
+form.querySelector(".link-form-input-accent-picker").value=helper.rgbToHex(stagedLink.data.accent.color);
+form.querySelector(".link-form-input-accent-hex").value=helper.rgbToHex(stagedLink.data.accent.color);
 };
 modal.open({
 heading: "Edit "+stagedLink.data.name,
@@ -583,17 +597,17 @@ var link = (function(){
 render.form=function(){
 varform=helper.node("form|class:link-form");
 varfieldset=helper.node("fieldset");
-varletterFormIndet=helper.node("div|class:form-indent");
+varletterFormIndent=helper.node("div|class:form-indent");
 varletterInputWrap=helper.node("div|class:input-wrap");
 varletterInput=helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
-variconFormIndet=helper.node("div|class:form-indent");
+variconFormIndent=helper.node("div|class:form-indent");
 variconFormGroupWrap=helper.node("div|class:input-wrap");
-variconFormGroup=helper.node("div|class:form-group auto-suggest-wrapper");
-variconInput=helper.node("input|type:text,class:link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
+variconFormGroup=helper.node("div|class:form-group mb-0 auto-suggest-wrapper");
+variconInput=helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
 variconFormGroupText=helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled");
 variconFormGroupClear=helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
 variconFormGroupClearIcon=helper.node("span|class:icon-close");
-variconPara=helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper small muted disabled");
+variconHelper=helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper small muted disabled");
 varnameInputWrap=helper.node("div|class:input-wrap");
 varnameLabel=helper.node("label:Name|for:link-form-input-name");
 varnameInput=helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
@@ -608,26 +622,32 @@ var link = (function(){
 value: "form-helper small muted"
 }]
 });
-varcolorWrap=helper.node("div|class:input-wrap");
-varcolorFormGroup=helper.node("div|class:form-group mb-0");
-varcolorLabel=helper.node("label:Accent override|for:link-form-input-color");
-varcolorInput=helper.node("input|id:link-form-input-color,class:link-form-input-color mb-0,type:color,value:"+helper.rgbToHex(state.get().theme.accent.current)+",tabindex:1");
-varcolorButtonRefresh=helper.node("button|class:button mb-0,type:button,tabindex:1");
-varcolorButtonRefreshIcon=helper.node("span|class:icon-refresh");
-varcolorInputHelper=helper.node("p:Use this colour to override the global Accent colour.|class:form-helper small muted");
 varletterRadioInputWrap=helper.node("div|class:input-wrap");
 varletterRadioInput=helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
 varletterRadioLable=helper.node("label:Letters|for:link-form-input-display-letter");
 variconRadioInputWrap=helper.node("div|class:input-wrap");
 variconRadioInput=helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
 variconRadioLable=helper.node("label:Icon|for:link-form-input-display-icon");
+varaccentLabel=helper.node("label:Accent colour");
+varaccentGlobalRadioInputWrap=helper.node("div|class:input-wrap");
+varaccentGlobalRadioInput=helper.node("input|class:link-form-input-accent-global,id:link-form-input-accent-global,type:radio,name:link-form-input-accent,tabindex:1,checked,value:global");
+varaccentGlobalRadioLabel=helper.node("label:Global|for:link-form-input-accent-global");
+varaccentCustomRadioInputWrap=helper.node("div|class:input-wrap");
+varaccentCustomRadioInput=helper.node("input|class:link-form-input-accent-custom,id:link-form-input-accent-custom,type:radio,name:link-form-input-accent,tabindex:1,value:custom");
+varaccentCustomRadioLabel=helper.node("label:Custom|for:link-form-input-accent-custom");
+varaccentFormIndent=helper.node("div|class:form-indent");
+varaccentColorInputWrap=helper.node("div|class:input-wrap");
+varaccentColorFormGroup=helper.node("div|class:form-group mb-0");
+varaccentColorPicker=helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker mb-0,type:color,value:#000000,tabindex:1,disabled");
+varaccentColorHex=helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex mb-0,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
+varaccentCustomInputHelper=helper.node("p:Use this colour to override the global Accent colour.|class:link-form-input-accent-helper form-helper small muted disabled");
 
 letterRadioInputWrap.appendChild(letterRadioInput);
 letterRadioInputWrap.appendChild(letterRadioLable);
 fieldset.appendChild(letterRadioInputWrap);
 letterInputWrap.appendChild(letterInput);
-letterFormIndet.appendChild(letterInputWrap);
-fieldset.appendChild(letterFormIndet);
+letterFormIndent.appendChild(letterInputWrap);
+fieldset.appendChild(letterFormIndent);
 iconRadioInputWrap.appendChild(iconRadioInput);
 iconRadioInputWrap.appendChild(iconRadioLable);
 fieldset.appendChild(iconRadioInputWrap);
@@ -636,9 +656,9 @@ var link = (function(){
 iconFormGroup.appendChild(iconFormGroupText);
 iconFormGroup.appendChild(iconFormGroupClear);
 iconFormGroupWrap.appendChild(iconFormGroup);
-iconFormGroupWrap.appendChild(iconPara);
-iconFormIndet.appendChild(iconFormGroupWrap);
-fieldset.appendChild(iconFormIndet);
+iconFormIndent.appendChild(iconFormGroupWrap);
+iconFormIndent.appendChild(iconHelper);
+fieldset.appendChild(iconFormIndent);
 fieldset.appendChild(helper.node("hr"));
 nameInputWrap.appendChild(nameLabel);
 nameInputWrap.appendChild(nameInput);
@@ -648,13 +668,19 @@ var link = (function(){
 fieldset.appendChild(urlInputWrap);
 fieldset.appendChild(urlInputHelper);
 fieldset.appendChild(helper.node("hr"));
-colorFormGroup.appendChild(colorInput);
-colorButtonRefresh.appendChild(colorButtonRefreshIcon);
-colorFormGroup.appendChild(colorButtonRefresh);
-colorWrap.appendChild(colorLabel);
-colorWrap.appendChild(colorFormGroup);
-fieldset.appendChild(colorWrap);
-fieldset.appendChild(colorInputHelper);
+fieldset.appendChild(accentLabel);
+accentGlobalRadioInputWrap.appendChild(accentGlobalRadioInput);
+accentGlobalRadioInputWrap.appendChild(accentGlobalRadioLabel);
+fieldset.appendChild(accentGlobalRadioInputWrap);
+accentCustomRadioInputWrap.appendChild(accentCustomRadioInput);
+accentCustomRadioInputWrap.appendChild(accentCustomRadioLabel);
+fieldset.appendChild(accentCustomRadioInputWrap);
+accentColorFormGroup.appendChild(accentColorPicker);
+accentColorFormGroup.appendChild(accentColorHex);
+accentColorInputWrap.appendChild(accentColorFormGroup);
+accentFormIndent.appendChild(accentColorInputWrap);
+accentFormIndent.appendChild(accentCustomInputHelper);
+fieldset.appendChild(accentFormIndent);
 form.appendChild(fieldset);
 
 letterRadioInput.addEventListener("change",function(event){
@@ -672,17 +698,29 @@ var link = (function(){
 urlInput.addEventListener("input",function(event){
 stagedLink.data.url=this.value;
 },false);
-colorInput.addEventListener("change",function(event){
+accentGlobalRadioInput.addEventListener("change",function(){
+stagedLink.data.accent.override=false;
+accentColorPicker.setAttribute("disabled","");
+accentColorHex.setAttribute("disabled","");
+helper.addClass(accentCustomInputHelper,"disabled");
+},false);
+accentCustomRadioInput.addEventListener("change",function(){
 stagedLink.data.accent.override=true;
-stagedLink.data.accent.color=helper.hexToRgb(this.value);
+stagedLink.data.accent.color=helper.hexToRgb(accentColorPicker.value);
+accentColorPicker.removeAttribute("disabled");
+accentColorHex.removeAttribute("disabled");
+helper.removeClass(accentCustomInputHelper,"disabled");
 },false);
-colorButtonRefresh.addEventListener("click",function(event){
-colorInput.value=helper.rgbToHex(state.get().theme.accent.current);
-stagedLink.data.accent.override=false;
-stagedLink.data.accent.color={
-r: null,
-g: null,
-b: null
+accentColorPicker.addEventListener("change",function(){
+if(helper.isHexNumber(this.value)){
+stagedLink.data.accent.color=helper.hexToRgb(this.value);
+accentColorHex.value=this.value;
+};
+},false);
+accentColorHex.addEventListener("input",function(){
+if(helper.isHexNumber(this.value)){
+stagedLink.data.accent.color=helper.hexToRgb(this.value);
+accentColorPicker.value=this.value;
 };
 },false);
 iconFormGroupClear.addEventListener("click",function(event){
@@ -758,7 +796,6 @@ var link = (function(){
 pagelock.unlock();
 },
 cancelAction: function(){
-console.log("hit");
 mod.add.close();
 stagedLink.reset();
 autoSuggest.close();

src/js/version.js

@@ -1,7 +1,7 @@
 
 varversion=(function(){
 
-varcurrent="3.69.1";
+varcurrent="3.70.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.69.1",
+"version": "3.70.0",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"