Skip to content

Commit f9c76ac

Browse files
zombieFoxzombieFox
committed
[feature] add controls for header button style
1 parent b514eca commit f9c76ac

File tree

8 files changed

+107
-4
lines changed

8 files changed

+107
-4
lines changed

‎css/base.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@
2626
--button-text-hover-focus:var(--style-neutral-text);
2727
--button-text-active:var(--style-neutral-text);
2828
--button-text-disabled:var(--gray-04);
29-
--button-link-text:var(--gray-10);
30-
--button-link-text-hover-focus:var(--gray-14);
31-
--button-link-text-active:var(--gray-18);
29+
--button-link-text:var(--gray-12);
30+
--button-link-text-hover-focus:var(--style-neutral-text);
31+
--button-link-text-active:var(--style-neutral-text);
3232
--button-link-text-disabled:var(--gray-04);
3333
--form-input-text:var(--gray-16);
3434
--form-input-border:2;

‎css/form.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -640,6 +640,52 @@ input[type="range"][disabled]~.input-helper{
640640
cursor: default;
641641
}
642642

643+
.input-button-linkinput[type="checkbox"]+label,
644+
.input-button-linkinput[type="radio"]+label,
645+
.input-button-linkinput[type="color"]+label{
646+
background-color: transparent;
647+
border:0;
648+
color:rgb(var(--button-link-text));
649+
}
650+
651+
.input-button-linkinput[type="checkbox"]:hover+label,
652+
.input-button-linkinput[type="checkbox"]:focus+label,
653+
.input-button-linkinput[type="checkbox"]:checked+label,
654+
.input-button-linkinput[type="radio"]:hover+label,
655+
.input-button-linkinput[type="radio"]:focus+label,
656+
.input-button-linkinput[type="radio"]:checked+label,
657+
.input-button-linkinput[type="color"]:hover+label,
658+
.input-button-linkinput[type="color"]:focus+label,
659+
.input-button-linkinput[type="color"]:checked+label{
660+
background-color: transparent;
661+
color:rgb(var(--button-link-text-hover-focus));
662+
}
663+
664+
.input-button-linkinput[type="checkbox"]:active+label,
665+
.input-button-linkinput[type="radio"]:active+label,
666+
.input-button-linkinput[type="color"]:active+label{
667+
background-color: transparent;
668+
color:rgb(var(--button-link-text-active));
669+
}
670+
671+
.input-button-linkinput[disabled][type="checkbox"]+label,
672+
.input-button-linkinput[disabled][type="radio"]+label,
673+
.input-button-linkinput[disabled][type="color"]+label{
674+
background-color: transparent;
675+
color: transparent;
676+
pointer-events: none;
677+
}
678+
679+
.input-button-linkinput[disabled][type="checkbox"]:hover+label,
680+
.input-button-linkinput[disabled][type="checkbox"]:focus+label,
681+
.input-button-linkinput[disabled][type="radio"]:hover+label,
682+
.input-button-linkinput[disabled][type="radio"]:focus+label,
683+
.input-button-linkinput[disabled][type="color"]:hover+label,
684+
.input-button-linkinput[disabled][type="color"]:focus+label{
685+
background-color: transparent;
686+
color: transparent;
687+
}
688+
643689
.input-color-dotinput[type="color"]{
644690
margin:0;
645691
position: absolute;

‎index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -625,6 +625,16 @@ <h1 class="menu-item-header-text">Search</h1>
625625
<h1class="menu-item-header-text">Buttons</h1>
626626
</div>
627627
<divclass="menu-item-form">
628+
<labelclass="control-header-button-style-label">Button style</label>
629+
<divclass="input-wrap">
630+
<inputid="control-header-button-style-box" class="control-header-button-style-box" type="radio" name="control-header-button-style" value="box" tabindex="1">
631+
<labelfor="control-header-button-style-box">Box</label>
632+
</div>
633+
<divclass="input-wrap">
634+
<inputid="control-header-button-style-clear" class="control-header-button-style-clear" type="radio" name="control-header-button-style" value="clear" tabindex="1">
635+
<labelfor="control-header-button-style-clear">Clear</label>
636+
</div>
637+
<hr>
628638
<divclass="input-wrap">
629639
<inputid="control-header-button-edit-add-show" class="control-header-button-edit-add-show" type="checkbox" tabindex="1">
630640
<labelfor="control-header-button-edit-add-show">Show Edit/Add</label>

‎js/control.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1412,6 +1412,20 @@ var control = (function(){
14121412
header.render.search.size();
14131413
update();
14141414
}
1415+
},{
1416+
element: helper.e(".control-header-button-style-box"),
1417+
path: "header.button.style",
1418+
type: "radio",
1419+
func: function(){
1420+
header.render.button.style();
1421+
}
1422+
},{
1423+
element: helper.e(".control-header-button-style-clear"),
1424+
path: "header.button.style",
1425+
type: "radio",
1426+
func: function(){
1427+
header.render.button.style();
1428+
}
14151429
},{
14161430
element: helper.e(".control-header-button-edit-add-show"),
14171431
path: "header.button.editAdd.show",

‎js/header.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@ var header = (function(){
6363
button: {
6464
size: function(){
6565
_renderButtonSize();
66+
},
67+
style: function(){
68+
_renderButtonStyle();
6669
}
6770
}
6871
};
@@ -141,6 +144,24 @@ var header = (function(){
141144
html.style.setProperty("--header-button-size",state.get().header.button.size+"em");
142145
};
143146

147+
var_renderButtonStyle=function(){
148+
varaction={
149+
box: function(){
150+
helper.removeClass(helper.getClosest(helper.e(".control-link-edit"),".input-wrap"),"input-button-link");
151+
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"),".input-wrap"),"input-button-link");
152+
helper.removeClass(helper.e(".control-link-add"),"button-link");
153+
helper.removeClass(helper.e(".control-menu"),"button-link");
154+
},
155+
clear: function(){
156+
helper.addClass(helper.getClosest(helper.e(".control-link-edit"),".input-wrap"),"input-button-link");
157+
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"),".input-wrap"),"input-button-link");
158+
helper.addClass(helper.e(".control-link-add"),"button-link");
159+
helper.addClass(helper.e(".control-menu"),"button-link");
160+
}
161+
};
162+
action[state.get().header.button.style]();
163+
};
164+
144165
varinit=function(){
145166
_bind();
146167
render.area.width();
@@ -154,6 +175,7 @@ var header = (function(){
154175
render.search.width();
155176
render.search.size();
156177
render.button.size();
178+
render.button.style();
157179
};
158180

159181
// exposed methods

‎js/state.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ var state = (function(){
105105
accent: {
106106
show: true,
107107
},
108+
style: "box",
108109
size: 1
109110
},
110111
shade: {

‎js/update.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -465,6 +465,12 @@ var update = (function(){
465465
returndata;
466466
};
467467

468+
var_update_3100=function(data){
469+
data.version="3.10.0";
470+
data.state.header.button.style="box";
471+
returndata;
472+
};
473+
468474
// var _update_300 = function(data){
469475
// data.version = 3.00;
470476
// return data;
@@ -587,6 +593,10 @@ var update = (function(){
587593
console.log("\t= running update 3.9.0");
588594
data=_update_390(data);
589595
};
596+
if(version.compare(data.version,"3.10.0")==-1){
597+
console.log("\t= running update 3.10.0");
598+
data=_update_3100(data);
599+
};
590600
};
591601
// if no update is needed
592602
// 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="3.9.2";
4+
varcurrent="3.10.0";
55

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

0 commit comments

Comments
(0)