extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-09 07:28:21 +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-clock-show .header-clock,
.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-transitional-show .header-transitional,
.is-menu .header-menu {

19
src/index.html
View File

@ -111,9 +111,15 @@
</div>
<div class="header-item header-button header-accent">
<div class="header-button-body">
<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" type="color" value="#000000" tabindex="1">
<label for="control-theme-accent-current-quick">Accent</label>
<div class="form-group nested-button mb-0">
<div class="input-wrap input-button input-color-dot input-color-dot-theme py-0">
<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>
@ -774,9 +780,10 @@
</div>
<hr>
<div class="input-wrap">
<input id="control-header-button-accent-show" class="control-header-button-accent-show" type="checkbox" tabindex="-1">
<label for="control-header-button-accent-show"><span class="label-icon"></span> Show Accent</label>
<input id="control-header-button-coloraccent-show" class="control-header-button-coloraccent-show" type="checkbox" tabindex="-1">
<label for="control-header-button-coloraccent-show"><span class="label-icon"></span> Show Colour/Accent</label>
</div>
<p class="control-header-button-coloraccent-show-helper form-helper small">Colour and Accent can also be found under Theme.</p>
<hr>
<div class="input-wrap">
<label for="control-header-button-size">Size</label>
@ -1297,7 +1304,7 @@
</div>
<div class="menu-item-form">
<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">
<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">

24
src/js/control.js
View File

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

2
src/js/header.js
View File

@ -136,12 +136,14 @@ var header = (function() {
box: function() {
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.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.e(".control-menu-open"), "button-link");
},
clear: function() {
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.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.e(".control-menu-open"), "button-link");
}

2
src/js/state.js
View File

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

15
src/js/theme.js
View File

@ -129,8 +129,8 @@ var theme = (function() {
shade: function() {
var shadeSteps = 10;
var sMod = 0;
var lMod = 4;
var saturationShift = 0;
var lightShift = 4;
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]);
@ -140,8 +140,8 @@ var theme = (function() {
for (var i = 1; i <= shadeSteps; i++) {
var h = hsl[0];
var s = (hsl[1] - (sMod * i));
var l = (hsl[2] - (lMod * i));
var s = (hsl[1] - (saturationShift * i));
var l = (hsl[2] - (lightShift * i));
var rgb = helper.convertColor.hsl.rgb([h, s, l]);
var number;
if (i < 10) {
@ -154,8 +154,8 @@ var theme = (function() {
for (var i = 1; i <= shadeSteps; i++) {
var h = hsl[0];
var s = (hsl[1] + (sMod * i));
var l = (hsl[2] + (lMod * i));
var s = (hsl[1] + (saturationShift * i));
var l = (hsl[2] + (lightShift * i));
var rgb = helper.convertColor.hsl.rgb([h, s, l]);
var number;
if (i < 10) {
@ -168,6 +168,9 @@ var theme = (function() {
},
input: {
quick: function() {
helper.e(".control-theme-color-rgb-quick").value = helper.rgbToHex(state.get.current().theme.color.rgb);
},
picker: function() {
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;
},
"4.4.0": function(data) {
data.state.header.button.colorAccent = data.state.header.button.accent;
delete data.state.header.button.accent;
return data;
}
};