[feature] add controls for link item content order

This commit is contained in:
Kuldeep M 2019-07-03 12:05:10 +01:00
parent 8879c968d8
commit 8d89735e6d
8 changed files with 154 additions and 111 deletions

View File

@ -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;
}

View File

@ -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">

View File

@ -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;

View File

@ -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);

View File

@ -160,6 +160,7 @@ var state = (function() {
hoverScale: {
show: true
},
order: "displayname",
size: 1,
newTab: false
},

View File

@ -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;
}
};

View File

@ -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(".");

View File

@ -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"