From 13b4fd594dcd523a12825e8587bdf49c12b96f08 Mon Sep 17 00:00:00 2001 From: zombieFox Date: Mon, 23 Dec 2019 00:33:25 +0000 Subject: [PATCH] [feature] add theme colour quick control --- src/css/header.css | 2 +- src/index.html | 19 +++++++++++++------ src/js/control.js | 24 +++++++++++++++++++----- src/js/header.js | 2 ++ src/js/state.js | 2 +- src/js/theme.js | 15 +++++++++------ src/js/update.js | 5 +++++ 7 files changed, 50 insertions(+), 19 deletions(-) diff --git a/src/css/header.css b/src/css/header.css index 3dba4160..8ae9475d 100755 --- a/src/css/header.css +++ b/src/css/header.css @@ -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 { diff --git a/src/index.html b/src/index.html index 7c9c7ad4..a76f870c 100644 --- a/src/index.html +++ b/src/index.html @@ -111,9 +111,15 @@
-
- - +
+
+ + +
+
+ + +
@@ -774,9 +780,10 @@
- - + +
+

Colour and Accent can also be found under Theme.

@@ -1297,7 +1304,7 @@
- +
diff --git a/src/js/control.js b/src/js/control.js index 5b3333bd..2aeb03f7 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -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() { diff --git a/src/js/header.js b/src/js/header.js index 5bb85af6..9e77ac7f 100644 --- a/src/js/header.js +++ b/src/js/header.js @@ -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"); } diff --git a/src/js/state.js b/src/js/state.js index 90e2f63a..eb5f932f 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -104,7 +104,7 @@ var state = (function() { editAdd: { show: true }, - accent: { + colorAccent: { show: true }, style: "box", diff --git a/src/js/theme.js b/src/js/theme.js index c02ed83a..bcdcd69a 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -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); }, diff --git a/src/js/update.js b/src/js/update.js index 12824e92..5f2e5322 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -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; } };