[refactor] change control element to class names

This commit is contained in:
zombieFox 2020-01-29 15:09:23 +00:00
parent cc5d2e26ef
commit 841ac1c671
10 changed files with 1094 additions and 1188 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "4.35.0", "version": "4.36.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "4.35.0", "version": "4.36.0",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

View File

@ -205,7 +205,7 @@
.header-clock, .header-clock,
.header-search, .header-search,
.header-edit-add, .header-edit-add,
.header-accent, .header-coloraccent,
.header-greeting, .header-greeting,
.header-transitional, .header-transitional,
.header-menu { .header-menu {
@ -216,7 +216,7 @@
.is-header-date-show .header-date, .is-header-date-show .header-date,
.is-header-clock-show .header-clock, .is-header-clock-show .header-clock,
.is-header-button-editadd-show .header-edit-add, .is-header-button-editadd-show .header-edit-add,
.is-header-button-coloraccent-show .header-accent, .is-header-button-coloraccent-show .header-coloraccent,
.is-header-greeting-show .header-greeting, .is-header-greeting-show .header-greeting,
.is-header-transitional-show .header-transitional, .is-header-transitional-show .header-transitional,
.is-menu .header-menu { .is-menu .header-menu {

View File

@ -59,16 +59,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="header-item header-button header-accent"> <div class="header-item header-button header-coloraccent">
<div class="header-button-body"> <div class="header-button-body">
<div class="form-group form-group-nested-button"> <div class="form-group form-group-nested-button">
<div class="form-input-button input-color-dot input-color-dot-shade"> <div class="form-input-button input-color-dot input-color-dot-shade">
<input id="control-theme-color-rgb-color" class="control-theme-color-rgb-color" type="color" value="#000000" tabindex="1"> <input id="control-theme-color-rgb-color-quick" class="control-theme-color-rgb-color-quick" type="color" value="#000000" tabindex="1">
<label for="control-theme-color-rgb-color">Colour</label> <label for="control-theme-color-rgb-color-quick">Colour</label>
</div> </div>
<div class="form-input-button input-color-dot input-color-dot-accent"> <div class="form-input-button input-color-dot input-color-dot-accent">
<input id="control-theme-accent-rgb-color" class="control-theme-accent-rgb-color" type="color" value="#000000" tabindex="1"> <input id="control-theme-accent-rgb-color-quick" class="control-theme-accent-rgb-color-quick" type="color" value="#000000" tabindex="1">
<label for="control-theme-accent-rgb-color">Accent</label> <label for="control-theme-accent-rgb-color-quick">Accent</label>
</div> </div>
</div> </div>
</div> </div>

View File

@ -260,9 +260,9 @@
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-color-rgb-range">Primary colour</label> <label for="control-theme-color-rgb-color">Primary colour</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<input id="control-theme-color-rgb-range" class="form-group-item-half control-theme-color-rgb-range" type="color" value="#000000" tabindex="1"> <input id="control-theme-color-rgb-color" class="form-group-item-half control-theme-color-rgb-color" type="color" value="#000000" tabindex="1">
<input id="control-theme-color-rgb-text" class="form-group-item-half control-theme-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> <input id="control-theme-color-rgb-text" class="form-group-item-half control-theme-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<button class="control-theme-color-rgb-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-theme-color-rgb-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div> </div>
@ -339,9 +339,9 @@
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-accent-rgb-range">Colour</label> <label for="control-theme-accent-rgb-color">Colour</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<input id="control-theme-accent-rgb-range" class="form-group-item-half control-theme-accent-rgb-range" type="color" value="#000000" tabindex="1"> <input id="control-theme-accent-rgb-color" class="form-group-item-half control-theme-accent-rgb-color" type="color" value="#000000" tabindex="1">
<input id="control-theme-accent-rgb-text" class="form-group-item-half control-theme-accent-rgb-text" 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-text" class="form-group-item-half control-theme-accent-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<button class="control-theme-accent-rgb-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-theme-accent-rgb-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div> </div>

File diff suppressed because it is too large Load Diff

View File

@ -133,15 +133,15 @@ var header = (function() {
box: function() { box: function() {
helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link"); 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.e(".control-add-toggle"), "button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "form-input-button-link"); helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "form-input-button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "form-input-button-link"); helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "form-input-button-link");
helper.removeClass(helper.e(".control-menu-open"), "button-link"); helper.removeClass(helper.e(".control-menu-open"), "button-link");
}, },
clear: function() { clear: function() {
helper.addClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link"); 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.e(".control-add-toggle"), "button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "form-input-button-link"); helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "form-input-button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "form-input-button-link"); helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "form-input-button-link");
helper.addClass(helper.e(".control-menu-open"), "button-link"); helper.addClass(helper.e(".control-menu-open"), "button-link");
} }
}; };
@ -149,19 +149,19 @@ var header = (function() {
}, },
dot: function() { dot: function() {
if (state.get.current().header.button.colorAccent.dot.show) { if (state.get.current().header.button.colorAccent.dot.show) {
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "input-color-dot"); helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "input-color-dot");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "input-color-dot-shade"); helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "input-color-dot-shade");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "form-input-hide"); helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "form-input-hide");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "input-color-dot"); helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "input-color-dot");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "input-color-dot-accent"); helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "input-color-dot-accent");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "form-input-hide"); helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "form-input-hide");
} else { } else {
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "input-color-dot"); helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "input-color-dot");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "input-color-dot-shade"); helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "input-color-dot-shade");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "form-input-hide"); helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color-quick"), ".form-input-button"), "form-input-hide");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "input-color-dot"); helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "input-color-dot");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "input-color-dot-accent"); helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "input-color-dot-accent");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "form-input-hide"); helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color-quick"), ".form-input-button"), "form-input-hide");
}; };
} }
}; };

View File

@ -37,8 +37,8 @@ var menu = (function() {
allMenuContentArea.forEach(function(arrayItem, index) { allMenuContentArea.forEach(function(arrayItem, index) {
helper.addClass(arrayItem, "is-hidden"); helper.addClass(arrayItem, "is-hidden");
}); });
helper.addClass(menuNavButton, "active"); helper.addClass(helper.e(menuNavButton), "active");
helper.removeClass(menuContentArea, "is-hidden"); helper.removeClass(helper.e(menuContentArea), "is-hidden");
}; };
render.tabindex = { render.tabindex = {

View File

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

View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_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.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "4.35.0", "version": "4.36.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"