extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-09 15:38:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add theme colour quick control

Browse Source
This commit is contained in:
zombieFox 2019-12-23 00:33:25 +00:00
parent 43fcff12fc
commit 13b4fd594d
7 changed files with 50 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/header.css
View File

@ -201,7 +201,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-accent-show .header-accent, .is-header-button-coloraccent-show .header-accent,
.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 {

19
src/index.html
View File

@ -111,9 +111,15 @@
</div> </div>
<div class="header-item header-button header-accent"> <div class="header-item header-button header-accent">
<div class="header-button-body"> <div class="header-button-body">
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0"> <div class="form-group nested-button mb-0">
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" value="#000000" tabindex="1"> <div class="input-wrap input-button input-color-dot input-color-dot-theme py-0">
<label for="control-theme-accent-current-quick">Accent</label> <input id="control-theme-color-rgb-quick" class="control-theme-color-rgb-quick mb0" type="color" value="#000000" tabindex="1">
<label for="control-theme-color-rgb-quick">Colour</label>
</div>
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick mb0" type="color" value="#000000" tabindex="1">
<label for="control-theme-accent-current-quick">Accent</label>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -774,9 +780,10 @@
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-button-accent-show" class="control-header-button-accent-show" type="checkbox" tabindex="-1"> <input id="control-header-button-coloraccent-show" class="control-header-button-coloraccent-show" type="checkbox" tabindex="-1">
<label for="control-header-button-accent-show"><span class="label-icon"></span> Show Accent</label> <label for="control-header-button-coloraccent-show"><span class="label-icon"></span> Show Colour/Accent</label>
</div> </div>
<p class="control-header-button-coloraccent-show-helper form-helper small">Colour and Accent can also be found under Theme.</p>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<label for="control-header-button-size">Size</label> <label for="control-header-button-size">Size</label>
@ -1297,7 +1304,7 @@
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="input-wrap"> <div class="input-wrap">
<label for="control-theme-color-rgb-picker">Shade colour</label> <label for="control-theme-color-rgb-picker">Primary colour</label>
<div class="form-group form-group-block mb-0"> <div class="form-group form-group-block mb-0">
<input id="control-theme-color-rgb-picker" class="form-group-item-half control-theme-color-rgb-picker mb-0" type="color" value="#000000" tabindex="1"> <input id="control-theme-color-rgb-picker" class="form-group-item-half control-theme-color-rgb-picker mb-0" type="color" value="#000000" tabindex="1">
<input id="control-theme-color-rgb-hex" class="form-group-item-half control-theme-color-rgb-hex mb-0" 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-hex" class="form-group-item-half control-theme-color-rgb-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">

24
src/js/control.js
View File

@ -1656,8 +1656,8 @@ var control = (function() {
render.dependents(); render.dependents();
} }
}, { }, {
element: helper.e(".control-header-button-accent-show"), element: helper.e(".control-header-button-coloraccent-show"),
path: "header.button.accent.show", path: "header.button.colorAccent.show",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
render.class(); render.class();
@ -2547,6 +2547,18 @@ var control = (function() {
theme.render.radius(); theme.render.radius();
render.update(); render.update();
} }
}, {
element: helper.e(".control-theme-color-rgb-quick"),
path: "theme.color.rgb",
type: "color",
func: function() {
theme.mod.color.hsl();
theme.render.color.shade();
theme.render.color.range.hsl();
theme.render.color.range.rgb();
theme.render.color.input.hex();
theme.render.color.input.picker();
}
}, { }, {
element: helper.e(".control-theme-color-rgb-picker"), element: helper.e(".control-theme-color-rgb-picker"),
path: "theme.color.rgb", path: "theme.color.rgb",
@ -2557,6 +2569,7 @@ var control = (function() {
theme.render.color.range.hsl(); theme.render.color.range.hsl();
theme.render.color.range.rgb(); theme.render.color.range.rgb();
theme.render.color.input.hex(); theme.render.color.input.hex();
theme.render.color.input.quick();
} }
}, { }, {
element: helper.e(".control-theme-color-rgb-hex"), element: helper.e(".control-theme-color-rgb-hex"),
@ -2569,6 +2582,7 @@ var control = (function() {
theme.render.color.range.hsl(); theme.render.color.range.hsl();
theme.render.color.range.rgb(); theme.render.color.range.rgb();
theme.render.color.input.picker(); theme.render.color.input.picker();
theme.render.color.input.quick();
} }
}, { }, {
element: helper.e(".control-theme-color-rgb-default"), element: helper.e(".control-theme-color-rgb-default"),
@ -3034,10 +3048,10 @@ var control = (function() {
} else { } else {
helper.removeClass(html, "is-header-button-editadd-show"); helper.removeClass(html, "is-header-button-editadd-show");
}; };
if (state.get.current().header.button.accent.show) { if (state.get.current().header.button.colorAccent.show) {
helper.addClass(html, "is-header-button-accent-show"); helper.addClass(html, "is-header-button-coloraccent-show");
} else { } else {
helper.removeClass(html, "is-header-button-accent-show"); helper.removeClass(html, "is-header-button-coloraccent-show");
}; };
}; };
var _greeting = function() { var _greeting = function() {

2
src/js/header.js
View File

@ -136,12 +136,14 @@ var header = (function() {
box: function() { box: function() {
helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".input-wrap"), "input-button-link"); helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".input-wrap"), "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-quick"), ".input-wrap"), "input-button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".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-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"), ".input-wrap"), "input-button-link"); helper.addClass(helper.getClosest(helper.e(".control-edit"), ".input-wrap"), "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-quick"), ".input-wrap"), "input-button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".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-menu-open"), "button-link"); helper.addClass(helper.e(".control-menu-open"), "button-link");
} }

2
src/js/state.js
View File

@ -104,7 +104,7 @@ var state = (function() {
editAdd: { editAdd: {
show: true show: true
}, },
accent: { colorAccent: {
show: true show: true
}, },
style: "box", style: "box",

15
src/js/theme.js
View File

@ -129,8 +129,8 @@ var theme = (function() {
shade: function() { shade: function() {
var shadeSteps = 10; var shadeSteps = 10;
var sMod = 0; var saturationShift = 0;
var lMod = 4; var lightShift = 4;
var html = helper.e("html"); var html = helper.e("html");
var hsl = helper.convertColor.rgb.hsl([state.get.current().theme.color.rgb.r, state.get.current().theme.color.rgb.g, state.get.current().theme.color.rgb.b]); var hsl = helper.convertColor.rgb.hsl([state.get.current().theme.color.rgb.r, state.get.current().theme.color.rgb.g, state.get.current().theme.color.rgb.b]);
@ -140,8 +140,8 @@ var theme = (function() {
for (var i = 1; i <= shadeSteps; i++) { for (var i = 1; i <= shadeSteps; i++) {
var h = hsl[0]; var h = hsl[0];
var s = (hsl[1] - (sMod * i)); var s = (hsl[1] - (saturationShift * i));
var l = (hsl[2] - (lMod * i)); var l = (hsl[2] - (lightShift * i));
var rgb = helper.convertColor.hsl.rgb([h, s, l]); var rgb = helper.convertColor.hsl.rgb([h, s, l]);
var number; var number;
if (i < 10) { if (i < 10) {
@ -154,8 +154,8 @@ var theme = (function() {
for (var i = 1; i <= shadeSteps; i++) { for (var i = 1; i <= shadeSteps; i++) {
var h = hsl[0]; var h = hsl[0];
var s = (hsl[1] + (sMod * i)); var s = (hsl[1] + (saturationShift * i));
var l = (hsl[2] + (lMod * i)); var l = (hsl[2] + (lightShift * i));
var rgb = helper.convertColor.hsl.rgb([h, s, l]); var rgb = helper.convertColor.hsl.rgb([h, s, l]);
var number; var number;
if (i < 10) { if (i < 10) {
@ -168,6 +168,9 @@ var theme = (function() {
}, },
input: { input: {
quick: function() {
helper.e(".control-theme-color-rgb-quick").value = helper.rgbToHex(state.get.current().theme.color.rgb);
},
picker: function() { picker: function() {
helper.e(".control-theme-color-rgb-picker").value = helper.rgbToHex(state.get.current().theme.color.rgb); helper.e(".control-theme-color-rgb-picker").value = helper.rgbToHex(state.get.current().theme.color.rgb);
}, },

5
src/js/update.js
View File

@ -706,6 +706,11 @@ var update = (function() {
} }
}; };
return data; return data;
},
"4.4.0": function(data) {
data.state.header.button.colorAccent = data.state.header.button.accent;
delete data.state.header.button.accent;
return data;
} }
}; };