mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-02 19:39:23 +01:00
[refactor] store accent colour under rgb key in state data
This commit is contained in:
zombieFox
parent
8ac1958a78
commit
08e5402631
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "4.17.0",
|
||||
"version": "4.18.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "4.17.0",
|
||||
"version": "4.18.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": {
|
||||
|
||||
@ -116,8 +116,8 @@
|
||||
<label for="control-theme-color-rgb-quick">Colour</label>
|
||||
</div>
|
||||
<div class="form-input-button input-color-dot input-color-dot-accent">
|
||||
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" value="#000000" tabindex="1">
|
||||
<label for="control-theme-accent-current-quick">Accent</label>
|
||||
<input id="control-theme-accent-rgb-quick" class="control-theme-accent-rgb-quick" type="color" value="#000000" tabindex="1">
|
||||
<label for="control-theme-accent-rgb-quick">Accent</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1784,14 +1784,14 @@
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-accent-current-picker">Colour</label>
|
||||
<label for="control-theme-accent-rgb-picker">Colour</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
<input id="control-theme-accent-rgb-picker" class="form-group-item-half control-theme-accent-rgb-picker" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-theme-accent-rgb-hex" class="form-group-item-half control-theme-accent-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<button class="control-theme-accent-current-default button" tabindex="-1">Default accent</button>
|
||||
<button class="control-theme-accent-rgb-default button" tabindex="-1">Default accent</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-style-light-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>
|
||||
|
||||
@ -81,8 +81,8 @@ var control = (function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-accent-current-quick"),
|
||||
path: "theme.accent.current",
|
||||
element: helper.e(".control-theme-accent-rgb-quick"),
|
||||
path: "theme.accent.rgb",
|
||||
type: "color",
|
||||
func: function() {
|
||||
theme.render.accent.color();
|
||||
@ -2865,8 +2865,8 @@ var control = (function() {
|
||||
render.update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-accent-current-picker"),
|
||||
path: "theme.accent.current",
|
||||
element: helper.e(".control-theme-accent-rgb-picker"),
|
||||
path: "theme.accent.rgb",
|
||||
type: "color",
|
||||
func: function() {
|
||||
theme.render.accent.color();
|
||||
@ -2875,8 +2875,8 @@ var control = (function() {
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-accent-current-hex"),
|
||||
path: "theme.accent.current",
|
||||
element: helper.e(".control-theme-accent-rgb-hex"),
|
||||
path: "theme.accent.rgb",
|
||||
type: "text",
|
||||
valueMod: ["hexTextString"],
|
||||
func: function() {
|
||||
@ -2886,12 +2886,12 @@ var control = (function() {
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-accent-current-default"),
|
||||
element: helper.e(".control-theme-accent-rgb-default"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
mod.setValue("theme.accent.current", helper.getObject({
|
||||
mod.setValue("theme.accent.rgb", helper.getObject({
|
||||
object: state.get.default(),
|
||||
path: "theme.accent.current"
|
||||
path: "theme.accent.rgb"
|
||||
}));
|
||||
theme.render.accent.color();
|
||||
theme.render.accent.input.picker();
|
||||
|
||||
@ -137,14 +137,14 @@ var header = (function() {
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
|
||||
helper.removeClass(helper.e(".control-add-toggle"), "button-link");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-button-link");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-button-link");
|
||||
helper.removeClass(helper.e(".control-menu-open"), "button-link");
|
||||
},
|
||||
clear: function() {
|
||||
helper.addClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
|
||||
helper.addClass(helper.e(".control-add-toggle"), "button-link");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-button-link");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-button-link");
|
||||
helper.addClass(helper.e(".control-menu-open"), "button-link");
|
||||
}
|
||||
};
|
||||
@ -155,16 +155,16 @@ var header = (function() {
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot-accent");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-hide");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot-accent");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-hide");
|
||||
} else {
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot-accent");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-hide");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot-accent");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-hide");
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -552,9 +552,9 @@ var link = (function() {
|
||||
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-light";
|
||||
};
|
||||
} else {
|
||||
if (invert(state.get.current().theme.accent.current, true) == "#000000") {
|
||||
if (invert(state.get.current().theme.accent.rgb, true) == "#000000") {
|
||||
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-dark";
|
||||
} else if (invert(state.get.current().theme.accent.current, true) == "#ffffff") {
|
||||
} else if (invert(state.get.current().theme.accent.rgb, true) == "#ffffff") {
|
||||
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-light";
|
||||
};
|
||||
};
|
||||
|
||||
@ -221,7 +221,7 @@ var state = (function() {
|
||||
},
|
||||
theme: {
|
||||
accent: {
|
||||
current: {
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 80,
|
||||
b: 255
|
||||
@ -369,7 +369,7 @@ var state = (function() {
|
||||
},
|
||||
theme: {
|
||||
accent: {
|
||||
current: {
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 80,
|
||||
b: 255
|
||||
|
||||
@ -48,7 +48,7 @@ var theme = (function() {
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.accent.current",
|
||||
path: "theme.accent.rgb",
|
||||
newValue: data.accent
|
||||
});
|
||||
helper.setObject({
|
||||
@ -137,7 +137,7 @@ var theme = (function() {
|
||||
var hex = helper.convertColor.rgb.hex(rgb);
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.accent.current",
|
||||
path: "theme.accent.rgb",
|
||||
newValue: {
|
||||
r: parseInt(rgb.r, 10),
|
||||
g: parseInt(rgb.g, 10),
|
||||
@ -183,7 +183,7 @@ var theme = (function() {
|
||||
name: "nightTab (default)",
|
||||
font: state.get.default().theme.font,
|
||||
color: state.get.default().theme.color,
|
||||
accent: state.get.default().theme.accent.current,
|
||||
accent: state.get.default().theme.accent.rgb,
|
||||
radius: state.get.default().theme.radius,
|
||||
shadow: state.get.default().theme.shadow,
|
||||
style: state.get.default().theme.style,
|
||||
@ -1279,18 +1279,18 @@ var theme = (function() {
|
||||
render.accent = {
|
||||
color: function() {
|
||||
var html = helper.e("html");
|
||||
var color = state.get.current().theme.accent.current;
|
||||
var color = state.get.current().theme.accent.rgb;
|
||||
html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
|
||||
},
|
||||
input: {
|
||||
quick: function() {
|
||||
helper.e(".control-theme-accent-current-quick").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
|
||||
helper.e(".control-theme-accent-rgb-quick").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.rgb);
|
||||
},
|
||||
picker: function() {
|
||||
helper.e(".control-theme-accent-current-picker").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
|
||||
helper.e(".control-theme-accent-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.rgb);
|
||||
},
|
||||
hex: function() {
|
||||
helper.e(".control-theme-accent-current-hex").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
|
||||
helper.e(".control-theme-accent-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.rgb);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1699,7 +1699,7 @@ var theme = (function() {
|
||||
var successAction = function() {
|
||||
stagedThemeCustom.theme.font = state.get.current().theme.font;
|
||||
stagedThemeCustom.theme.color = state.get.current().theme.color;
|
||||
stagedThemeCustom.theme.accent = state.get.current().theme.accent.current;
|
||||
stagedThemeCustom.theme.accent = state.get.current().theme.accent.rgb;
|
||||
stagedThemeCustom.theme.radius = state.get.current().theme.radius;
|
||||
stagedThemeCustom.theme.shadow = state.get.current().theme.shadow;
|
||||
stagedThemeCustom.theme.style = state.get.current().theme.style;
|
||||
|
||||
@ -770,6 +770,11 @@ var update = (function() {
|
||||
opacity: 0.4
|
||||
};
|
||||
return data;
|
||||
},
|
||||
"4.18.0": function(data) {
|
||||
data.state.theme.accent.rgb = data.state.theme.accent.current;
|
||||
delete data.state.theme.accent.current;
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "4.17.0";
|
||||
var current = "4.18.0";
|
||||
|
||||
var name = "Naughty Goose";
|
||||
|
||||
|
||||
@ -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.17.0",
|
||||
"version": "4.18.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user