mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-02 19:39:23 +01:00
[feature] add controls for header border width
This commit is contained in:
Kombie
GitHub
parent
8694cb2fc2
commit
a6da3a449d
@ -67,7 +67,14 @@
|
||||
--header-shade-color: transparent;
|
||||
--header-shade-opacity: none;
|
||||
--header-height: 0;
|
||||
--header-shade-padding: 4;
|
||||
--header-shade-padding-top: calc(var(--line-width) * var(--header-shade-padding-multiplier-top));
|
||||
--header-shade-padding-bottom: calc(var(--line-width) * var(--header-shade-padding-multiplier-bottom));
|
||||
--header-shade-padding-multiplier-top: 4;
|
||||
--header-shade-padding-multiplier-bottom: 4;
|
||||
--header-border-width-top: calc(var(--line-width) * var(--header-border-width-multiplier-top));
|
||||
--header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-multiplier-bottom));
|
||||
--header-border-width-multiplier-top: 1;
|
||||
--header-border-width-multiplier-bottom: 1;
|
||||
--background-image: none;
|
||||
--background-opacity: 1;
|
||||
--background-accent-opacity: 0;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.header {
|
||||
padding: calc(var(--gutter) * var(--header-shade-padding)) 0;
|
||||
padding-top: var(--header-shade-padding-top);
|
||||
padding-bottom: var(--header-shade-padding-bottom);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: var(--z-index-header);
|
||||
@ -33,12 +34,12 @@
|
||||
opacity: var(--header-shade-opacity);
|
||||
}
|
||||
|
||||
.is-header-shade-border-top .header .header-border {
|
||||
border-top: var(--line-width) solid rgb(var(--accent));
|
||||
.is-header-shade-border-top-show .header .header-border {
|
||||
border-top: var(--header-border-width-top) solid rgb(var(--accent));
|
||||
}
|
||||
|
||||
.is-header-shade-border-bottom .header .header-border {
|
||||
border-bottom: var(--line-width) solid rgb(var(--accent));
|
||||
.is-header-shade-border-bottom-show .header .header-border {
|
||||
border-bottom: var(--header-border-width-bottom) solid rgb(var(--accent));
|
||||
}
|
||||
|
||||
.header-edge {
|
||||
|
||||
24
index.html
24
index.html
@ -298,16 +298,28 @@
|
||||
<input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-header-shade-padding">Top & bottom padding</label>
|
||||
<input id="control-header-shade-padding" class="control-header-shade-padding" type="range" min="1" max="25" value="0" tabindex="1">
|
||||
<label for="control-header-shade-padding-top">Top padding</label>
|
||||
<input id="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="1" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-header-shade-padding-bottom">Bottom padding</label>
|
||||
<input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom" type="range" min="1" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<input id="control-header-shade-border-top" class="control-header-shade-border-top" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-top"><span class="label-icon"></span>Top border</label>
|
||||
<input id="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-top-show"><span class="label-icon"></span>Top border</label>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-2">
|
||||
<label for="control-header-shade-border-top-width">Border width</label>
|
||||
<input id="control-header-shade-border-top-width" class="control-header-shade-border-top-width" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<input id="control-header-shade-border-bottom" class="control-header-shade-border-bottom" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-bottom"><span class="label-icon"></span>Bottom border</label>
|
||||
<input id="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-bottom-show"><span class="label-icon"></span>Bottom border</label>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-2">
|
||||
<label for="control-header-shade-border-bottom-width">Border width</label>
|
||||
<input id="control-header-shade-border-bottom-width" class="control-header-shade-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
115
js/control.js
115
js/control.js
@ -319,8 +319,8 @@ var control = (function() {
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-padding"),
|
||||
path: "header.shade.padding",
|
||||
element: helper.e(".control-header-shade-padding-top"),
|
||||
path: "header.shade.padding.top",
|
||||
type: "range",
|
||||
additionalEvents: [{
|
||||
event: "mousedown",
|
||||
@ -338,19 +338,54 @@ var control = (function() {
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-top"),
|
||||
path: "header.shade.border.top",
|
||||
type: "checkbox",
|
||||
element: helper.e(".control-header-shade-padding-bottom"),
|
||||
path: "header.shade.padding.bottom",
|
||||
type: "range",
|
||||
additionalEvents: [{
|
||||
event: "mousedown",
|
||||
action: function() {
|
||||
header.edge("show");
|
||||
}
|
||||
}, {
|
||||
event: "mouseup",
|
||||
action: function() {
|
||||
header.edge("hide");
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-bottom"),
|
||||
path: "header.shade.border.bottom",
|
||||
element: helper.e(".control-header-shade-border-top-show"),
|
||||
path: "header.shade.border.top.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-top-width"),
|
||||
path: "header.shade.border.top.width",
|
||||
type: "range",
|
||||
func: function() {
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-bottom-show"),
|
||||
path: "header.shade.border.bottom.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-bottom-width"),
|
||||
path: "header.shade.border.bottom.width",
|
||||
type: "range",
|
||||
func: function() {
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
@ -691,10 +726,10 @@ var control = (function() {
|
||||
path: object.path,
|
||||
newValue: newValue
|
||||
});
|
||||
console.log(object.path, helper.getObject({
|
||||
object: state.get(),
|
||||
path: object.path
|
||||
}));
|
||||
// console.log(object.path, helper.getObject({
|
||||
// object: state.get(),
|
||||
// path: object.path
|
||||
// }));
|
||||
};
|
||||
};
|
||||
var bindControl = function(object) {
|
||||
@ -862,22 +897,22 @@ var control = (function() {
|
||||
if (state.get().header.shade.show) {
|
||||
helper.addClass(html, "is-header-shade-show");
|
||||
helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style);
|
||||
if (state.get().header.shade.border.top) {
|
||||
helper.addClass(html, "is-header-shade-border-top");
|
||||
if (state.get().header.shade.border.top.show) {
|
||||
helper.addClass(html, "is-header-shade-border-top-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-shade-border-top");
|
||||
helper.removeClass(html, "is-header-shade-border-top-show");
|
||||
};
|
||||
if (state.get().header.shade.border.bottom) {
|
||||
helper.addClass(html, "is-header-shade-border-bottom");
|
||||
if (state.get().header.shade.border.bottom.show) {
|
||||
helper.addClass(html, "is-header-shade-border-bottom-show");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-shade-border-bottom");
|
||||
helper.removeClass(html, "is-header-shade-border-bottom-show");
|
||||
};
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-shade-show");
|
||||
helper.removeClass(html, "is-header-shade-style-always");
|
||||
helper.removeClass(html, "is-header-shade-style-scroll");
|
||||
helper.removeClass(html, "is-header-shade-border-top");
|
||||
helper.removeClass(html, "is-header-shade-border-bottom");
|
||||
helper.removeClass(html, "is-header-shade-border-top-show");
|
||||
helper.removeClass(html, "is-header-shade-border-bottom-show");
|
||||
};
|
||||
};
|
||||
_menu();
|
||||
@ -1071,19 +1106,45 @@ var control = (function() {
|
||||
helper.e(".control-header-shade-style-scroll").disabled = false;
|
||||
helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-opacity").disabled = false;
|
||||
helper.e("[for=control-header-shade-padding]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-padding").disabled = false;
|
||||
helper.e(".control-header-shade-border-top").disabled = false;
|
||||
helper.e(".control-header-shade-border-bottom").disabled = false;
|
||||
helper.e("[for=control-header-shade-padding-top]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-padding-top").disabled = false;
|
||||
helper.e("[for=control-header-shade-padding-bottom]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-padding-bottom").disabled = false;
|
||||
helper.e(".control-header-shade-border-top-show").disabled = false;
|
||||
helper.e(".control-header-shade-border-bottom-show").disabled = false;
|
||||
helper.e("[for=control-header-shade-border-top-width]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-border-top-width").disabled = false;
|
||||
helper.e("[for=control-header-shade-border-bottom-width]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-border-bottom-width").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-shade-style-always").disabled = true;
|
||||
helper.e(".control-header-shade-style-scroll").disabled = true;
|
||||
helper.e("[for=control-header-shade-opacity]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-opacity").disabled = true;
|
||||
helper.e("[for=control-header-shade-padding]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-padding").disabled = true;
|
||||
helper.e(".control-header-shade-border-top").disabled = true;
|
||||
helper.e(".control-header-shade-border-bottom").disabled = true;
|
||||
helper.e("[for=control-header-shade-padding-top]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-padding-top").disabled = true;
|
||||
helper.e("[for=control-header-shade-padding-bottom]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-padding-bottom").disabled = true;
|
||||
helper.e(".control-header-shade-border-top-show").disabled = true;
|
||||
helper.e(".control-header-shade-border-bottom-show").disabled = true;
|
||||
helper.e("[for=control-header-shade-border-top-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-border-top-width").disabled = true;
|
||||
helper.e("[for=control-header-shade-border-bottom-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-border-bottom-width").disabled = true;
|
||||
};
|
||||
if (state.get().header.shade.show && state.get().header.shade.border.top.show) {
|
||||
helper.e("[for=control-header-shade-border-top-width]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-border-top-width").disabled = false;
|
||||
} else {
|
||||
helper.e("[for=control-header-shade-border-top-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-border-top-width").disabled = true;
|
||||
};
|
||||
if (state.get().header.shade.show && state.get().header.shade.border.bottom.show) {
|
||||
helper.e("[for=control-header-shade-border-bottom-width]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-border-bottom-width").disabled = false;
|
||||
} else {
|
||||
helper.e("[for=control-header-shade-border-bottom-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-border-bottom-width").disabled = true;
|
||||
};
|
||||
};
|
||||
_edit();
|
||||
|
||||
@ -73,11 +73,17 @@ var header = (function() {
|
||||
};
|
||||
};
|
||||
var _padding = function() {
|
||||
html.style.setProperty("--header-shade-padding", state.get().header.shade.padding);
|
||||
html.style.setProperty("--header-shade-padding-multiplier-top", state.get().header.shade.padding.top);
|
||||
html.style.setProperty("--header-shade-padding-multiplier-bottom", state.get().header.shade.padding.bottom);
|
||||
};
|
||||
var _border = function() {
|
||||
html.style.setProperty("--header-border-width-multiplier-top", state.get().header.shade.border.top.width);
|
||||
html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.shade.border.bottom.width);
|
||||
};
|
||||
_color();
|
||||
_opacity();
|
||||
_padding();
|
||||
_border();
|
||||
_margin();
|
||||
};
|
||||
|
||||
|
||||
15
js/state.js
15
js/state.js
@ -56,12 +56,21 @@ var state = (function() {
|
||||
},
|
||||
shade: {
|
||||
show: true,
|
||||
padding: 4,
|
||||
padding: {
|
||||
top: 4,
|
||||
bottom: 4
|
||||
},
|
||||
style: "scroll",
|
||||
opacity: 0.95,
|
||||
border: {
|
||||
top: false,
|
||||
bottom: false
|
||||
top: {
|
||||
show: false,
|
||||
width: 1
|
||||
},
|
||||
bottom: {
|
||||
show: false,
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
greeting: {
|
||||
|
||||
18
js/update.js
18
js/update.js
@ -236,6 +236,24 @@ var update = (function() {
|
||||
data.state.layout.width = 72;
|
||||
data.version = "2.14.0";
|
||||
};
|
||||
if (version.compare(data.version, "2.16.0") == -1) {
|
||||
console.log("\t -- running update", "2.16.0");
|
||||
data.state.header.shade.padding = {
|
||||
top: data.state.header.shade.padding,
|
||||
bottom: data.state.header.shade.padding
|
||||
};
|
||||
data.state.header.shade.border = {
|
||||
top: {
|
||||
show: data.state.header.shade.border.top,
|
||||
width: 1
|
||||
},
|
||||
bottom: {
|
||||
show: data.state.header.shade.border.bottom,
|
||||
width: 1
|
||||
}
|
||||
};
|
||||
data.version = "2.16.0";
|
||||
};
|
||||
};
|
||||
// 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 = "2.15.0";
|
||||
var current = "2.16.0";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user