Skip to content

Commit 13b4fd5

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

File tree

7 files changed

+50
-19
lines changed

7 files changed

+50
-19
lines changed

‎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
<divclass="header-item header-button header-accent">
113113
<divclass="header-button-body">
114-
<divclass="input-wrap input-button input-color-dot input-color-dot-accent py-0">
115-
<inputid="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" value="#000000" tabindex="1">
116-
<labelfor="control-theme-accent-current-quick">Accent</label>
114+
<divclass="form-group nested-button mb-0">
115+
<divclass="input-wrap input-button input-color-dot input-color-dot-theme py-0">
116+
<inputid="control-theme-color-rgb-quick" class="control-theme-color-rgb-quick mb0" type="color" value="#000000" tabindex="1">
117+
<labelfor="control-theme-color-rgb-quick">Colour</label>
118+
</div>
119+
<divclass="input-wrap input-button input-color-dot input-color-dot-accent py-0">
120+
<inputid="control-theme-accent-current-quick" class="control-theme-accent-current-quick mb0" type="color" value="#000000" tabindex="1">
121+
<labelfor="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
<divclass="input-wrap">
777-
<inputid="control-header-button-accent-show" class="control-header-button-accent-show" type="checkbox" tabindex="-1">
778-
<labelfor="control-header-button-accent-show"><spanclass="label-icon"></span> Show Accent</label>
783+
<inputid="control-header-button-coloraccent-show" class="control-header-button-coloraccent-show" type="checkbox" tabindex="-1">
784+
<labelfor="control-header-button-coloraccent-show"><spanclass="label-icon"></span> Show Colour/Accent</label>
779785
</div>
786+
<pclass="control-header-button-coloraccent-show-helper form-helper small">Colour and Accent can also be found under Theme.</p>
780787
<hr>
781788
<divclass="input-wrap">
782789
<labelfor="control-header-button-size">Size</label>
@@ -1297,7 +1304,7 @@ <h1 class="menu-item-header-text">Color</h1>
12971304
</div>
12981305
<divclass="menu-item-form">
12991306
<divclass="input-wrap">
1300-
<labelfor="control-theme-color-rgb-picker">Shade colour</label>
1307+
<labelfor="control-theme-color-rgb-picker">Primary colour</label>
13011308
<divclass="form-group form-group-block mb-0">
13021309
<inputid="control-theme-color-rgb-picker" class="form-group-item-half control-theme-color-rgb-picker mb-0" type="color" value="#000000" tabindex="1">
13031310
<inputid="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
varshadeSteps=10;
132-
varsMod=0;
133-
varlMod=4;
132+
varsaturationShift=0;
133+
varlightShift=4;
134134
varhtml=helper.e("html");
135135

136136
varhsl=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(vari=1;i<=shadeSteps;i++){
142142
varh=hsl[0];
143-
vars=(hsl[1]-(sMod*i));
144-
varl=(hsl[2]-(lMod*i));
143+
vars=(hsl[1]-(saturationShift*i));
144+
varl=(hsl[2]-(lightShift*i));
145145
varrgb=helper.convertColor.hsl.rgb([h,s,l]);
146146
varnumber;
147147
if(i<10){
@@ -154,8 +154,8 @@ var theme = (function(){
154154

155155
for(vari=1;i<=shadeSteps;i++){
156156
varh=hsl[0];
157-
vars=(hsl[1]+(sMod*i));
158-
varl=(hsl[2]+(lMod*i));
157+
vars=(hsl[1]+(saturationShift*i));
158+
varl=(hsl[2]+(lightShift*i));
159159
varrgb=helper.convertColor.hsl.rgb([h,s,l]);
160160
varnumber;
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
returndata;
709+
},
710+
"4.4.0": function(data){
711+
data.state.header.button.colorAccent=data.state.header.button.accent;
712+
deletedata.state.header.button.accent;
713+
returndata;
709714
}
710715
};
711716

0 commit comments

Comments
(0)