mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-28 11:03:16 +01:00
[feature] add controls for link item content order
This commit is contained in:
parent
8879c968d8
commit
8d89735e6d
@ -68,13 +68,13 @@
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.is-link-item-hover-scale .link-item:focus-within,
|
||||
.is-link-item-hover-scale .link-item:focus,
|
||||
.is-link-item-hover-scale .link-item:hover {
|
||||
.is-link-item-hoverscale .link-item:focus-within,
|
||||
.is-link-item-hoverscale .link-item:focus,
|
||||
.is-link-item-hoverscale .link-item:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.is-link-item-hover-scale .link-item:active {
|
||||
.is-link-item-hoverscale .link-item:active {
|
||||
transform: scale(1.04);
|
||||
transition: none;
|
||||
}
|
||||
@ -444,6 +444,11 @@
|
||||
transition: color var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.link-name,
|
||||
.link-name:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-left .link-name {
|
||||
text-align: left;
|
||||
}
|
||||
|
@ -549,11 +549,11 @@
|
||||
<label class="control-header-date-format-label">Format</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-date-format-datemonth" class="control-header-date-format-datemonth" type="radio" name="control-header-date-format" value="datemonth" tabindex="1">
|
||||
<label for="control-header-date-format-datemonth">Date / Month</label>
|
||||
<label for="control-header-date-format-datemonth">Date/Month</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-date-format-monthdate" class="control-header-date-format-monthdate" type="radio" name="control-header-date-format" value="monthdate" tabindex="1">
|
||||
<label for="control-header-date-format-monthdate">Month / Date</label>
|
||||
<label for="control-header-date-format-monthdate">Month/Date</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
@ -881,6 +881,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-order-displayname" class="control-link-item-order-displayname" type="radio" name="control-link-item-order" value="displayname" tabindex="1">
|
||||
<label for="control-link-item-order-displayname">Letter/Icon then Name</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-order-namedisplay" class="control-link-item-order-namedisplay" type="radio" name="control-link-item-order" value="namedisplay" tabindex="1">
|
||||
<label for="control-link-item-order-namedisplay">Name then Letter/Icon</label>
|
||||
<p class="input-helper small muted">Only available when Letter/Icon and Name is shown.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="1">
|
||||
@ -893,8 +903,8 @@
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-hover-scale" class="control-link-item-hover-scale" type="checkbox" tabindex="1">
|
||||
<label for="control-link-item-hover-scale">Grow tile on hover</label>
|
||||
<input id="control-link-item-hoverscale" class="control-link-item-hoverscale" type="checkbox" tabindex="1">
|
||||
<label for="control-link-item-hoverscale">Grow tile on hover</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
|
@ -1725,6 +1725,15 @@ var control = (function() {
|
||||
func: function() {
|
||||
link.render.item.size();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-show"),
|
||||
path: "link.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
search.render.engine();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-size-default"),
|
||||
type: "button",
|
||||
@ -1742,101 +1751,6 @@ var control = (function() {
|
||||
link.render.item.size();
|
||||
update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-show"),
|
||||
path: "link.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
search.render.engine();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-show"),
|
||||
path: "link.item.display.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-letter-size"),
|
||||
path: "link.item.display.letter.size",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
func: function() {
|
||||
link.render.item.display.letter();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-letter-size-default"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
_setValue("link.item.display.letter.size", 3);
|
||||
link.render.item.display.letter();
|
||||
update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-icon-size"),
|
||||
path: "link.item.display.icon.size",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
func: function() {
|
||||
link.render.item.display.icon();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-icon-size-default"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
_setValue("link.item.display.icon.size", 3);
|
||||
link.render.item.display.icon();
|
||||
update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-name-show"),
|
||||
path: "link.item.name.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-name-size"),
|
||||
path: "link.item.name.size",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
func: function() {
|
||||
link.render.item.name();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-name-size-default"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
_setValue("link.item.name.size", 0.9);
|
||||
link.render.item.name();
|
||||
update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-url-show"),
|
||||
path: "link.item.url.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-line-show"),
|
||||
path: "link.item.line.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-hover-scale"),
|
||||
path: "link.item.hoverScale",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-alignment-topleft"),
|
||||
path: "link.item.display.alignment",
|
||||
@ -1900,6 +1814,110 @@ var control = (function() {
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-show"),
|
||||
path: "link.item.display.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-letter-size"),
|
||||
path: "link.item.display.letter.size",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
func: function() {
|
||||
link.render.item.display.letter();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-letter-size-default"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
_setValue("link.item.display.letter.size", 3);
|
||||
link.render.item.display.letter();
|
||||
update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-icon-size"),
|
||||
path: "link.item.display.icon.size",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
func: function() {
|
||||
link.render.item.display.icon();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-icon-size-default"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
_setValue("link.item.display.icon.size", 3);
|
||||
link.render.item.display.icon();
|
||||
update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-name-size"),
|
||||
path: "link.item.name.size",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
func: function() {
|
||||
link.render.item.name();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-name-size-default"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
_setValue("link.item.name.size", 0.9);
|
||||
link.render.item.name();
|
||||
update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-order-displayname"),
|
||||
path: "link.item.order",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
link.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-order-namedisplay"),
|
||||
path: "link.item.order",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
link.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-url-show"),
|
||||
path: "link.item.url.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-line-show"),
|
||||
path: "link.item.line.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-name-show"),
|
||||
path: "link.item.name.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-hoverscale"),
|
||||
path: "link.item.hoverScale",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-newtab"),
|
||||
path: "link.newTab",
|
||||
@ -2362,7 +2380,7 @@ var control = (function() {
|
||||
helper.removeClass(html, "is-link-display-alignment-bottomright");
|
||||
helper.removeClass(html, "is-link-url-show");
|
||||
helper.removeClass(html, "is-link-item-line-show");
|
||||
helper.removeClass(html, "is-link-item-hover-scale");
|
||||
helper.removeClass(html, "is-link-item-hoverscale");
|
||||
helper.removeClass(html, "is-link-item-alignment-left");
|
||||
helper.removeClass(html, "is-link-item-alignment-center");
|
||||
helper.removeClass(html, "is-link-item-alignment-right");
|
||||
@ -2388,7 +2406,7 @@ var control = (function() {
|
||||
helper.addClass(html, "is-link-item-line-show");
|
||||
};
|
||||
if (state.get().link.item.hoverScale) {
|
||||
helper.addClass(html, "is-link-item-hover-scale");
|
||||
helper.addClass(html, "is-link-item-hoverscale");
|
||||
};
|
||||
if (state.get().link.edit) {
|
||||
helper.addClass(html, "is-link-edit");
|
||||
@ -2748,7 +2766,7 @@ var control = (function() {
|
||||
helper.e(".control-link-item-name-size-default").disabled = true;
|
||||
helper.e(".control-link-item-url-show").disabled = true;
|
||||
helper.e(".control-link-item-line-show").disabled = true;
|
||||
helper.e(".control-link-item-hover-scale").disabled = true;
|
||||
helper.e(".control-link-item-hoverscale").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-grid").setAttribute("disabled", "");
|
||||
helper.e(".control-link-item-display-alignment-label").setAttribute("disabled", "");
|
||||
helper.e(".control-link-item-display-alignment-topleft").disabled = true;
|
||||
@ -2786,7 +2804,7 @@ var control = (function() {
|
||||
helper.e(".control-link-item-name-show").disabled = false;
|
||||
helper.e(".control-link-item-url-show").disabled = false;
|
||||
helper.e(".control-link-item-line-show").disabled = false;
|
||||
helper.e(".control-link-item-hover-scale").disabled = false;
|
||||
helper.e(".control-link-item-hoverscale").disabled = false;
|
||||
helper.e(".control-link-newtab").disabled = false;
|
||||
helper.e(".control-link-style-block").disabled = false;
|
||||
helper.e(".control-link-style-list").disabled = false;
|
||||
|
@ -497,8 +497,13 @@ var link = (function() {
|
||||
} else if (data.display == "icon" && data.icon.prefix != null && data.icon.name != null) {
|
||||
linkDisplay.appendChild(linkDisplayIcon);
|
||||
};
|
||||
if (state.get().link.item.order == "displayname") {
|
||||
linkPanelFront.appendChild(linkDisplay);
|
||||
linkPanelFront.appendChild(linkName);
|
||||
} else if (state.get().link.item.order == "namedisplay") {
|
||||
linkPanelFront.appendChild(linkName);
|
||||
linkPanelFront.appendChild(linkDisplay);
|
||||
};
|
||||
linkHandle.appendChild(linkHandleIcon);
|
||||
linkControl.appendChild(linkHandle);
|
||||
linkEdit.appendChild(linkEditIcon);
|
||||
|
@ -160,6 +160,7 @@ var state = (function() {
|
||||
hoverScale: {
|
||||
show: true
|
||||
},
|
||||
order: "displayname",
|
||||
size: 1,
|
||||
newTab: false
|
||||
},
|
||||
|
@ -564,6 +564,10 @@ var update = (function() {
|
||||
};
|
||||
data.state.layout.order = data.state.layout.order.toLowerCase();
|
||||
return data;
|
||||
},
|
||||
"3.30.0": function(data) {
|
||||
data.state.link.item.order = "displayname";
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "3.29.1";
|
||||
var current = "3.30.0";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
@ -2,7 +2,7 @@
|
||||
"name": "nightTab",
|
||||
"short_name": "nightTab",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"version": "3.29.1",
|
||||
"version": "3.30.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
Loading…
Reference in New Issue
Block a user