Skip to content

Commit a6da3a4

Browse files
zombieFoxzombieFox
authored
[feature] add controls for header border width
1 parent 8694cb2 commit a6da3a4

File tree

8 files changed

+157
-43
lines changed

8 files changed

+157
-43
lines changed

‎css/base.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,14 @@
6767
--header-shade-color: transparent;
6868
--header-shade-opacity: none;
6969
--header-height:0;
70-
--header-shade-padding:4;
70+
--header-shade-padding-top:calc(var(--line-width) *var(--header-shade-padding-multiplier-top));
71+
--header-shade-padding-bottom:calc(var(--line-width) *var(--header-shade-padding-multiplier-bottom));
72+
--header-shade-padding-multiplier-top:4;
73+
--header-shade-padding-multiplier-bottom:4;
74+
--header-border-width-top:calc(var(--line-width) *var(--header-border-width-multiplier-top));
75+
--header-border-width-bottom:calc(var(--line-width) *var(--header-border-width-multiplier-bottom));
76+
--header-border-width-multiplier-top:1;
77+
--header-border-width-multiplier-bottom:1;
7178
--background-image: none;
7279
--background-opacity:1;
7380
--background-accent-opacity:0;

‎css/header.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.header{
2-
padding:calc(var(--gutter) *var(--header-shade-padding)) 0;
2+
padding-top:var(--header-shade-padding-top);
3+
padding-bottom:var(--header-shade-padding-bottom);
34
width:100%;
45
position: relative;
56
z-index:var(--z-index-header);
@@ -33,12 +34,12 @@
3334
opacity:var(--header-shade-opacity);
3435
}
3536

36-
.is-header-shade-border-top .header .header-border{
37-
border-top:var(--line-width) solid rgb(var(--accent));
37+
.is-header-shade-border-top-show .header .header-border{
38+
border-top:var(--header-border-width-top) solid rgb(var(--accent));
3839
}
3940

40-
.is-header-shade-border-bottom .header .header-border{
41-
border-bottom:var(--line-width) solid rgb(var(--accent));
41+
.is-header-shade-border-bottom-show .header .header-border{
42+
border-bottom:var(--header-border-width-bottom) solid rgb(var(--accent));
4243
}
4344

4445
.header-edge{

‎index.html‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -298,16 +298,28 @@ <h1 class="menu-header">Background Shade</h1>
298298
<inputid="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
299299
</div>
300300
<divclass="input-wrap form-indent-1">
301-
<labelfor="control-header-shade-padding">Top & bottom padding</label>
302-
<inputid="control-header-shade-padding" class="control-header-shade-padding" type="range" min="1" max="25" value="0" tabindex="1">
301+
<labelfor="control-header-shade-padding-top">Top padding</label>
302+
<inputid="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="1" max="50" value="0" tabindex="1">
303+
</div>
304+
<divclass="input-wrap form-indent-1">
305+
<labelfor="control-header-shade-padding-bottom">Bottom padding</label>
306+
<inputid="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom" type="range" min="1" max="50" value="0" tabindex="1">
303307
</div>
304308
<divclass="checkbox-wrap form-indent-1">
305-
<inputid="control-header-shade-border-top" class="control-header-shade-border-top" type="checkbox" value="always" tabindex="1">
306-
<labelfor="control-header-shade-border-top"><spanclass="label-icon"></span>Top border</label>
309+
<inputid="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
310+
<labelfor="control-header-shade-border-top-show"><spanclass="label-icon"></span>Top border</label>
311+
</div>
312+
<divclass="input-wrap form-indent-2">
313+
<labelfor="control-header-shade-border-top-width">Border width</label>
314+
<inputid="control-header-shade-border-top-width" class="control-header-shade-border-top-width" type="range" min="1" max="10" value="0" tabindex="1">
307315
</div>
308316
<divclass="checkbox-wrap form-indent-1">
309-
<inputid="control-header-shade-border-bottom" class="control-header-shade-border-bottom" type="checkbox" value="always" tabindex="1">
310-
<labelfor="control-header-shade-border-bottom"><spanclass="label-icon"></span>Bottom border</label>
317+
<inputid="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
318+
<labelfor="control-header-shade-border-bottom-show"><spanclass="label-icon"></span>Bottom border</label>
319+
</div>
320+
<divclass="input-wrap form-indent-2">
321+
<labelfor="control-header-shade-border-bottom-width">Border width</label>
322+
<inputid="control-header-shade-border-bottom-width" class="control-header-shade-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
311323
</div>
312324
</div>
313325
</div>

‎js/control.js‎

Lines changed: 87 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -319,8 +319,8 @@ var control = (function(){
319319
header.render();
320320
}
321321
},{
322-
element: helper.e(".control-header-shade-padding"),
323-
path: "header.shade.padding",
322+
element: helper.e(".control-header-shade-padding-top"),
323+
path: "header.shade.padding.top",
324324
type: "range",
325325
additionalEvents: [{
326326
event: "mousedown",
@@ -338,19 +338,54 @@ var control = (function(){
338338
header.render();
339339
}
340340
},{
341-
element: helper.e(".control-header-shade-border-top"),
342-
path: "header.shade.border.top",
341+
element: helper.e(".control-header-shade-padding-bottom"),
342+
path: "header.shade.padding.bottom",
343+
type: "range",
344+
additionalEvents: [{
345+
event: "mousedown",
346+
action: function(){
347+
header.edge("show");
348+
}
349+
},{
350+
event: "mouseup",
351+
action: function(){
352+
header.edge("hide");
353+
}
354+
}],
355+
func: function(){
356+
render();
357+
header.render();
358+
}
359+
},{
360+
element: helper.e(".control-header-shade-border-top-show"),
361+
path: "header.shade.border.top.show",
343362
type: "checkbox",
344363
func: function(){
345364
render();
365+
dependents();
346366
header.render();
347367
}
348368
},{
349-
element: helper.e(".control-header-shade-border-bottom"),
350-
path: "header.shade.border.bottom",
369+
element: helper.e(".control-header-shade-border-top-width"),
370+
path: "header.shade.border.top.width",
371+
type: "range",
372+
func: function(){
373+
header.render();
374+
}
375+
},{
376+
element: helper.e(".control-header-shade-border-bottom-show"),
377+
path: "header.shade.border.bottom.show",
351378
type: "checkbox",
352379
func: function(){
353380
render();
381+
dependents();
382+
header.render();
383+
}
384+
},{
385+
element: helper.e(".control-header-shade-border-bottom-width"),
386+
path: "header.shade.border.bottom.width",
387+
type: "range",
388+
func: function(){
354389
header.render();
355390
}
356391
},{
@@ -691,10 +726,10 @@ var control = (function(){
691726
path: object.path,
692727
newValue: newValue
693728
});
694-
console.log(object.path,helper.getObject({
695-
object: state.get(),
696-
path: object.path
697-
}));
729+
// console.log(object.path, helper.getObject({
730+
// object: state.get(),
731+
// path: object.path
732+
// }));
698733
};
699734
};
700735
varbindControl=function(object){
@@ -862,22 +897,22 @@ var control = (function(){
862897
if(state.get().header.shade.show){
863898
helper.addClass(html,"is-header-shade-show");
864899
helper.addClass(html,"is-header-shade-style-"+state.get().header.shade.style);
865-
if(state.get().header.shade.border.top){
866-
helper.addClass(html,"is-header-shade-border-top");
900+
if(state.get().header.shade.border.top.show){
901+
helper.addClass(html,"is-header-shade-border-top-show");
867902
}else{
868-
helper.removeClass(html,"is-header-shade-border-top");
903+
helper.removeClass(html,"is-header-shade-border-top-show");
869904
};
870-
if(state.get().header.shade.border.bottom){
871-
helper.addClass(html,"is-header-shade-border-bottom");
905+
if(state.get().header.shade.border.bottom.show){
906+
helper.addClass(html,"is-header-shade-border-bottom-show");
872907
}else{
873-
helper.removeClass(html,"is-header-shade-border-bottom");
908+
helper.removeClass(html,"is-header-shade-border-bottom-show");
874909
};
875910
}else{
876911
helper.removeClass(html,"is-header-shade-show");
877912
helper.removeClass(html,"is-header-shade-style-always");
878913
helper.removeClass(html,"is-header-shade-style-scroll");
879-
helper.removeClass(html,"is-header-shade-border-top");
880-
helper.removeClass(html,"is-header-shade-border-bottom");
914+
helper.removeClass(html,"is-header-shade-border-top-show");
915+
helper.removeClass(html,"is-header-shade-border-bottom-show");
881916
};
882917
};
883918
_menu();
@@ -1071,19 +1106,45 @@ var control = (function(){
10711106
helper.e(".control-header-shade-style-scroll").disabled=false;
10721107
helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled");
10731108
helper.e(".control-header-shade-opacity").disabled=false;
1074-
helper.e("[for=control-header-shade-padding]").removeAttribute("disabled");
1075-
helper.e(".control-header-shade-padding").disabled=false;
1076-
helper.e(".control-header-shade-border-top").disabled=false;
1077-
helper.e(".control-header-shade-border-bottom").disabled=false;
1109+
helper.e("[for=control-header-shade-padding-top]").removeAttribute("disabled");
1110+
helper.e(".control-header-shade-padding-top").disabled=false;
1111+
helper.e("[for=control-header-shade-padding-bottom]").removeAttribute("disabled");
1112+
helper.e(".control-header-shade-padding-bottom").disabled=false;
1113+
helper.e(".control-header-shade-border-top-show").disabled=false;
1114+
helper.e(".control-header-shade-border-bottom-show").disabled=false;
1115+
helper.e("[for=control-header-shade-border-top-width]").removeAttribute("disabled");
1116+
helper.e(".control-header-shade-border-top-width").disabled=false;
1117+
helper.e("[for=control-header-shade-border-bottom-width]").removeAttribute("disabled");
1118+
helper.e(".control-header-shade-border-bottom-width").disabled=false;
10781119
}else{
10791120
helper.e(".control-header-shade-style-always").disabled=true;
10801121
helper.e(".control-header-shade-style-scroll").disabled=true;
10811122
helper.e("[for=control-header-shade-opacity]").setAttribute("disabled","");
10821123
helper.e(".control-header-shade-opacity").disabled=true;
1083-
helper.e("[for=control-header-shade-padding]").setAttribute("disabled","");
1084-
helper.e(".control-header-shade-padding").disabled=true;
1085-
helper.e(".control-header-shade-border-top").disabled=true;
1086-
helper.e(".control-header-shade-border-bottom").disabled=true;
1124+
helper.e("[for=control-header-shade-padding-top]").setAttribute("disabled","");
1125+
helper.e(".control-header-shade-padding-top").disabled=true;
1126+
helper.e("[for=control-header-shade-padding-bottom]").setAttribute("disabled","");
1127+
helper.e(".control-header-shade-padding-bottom").disabled=true;
1128+
helper.e(".control-header-shade-border-top-show").disabled=true;
1129+
helper.e(".control-header-shade-border-bottom-show").disabled=true;
1130+
helper.e("[for=control-header-shade-border-top-width]").setAttribute("disabled","");
1131+
helper.e(".control-header-shade-border-top-width").disabled=true;
1132+
helper.e("[for=control-header-shade-border-bottom-width]").setAttribute("disabled","");
1133+
helper.e(".control-header-shade-border-bottom-width").disabled=true;
1134+
};
1135+
if(state.get().header.shade.show&&state.get().header.shade.border.top.show){
1136+
helper.e("[for=control-header-shade-border-top-width]").removeAttribute("disabled");
1137+
helper.e(".control-header-shade-border-top-width").disabled=false;
1138+
}else{
1139+
helper.e("[for=control-header-shade-border-top-width]").setAttribute("disabled","");
1140+
helper.e(".control-header-shade-border-top-width").disabled=true;
1141+
};
1142+
if(state.get().header.shade.show&&state.get().header.shade.border.bottom.show){
1143+
helper.e("[for=control-header-shade-border-bottom-width]").removeAttribute("disabled");
1144+
helper.e(".control-header-shade-border-bottom-width").disabled=false;
1145+
}else{
1146+
helper.e("[for=control-header-shade-border-bottom-width]").setAttribute("disabled","");
1147+
helper.e(".control-header-shade-border-bottom-width").disabled=true;
10871148
};
10881149
};
10891150
_edit();

‎js/header.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,17 @@ var header = (function(){
7373
};
7474
};
7575
var_padding=function(){
76-
html.style.setProperty("--header-shade-padding",state.get().header.shade.padding);
76+
html.style.setProperty("--header-shade-padding-multiplier-top",state.get().header.shade.padding.top);
77+
html.style.setProperty("--header-shade-padding-multiplier-bottom",state.get().header.shade.padding.bottom);
78+
};
79+
var_border=function(){
80+
html.style.setProperty("--header-border-width-multiplier-top",state.get().header.shade.border.top.width);
81+
html.style.setProperty("--header-border-width-multiplier-bottom",state.get().header.shade.border.bottom.width);
7782
};
7883
_color();
7984
_opacity();
8085
_padding();
86+
_border();
8187
_margin();
8288
};
8389

‎js/state.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,21 @@ var state = (function(){
5656
},
5757
shade: {
5858
show: true,
59-
padding: 4,
59+
padding: {
60+
top: 4,
61+
bottom: 4
62+
},
6063
style: "scroll",
6164
opacity: 0.95,
6265
border: {
63-
top: false,
64-
bottom: false
66+
top: {
67+
show: false,
68+
width: 1
69+
},
70+
bottom: {
71+
show: false,
72+
width: 1
73+
}
6574
}
6675
},
6776
greeting: {

‎js/update.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,24 @@ var update = (function(){
236236
data.state.layout.width=72;
237237
data.version="2.14.0";
238238
};
239+
if(version.compare(data.version,"2.16.0")==-1){
240+
console.log("\t -- running update","2.16.0");
241+
data.state.header.shade.padding={
242+
top: data.state.header.shade.padding,
243+
bottom: data.state.header.shade.padding
244+
};
245+
data.state.header.shade.border={
246+
top: {
247+
show: data.state.header.shade.border.top,
248+
width: 1
249+
},
250+
bottom: {
251+
show: data.state.header.shade.border.bottom,
252+
width: 1
253+
}
254+
};
255+
data.version="2.16.0";
256+
};
239257
};
240258
// if no update is needed
241259
// version bump

‎js/version.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
varversion=(function(){
22

33
// version is normally bumped when the state needs changing or any new functionality is added
4-
varcurrent="2.15.0";
4+
varcurrent="2.16.0";
55

66
varcompare=function(a,b){
77
varpa=a.split(".");

0 commit comments

Comments
(0)