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] add link display rotate and translate controls

Browse Source
This commit is contained in:
Kombie 2019-11-24 12:24:02 +00:00 committed by GitHub
parent 8a5633f60e
commit de2a755a23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 397 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
src/css/link.css
View File

@ -121,12 +121,21 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column;
z-index: 3; z-index: 3;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
} }
.is-link-style-block .link-panel-front {
padding: 1em;
}
.is-link-style-list .link-panel-front {
padding: 0.5em 1em;
}
.is-theme-radius .link-panel-front { .is-theme-radius .link-panel-front {
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
} }
@ -165,102 +174,47 @@
box-shadow: var(--layout-shadow-large); box-shadow: var(--layout-shadow-large);
} }
.is-link-style-block .link-panel-front { .is-link-display-alignment-topleft .link-panel-front {
padding: 1em;
flex-direction: column;
}
.is-link-style-block.is-link-display-alignment-topleft .link-panel-front {
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-panel-front { .is-link-display-alignment-topcenter .link-panel-front {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.is-link-style-block.is-link-display-alignment-topright .link-panel-front { .is-link-display-alignment-topright .link-panel-front {
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-panel-front { .is-link-display-alignment-centerleft .link-panel-front {
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
} }
.is-link-style-block.is-link-display-alignment-centercenter .link-panel-front { .is-link-display-alignment-centercenter .link-panel-front {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.is-link-style-block.is-link-display-alignment-centerright .link-panel-front { .is-link-display-alignment-centerright .link-panel-front {
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
} }
.is-link-style-block.is-link-display-alignment-bottomleft .link-panel-front { .is-link-display-alignment-bottomleft .link-panel-front {
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-panel-front { .is-link-display-alignment-bottomcenter .link-panel-front {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.is-link-style-block.is-link-display-alignment-bottomright .link-panel-front { .is-link-display-alignment-bottomright .link-panel-front {
justify-content: flex-end;
align-items: flex-end;
}
.is-link-style-list .link-panel-front {
padding: 0.5em 1em;
flex-direction: row;
}
.is-link-style-list.is-link-display-alignment-topleft .link-panel-front {
justify-content: flex-start;
align-items: flex-start;
}
.is-link-style-list.is-link-display-alignment-topcenter .link-panel-front {
justify-content: center;
align-items: flex-start;
}
.is-link-style-list.is-link-display-alignment-topright .link-panel-front {
justify-content: flex-end;
align-items: flex-start;
}
.is-link-style-list.is-link-display-alignment-centerleft .link-panel-front {
justify-content: flex-start;
align-items: center;
}
.is-link-style-list.is-link-display-alignment-centercenter .link-panel-front {
justify-content: center;
align-items: center;
}
.is-link-style-list.is-link-display-alignment-centerright .link-panel-front {
justify-content: flex-end;
align-items: center;
}
.is-link-style-list.is-link-display-alignment-bottomleft .link-panel-front {
justify-content: flex-start;
align-items: flex-end;
}
.is-link-style-list.is-link-display-alignment-bottomcenter .link-panel-front {
justify-content: center;
align-items: flex-end;
}
.is-link-style-list.is-link-display-alignment-bottomright .link-panel-front {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
} }
@ -313,21 +267,116 @@
/* link display */ /* link display */
.link-display { .link-display {
display: flex;
position: relative;
top: var(--link-item-display-translate-y);
left: var(--link-item-display-translate-x);
font-size: 1em; font-size: 1em;
display: none; transform: rotate(var(--link-item-display-rotate));
transition: font-size var(--layout-timing-extra-fast), margin var(--layout-timing-extra-fast); transform-origin: center;
transition: font-size var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
} }
.is-link-edit.is-link-style-list .link-display { .is-link-edit .link-display {
font-size: 0.5em;
}
.is-link-edit.is-link-style-block .link-display {
font-size: 0.6em; font-size: 0.6em;
} }
.is-link-display-item-show .link-display { .is-link-style-block .link-display {
display: flex; flex-direction: column;
}
.is-link-style-list .link-display {
flex-direction: row;
}
.is-link-style-block.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 {
justify-content: flex-start;
align-items: center;
}
.is-link-style-block.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 {
justify-content: center;
align-items: flex-start;
}
.is-link-style-block.is-link-display-alignment-centercenter .link-display {
justify-content: center;
align-items: center;
}
.is-link-style-block.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 {
justify-content: flex-end;
align-items: flex-start;
}
.is-link-style-block.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 {
justify-content: flex-end;
align-items: flex-end;
}
.is-link-style-list.is-link-display-alignment-topleft .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 {
justify-content: flex-end;
align-items: flex-start;
}
.is-link-style-list.is-link-display-alignment-centerleft .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 {
justify-content: flex-end;
align-items: center;
}
.is-link-style-list.is-link-display-alignment-bottomleft .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-letter,
@ -336,6 +385,14 @@
text-align: center; text-align: center;
} }
.link-display-letcon {
display: none;
}
.is-link-item-display-letcon-show .link-display-letcon {
display: block;
}
.link-display-letter { .link-display-letter {
padding-top: 8%; padding-top: 8%;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
@ -360,11 +417,11 @@
font-size: var(--link-item-display-icon-size); font-size: var(--link-item-display-icon-size);
} }
.is-link-style-block.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child) { .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; margin-bottom: 0.5em;
} }
.is-link-style-list.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child) { .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 margin-right: 0.5em
} }
@ -381,56 +438,52 @@
} }
/* link name */ /* link name */
.link-name { .link-display-name {
margin: 0; margin: 0;
font-size: var(--link-item-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));
display: none; display: none;
transition: color var(--layout-timing-extra-fast), font-size var(--layout-timing-extra-fast); transition: color var(--layout-timing-extra-fast);
} }
.is-link-edit .link-name { .link-display-name,
font-size: 0.6em; .link-display-name:not(:last-child) {
}
.link-name,
.link-name:not(:last-child) {
margin-bottom: 0; margin-bottom: 0;
} }
.is-link-display-alignment-topleft .link-name, .is-link-display-alignment-topleft .link-display-name,
.is-link-display-alignment-centerleft .link-name, .is-link-display-alignment-centerleft .link-display-name,
.is-link-display-alignment-bottomleft .link-name { .is-link-display-alignment-bottomleft .link-display-name {
text-align: left; text-align: left;
} }
.is-link-display-alignment-topcenter .link-name, .is-link-display-alignment-topcenter .link-display-name,
.is-link-display-alignment-centercenter .link-name, .is-link-display-alignment-centercenter .link-display-name,
.is-link-display-alignment-bottomcenter .link-name { .is-link-display-alignment-bottomcenter .link-display-name {
text-align: center; text-align: center;
} }
.is-link-display-alignment-topright .link-name, .is-link-display-alignment-topright .link-display-name,
.is-link-display-alignment-centerright .link-name, .is-link-display-alignment-centerright .link-display-name,
.is-link-display-alignment-bottomright .link-name { .is-link-display-alignment-bottomright .link-display-name {
text-align: right; text-align: right;
} }
.is-link-item-name-show .link-name { .is-link-item-display-name-show .link-display-name {
display: block; display: block;
} }
.link-item:hover .link-name, .link-item:hover .link-display-name,
.link-item:focus .link-name { .link-item:focus .link-display-name {
color: rgb(var(--theme-style-text)); color: rgb(var(--theme-style-text));
} }
.link-panel-front:focus .link-name { .link-panel-front:focus .link-display-name {
color: rgb(var(--theme-style-text)); color: rgb(var(--theme-style-text));
} }
.is-link-style-list .link-name { .is-link-style-list .link-display-name {
white-space: nowrap; white-space: nowrap;
} }

5
src/css/variables.css
View File

@ -46,7 +46,10 @@
--link-item-size: 1em; --link-item-size: 1em;
--link-item-display-letter-size: 2em; --link-item-display-letter-size: 2em;
--link-item-display-icon-size: 2.5em; --link-item-display-icon-size: 2.5em;
--link-item-name-size: 0.9em; --link-item-display-rotate: 0deg;
--link-item-display-translate-x: 0em;
--link-item-display-translate-y: 0em;
--link-item-display-name-size: 0.9em;
--link-item-border: 1; --link-item-border: 1;
/* layout */ /* layout */
--layout-width: 80%; --layout-width: 80%;

54
src/index.html
View File

@ -899,7 +899,7 @@
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
<label for="control-link-item-size">Bookmark Size</label> <label for="control-link-item-size">Bookmark Size</label>
<input id="control-link-item-size" class="control-link-item-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1"> <input id="control-link-item-size" class="control-link-item-size" type="range" min="50" max="500" value="0" step="10" tabindex="-1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-size-default button mb-0" tabindex="-1">Default Bookmark size</button> <button class="control-link-item-size-default button mb-0" tabindex="-1">Default Bookmark size</button>
@ -945,40 +945,64 @@
<label for="control-link-item-display-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label> <label for="control-link-item-display-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
</div> </div>
</div> </div>
<hr>
<div class="input-wrap">
<label for="control-link-item-display-rotate" class="">Content rotation</label>
<input id="control-link-item-display-rotate" class="control-link-item-display-rotate" type="range" min="-180" max="180" value="0" step="5" tabindex="1">
</div>
<div class="button-wrap">
<button class="control-link-item-display-rotate-default button mb-0" tabindex="-1">Default rotation</button>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-display-show" class="control-link-item-display-show" type="checkbox" tabindex="-1"> <label for="control-link-item-display-translate-x" class="">Content horizontally offset</label>
<label for="control-link-item-display-show"><span class="label-icon"></span> Letter/Icon</label> <input id="control-link-item-display-translate-x" class="control-link-item-display-translate-x" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
</div>
<div class="button-wrap">
<button class="control-link-item-display-translate-x-default button mb-0" tabindex="-1">Default horizontal translate</button>
</div>
<hr>
<div class="input-wrap">
<label for="control-link-item-display-translate-y" class="">Content vertically offset</label>
<input id="control-link-item-display-translate-y" class="control-link-item-display-translate-y" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
</div>
<div class="button-wrap">
<button class="control-link-item-display-translate-y-default button mb-0" tabindex="-1">Default vertical translate</button>
</div>
</div>
<hr>
<div class="input-wrap">
<input id="control-link-item-display-letcon-show" class="control-link-item-display-letcon-show" type="checkbox" tabindex="-1">
<label for="control-link-item-display-letcon-show"><span class="label-icon"></span> Letter/Icon</label>
</div> </div>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
<label for="control-link-item-display-letter-size">Letter size</label> <label for="control-link-item-display-letcon-letter-size">Letter size</label>
<input id="control-link-item-display-letter-size" class="control-link-item-display-letter-size" type="range" min="1" max="3000" value="0" tabindex="-1"> <input id="control-link-item-display-letcon-letter-size" class="control-link-item-display-letcon-letter-size" type="range" min="1" max="3000" value="0" tabindex="-1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-display-letter-size-default button mb-0" tabindex="-1">Default Letter size</button> <button class="control-link-item-display-letcon-letter-size-default button mb-0" tabindex="-1">Default Letter size</button>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<label for="control-link-item-display-icon-size">Icon size</label> <label for="control-link-item-display-letcon-icon-size">Icon size</label>
<input id="control-link-item-display-icon-size" class="control-link-item-display-icon-size" type="range" min="1" max="3000" value="0" tabindex="-1"> <input id="control-link-item-display-letcon-icon-size" class="control-link-item-display-letcon-icon-size" type="range" min="1" max="3000" value="0" tabindex="-1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-display-icon-size-default button mb-0" tabindex="-1">Default Icon size</button> <button class="control-link-item-display-letcon-icon-size-default button mb-0" tabindex="-1">Default Icon size</button>
</div> </div>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-link-item-name-show" class="control-link-item-name-show" type="checkbox" tabindex="-1"> <input id="control-link-item-display-name-show" class="control-link-item-display-name-show" type="checkbox" tabindex="-1">
<label for="control-link-item-name-show"><span class="label-icon"></span> Name</label> <label for="control-link-item-display-name-show"><span class="label-icon"></span> Name</label>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
<label for="control-link-item-name-size">Name size</label> <label for="control-link-item-display-name-size">Name size</label>
<input id="control-link-item-name-size" class="control-link-item-name-size" type="range" min="1" max="1500" value="0" tabindex="-1"> <input id="control-link-item-display-name-size" class="control-link-item-display-name-size" type="range" min="1" max="1500" value="0" tabindex="-1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-name-size-default button mb-0" tabindex="-1">Default Name size</button> <button class="control-link-item-display-name-size-default button mb-0" tabindex="-1">Default Name size</button>
</div> </div>
</div> </div>
</div> </div>
@ -1317,7 +1341,7 @@
</div> </div>
<hr> <hr>
<div class="p-wrap"> <div class="p-wrap">
<p>Project repository on <a href="https://github.com/zombieFox/nightTab" class="a-underline" target="_blank" tabindex="-1">Github.</a></p> <p>Project repository on <a href="https://github.com/zombieFox/nightTab" class="a-underline" target="_blank" tabindex="-1">Github</a>.</p>
</div> </div>
<hr> <hr>
<div class="p-wrap"> <div class="p-wrap">

173
src/js/control.js
View File

@ -2004,61 +2004,116 @@ var control = (function() {
render.class(); render.class();
} }
}, { }, {
element: helper.e(".control-link-item-display-show"), element: helper.e(".control-link-item-display-letcon-show"),
path: "link.item.display.show", path: "link.item.display.letcon.show",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
render.class(); render.class();
render.dependents(); render.dependents();
} }
}, { }, {
element: helper.e(".control-link-item-display-letter-size"), element: helper.e(".control-link-item-display-letcon-letter-size"),
path: "link.item.display.letter.size", path: "link.item.display.letcon.letter.size",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
func: function() { func: function() {
link.render.item.display.letter(); link.render.item.display.letter();
} }
}, { }, {
element: helper.e(".control-link-item-display-letter-size-default"), element: helper.e(".control-link-item-display-letcon-letter-size-default"),
type: "button", type: "button",
func: function() { func: function() {
mod.setValue("link.item.display.letter.size", 3); mod.setValue("link.item.display.letcon.letter.size", 3);
link.render.item.display.letter(); link.render.item.display.letter();
render.update(); render.update();
} }
}, { }, {
element: helper.e(".control-link-item-display-icon-size"), element: helper.e(".control-link-item-display-letcon-icon-size"),
path: "link.item.display.icon.size", path: "link.item.display.letcon.icon.size",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
func: function() { func: function() {
link.render.item.display.icon(); link.render.item.display.icon();
} }
}, { }, {
element: helper.e(".control-link-item-display-icon-size-default"), element: helper.e(".control-link-item-display-letcon-icon-size-default"),
type: "button", type: "button",
func: function() { func: function() {
mod.setValue("link.item.display.icon.size", 3); mod.setValue("link.item.display.letcon.icon.size", 3);
link.render.item.display.icon(); link.render.item.display.icon();
render.update(); render.update();
} }
}, { }, {
element: helper.e(".control-link-item-name-size"), element: helper.e(".control-link-item-display-name-show"),
path: "link.item.name.size", path: "link.item.display.name.show",
type: "checkbox",
func: function() {
render.class();
render.dependents();
}
}, {
element: helper.e(".control-link-item-display-name-size"),
path: "link.item.display.name.size",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
func: function() { func: function() {
link.render.item.name(); link.render.item.name();
} }
}, { }, {
element: helper.e(".control-link-item-name-size-default"), element: helper.e(".control-link-item-display-name-size-default"),
type: "button", type: "button",
func: function() { func: function() {
mod.setValue("link.item.name.size", 0.9); mod.setValue("link.item.display.name.size", 0.9);
link.render.item.name(); link.render.item.name();
render.update(); render.update();
} }
}, {
element: helper.e(".control-link-item-display-rotate"),
path: "link.item.display.rotate",
type: "range",
func: function() {
link.render.item.rotate();
}
}, {
element: helper.e(".control-link-item-display-rotate-default"),
type: "button",
func: function() {
mod.setValue("link.item.display.rotate", 0);
link.render.item.rotate();
render.update();
}
}, {
element: helper.e(".control-link-item-display-translate-x"),
path: "link.item.display.translate.x",
type: "range",
valueMod: ["float"],
func: function() {
link.render.item.translate.x();
}
}, {
element: helper.e(".control-link-item-display-translate-x-default"),
type: "button",
func: function() {
mod.setValue("link.item.display.translate.x", 0);
link.render.item.translate.x();
render.update();
}
}, {
element: helper.e(".control-link-item-display-translate-y"),
path: "link.item.display.translate.y",
type: "range",
valueMod: ["float"],
func: function() {
link.render.item.translate.y();
}
}, {
element: helper.e(".control-link-item-display-translate-y-default"),
type: "button",
func: function() {
mod.setValue("link.item.display.translate.y", 0);
link.render.item.translate.y();
render.update();
}
}, { }, {
element: helper.e(".control-link-item-order-displayname"), element: helper.e(".control-link-item-order-displayname"),
path: "link.item.order", path: "link.item.order",
@ -2095,14 +2150,6 @@ var control = (function() {
func: function() { func: function() {
render.class(); render.class();
} }
}, {
element: helper.e(".control-link-item-name-show"),
path: "link.item.name.show",
type: "checkbox",
func: function() {
render.class();
render.dependents();
}
}, { }, {
element: helper.e(".control-link-item-hoverscale"), element: helper.e(".control-link-item-hoverscale"),
path: "link.item.hoverScale.show", path: "link.item.hoverScale.show",
@ -2703,8 +2750,8 @@ 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-name-show"); helper.removeClass(html, "is-link-item-display-name-show");
helper.removeClass(html, "is-link-display-item-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");
@ -2733,11 +2780,11 @@ var control = (function() {
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);
if (state.get().link.item.name.show) { if (state.get().link.item.display.letcon.show) {
helper.addClass(html, "is-link-item-name-show"); helper.addClass(html, "is-link-item-display-letcon-show");
}; };
if (state.get().link.item.display.show) { if (state.get().link.item.display.name.show) {
helper.addClass(html, "is-link-display-item-show"); helper.addClass(html, "is-link-item-display-name-show");
}; };
if (state.get().link.item.url.show) { if (state.get().link.item.url.show) {
helper.addClass(html, "is-link-item-url-show"); helper.addClass(html, "is-link-item-url-show");
@ -3162,17 +3209,26 @@ var control = (function() {
_disable.element("[for=control-link-item-size]", true); _disable.element("[for=control-link-item-size]", true);
_disable.input(".control-link-item-size", true); _disable.input(".control-link-item-size", true);
_disable.input(".control-link-item-size-default", true); _disable.input(".control-link-item-size-default", true);
_disable.input(".control-link-item-display-show", true); _disable.input(".control-link-item-display-letcon-show", true);
_disable.element("[for=control-link-item-display-letter-size]", true); _disable.element("[for=control-link-item-display-letcon-letter-size]", true);
_disable.input(".control-link-item-display-letter-size", true); _disable.input(".control-link-item-display-letcon-letter-size", true);
_disable.input(".control-link-item-display-letter-size-default", true); _disable.input(".control-link-item-display-letcon-letter-size-default", true);
_disable.element("[for=control-link-item-display-icon-size]", true); _disable.element("[for=control-link-item-display-letcon-icon-size]", true);
_disable.input(".control-link-item-display-icon-size", true); _disable.input(".control-link-item-display-letcon-icon-size", true);
_disable.input(".control-link-item-display-icon-size-default", true); _disable.input(".control-link-item-display-letcon-icon-size-default", true);
_disable.input(".control-link-item-name-show", true); _disable.input(".control-link-item-display-name-show", true);
_disable.element("[for=control-link-item-name-size]", true); _disable.element("[for=control-link-item-display-name-size]", true);
_disable.input(".control-link-item-name-size", true); _disable.input(".control-link-item-display-name-size", true);
_disable.input(".control-link-item-name-size-default", true); _disable.input(".control-link-item-display-name-size-default", true);
_disable.element("[for=control-link-item-display-rotate]", true);
_disable.input(".control-link-item-display-rotate", true);
_disable.input(".control-link-item-display-rotate-default", true);
_disable.element("[for=control-link-item-display-translate-x]", true);
_disable.input(".control-link-item-display-translate-x", true);
_disable.input(".control-link-item-display-translate-x-default", 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-default", true);
_disable.input(".control-link-item-order-displayname", true); _disable.input(".control-link-item-order-displayname", true);
_disable.input(".control-link-item-order-namedisplay", true); _disable.input(".control-link-item-order-namedisplay", true);
_disable.element(".control-link-item-order-namedisplay-helper", true); _disable.element(".control-link-item-order-namedisplay-helper", true);
@ -3224,8 +3280,8 @@ var control = (function() {
_disable.element("[for=control-link-item-size]", false); _disable.element("[for=control-link-item-size]", false);
_disable.input(".control-link-item-size", false); _disable.input(".control-link-item-size", false);
_disable.input(".control-link-item-size-default", false); _disable.input(".control-link-item-size-default", false);
_disable.input(".control-link-item-display-show", false); _disable.input(".control-link-item-display-letcon-show", false);
_disable.input(".control-link-item-name-show", false); _disable.input(".control-link-item-display-name-show", false);
_disable.input(".control-link-item-url-show", false); _disable.input(".control-link-item-url-show", false);
_disable.input(".control-link-item-line-show", false); _disable.input(".control-link-item-line-show", false);
_disable.input(".control-link-item-shadow-show", false); _disable.input(".control-link-item-shadow-show", false);
@ -3246,20 +3302,20 @@ var control = (function() {
_disable.input(".control-link-accent-clear", false); _disable.input(".control-link-accent-clear", false);
_disable.input(".control-link-accent-set", false); _disable.input(".control-link-accent-set", false);
_disable.element(".control-link-accent-set-helper", false); _disable.element(".control-link-accent-set-helper", false);
if (state.get().link.item.display.show) { if (state.get().link.item.display.letcon.show) {
_disable.element("[for=control-link-item-display-letter-size]", false); _disable.element("[for=control-link-item-display-letcon-letter-size]", false);
_disable.input(".control-link-item-display-letter-size", false); _disable.input(".control-link-item-display-letcon-letter-size", false);
_disable.input(".control-link-item-display-letter-size-default", false); _disable.input(".control-link-item-display-letcon-letter-size-default", false);
_disable.element("[for=control-link-item-display-icon-size]", false); _disable.element("[for=control-link-item-display-letcon-icon-size]", false);
_disable.input(".control-link-item-display-icon-size", false); _disable.input(".control-link-item-display-letcon-icon-size", false);
_disable.input(".control-link-item-display-icon-size-default", false); _disable.input(".control-link-item-display-letcon-icon-size-default", false);
}; };
if (state.get().link.item.name.show) { if (state.get().link.item.display.name.show) {
_disable.element("[for=control-link-item-name-size]", false); _disable.element("[for=control-link-item-display-name-size]", false);
_disable.input(".control-link-item-name-size", false); _disable.input(".control-link-item-display-name-size", false);
_disable.input(".control-link-item-name-size-default", false); _disable.input(".control-link-item-display-name-size-default", false);
}; };
if (state.get().link.item.display.show || state.get().link.item.name.show) { if (state.get().link.item.display.letcon.show || state.get().link.item.display.name.show) {
_disable.element(".control-link-item-display-alignment-grid", false); _disable.element(".control-link-item-display-alignment-grid", false);
_disable.element(".control-link-item-display-alignment-label", false); _disable.element(".control-link-item-display-alignment-label", false);
_disable.input(".control-link-item-display-alignment-topleft", false); _disable.input(".control-link-item-display-alignment-topleft", false);
@ -3271,8 +3327,17 @@ var control = (function() {
_disable.input(".control-link-item-display-alignment-bottomleft", false); _disable.input(".control-link-item-display-alignment-bottomleft", false);
_disable.input(".control-link-item-display-alignment-bottomcenter", false); _disable.input(".control-link-item-display-alignment-bottomcenter", false);
_disable.input(".control-link-item-display-alignment-bottomright", false); _disable.input(".control-link-item-display-alignment-bottomright", false);
_disable.element("[for=control-link-item-display-rotate]", false);
_disable.input(".control-link-item-display-rotate", false);
_disable.input(".control-link-item-display-rotate-default", false);
_disable.element("[for=control-link-item-display-translate-x]", false);
_disable.input(".control-link-item-display-translate-x", false);
_disable.input(".control-link-item-display-translate-x-default", false);
_disable.element("[for=control-link-item-display-translate-y]", false);
_disable.input(".control-link-item-display-translate-y", false);
_disable.input(".control-link-item-display-translate-y-default", false);
}; };
if (state.get().link.item.display.show && state.get().link.item.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-order-displayname", false);
_disable.input(".control-link-item-order-namedisplay", false); _disable.input(".control-link-item-order-namedisplay", false);
_disable.element(".control-link-item-order-namedisplay-helper", false); _disable.element(".control-link-item-order-namedisplay-helper", false);

43
src/js/link.js
View File

@ -552,9 +552,13 @@ var link = (function() {
}; };
var linkPanelFront = helper.makeNode(linkPanelFrontOptions); var linkPanelFront = helper.makeNode(linkPanelFrontOptions);
var linkPanelBack = helper.node("div|class:link-panel-back"); var linkPanelBack = helper.node("div|class:link-panel-back");
var linkDisplay = helper.node("div|class:link-display"); var linkDisplay = helper.node("div|class:link-display");
var linkDisplayLetcon = helper.node("div|class:link-display-letcon");
var linkDisplayLetter = null; var linkDisplayLetter = null;
var linkDisplayIcon = null; var linkDisplayIcon = null;
if (stagedLink.link.display == "letter") { if (stagedLink.link.display == "letter") {
var letterText = stagedLink.link.letter; var letterText = stagedLink.link.letter;
if (letterText == null) { if (letterText == null) {
@ -568,7 +572,8 @@ var link = (function() {
if (nameText == null) { if (nameText == null) {
nameText = ""; nameText = "";
}; };
var linkName = helper.node("p:" + nameText + "|class:link-name"); var linkName = 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 = "";
if (stagedLink.link.url != null) { if (stagedLink.link.url != null) {
@ -598,17 +603,18 @@ var link = (function() {
var linkRemoveIcon = helper.node("span|class:button-icon icon-close"); var linkRemoveIcon = helper.node("span|class:button-icon icon-close");
if (stagedLink.link.display == "letter") { if (stagedLink.link.display == "letter") {
linkDisplay.appendChild(linkDisplayLetter); linkDisplayLetcon.appendChild(linkDisplayLetter);
} 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) {
linkDisplay.appendChild(linkDisplayIcon); linkDisplayLetcon.appendChild(linkDisplayIcon);
}; };
if (state.get().link.item.order == "displayname") { if (state.get().link.item.order == "displayname") {
linkPanelFront.appendChild(linkDisplay); linkDisplay.appendChild(linkDisplayLetcon);
linkPanelFront.appendChild(linkName); linkDisplay.appendChild(linkName);
} else if (state.get().link.item.order == "namedisplay") { } else if (state.get().link.item.order == "namedisplay") {
linkPanelFront.appendChild(linkName); linkDisplay.appendChild(linkName);
linkPanelFront.appendChild(linkDisplay); linkDisplay.appendChild(linkDisplayLetcon);
}; };
linkPanelFront.appendChild(linkDisplay);
linkLeft.appendChild(linkLeftIcon); linkLeft.appendChild(linkLeftIcon);
linkControl.appendChild(linkLeft); linkControl.appendChild(linkLeft);
linkHandle.appendChild(linkHandleIcon); linkHandle.appendChild(linkHandleIcon);
@ -1027,16 +1033,16 @@ var link = (function() {
display: { display: {
letter: function() { letter: function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em"); html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letcon.letter.size + "em");
}, },
icon: function() { icon: function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em"); html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.letcon.icon.size + "em");
} }
}, },
name: function() { name: function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em"); html.style.setProperty("--link-item-display-name-size", state.get().link.item.display.name.size + "em");
}, },
size: function() { size: function() {
var html = helper.e("html"); var html = helper.e("html");
@ -1057,6 +1063,20 @@ var link = (function() {
border: function() { border: function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-item-border", state.get().link.item.border); html.style.setProperty("--link-item-border", state.get().link.item.border);
},
rotate: function() {
var html = helper.e("html");
html.style.setProperty("--link-item-display-rotate", state.get().link.item.display.rotate + "deg");
},
translate: {
x: function() {
var html = helper.e("html");
html.style.setProperty("--link-item-display-translate-x", state.get().link.item.display.translate.x + "em");
},
y: function() {
var html = helper.e("html");
html.style.setProperty("--link-item-display-translate-y", state.get().link.item.display.translate.y + "em");
}
} }
}; };
@ -1669,6 +1689,9 @@ var link = (function() {
render.item.display.icon(); render.item.display.icon();
render.item.name(); render.item.name();
render.item.border(); render.item.border();
render.item.rotate();
render.item.translate.x();
render.item.translate.y();
render.area.width(); render.area.width();
}; };

11
src/js/state.js
View File

@ -140,9 +140,8 @@ var state = (function() {
}, },
item: { item: {
display: { display: {
letcon: {
show: true, show: true,
size: 2,
alignment: "centercenter",
letter: { letter: {
size: 3 size: 3
}, },
@ -154,6 +153,13 @@ var state = (function() {
show: true, show: true,
size: 0.9 size: 0.9
}, },
alignment: "centercenter",
rotate: 0,
translate: {
x: 0,
y: 0
}
},
url: { url: {
show: true show: true
}, },
@ -166,6 +172,7 @@ var state = (function() {
hoverScale: { hoverScale: {
show: true show: true
}, },
newTab: false,
order: "displayname", order: "displayname",
size: 1, size: 1,
border: 0 border: 0

28
src/js/update.js
View File

@ -625,6 +625,14 @@ var update = (function() {
items: data.bookmarks items: data.bookmarks
}]; }];
data.state.header.position = "sticky"; data.state.header.position = "sticky";
data.state.link.item.display.rotate = 0;
data.state.link.item.display.translate = {
x: 0,
y: 0
};
data.state.link.item.hoverScale = {
show: true
};
data.state.group = { data.state.group = {
area: { area: {
alignment: "left" alignment: "left"
@ -638,6 +646,26 @@ var update = (function() {
add: false add: false
}; };
data.state.dropdown = false; data.state.dropdown = false;
delete data.state.link.item.display.size;
data.state.link.item.display.name = data.state.link.item.name;
delete data.state.link.item.name;
data.state.link.item.display.letcon = {
show: data.state.link.item.display.show,
letter: {
size: data.state.link.item.display.letter.size
},
icon: {
size: data.state.link.item.display.icon.size
}
};
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;
return data; return data;
} }
}; };