Skip to content

Commit 13b4fd5

Browse files
zombieFoxzombieFox
committed
[feature] add theme colour quick control
1 parent 43fcff1 commit 13b4fd5

7 files changed

Lines changed: 50 additions & 19 deletions

File tree

‎src/css/header.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@
201201
.is-header-date-show .header-date,
202202
.is-header-clock-show .header-clock,
203203
.is-header-button-editadd-show .header-edit-add,
204-
.is-header-button-accent-show .header-accent,
204+
.is-header-button-coloraccent-show .header-accent,
205205
.is-header-greeting-show .header-greeting,
206206
.is-header-transitional-show .header-transitional,
207207
.is-menu .header-menu {

‎src/index.html‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,15 @@
111111
</div>
112112
<div class="header-item header-button header-accent">
113113
<div class="header-button-body">
114-
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
115-
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" value="#000000" tabindex="1">
116-
<label for="control-theme-accent-current-quick">Accent</label>
114+
<div class="form-group nested-button mb-0">
115+
<div class="input-wrap input-button input-color-dot input-color-dot-theme py-0">
116+
<input id="control-theme-color-rgb-quick" class="control-theme-color-rgb-quick mb0" type="color" value="#000000" tabindex="1">
117+
<label for="control-theme-color-rgb-quick">Colour</label>
118+
</div>
119+
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
120+
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick mb0" type="color" value="#000000" tabindex="1">
121+
<label for="control-theme-accent-current-quick">Accent</label>
122+
</div>
117123
</div>
118124
</div>
119125
</div>
@@ -774,9 +780,10 @@ <h1 class="menu-item-header-text">Buttons</h1>
774780
</div>
775781
<hr>
776782
<div class="input-wrap">
777-
<input id="control-header-button-accent-show" class="control-header-button-accent-show" type="checkbox" tabindex="-1">
778-
<label for="control-header-button-accent-show"><span class="label-icon"></span> Show Accent</label>
783+
<input id="control-header-button-coloraccent-show" class="control-header-button-coloraccent-show" type="checkbox" tabindex="-1">
784+
<label for="control-header-button-coloraccent-show"><span class="label-icon"></span> Show Colour/Accent</label>
779785
</div>
786+
<p class="control-header-button-coloraccent-show-helper form-helper small">Colour and Accent can also be found under Theme.</p>
780787
<hr>
781788
<div class="input-wrap">
782789
<label for="control-header-button-size">Size</label>
@@ -1297,7 +1304,7 @@ <h1 class="menu-item-header-text">Color</h1>
12971304
</div>
12981305
<div class="menu-item-form">
12991306
<div class="input-wrap">
1300-
<label for="control-theme-color-rgb-picker">Shade colour</label>
1307+
<label for="control-theme-color-rgb-picker">Primary colour</label>
13011308
<div class="form-group form-group-block mb-0">
13021309
<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">
13031310
<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">

‎src/js/control.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1656,8 +1656,8 @@ var control = (function() {
16561656
render.dependents();
16571657
}
16581658
}, {
1659-
element: helper.e(".control-header-button-accent-show"),
1660-
path: "header.button.accent.show",
1659+
element: helper.e(".control-header-button-coloraccent-show"),
1660+
path: "header.button.colorAccent.show",
16611661
type: "checkbox",
16621662
func: function() {
16631663
render.class();
@@ -2547,6 +2547,18 @@ var control = (function() {
25472547
theme.render.radius();
25482548
render.update();
25492549
}
2550+
}, {
2551+
element: helper.e(".control-theme-color-rgb-quick"),
2552+
path: "theme.color.rgb",
2553+
type: "color",
2554+
func: function() {
2555+
theme.mod.color.hsl();
2556+
theme.render.color.shade();
2557+
theme.render.color.range.hsl();
2558+
theme.render.color.range.rgb();
2559+
theme.render.color.input.hex();
2560+
theme.render.color.input.picker();
2561+
}
25502562
}, {
25512563
element: helper.e(".control-theme-color-rgb-picker"),
25522564
path: "theme.color.rgb",
@@ -2557,6 +2569,7 @@ var control = (function() {
25572569
theme.render.color.range.hsl();
25582570
theme.render.color.range.rgb();
25592571
theme.render.color.input.hex();
2572+
theme.render.color.input.quick();
25602573
}
25612574
}, {
25622575
element: helper.e(".control-theme-color-rgb-hex"),
@@ -2569,6 +2582,7 @@ var control = (function() {
25692582
theme.render.color.range.hsl();
25702583
theme.render.color.range.rgb();
25712584
theme.render.color.input.picker();
2585+
theme.render.color.input.quick();
25722586
}
25732587
}, {
25742588
element: helper.e(".control-theme-color-rgb-default"),
@@ -3034,10 +3048,10 @@ var control = (function() {
30343048
} else {
30353049
helper.removeClass(html, "is-header-button-editadd-show");
30363050
};
3037-
if (state.get.current().header.button.accent.show) {
3038-
helper.addClass(html, "is-header-button-accent-show");
3051+
if (state.get.current().header.button.colorAccent.show) {
3052+
helper.addClass(html, "is-header-button-coloraccent-show");
30393053
} else {
3040-
helper.removeClass(html, "is-header-button-accent-show");
3054+
helper.removeClass(html, "is-header-button-coloraccent-show");
30413055
};
30423056
};
30433057
var _greeting = function() {

‎src/js/header.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,14 @@ var header = (function() {
136136
box: function() {
137137
helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".input-wrap"), "input-button-link");
138138
helper.removeClass(helper.e(".control-add-toggle"), "button-link");
139+
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-button-link");
139140
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-button-link");
140141
helper.removeClass(helper.e(".control-menu-open"), "button-link");
141142
},
142143
clear: function() {
143144
helper.addClass(helper.getClosest(helper.e(".control-edit"), ".input-wrap"), "input-button-link");
144145
helper.addClass(helper.e(".control-add-toggle"), "button-link");
146+
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-button-link");
145147
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-button-link");
146148
helper.addClass(helper.e(".control-menu-open"), "button-link");
147149
}

‎src/js/state.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ var state = (function() {
104104
editAdd: {
105105
show: true
106106
},
107-
accent: {
107+
colorAccent: {
108108
show: true
109109
},
110110
style: "box",

‎src/js/theme.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,8 @@ var theme = (function() {
129129
shade: function() {
130130

131131
var shadeSteps = 10;
132-
var sMod = 0;
133-
var lMod = 4;
132+
var saturationShift = 0;
133+
var lightShift = 4;
134134
var html = helper.e("html");
135135

136136
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() {
140140

141141
for (var i = 1; i <= shadeSteps; i++) {
142142
var h = hsl[0];
143-
var s = (hsl[1] - (sMod * i));
144-
var l = (hsl[2] - (lMod * i));
143+
var s = (hsl[1] - (saturationShift * i));
144+
var l = (hsl[2] - (lightShift * i));
145145
var rgb = helper.convertColor.hsl.rgb([h, s, l]);
146146
var number;
147147
if (i < 10) {
@@ -154,8 +154,8 @@ var theme = (function() {
154154

155155
for (var i = 1; i <= shadeSteps; i++) {
156156
var h = hsl[0];
157-
var s = (hsl[1] + (sMod * i));
158-
var l = (hsl[2] + (lMod * i));
157+
var s = (hsl[1] + (saturationShift * i));
158+
var l = (hsl[2] + (lightShift * i));
159159
var rgb = helper.convertColor.hsl.rgb([h, s, l]);
160160
var number;
161161
if (i < 10) {
@@ -168,6 +168,9 @@ var theme = (function() {
168168

169169
},
170170
input: {
171+
quick: function() {
172+
helper.e(".control-theme-color-rgb-quick").value = helper.rgbToHex(state.get.current().theme.color.rgb);
173+
},
171174
picker: function() {
172175
helper.e(".control-theme-color-rgb-picker").value = helper.rgbToHex(state.get.current().theme.color.rgb);
173176
},

‎src/js/update.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -706,6 +706,11 @@ var update = (function() {
706706
}
707707
};
708708
return data;
709+
},
710+
"4.4.0": function(data) {
711+
data.state.header.button.colorAccent = data.state.header.button.accent;
712+
delete data.state.header.button.accent;
713+
return data;
709714
}
710715
};
711716

0 commit comments

Comments
 (0)