mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-23 08:33:38 +01:00
[feature] add controls for header button style
This commit is contained in:
Kuldeep M
parent
b514eca850
commit
f9c76acccc
@ -26,9 +26,9 @@
|
||||
--button-text-hover-focus: var(--style-neutral-text);
|
||||
--button-text-active: var(--style-neutral-text);
|
||||
--button-text-disabled: var(--gray-04);
|
||||
--button-link-text: var(--gray-10);
|
||||
--button-link-text-hover-focus: var(--gray-14);
|
||||
--button-link-text-active: var(--gray-18);
|
||||
--button-link-text: var(--gray-12);
|
||||
--button-link-text-hover-focus: var(--style-neutral-text);
|
||||
--button-link-text-active: var(--style-neutral-text);
|
||||
--button-link-text-disabled: var(--gray-04);
|
||||
--form-input-text: var(--gray-16);
|
||||
--form-input-border: 2;
|
||||
|
||||
46
css/form.css
46
css/form.css
@ -640,6 +640,52 @@ input[type="range"][disabled]~.input-helper {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.input-button-link input[type="checkbox"]+label,
|
||||
.input-button-link input[type="radio"]+label,
|
||||
.input-button-link input[type="color"]+label {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: rgb(var(--button-link-text));
|
||||
}
|
||||
|
||||
.input-button-link input[type="checkbox"]:hover+label,
|
||||
.input-button-link input[type="checkbox"]:focus+label,
|
||||
.input-button-link input[type="checkbox"]:checked+label,
|
||||
.input-button-link input[type="radio"]:hover+label,
|
||||
.input-button-link input[type="radio"]:focus+label,
|
||||
.input-button-link input[type="radio"]:checked+label,
|
||||
.input-button-link input[type="color"]:hover+label,
|
||||
.input-button-link input[type="color"]:focus+label,
|
||||
.input-button-link input[type="color"]:checked+label {
|
||||
background-color: transparent;
|
||||
color: rgb(var(--button-link-text-hover-focus));
|
||||
}
|
||||
|
||||
.input-button-link input[type="checkbox"]:active+label,
|
||||
.input-button-link input[type="radio"]:active+label,
|
||||
.input-button-link input[type="color"]:active+label {
|
||||
background-color: transparent;
|
||||
color: rgb(var(--button-link-text-active));
|
||||
}
|
||||
|
||||
.input-button-link input[disabled][type="checkbox"]+label,
|
||||
.input-button-link input[disabled][type="radio"]+label,
|
||||
.input-button-link input[disabled][type="color"]+label {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.input-button-link input[disabled][type="checkbox"]:hover+label,
|
||||
.input-button-link input[disabled][type="checkbox"]:focus+label,
|
||||
.input-button-link input[disabled][type="radio"]:hover+label,
|
||||
.input-button-link input[disabled][type="radio"]:focus+label,
|
||||
.input-button-link input[disabled][type="color"]:hover+label,
|
||||
.input-button-link input[disabled][type="color"]:focus+label {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.input-color-dot input[type="color"] {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
|
||||
10
index.html
10
index.html
@ -625,6 +625,16 @@
|
||||
<h1 class="menu-item-header-text">Buttons</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<label class="control-header-button-style-label">Button style</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-button-style-box" class="control-header-button-style-box" type="radio" name="control-header-button-style" value="box" tabindex="1">
|
||||
<label for="control-header-button-style-box">Box</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-button-style-clear" class="control-header-button-style-clear" type="radio" name="control-header-button-style" value="clear" tabindex="1">
|
||||
<label for="control-header-button-style-clear">Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-button-edit-add-show" class="control-header-button-edit-add-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-button-edit-add-show">Show Edit/Add</label>
|
||||
|
||||
@ -1412,6 +1412,20 @@ var control = (function() {
|
||||
header.render.search.size();
|
||||
update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-button-style-box"),
|
||||
path: "header.button.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
header.render.button.style();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-button-style-clear"),
|
||||
path: "header.button.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
header.render.button.style();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-button-edit-add-show"),
|
||||
path: "header.button.editAdd.show",
|
||||
|
||||
22
js/header.js
22
js/header.js
@ -63,6 +63,9 @@ var header = (function() {
|
||||
button: {
|
||||
size: function() {
|
||||
_renderButtonSize();
|
||||
},
|
||||
style: function() {
|
||||
_renderButtonStyle();
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -141,6 +144,24 @@ var header = (function() {
|
||||
html.style.setProperty("--header-button-size", state.get().header.button.size + "em");
|
||||
};
|
||||
|
||||
var _renderButtonStyle = function() {
|
||||
var action = {
|
||||
box: function() {
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
|
||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
|
||||
helper.removeClass(helper.e(".control-link-add"), "button-link");
|
||||
helper.removeClass(helper.e(".control-menu"), "button-link");
|
||||
},
|
||||
clear: function() {
|
||||
helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
|
||||
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
|
||||
helper.addClass(helper.e(".control-link-add"), "button-link");
|
||||
helper.addClass(helper.e(".control-menu"), "button-link");
|
||||
}
|
||||
};
|
||||
action[state.get().header.button.style]();
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
_bind();
|
||||
render.area.width();
|
||||
@ -154,6 +175,7 @@ var header = (function() {
|
||||
render.search.width();
|
||||
render.search.size();
|
||||
render.button.size();
|
||||
render.button.style();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
|
||||
@ -105,6 +105,7 @@ var state = (function() {
|
||||
accent: {
|
||||
show: true,
|
||||
},
|
||||
style: "box",
|
||||
size: 1
|
||||
},
|
||||
shade: {
|
||||
|
||||
10
js/update.js
10
js/update.js
@ -465,6 +465,12 @@ var update = (function() {
|
||||
return data;
|
||||
};
|
||||
|
||||
var _update_3100 = function(data) {
|
||||
data.version = "3.10.0";
|
||||
data.state.header.button.style = "box";
|
||||
return data;
|
||||
};
|
||||
|
||||
// var _update_300 = function(data) {
|
||||
// data.version = 3.00;
|
||||
// return data;
|
||||
@ -587,6 +593,10 @@ var update = (function() {
|
||||
console.log("\t= running update 3.9.0");
|
||||
data = _update_390(data);
|
||||
};
|
||||
if (version.compare(data.version, "3.10.0") == -1) {
|
||||
console.log("\t= running update 3.10.0");
|
||||
data = _update_3100(data);
|
||||
};
|
||||
};
|
||||
// if no update is needed
|
||||
// version bump
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var version = (function() {
|
||||
|
||||
// version is normally bumped when the state needs changing or any new functionality is added
|
||||
var current = "3.9.2";
|
||||
var current = "3.10.0";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user