extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-04 13:09:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add link direction controls and improve order controls

Browse Source
This commit is contained in:
zombieFox 2019-11-25 00:34:26 +00:00
parent f5c14c26b2
commit f180fee276
6 changed files with 148 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/css/link.css
View File

@ -281,104 +281,128 @@
font-size: 0.6em; font-size: 0.6em;
} }
.is-link-style-block .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display {
flex-direction: column;
}
.is-link-style-list .link-display {
flex-direction: row; flex-direction: row;
} }
.is-link-style-block.is-link-display-alignment-topleft .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display {
flex-direction: row-reverse;
}
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display {
flex-direction: column;
}
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display {
flex-direction: column-reverse;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display>*:not(:only-child):first-child {
margin-right: 0.5em;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display>*:not(:only-child):last-child {
margin-right: 0.5em;
}
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display>*:not(:only-child):first-child {
margin-bottom: 0.5em;
}
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display>*:not(:only-child):last-child {
margin-bottom: 0.5em;
}
.is-link-item-display-direction-vertical.is-link-display-alignment-topleft .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.is-link-style-block.is-link-display-alignment-topcenter .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-topcenter .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.is-link-style-block.is-link-display-alignment-topright .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-topright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
} }
.is-link-style-block.is-link-display-alignment-centerleft .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-centerleft .link-display {
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
} }
.is-link-style-block.is-link-display-alignment-centercenter .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-centercenter .link-display {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.is-link-style-block.is-link-display-alignment-centerright .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-centerright .link-display {
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
} }
.is-link-style-block.is-link-display-alignment-bottomleft .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
} }
.is-link-style-block.is-link-display-alignment-bottomcenter .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-bottomcenter .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.is-link-style-block.is-link-display-alignment-bottomright .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-bottomright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
} }
.is-link-style-list.is-link-display-alignment-topleft .link-display { .is-link-item-display-direction-horizontal.is-link-display-alignment-topleft .link-display {
justify-content: flex-end;
align-items: flex-start;
}
.is-link-item-display-direction-horizontal.is-link-display-alignment-topcenter .link-display {
justify-content: center;
align-items: flex-start;
}
.is-link-item-display-direction-horizontal.is-link-display-alignment-topright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.is-link-style-list.is-link-display-alignment-topcenter .link-display { .is-link-item-display-direction-horizontal.is-link-display-alignment-centerleft .link-display {
justify-content: center;
align-items: flex-start;
}
.is-link-style-list.is-link-display-alignment-topright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: center;
} }
.is-link-style-list.is-link-display-alignment-centerleft .link-display { .is-link-item-display-direction-horizontal.is-link-display-alignment-centercenter .link-display {
justify-content: center;
align-items: center;
}
.is-link-item-display-direction-horizontal.is-link-display-alignment-centerright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.is-link-style-list.is-link-display-alignment-centercenter .link-display { .is-link-item-display-direction-horizontal.is-link-display-alignment-bottomleft .link-display {
justify-content: center;
align-items: center;
}
.is-link-style-list.is-link-display-alignment-centerright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: flex-end;
} }
.is-link-style-list.is-link-display-alignment-bottomleft .link-display { .is-link-item-display-direction-horizontal.is-link-display-alignment-bottomcenter .link-display {
justify-content: center;
align-items: flex-end;
}
.is-link-item-display-direction-horizontal.is-link-display-alignment-bottomright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
} }
.is-link-style-list.is-link-display-alignment-bottomcenter .link-display {
justify-content: center;
align-items: flex-end;
}
.is-link-style-list.is-link-display-alignment-bottomright .link-display {
justify-content: flex-end;
align-items: flex-end;
}
.link-display-letter, .link-display-letter,
.link-display-icon { .link-display-icon {
margin: 0; margin: 0;
@ -417,14 +441,6 @@
font-size: var(--link-item-display-icon-size); font-size: var(--link-item-display-icon-size);
} }
.is-link-style-block.is-link-item-display-name-show.is-link-item-display-letcon-show .link-display>*:not(:only-child):not(:last-child) {
margin-bottom: 0.5em;
}
.is-link-style-list.is-link-item-display-name-show.is-link-item-display-letcon-show .link-display>*:not(:only-child):not(:last-child) {
margin-right: 0.5em
}
.link-item:hover .link-display-letter, .link-item:hover .link-display-letter,
.link-item:focus .link-display-letter, .link-item:focus .link-display-letter,
.link-item:hover .link-display-icon, .link-item:hover .link-display-icon,
@ -443,10 +459,15 @@
font-size: var(--link-item-display-name-size); font-size: var(--link-item-display-name-size);
font-family: var(--font-regular); font-family: var(--font-regular);
color: rgb(var(--theme-gray-12)); color: rgb(var(--theme-gray-12));
flex-basis: 1%;
display: none; display: none;
transition: color var(--layout-timing-extra-fast); transition: color var(--layout-timing-extra-fast);
} }
.is-link-item-display-name-show .link-display-name {
display: block;
}
.link-display-name, .link-display-name,
.link-display-name:not(:last-child) { .link-display-name:not(:last-child) {
margin-bottom: 0; margin-bottom: 0;
@ -470,10 +491,6 @@
text-align: right; text-align: right;
} }
.is-link-item-display-name-show .link-display-name {
display: block;
}
.link-item:hover .link-display-name, .link-item:hover .link-display-name,
.link-item:focus .link-display-name { .link-item:focus .link-display-name {
color: rgb(var(--theme-style-text)); color: rgb(var(--theme-style-text));

26
src/index.html
View File

@ -1008,14 +1008,24 @@
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-order-displayname" class="control-link-item-order-displayname" type="radio" name="control-link-item-order" value="displayname" tabindex="-1"> <input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
<label for="control-link-item-order-displayname"><span class="label-icon"></span> Letter/Icon then Name</label> <label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align contents horizontally</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-order-namedisplay" class="control-link-item-order-namedisplay" type="radio" name="control-link-item-order" value="namedisplay" tabindex="-1"> <input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
<label for="control-link-item-order-namedisplay"><span class="label-icon"></span> Name then Letter/Icon</label> <label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align contents vertically</label>
</div> </div>
<p class="control-link-item-order-namedisplay-helper form-helper small">Only available when Letter/Icon and Name is shown.</p> <p class="control-link-item-display-direction-helper form-helper small">Only available when Letter/Icon and Name is shown. Works well with Bookmark Block Style.</p>
<hr>
<div class="input-wrap">
<input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
<label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
<label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
</div>
<p class="control-link-item-display-order-helper form-helper small">Only available when Letter/Icon and Name is shown. Works well with Bookmark List Style.</p>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="-1"> <input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="-1">
@ -1064,12 +1074,12 @@
<input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1"> <input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1">
<label for="control-link-style-block"><span class="label-icon"></span> Block</label> <label for="control-link-style-block"><span class="label-icon"></span> Block</label>
</div> </div>
<p class="control-link-style-block-helper form-helper small">Bookmark tiles more square shaped with content stacked vertically.</p> <p class="control-link-style-block-helper form-helper small">Bookmark tiles more square shaped.</p>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1"> <input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1">
<label for="control-link-style-list"><span class="label-icon"></span> List</label> <label for="control-link-style-list"><span class="label-icon"></span> List</label>
</div> </div>
<p class="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide with content stacked horizontally.</p> <p class="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide.</p>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
@ -1085,7 +1095,7 @@
<input id="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1"> <input id="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1">
<label for="control-link-orientation-bottom"><span class="label-icon"></span> Bottom</label> <label for="control-link-orientation-bottom"><span class="label-icon"></span> Bottom</label>
</div> </div>
<p class="control-link-orientation-helper form-helper small">Display the URL and Controls either at the top of bottom of a Tile.</p> <p class="control-link-orientation-helper form-helper small">Display the URL and Controls either at the top of bottom of a Bookmark Tile.</p>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">

57
src/js/control.js
View File

@ -2115,18 +2115,32 @@ var control = (function() {
render.update(); render.update();
} }
}, { }, {
element: helper.e(".control-link-item-order-displayname"), element: helper.e(".control-link-item-display-direction-horizontal"),
path: "link.item.order", path: "link.item.display.direction",
type: "radio", type: "radio",
func: function() { func: function() {
link.groupAndItems(); render.class();
} }
}, { }, {
element: helper.e(".control-link-item-order-namedisplay"), element: helper.e(".control-link-item-display-direction-vertical"),
path: "link.item.order", path: "link.item.display.direction",
type: "radio", type: "radio",
func: function() { func: function() {
link.groupAndItems(); render.class();
}
}, {
element: helper.e(".control-link-item-display-order-letconname"),
path: "link.item.display.order",
type: "radio",
func: function() {
render.class();
}
}, {
element: helper.e(".control-link-item-display-order-nameletcon"),
path: "link.item.display.order",
type: "radio",
func: function() {
render.class();
} }
}, { }, {
element: helper.e(".control-link-item-url-show"), element: helper.e(".control-link-item-url-show"),
@ -2750,8 +2764,6 @@ var control = (function() {
helper.removeClass(html, "is-link-area-alignment-left"); helper.removeClass(html, "is-link-area-alignment-left");
helper.removeClass(html, "is-link-area-alignment-center"); helper.removeClass(html, "is-link-area-alignment-center");
helper.removeClass(html, "is-link-area-alignment-right"); helper.removeClass(html, "is-link-area-alignment-right");
helper.removeClass(html, "is-link-item-display-name-show");
helper.removeClass(html, "is-link-item-display-letcon-show");
helper.removeClass(html, "is-link-display-alignment-topleft"); helper.removeClass(html, "is-link-display-alignment-topleft");
helper.removeClass(html, "is-link-display-alignment-topcenter"); helper.removeClass(html, "is-link-display-alignment-topcenter");
helper.removeClass(html, "is-link-display-alignment-topright"); helper.removeClass(html, "is-link-display-alignment-topright");
@ -2761,13 +2773,16 @@ var control = (function() {
helper.removeClass(html, "is-link-display-alignment-bottomleft"); helper.removeClass(html, "is-link-display-alignment-bottomleft");
helper.removeClass(html, "is-link-display-alignment-bottomcenter"); helper.removeClass(html, "is-link-display-alignment-bottomcenter");
helper.removeClass(html, "is-link-display-alignment-bottomright"); helper.removeClass(html, "is-link-display-alignment-bottomright");
helper.removeClass(html, "is-link-item-display-direction-horizontal");
helper.removeClass(html, "is-link-item-display-direction-vertical");
helper.removeClass(html, "is-link-item-display-order-letconname");
helper.removeClass(html, "is-link-item-display-order-nameletcon");
helper.removeClass(html, "is-link-item-display-name-show");
helper.removeClass(html, "is-link-item-display-letcon-show");
helper.removeClass(html, "is-link-item-url-show"); helper.removeClass(html, "is-link-item-url-show");
helper.removeClass(html, "is-link-item-line-show"); helper.removeClass(html, "is-link-item-line-show");
helper.removeClass(html, "is-link-item-shadow-show"); helper.removeClass(html, "is-link-item-shadow-show");
helper.removeClass(html, "is-link-item-hoverscale-show"); helper.removeClass(html, "is-link-item-hoverscale-show");
helper.removeClass(html, "is-link-item-alignment-left");
helper.removeClass(html, "is-link-item-alignment-center");
helper.removeClass(html, "is-link-item-alignment-right");
helper.removeClass(html, "is-link-item-border"); helper.removeClass(html, "is-link-item-border");
helper.removeClass(html, "is-link-style-list"); helper.removeClass(html, "is-link-style-list");
helper.removeClass(html, "is-link-style-block"); helper.removeClass(html, "is-link-style-block");
@ -2777,6 +2792,8 @@ var control = (function() {
if (state.get().link.show) { if (state.get().link.show) {
helper.addClass(html, "is-link-show"); helper.addClass(html, "is-link-show");
helper.addClass(html, "is-link-area-alignment-" + state.get().link.area.alignment); helper.addClass(html, "is-link-area-alignment-" + state.get().link.area.alignment);
helper.addClass(html, "is-link-item-display-direction-" + state.get().link.item.display.direction);
helper.addClass(html, "is-link-item-display-order-" + state.get().link.item.display.order);
helper.addClass(html, "is-link-display-alignment-" + state.get().link.item.display.alignment); helper.addClass(html, "is-link-display-alignment-" + state.get().link.item.display.alignment);
helper.addClass(html, "is-link-style-" + state.get().link.style); helper.addClass(html, "is-link-style-" + state.get().link.style);
helper.addClass(html, "is-link-orientation-" + state.get().link.orientation); helper.addClass(html, "is-link-orientation-" + state.get().link.orientation);
@ -3229,9 +3246,12 @@ var control = (function() {
_disable.element("[for=control-link-item-display-translate-y]", true); _disable.element("[for=control-link-item-display-translate-y]", true);
_disable.input(".control-link-item-display-translate-y", true); _disable.input(".control-link-item-display-translate-y", true);
_disable.input(".control-link-item-display-translate-y-default", true); _disable.input(".control-link-item-display-translate-y-default", true);
_disable.input(".control-link-item-order-displayname", true); _disable.input(".control-link-item-display-direction-horizontal", true);
_disable.input(".control-link-item-order-namedisplay", true); _disable.input(".control-link-item-display-direction-vertical", true);
_disable.element(".control-link-item-order-namedisplay-helper", true); _disable.input(".control-link-item-display-order-letconname", true);
_disable.input(".control-link-item-display-order-nameletcon", true);
_disable.element(".control-link-item-display-direction-helper", true);
_disable.element(".control-link-item-display-order-helper", true);
_disable.input(".control-link-item-url-show", true); _disable.input(".control-link-item-url-show", true);
_disable.input(".control-link-item-line-show", true); _disable.input(".control-link-item-line-show", true);
_disable.input(".control-link-item-shadow-show", true); _disable.input(".control-link-item-shadow-show", true);
@ -3338,9 +3358,12 @@ var control = (function() {
_disable.input(".control-link-item-display-translate-y-default", false); _disable.input(".control-link-item-display-translate-y-default", false);
}; };
if (state.get().link.item.display.letcon.show && state.get().link.item.display.name.show) { if (state.get().link.item.display.letcon.show && state.get().link.item.display.name.show) {
_disable.input(".control-link-item-order-displayname", false); _disable.input(".control-link-item-display-direction-horizontal", false);
_disable.input(".control-link-item-order-namedisplay", false); _disable.input(".control-link-item-display-direction-vertical", false);
_disable.element(".control-link-item-order-namedisplay-helper", false); _disable.input(".control-link-item-display-order-letconname", false);
_disable.input(".control-link-item-display-order-nameletcon", false);
_disable.element(".control-link-item-display-direction-helper", false);
_disable.element(".control-link-item-display-order-helper", false);
}; };
}; };
}; };

11
src/js/link.js
View File

@ -572,7 +572,7 @@ var link = (function() {
if (nameText == null) { if (nameText == null) {
nameText = ""; nameText = "";
}; };
var linkName = helper.node("p:" + nameText + "|class:link-display-name"); var linkDisplayName = helper.node("p:" + nameText + "|class:link-display-name");
var linkUrl = helper.node("div|class:link-url"); var linkUrl = helper.node("div|class:link-url");
var url = ""; var url = "";
@ -607,13 +607,8 @@ var link = (function() {
} else if (stagedLink.link.display == "icon" && stagedLink.link.icon.prefix != null && stagedLink.link.icon.name != null) { } else if (stagedLink.link.display == "icon" && stagedLink.link.icon.prefix != null && stagedLink.link.icon.name != null) {
linkDisplayLetcon.appendChild(linkDisplayIcon); linkDisplayLetcon.appendChild(linkDisplayIcon);
}; };
if (state.get().link.item.order == "displayname") { linkDisplay.appendChild(linkDisplayLetcon);
linkDisplay.appendChild(linkDisplayLetcon); linkDisplay.appendChild(linkDisplayName);
linkDisplay.appendChild(linkName);
} else if (state.get().link.item.order == "namedisplay") {
linkDisplay.appendChild(linkName);
linkDisplay.appendChild(linkDisplayLetcon);
};
linkPanelFront.appendChild(linkDisplay); linkPanelFront.appendChild(linkDisplay);
linkLeft.appendChild(linkLeftIcon); linkLeft.appendChild(linkLeftIcon);
linkControl.appendChild(linkLeft); linkControl.appendChild(linkLeft);

3
src/js/state.js
View File

@ -153,6 +153,8 @@ var state = (function() {
show: true, show: true,
size: 0.9 size: 0.9
}, },
direction: "vertical",
order: "letconname",
alignment: "centercenter", alignment: "centercenter",
rotate: 0, rotate: 0,
translate: { translate: {
@ -173,7 +175,6 @@ var state = (function() {
show: true show: true
}, },
newTab: false, newTab: false,
order: "displayname",
size: 1, size: 1,
border: 0 border: 0
}, },

18
src/js/update.js
View File

@ -658,14 +658,26 @@ var update = (function() {
size: data.state.link.item.display.icon.size size: data.state.link.item.display.icon.size
} }
}; };
delete data.state.link.item.display.show;
delete data.state.link.item.display.letter;
delete data.state.link.item.display.icon;
data.state.link.item.display.rotate = 0; data.state.link.item.display.rotate = 0;
data.state.link.item.display.translate = { data.state.link.item.display.translate = {
x: 0, x: 0,
y: 0 y: 0
}; };
delete data.state.link.item.display.show; if (data.state.link.item.order == "displayname") {
delete data.state.link.item.display.letter; data.state.link.item.display.order = "letconname";
delete data.state.link.item.display.icon; } else if (data.state.link.item.order == "namedisplay") {
data.state.link.item.display.order = "nameletcon";
};
delete data.state.link.item.order;
if (data.state.link.style == "block") {
data.state.link.item.display.direction = "vertical";
} else if (data.state.link.style == "list") {
data.state.link.item.display.direction = "horizontal";
};
delete data.state.link.fit;
return data; return data;
} }
}; };