Skip to content

Commit f9c76ac

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

8 files changed

Lines changed: 107 additions & 4 deletions

File tree

‎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-link input[type="checkbox"]+label,
644+
.input-button-link input[type="radio"]+label,
645+
.input-button-link input[type="color"]+label {
646+
background-color: transparent;
647+
border: 0;
648+
color: rgb(var(--button-link-text));
649+
}
650+
651+
.input-button-link input[type="checkbox"]:hover+label,
652+
.input-button-link input[type="checkbox"]:focus+label,
653+
.input-button-link input[type="checkbox"]:checked+label,
654+
.input-button-link input[type="radio"]:hover+label,
655+
.input-button-link input[type="radio"]:focus+label,
656+
.input-button-link input[type="radio"]:checked+label,
657+
.input-button-link input[type="color"]:hover+label,
658+
.input-button-link input[type="color"]:focus+label,
659+
.input-button-link input[type="color"]:checked+label {
660+
background-color: transparent;
661+
color: rgb(var(--button-link-text-hover-focus));
662+
}
663+
664+
.input-button-link input[type="checkbox"]:active+label,
665+
.input-button-link input[type="radio"]:active+label,
666+
.input-button-link input[type="color"]:active+label {
667+
background-color: transparent;
668+
color: rgb(var(--button-link-text-active));
669+
}
670+
671+
.input-button-link input[disabled][type="checkbox"]+label,
672+
.input-button-link input[disabled][type="radio"]+label,
673+
.input-button-link input[disabled][type="color"]+label {
674+
background-color: transparent;
675+
color: transparent;
676+
pointer-events: none;
677+
}
678+
679+
.input-button-link input[disabled][type="checkbox"]:hover+label,
680+
.input-button-link input[disabled][type="checkbox"]:focus+label,
681+
.input-button-link input[disabled][type="radio"]:hover+label,
682+
.input-button-link input[disabled][type="radio"]:focus+label,
683+
.input-button-link input[disabled][type="color"]:hover+label,
684+
.input-button-link input[disabled][type="color"]:focus+label {
685+
background-color: transparent;
686+
color: transparent;
687+
}
688+
643689
.input-color-dot input[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
<h1 class="menu-item-header-text">Buttons</h1>
626626
</div>
627627
<div class="menu-item-form">
628+
<label class="control-header-button-style-label">Button style</label>
629+
<div class="input-wrap">
630+
<input id="control-header-button-style-box" class="control-header-button-style-box" type="radio" name="control-header-button-style" value="box" tabindex="1">
631+
<label for="control-header-button-style-box">Box</label>
632+
</div>
633+
<div class="input-wrap">
634+
<input id="control-header-button-style-clear" class="control-header-button-style-clear" type="radio" name="control-header-button-style" value="clear" tabindex="1">
635+
<label for="control-header-button-style-clear">Clear</label>
636+
</div>
637+
<hr>
628638
<div class="input-wrap">
629639
<input id="control-header-button-edit-add-show" class="control-header-button-edit-add-show" type="checkbox" tabindex="1">
630640
<label for="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+
var action = {
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
var init = 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
return data;
466466
};
467467

468+
var _update_3100 = function(data) {
469+
data.version = "3.10.0";
470+
data.state.header.button.style = "box";
471+
return data;
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
var version = (function() {
22

33
// version is normally bumped when the state needs changing or any new functionality is added
4-
var current = "3.9.2";
4+
var current = "3.10.0";
55

66
var compare = function(a, b) {
77
var pa = a.split(".");

0 commit comments

Comments
 (0)