From f180fee276fa51bad6233d74d21d949244dde9b1 Mon Sep 17 00:00:00 2001 From: zombieFox Date: Mon, 25 Nov 2019 00:34:26 +0000 Subject: [PATCH] [feature] add link direction controls and improve order controls --- src/css/link.css | 123 ++++++++++++++++++++++++++-------------------- src/index.html | 26 +++++++--- src/js/control.js | 57 ++++++++++++++------- src/js/link.js | 11 ++--- src/js/state.js | 3 +- src/js/update.js | 18 +++++-- 6 files changed, 148 insertions(+), 90 deletions(-) diff --git a/src/css/link.css b/src/css/link.css index f7126073..83c28763 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -281,104 +281,128 @@ font-size: 0.6em; } -.is-link-style-block .link-display { - flex-direction: column; -} - -.is-link-style-list .link-display { +.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display { 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; align-items: flex-start; } -.is-link-style-list.is-link-display-alignment-topcenter .link-display { - justify-content: center; - align-items: flex-start; -} - -.is-link-style-list.is-link-display-alignment-topright .link-display { +.is-link-item-display-direction-horizontal.is-link-display-alignment-centerleft .link-display { 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; align-items: center; } -.is-link-style-list.is-link-display-alignment-centercenter .link-display { - justify-content: center; - align-items: center; -} - -.is-link-style-list.is-link-display-alignment-centerright .link-display { +.is-link-item-display-direction-horizontal.is-link-display-alignment-bottomleft .link-display { 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; 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-icon { margin: 0; @@ -417,14 +441,6 @@ 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:focus .link-display-letter, .link-item:hover .link-display-icon, @@ -443,10 +459,15 @@ font-size: var(--link-item-display-name-size); font-family: var(--font-regular); color: rgb(var(--theme-gray-12)); + flex-basis: 1%; display: none; transition: color var(--layout-timing-extra-fast); } +.is-link-item-display-name-show .link-display-name { + display: block; +} + .link-display-name, .link-display-name:not(:last-child) { margin-bottom: 0; @@ -470,10 +491,6 @@ text-align: right; } -.is-link-item-display-name-show .link-display-name { - display: block; -} - .link-item:hover .link-display-name, .link-item:focus .link-display-name { color: rgb(var(--theme-style-text)); diff --git a/src/index.html b/src/index.html index 9c59021e..33f97674 100644 --- a/src/index.html +++ b/src/index.html @@ -1008,14 +1008,24 @@
- - + +
- - + +
-

Only available when Letter/Icon and Name is shown.

+

Only available when Letter/Icon and Name is shown. Works well with Bookmark Block Style.

+
+
+ + +
+
+ + +
+

Only available when Letter/Icon and Name is shown. Works well with Bookmark List Style.

@@ -1064,12 +1074,12 @@
-

Bookmark tiles more square shaped with content stacked vertically.

+

Bookmark tiles more square shaped.

-

Bookmark tiles more short and wide with content stacked horizontally.

+

Bookmark tiles more short and wide.

@@ -1085,7 +1095,7 @@
-

Display the URL and Controls either at the top of bottom of a Tile.

+

Display the URL and Controls either at the top of bottom of a Bookmark Tile.

diff --git a/src/js/control.js b/src/js/control.js index 7f9aba23..3f997631 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -2115,18 +2115,32 @@ var control = (function() { render.update(); } }, { - element: helper.e(".control-link-item-order-displayname"), - path: "link.item.order", + element: helper.e(".control-link-item-display-direction-horizontal"), + path: "link.item.display.direction", type: "radio", func: function() { - link.groupAndItems(); + render.class(); } }, { - element: helper.e(".control-link-item-order-namedisplay"), - path: "link.item.order", + element: helper.e(".control-link-item-display-direction-vertical"), + path: "link.item.display.direction", type: "radio", 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"), @@ -2750,8 +2764,6 @@ var control = (function() { helper.removeClass(html, "is-link-area-alignment-left"); helper.removeClass(html, "is-link-area-alignment-center"); 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-topcenter"); 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-bottomcenter"); 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-line-show"); helper.removeClass(html, "is-link-item-shadow-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-style-list"); helper.removeClass(html, "is-link-style-block"); @@ -2777,6 +2792,8 @@ var control = (function() { if (state.get().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-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-style-" + state.get().link.style); 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.input(".control-link-item-display-translate-y", true); _disable.input(".control-link-item-display-translate-y-default", true); - _disable.input(".control-link-item-order-displayname", true); - _disable.input(".control-link-item-order-namedisplay", true); - _disable.element(".control-link-item-order-namedisplay-helper", true); + _disable.input(".control-link-item-display-direction-horizontal", true); + _disable.input(".control-link-item-display-direction-vertical", 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-line-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); }; 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-order-namedisplay", false); - _disable.element(".control-link-item-order-namedisplay-helper", false); + _disable.input(".control-link-item-display-direction-horizontal", false); + _disable.input(".control-link-item-display-direction-vertical", 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); }; }; }; diff --git a/src/js/link.js b/src/js/link.js index 147a57ef..95c61971 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -572,7 +572,7 @@ var link = (function() { if (nameText == null) { 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 url = ""; @@ -607,13 +607,8 @@ var link = (function() { } else if (stagedLink.link.display == "icon" && stagedLink.link.icon.prefix != null && stagedLink.link.icon.name != null) { linkDisplayLetcon.appendChild(linkDisplayIcon); }; - if (state.get().link.item.order == "displayname") { - linkDisplay.appendChild(linkDisplayLetcon); - linkDisplay.appendChild(linkName); - } else if (state.get().link.item.order == "namedisplay") { - linkDisplay.appendChild(linkName); - linkDisplay.appendChild(linkDisplayLetcon); - }; + linkDisplay.appendChild(linkDisplayLetcon); + linkDisplay.appendChild(linkDisplayName); linkPanelFront.appendChild(linkDisplay); linkLeft.appendChild(linkLeftIcon); linkControl.appendChild(linkLeft); diff --git a/src/js/state.js b/src/js/state.js index cb6a42b5..841fe83e 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -153,6 +153,8 @@ var state = (function() { show: true, size: 0.9 }, + direction: "vertical", + order: "letconname", alignment: "centercenter", rotate: 0, translate: { @@ -173,7 +175,6 @@ var state = (function() { show: true }, newTab: false, - order: "displayname", size: 1, border: 0 }, diff --git a/src/js/update.js b/src/js/update.js index 7441896e..cedae8fe 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -658,14 +658,26 @@ var update = (function() { 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.translate = { x: 0, y: 0 }; - delete data.state.link.item.display.show; - delete data.state.link.item.display.letter; - delete data.state.link.item.display.icon; + if (data.state.link.item.order == "displayname") { + data.state.link.item.display.order = "letconname"; + } 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; } };