extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 04:21:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] adding control for link item grow on hover

Browse Source
This commit is contained in:
zombieFox 2019-06-15 11:57:53 +01:00
parent e0ae9601bc
commit 6d8f1c23b8
6 changed files with 51 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/link.css
View File

@ -49,15 +49,15 @@
z-index: 1; z-index: 1;
} }
.link-item:focus-within, .is-link-item-hover-scale .link-item:focus-within,
.link-item:focus, .is-link-item-hover-scale .link-item:focus,
.link-item:hover { .is-link-item-hover-scale .link-item:hover {
transform: scale(1.05); transform: scale(1.05);
z-index: 2; z-index: 2;
outline: 0; outline: 0;
} }
.link-item:active { .is-link-item-hover-scale .link-item:active {
transform: scale(1.04); transform: scale(1.04);
transition: none; transition: none;
} }
@ -75,7 +75,7 @@
transition: background-color var(--animation-speed-fast) ease-in-out, height var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out; transition: background-color var(--animation-speed-fast) ease-in-out, height var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
} }
.is-link-item-line-show .link-panel-front { .is-link-item-line .link-panel-front {
height: calc(100% - var(--line-width)); height: calc(100% - var(--line-width));
} }
@ -175,14 +175,14 @@
transition: height var(--animation-speed-fast) ease-in-out, top var(--animation-speed-fast) ease-in-out; transition: height var(--animation-speed-fast) ease-in-out, top var(--animation-speed-fast) ease-in-out;
} }
.is-link-item-line-show .link-panel-back { .is-link-item-line .link-panel-back {
height: calc(100% - var(--line-width)); height: calc(100% - var(--line-width));
} }
.is-link-edit .link-panel-back, .is-link-edit .link-panel-back,
.is-link-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back, .is-link-url-show:not(.is-link-item-line) .link-item:focus .link-panel-back,
.is-link-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back, .is-link-url-show:not(.is-link-item-line) .link-item:focus-within .link-panel-back,
.is-link-url-show:not(.is-link-item-line-show) .link-item:hover .link-panel-back { .is-link-url-show:not(.is-link-item-line) .link-item:hover .link-panel-back {
top: 0; top: 0;
height: 100%; height: 100%;
} }

9
index.html
View File

@ -803,8 +803,13 @@
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-line-show" class="control-link-item-line-show" type="checkbox" tabindex="1"> <input id="control-link-item-line" class="control-link-item-line" type="checkbox" tabindex="1">
<label for="control-link-item-line-show">Tile line</label> <label for="control-link-item-line">Tile line</label>
</div>
<hr>
<div class="input-wrap">
<input id="control-link-item-hover-scale" class="control-link-item-hover-scale" type="checkbox" tabindex="1">
<label for="control-link-item-hover-scale">Grow on hover</label>
</div> </div>
<hr> <hr>
<label class="control-link-item-display-alignment-horizontal-label">Content Horizontal Alignment</label> <label class="control-link-item-display-alignment-horizontal-label">Content Horizontal Alignment</label>

27
js/control.js
View File

@ -1841,8 +1841,15 @@ var control = (function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-link-item-line-show"), element: helper.e(".control-link-item-line"),
path: "link.item.line.show", path: "link.item.line",
type: "checkbox",
func: function() {
render();
}
}, {
element: helper.e(".control-link-item-hover-scale"),
path: "link.item.hoverScale",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
render(); render();
@ -2312,7 +2319,8 @@ var control = (function() {
helper.removeClass(html, "is-link-url-show"); helper.removeClass(html, "is-link-url-show");
helper.removeClass(html, "is-link-url-style-light"); helper.removeClass(html, "is-link-url-style-light");
helper.removeClass(html, "is-link-url-style-dark"); helper.removeClass(html, "is-link-url-style-dark");
helper.removeClass(html, "is-link-item-line-show"); helper.removeClass(html, "is-link-item-line");
helper.removeClass(html, "is-link-item-hover-scale");
helper.removeClass(html, "is-link-item-alignment-horizontal-left"); helper.removeClass(html, "is-link-item-alignment-horizontal-left");
helper.removeClass(html, "is-link-item-alignment-horizontal-center"); helper.removeClass(html, "is-link-item-alignment-horizontal-center");
helper.removeClass(html, "is-link-item-alignment-horizontal-right"); helper.removeClass(html, "is-link-item-alignment-horizontal-right");
@ -2336,8 +2344,11 @@ var control = (function() {
if (state.get().link.item.url.show) { if (state.get().link.item.url.show) {
helper.addClass(html, "is-link-url-show"); helper.addClass(html, "is-link-url-show");
}; };
if (state.get().link.item.line.show) { if (state.get().link.item.line) {
helper.addClass(html, "is-link-item-line-show"); helper.addClass(html, "is-link-item-line");
};
if (state.get().link.item.hoverScale) {
helper.addClass(html, "is-link-item-hover-scale");
}; };
if (state.get().link.edit) { if (state.get().link.edit) {
helper.addClass(html, "is-link-edit"); helper.addClass(html, "is-link-edit");
@ -2688,7 +2699,8 @@ var control = (function() {
helper.e(".control-link-item-url-show").disabled = true; helper.e(".control-link-item-url-show").disabled = true;
helper.e(".control-link-item-url-style-dark").disabled = true; helper.e(".control-link-item-url-style-dark").disabled = true;
helper.e(".control-link-item-url-style-light").disabled = true; helper.e(".control-link-item-url-style-light").disabled = true;
helper.e(".control-link-item-line-show").disabled = true; helper.e(".control-link-item-line").disabled = true;
helper.e(".control-link-item-hover-scale").disabled = true;
helper.e(".control-link-item-display-alignment-horizontal-label").setAttribute("disabled", ""); helper.e(".control-link-item-display-alignment-horizontal-label").setAttribute("disabled", "");
helper.e(".control-link-item-display-alignment-horizontal-left").disabled = true; helper.e(".control-link-item-display-alignment-horizontal-left").disabled = true;
helper.e(".control-link-item-display-alignment-horizontal-center").disabled = true; helper.e(".control-link-item-display-alignment-horizontal-center").disabled = true;
@ -2718,7 +2730,8 @@ var control = (function() {
helper.e(".control-link-item-display-show").disabled = false; helper.e(".control-link-item-display-show").disabled = false;
helper.e(".control-link-item-name-show").disabled = false; helper.e(".control-link-item-name-show").disabled = false;
helper.e(".control-link-item-url-show").disabled = false; helper.e(".control-link-item-url-show").disabled = false;
helper.e(".control-link-item-line-show").disabled = false; helper.e(".control-link-item-line").disabled = false;
helper.e(".control-link-item-hover-scale").disabled = false;
helper.e(".control-link-new-tab").disabled = false; helper.e(".control-link-new-tab").disabled = false;
helper.e(".control-link-style-block").disabled = false; helper.e(".control-link-style-block").disabled = false;
helper.e(".control-link-style-list").disabled = false; helper.e(".control-link-style-list").disabled = false;

7
js/state.js
View File

@ -138,7 +138,6 @@ var state = (function() {
} }
}, },
item: { item: {
size: 1,
display: { display: {
show: true, show: true,
size: 2, size: 2,
@ -161,9 +160,9 @@ var state = (function() {
show: true, show: true,
style: "dark" style: "dark"
}, },
line: { size: 1,
show: true line: true,
} hoverScale: true
}, },
show: true, show: true,
newTab: false, newTab: false,

11
js/update.js
View File

@ -471,6 +471,13 @@ var update = (function() {
return data; return data;
}; };
var _update_3110 = function(data) {
data.version = "3.11.0";
data.state.link.item.line = data.state.link.item.line.show;
data.state.link.item.hoverScale = true;
return data;
};
// var _update_300 = function(data) { // var _update_300 = function(data) {
// data.version = 3.00; // data.version = 3.00;
// return data; // return data;
@ -597,6 +604,10 @@ var update = (function() {
console.log("\t= running update 3.10.0"); console.log("\t= running update 3.10.0");
data = _update_3100(data); data = _update_3100(data);
}; };
if (version.compare(data.version, "3.11.0") == -1) {
console.log("\t= running update 3.11.0");
data = _update_3110(data);
};
}; };
// if no update is needed // if no update is needed
// version bump // version bump

2
js/version.js
View File

@ -1,7 +1,7 @@
var version = (function() { var version = (function() {
// version is normally bumped when the state needs changing or any new functionality is added // version is normally bumped when the state needs changing or any new functionality is added
var current = "3.10.3"; var current = "3.11.0";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");