[refactor] improve custom theme edit control

This commit is contained in:
zombieFox 2020-01-08 01:43:43 -07:00
parent 69b0d2b4fc
commit cff0ebad36
9 changed files with 62 additions and 39 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "nighttab",
"version": "4.10.0",
"version": "4.11.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

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

View File

@ -1327,8 +1327,9 @@
<div class="button-wrap">
<button class="control-theme-custom-add button mb-0" tabindex="-1">Save current theme</button>
</div>
<div class="button-wrap">
<button class="control-theme-custom-edit button mb-0" tabindex="-1">Edit</button>
<div class="input-wrap input-button input-hide">
<input id="control-theme-custom-edit" class="control-theme-custom-edit" type="checkbox" tabindex="1">
<label for="control-theme-custom-edit" class="mb-0"><span class="label-icon"></span> Edit</label>
</div>
</div>
<p class="control-theme-custom-helper form-helper small">Saving a Theme will record the current Colour, Accent, Font, Style and Radius.</p>

View File

@ -2539,9 +2539,10 @@ var control = (function() {
}
}, {
element: helper.e(".control-theme-custom-edit"),
type: "button",
path: "theme.custom.edit",
type: "checkbox",
func: function() {
theme.custom.edit();
render.class();
}
}, {
element: helper.e(".control-theme-style-dark"),
@ -3450,10 +3451,13 @@ var control = (function() {
};
};
var _theme = function() {
helper.removeClass(html, "is-theme-custom-edit");
helper.removeClass(html, "is-theme-radius");
if (state.get.current().theme.custom.edit) {
helper.addClass(html, "is-theme-custom-edit");
};
if (state.get.current().theme.radius > 0) {
helper.addClass(html, "is-theme-radius");
} else {
helper.removeClass(html, "is-theme-radius");
};
};
var _layout = function() {
@ -3842,23 +3846,21 @@ var control = (function() {
_transitional();
};
var _edit = function() {
_disable.input(".control-edit", true);
if (bookmarks.get().length > 0) {
_disable.input(".control-edit", false);
} else {
_disable.input(".control-edit", true);
};
};
var _group = function() {
_disable.element("[for=control-group-name-size]", true);
_disable.input(".control-group-name-size", true);
_disable.element(".control-group-name-size-count", true);
_disable.input(".control-group-name-size-default", true);
if (state.get.current().group.name.show) {
_disable.element("[for=control-group-name-size]", false);
_disable.input(".control-group-name-size", false);
_disable.element(".control-group-name-size-count", false);
_disable.input(".control-group-name-size-default", false);
} else {
_disable.element("[for=control-group-name-size]", true);
_disable.input(".control-group-name-size", true);
_disable.element(".control-group-name-size-count", true);
_disable.input(".control-group-name-size-default", true);
};
};
var _link = function() {
@ -4062,6 +4064,16 @@ var control = (function() {
};
};
var _theme = function() {
_disable.input(".control-theme-custom-edit", true);
_disable.input(".control-theme-accent-random-style-any", true);
_disable.input(".control-theme-accent-random-style-light", true);
_disable.input(".control-theme-accent-random-style-dark", true);
_disable.input(".control-theme-accent-random-style-pastel", true);
_disable.input(".control-theme-accent-random-style-saturated", true);
_disable.input(".control-theme-accent-randomise", true);
if (state.get.current().theme.custom.all.length > 0) {
_disable.input(".control-theme-custom-edit", false);
};
if (state.get.current().theme.accent.random.active) {
_disable.input(".control-theme-accent-random-style-any", false);
_disable.input(".control-theme-accent-random-style-light", false);
@ -4069,13 +4081,6 @@ var control = (function() {
_disable.input(".control-theme-accent-random-style-pastel", false);
_disable.input(".control-theme-accent-random-style-saturated", false);
_disable.input(".control-theme-accent-randomise", false);
} else {
_disable.input(".control-theme-accent-random-style-any", true);
_disable.input(".control-theme-accent-random-style-light", true);
_disable.input(".control-theme-accent-random-style-dark", true);
_disable.input(".control-theme-accent-random-style-pastel", true);
_disable.input(".control-theme-accent-random-style-saturated", true);
_disable.input(".control-theme-accent-randomise", true);
};
};
var _background = function() {

View File

@ -262,7 +262,10 @@ var state = (function() {
style: "dark",
radius: 0.25,
shadow: 1,
custom: []
custom: {
all: [],
edit: false
}
},
background: {
color: {

View File

@ -1089,13 +1089,20 @@ var theme = (function() {
mod.custom = {
get: function(index) {
return JSON.parse(JSON.stringify(state.get.current().theme.custom[index]));
return JSON.parse(JSON.stringify(state.get.current().theme.custom.all[index]));
},
add: function() {
state.get.current().theme.custom.push(JSON.parse(JSON.stringify(stagedThemeCustom.theme)));
state.get.current().theme.custom.all.push(JSON.parse(JSON.stringify(stagedThemeCustom.theme)));
},
remove: function(copyStagedThemeCustom) {
state.get.current().theme.custom.splice(stagedThemeCustom.position.index, 1);
state.get.current().theme.custom.all.splice(stagedThemeCustom.position.index, 1);
},
close: function() {
helper.setObject({
object: state.get.current(),
path: "theme.custom.edit",
newValue: false
});
}
};
@ -1399,7 +1406,7 @@ var theme = (function() {
all: function() {
var themeCustomSaved = helper.e(".theme-custom");
var formInline = helper.node("div|class:form-inline");
var allThemeCuston = JSON.parse(JSON.stringify(state.get.current().theme.custom));
var allThemeCuston = JSON.parse(JSON.stringify(state.get.current().theme.custom.all));
if (allThemeCuston.length > 0) {
allThemeCuston.forEach(function(arrayItem, index) {
var themeCustomItem = helper.node("div|class:theme-custom-item");
@ -1527,6 +1534,7 @@ var theme = (function() {
shade.close();
pagelock.unlock();
stagedThemeCustom.reset();
control.render.dependents();
};
var cancelAction = function() {
shade.close();
@ -1561,12 +1569,16 @@ var theme = (function() {
};
var successAction = function() {
mod.custom.remove();
custom.check();
data.save();
render.custom.clear();
render.custom.all();
shade.close();
pagelock.unlock();
stagedThemeCustom.reset();
control.render.update();
control.render.class();
control.render.dependents();
};
var cancelAction = function() {
shade.close();
@ -1590,16 +1602,6 @@ var theme = (function() {
});
pagelock.lock();
},
edit: function() {
var html = helper.e("html");
if (_customThemeEdit) {
_customThemeEdit = false;
helper.removeClass(html, "is-theme-custom-edit");
} else {
_customThemeEdit = true;
helper.addClass(html, "is-theme-custom-edit");
};
},
clear: function() {
var themeCustom = helper.e(".theme-custom");
while (themeCustom.lastChild) {
@ -1662,6 +1664,11 @@ var theme = (function() {
edit: function() {
render.custom.edit();
render.custom.tabIndex();
},
check: function() {
if (state.get.current().theme.custom.all <= 0) {
mod.custom.close();
};
}
};

View File

@ -757,6 +757,13 @@ var update = (function() {
"4.10.0": function(data) {
data.state.theme.shadow = 1;
return data;
},
"4.11.0": function(data) {
data.state.theme.custom = {
all: data.state.theme.custom,
edit: false
};
return data;
}
};

View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "4.10.0";
var current = "4.11.0";
var name = "Naughty Goose";

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