mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-30 09:48:58 +01:00
[feature] add link display rotate and translate controls
This commit is contained in:
Kombie
GitHub
parent
8a5633f60e
commit
de2a755a23
249
src/css/link.css
249
src/css/link.css
@ -121,12 +121,21 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 3;
|
||||
overflow: hidden;
|
||||
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);
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-radius: var(--theme-radius);
|
||||
}
|
||||
@ -165,102 +174,47 @@
|
||||
box-shadow: var(--layout-shadow-large);
|
||||
}
|
||||
|
||||
.is-link-style-block .link-panel-front {
|
||||
padding: 1em;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-topleft .link-panel-front {
|
||||
.is-link-display-alignment-topleft .link-panel-front {
|
||||
justify-content: 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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-style-block.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 {
|
||||
.is-link-display-alignment-bottomright .link-panel-front {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
@ -313,21 +267,116 @@
|
||||
|
||||
/* 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;
|
||||
display: none;
|
||||
transition: font-size var(--layout-timing-extra-fast), margin var(--layout-timing-extra-fast);
|
||||
transform: rotate(var(--link-item-display-rotate));
|
||||
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 {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.is-link-edit.is-link-style-block .link-display {
|
||||
.is-link-edit .link-display {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.is-link-display-item-show .link-display {
|
||||
display: flex;
|
||||
.is-link-style-block .link-display {
|
||||
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,
|
||||
@ -336,6 +385,14 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link-display-letcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-link-item-display-letcon-show .link-display-letcon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.link-display-letter {
|
||||
padding-top: 8%;
|
||||
font-family: var(--font-fjalla);
|
||||
@ -360,11 +417,11 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
@ -381,56 +438,52 @@
|
||||
}
|
||||
|
||||
/* link name */
|
||||
.link-name {
|
||||
.link-display-name {
|
||||
margin: 0;
|
||||
font-size: var(--link-item-name-size);
|
||||
font-size: var(--link-item-display-name-size);
|
||||
font-family: var(--font-regular);
|
||||
color: rgb(var(--theme-gray-12));
|
||||
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 {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.link-name,
|
||||
.link-name:not(:last-child) {
|
||||
.link-display-name,
|
||||
.link-display-name:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-topleft .link-name,
|
||||
.is-link-display-alignment-centerleft .link-name,
|
||||
.is-link-display-alignment-bottomleft .link-name {
|
||||
.is-link-display-alignment-topleft .link-display-name,
|
||||
.is-link-display-alignment-centerleft .link-display-name,
|
||||
.is-link-display-alignment-bottomleft .link-display-name {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-topcenter .link-name,
|
||||
.is-link-display-alignment-centercenter .link-name,
|
||||
.is-link-display-alignment-bottomcenter .link-name {
|
||||
.is-link-display-alignment-topcenter .link-display-name,
|
||||
.is-link-display-alignment-centercenter .link-display-name,
|
||||
.is-link-display-alignment-bottomcenter .link-display-name {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-topright .link-name,
|
||||
.is-link-display-alignment-centerright .link-name,
|
||||
.is-link-display-alignment-bottomright .link-name {
|
||||
.is-link-display-alignment-topright .link-display-name,
|
||||
.is-link-display-alignment-centerright .link-display-name,
|
||||
.is-link-display-alignment-bottomright .link-display-name {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-link-item-name-show .link-name {
|
||||
.is-link-item-display-name-show .link-display-name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.link-item:hover .link-name,
|
||||
.link-item:focus .link-name {
|
||||
.link-item:hover .link-display-name,
|
||||
.link-item:focus .link-display-name {
|
||||
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));
|
||||
}
|
||||
|
||||
.is-link-style-list .link-name {
|
||||
.is-link-style-list .link-display-name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
@ -46,7 +46,10 @@
|
||||
--link-item-size: 1em;
|
||||
--link-item-display-letter-size: 2em;
|
||||
--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;
|
||||
/* layout */
|
||||
--layout-width: 80%;
|
||||
|
||||
@ -899,7 +899,7 @@
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<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 class="button-wrap">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<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-show"><span class="label-icon"></span> Letter/Icon</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-link-item-display-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">
|
||||
<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-letter-size-default button mb-0" tabindex="-1">Default Letter size</button>
|
||||
<button class="control-link-item-display-rotate-default button mb-0" tabindex="-1">Default rotation</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-link-item-display-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">
|
||||
<label for="control-link-item-display-translate-x" class="">Content horizontally offset</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-icon-size-default button mb-0" tabindex="-1">Default Icon size</button>
|
||||
<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-name-show" class="control-link-item-name-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-name-show"><span class="label-icon"></span> Name</label>
|
||||
<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 class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-link-item-display-letcon-letter-size">Letter size</label>
|
||||
<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 class="button-wrap">
|
||||
<button class="control-link-item-display-letcon-letter-size-default button mb-0" tabindex="-1">Default Letter size</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-link-item-display-letcon-icon-size">Icon size</label>
|
||||
<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 class="button-wrap">
|
||||
<button class="control-link-item-display-letcon-icon-size-default button mb-0" tabindex="-1">Default Icon size</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-display-name-show" class="control-link-item-display-name-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-display-name-show"><span class="label-icon"></span> Name</label>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-link-item-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">
|
||||
<label for="control-link-item-display-name-size">Name size</label>
|
||||
<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 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>
|
||||
@ -1317,7 +1341,7 @@
|
||||
</div>
|
||||
<hr>
|
||||
<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>
|
||||
<hr>
|
||||
<div class="p-wrap">
|
||||
|
||||
@ -2004,61 +2004,116 @@ var control = (function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-show"),
|
||||
path: "link.item.display.show",
|
||||
element: helper.e(".control-link-item-display-letcon-show"),
|
||||
path: "link.item.display.letcon.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render.class();
|
||||
render.dependents();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-letter-size"),
|
||||
path: "link.item.display.letter.size",
|
||||
element: helper.e(".control-link-item-display-letcon-letter-size"),
|
||||
path: "link.item.display.letcon.letter.size",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
func: function() {
|
||||
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",
|
||||
func: function() {
|
||||
mod.setValue("link.item.display.letter.size", 3);
|
||||
mod.setValue("link.item.display.letcon.letter.size", 3);
|
||||
link.render.item.display.letter();
|
||||
render.update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-icon-size"),
|
||||
path: "link.item.display.icon.size",
|
||||
element: helper.e(".control-link-item-display-letcon-icon-size"),
|
||||
path: "link.item.display.letcon.icon.size",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
func: function() {
|
||||
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",
|
||||
func: function() {
|
||||
mod.setValue("link.item.display.icon.size", 3);
|
||||
mod.setValue("link.item.display.letcon.icon.size", 3);
|
||||
link.render.item.display.icon();
|
||||
render.update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-name-size"),
|
||||
path: "link.item.name.size",
|
||||
element: helper.e(".control-link-item-display-name-show"),
|
||||
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",
|
||||
valueMod: ["float"],
|
||||
func: function() {
|
||||
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",
|
||||
func: function() {
|
||||
mod.setValue("link.item.name.size", 0.9);
|
||||
mod.setValue("link.item.display.name.size", 0.9);
|
||||
link.render.item.name();
|
||||
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"),
|
||||
path: "link.item.order",
|
||||
@ -2095,14 +2150,6 @@ var control = (function() {
|
||||
func: function() {
|
||||
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"),
|
||||
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-center");
|
||||
helper.removeClass(html, "is-link-area-alignment-right");
|
||||
helper.removeClass(html, "is-link-item-name-show");
|
||||
helper.removeClass(html, "is-link-display-item-show");
|
||||
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");
|
||||
@ -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-style-" + state.get().link.style);
|
||||
helper.addClass(html, "is-link-orientation-" + state.get().link.orientation);
|
||||
if (state.get().link.item.name.show) {
|
||||
helper.addClass(html, "is-link-item-name-show");
|
||||
if (state.get().link.item.display.letcon.show) {
|
||||
helper.addClass(html, "is-link-item-display-letcon-show");
|
||||
};
|
||||
if (state.get().link.item.display.show) {
|
||||
helper.addClass(html, "is-link-display-item-show");
|
||||
if (state.get().link.item.display.name.show) {
|
||||
helper.addClass(html, "is-link-item-display-name-show");
|
||||
};
|
||||
if (state.get().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.input(".control-link-item-size", true);
|
||||
_disable.input(".control-link-item-size-default", true);
|
||||
_disable.input(".control-link-item-display-show", true);
|
||||
_disable.element("[for=control-link-item-display-letter-size]", true);
|
||||
_disable.input(".control-link-item-display-letter-size", true);
|
||||
_disable.input(".control-link-item-display-letter-size-default", true);
|
||||
_disable.element("[for=control-link-item-display-icon-size]", true);
|
||||
_disable.input(".control-link-item-display-icon-size", true);
|
||||
_disable.input(".control-link-item-display-icon-size-default", true);
|
||||
_disable.input(".control-link-item-name-show", true);
|
||||
_disable.element("[for=control-link-item-name-size]", true);
|
||||
_disable.input(".control-link-item-name-size", true);
|
||||
_disable.input(".control-link-item-name-size-default", true);
|
||||
_disable.input(".control-link-item-display-letcon-show", true);
|
||||
_disable.element("[for=control-link-item-display-letcon-letter-size]", true);
|
||||
_disable.input(".control-link-item-display-letcon-letter-size", true);
|
||||
_disable.input(".control-link-item-display-letcon-letter-size-default", true);
|
||||
_disable.element("[for=control-link-item-display-letcon-icon-size]", true);
|
||||
_disable.input(".control-link-item-display-letcon-icon-size", true);
|
||||
_disable.input(".control-link-item-display-letcon-icon-size-default", true);
|
||||
_disable.input(".control-link-item-display-name-show", true);
|
||||
_disable.element("[for=control-link-item-display-name-size]", true);
|
||||
_disable.input(".control-link-item-display-name-size", 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-namedisplay", 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.input(".control-link-item-size", false);
|
||||
_disable.input(".control-link-item-size-default", false);
|
||||
_disable.input(".control-link-item-display-show", false);
|
||||
_disable.input(".control-link-item-name-show", false);
|
||||
_disable.input(".control-link-item-display-letcon-show", false);
|
||||
_disable.input(".control-link-item-display-name-show", false);
|
||||
_disable.input(".control-link-item-url-show", false);
|
||||
_disable.input(".control-link-item-line-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-set", false);
|
||||
_disable.element(".control-link-accent-set-helper", false);
|
||||
if (state.get().link.item.display.show) {
|
||||
_disable.element("[for=control-link-item-display-letter-size]", false);
|
||||
_disable.input(".control-link-item-display-letter-size", false);
|
||||
_disable.input(".control-link-item-display-letter-size-default", false);
|
||||
_disable.element("[for=control-link-item-display-icon-size]", false);
|
||||
_disable.input(".control-link-item-display-icon-size", false);
|
||||
_disable.input(".control-link-item-display-icon-size-default", false);
|
||||
if (state.get().link.item.display.letcon.show) {
|
||||
_disable.element("[for=control-link-item-display-letcon-letter-size]", false);
|
||||
_disable.input(".control-link-item-display-letcon-letter-size", false);
|
||||
_disable.input(".control-link-item-display-letcon-letter-size-default", false);
|
||||
_disable.element("[for=control-link-item-display-letcon-icon-size]", false);
|
||||
_disable.input(".control-link-item-display-letcon-icon-size", false);
|
||||
_disable.input(".control-link-item-display-letcon-icon-size-default", false);
|
||||
};
|
||||
if (state.get().link.item.name.show) {
|
||||
_disable.element("[for=control-link-item-name-size]", false);
|
||||
_disable.input(".control-link-item-name-size", false);
|
||||
_disable.input(".control-link-item-name-size-default", false);
|
||||
if (state.get().link.item.display.name.show) {
|
||||
_disable.element("[for=control-link-item-display-name-size]", false);
|
||||
_disable.input(".control-link-item-display-name-size", 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-label", 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-bottomcenter", 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-namedisplay", false);
|
||||
_disable.element(".control-link-item-order-namedisplay-helper", false);
|
||||
|
||||
@ -552,9 +552,13 @@ var link = (function() {
|
||||
};
|
||||
var linkPanelFront = helper.makeNode(linkPanelFrontOptions);
|
||||
var linkPanelBack = helper.node("div|class:link-panel-back");
|
||||
|
||||
var linkDisplay = helper.node("div|class:link-display");
|
||||
var linkDisplayLetcon = helper.node("div|class:link-display-letcon");
|
||||
|
||||
var linkDisplayLetter = null;
|
||||
var linkDisplayIcon = null;
|
||||
|
||||
if (stagedLink.link.display == "letter") {
|
||||
var letterText = stagedLink.link.letter;
|
||||
if (letterText == null) {
|
||||
@ -568,7 +572,8 @@ var link = (function() {
|
||||
if (nameText == null) {
|
||||
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 url = "";
|
||||
if (stagedLink.link.url != null) {
|
||||
@ -598,17 +603,18 @@ var link = (function() {
|
||||
var linkRemoveIcon = helper.node("span|class:button-icon icon-close");
|
||||
|
||||
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) {
|
||||
linkDisplay.appendChild(linkDisplayIcon);
|
||||
linkDisplayLetcon.appendChild(linkDisplayIcon);
|
||||
};
|
||||
if (state.get().link.item.order == "displayname") {
|
||||
linkPanelFront.appendChild(linkDisplay);
|
||||
linkPanelFront.appendChild(linkName);
|
||||
linkDisplay.appendChild(linkDisplayLetcon);
|
||||
linkDisplay.appendChild(linkName);
|
||||
} else if (state.get().link.item.order == "namedisplay") {
|
||||
linkPanelFront.appendChild(linkName);
|
||||
linkPanelFront.appendChild(linkDisplay);
|
||||
linkDisplay.appendChild(linkName);
|
||||
linkDisplay.appendChild(linkDisplayLetcon);
|
||||
};
|
||||
linkPanelFront.appendChild(linkDisplay);
|
||||
linkLeft.appendChild(linkLeftIcon);
|
||||
linkControl.appendChild(linkLeft);
|
||||
linkHandle.appendChild(linkHandleIcon);
|
||||
@ -1027,16 +1033,16 @@ var link = (function() {
|
||||
display: {
|
||||
letter: function() {
|
||||
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() {
|
||||
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() {
|
||||
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() {
|
||||
var html = helper.e("html");
|
||||
@ -1057,6 +1063,20 @@ var link = (function() {
|
||||
border: function() {
|
||||
var html = helper.e("html");
|
||||
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.name();
|
||||
render.item.border();
|
||||
render.item.rotate();
|
||||
render.item.translate.x();
|
||||
render.item.translate.y();
|
||||
render.area.width();
|
||||
};
|
||||
|
||||
|
||||
@ -140,20 +140,26 @@ var state = (function() {
|
||||
},
|
||||
item: {
|
||||
display: {
|
||||
show: true,
|
||||
size: 2,
|
||||
alignment: "centercenter",
|
||||
letter: {
|
||||
size: 3
|
||||
letcon: {
|
||||
show: true,
|
||||
letter: {
|
||||
size: 3
|
||||
},
|
||||
icon: {
|
||||
size: 3
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
size: 3
|
||||
name: {
|
||||
show: true,
|
||||
size: 0.9
|
||||
},
|
||||
alignment: "centercenter",
|
||||
rotate: 0,
|
||||
translate: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
name: {
|
||||
show: true,
|
||||
size: 0.9
|
||||
},
|
||||
url: {
|
||||
show: true
|
||||
},
|
||||
@ -166,6 +172,7 @@ var state = (function() {
|
||||
hoverScale: {
|
||||
show: true
|
||||
},
|
||||
newTab: false,
|
||||
order: "displayname",
|
||||
size: 1,
|
||||
border: 0
|
||||
|
||||
@ -625,6 +625,14 @@ var update = (function() {
|
||||
items: data.bookmarks
|
||||
}];
|
||||
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 = {
|
||||
area: {
|
||||
alignment: "left"
|
||||
@ -638,6 +646,26 @@ var update = (function() {
|
||||
add: 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;
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user