extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-23 00:23:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] allow hex value for accent colour

Browse Source
This commit is contained in:
zombieFox 2019-08-25 14:10:22 +01:00
parent d9c66180fe
commit f3695f3bd2
7 changed files with 91 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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": {

61
src/index.html
View File

@ -86,8 +86,8 @@
</div>
<div class="header-item header-button header-accent">
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
<input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
<label for="control-theme-accent-current">Accent</label>
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" tabindex="1">
<label for="control-theme-accent-current-quick">Accent</label>
</div>
</div>
<div class="header-item header-button header-menu">
@ -105,7 +105,6 @@
</main>
<section class="menu" tabindex="-1">
<div class="menu-area">
@ -965,35 +964,19 @@
</div>
<div class="menu-content-area menu-content-area-theme is-hidden">
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Style</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
<label for="control-theme-style-dark">Dark</label>
</div>
<div class="input-wrap">
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
<label for="control-theme-style-light">Light</label>
</div>
<p class="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>
<div class="input-wrap">
<label for="control-theme-radius">Radius</label>
<input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="-1">
</div>
<div class="button-wrap">
<button class="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Accent</h1>
</div>
<div class="menu-item-form">
<label for="control-theme-accent-current-picker">Colour</label>
<div class="input-wrap"><div class="form-group mb-0">
<input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
<input id="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>
<p class="control-theme-style-light-helper form-helper small">Accent Colour can also be changed from the Header area.</p>
<hr>
<div class="input-wrap">
<input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="-1">
<label for="control-theme-accent-random-active">Random Accent colour on load/refresh</label>
@ -1025,6 +1008,30 @@
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Style</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
<label for="control-theme-style-dark">Dark</label>
</div>
<div class="input-wrap">
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
<label for="control-theme-style-light">Light</label>
</div>
<p class="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>
<div class="input-wrap">
<label for="control-theme-radius">Radius</label>
<input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="-1">
</div>
<div class="button-wrap">
<button class="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
</div>
</div>
</div>
</div>
<div class="menu-content-area menu-content-area-background is-hidden">

39
src/js/control.js
View File

@ -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) {
return value / 100;
},
hexTextString: function(value, object) {
return helper.hexToRgb(value);
}
};
var changeValue = function(object) {
@ -3066,6 +3092,9 @@ var control = (function() {
},
float: function(value, element) {
return value * 100;
},
hexTextString: function(value, element) {
return helper.rgbToHex(value);
}
};
var setValue = {
@ -3082,10 +3111,16 @@ var control = (function() {
})).checked = true;
},
text: function(object) {
object.element.value = helper.getObject({
var newValue = 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({

4
src/js/header.js
View File

@ -135,13 +135,13 @@ var header = (function() {
var action = {
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");
}

16
src/js/theme.js
View File

@ -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);
}
};
var toggle = function() {
mod.theme.toggle();
render.theme();

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "3.74.2";
var current = "3.75.0";
var compare = function(a, b) {
var pa = a.split(".");

2
src/manifest.json
View File

@ -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"