[feature] add controls for link item content order

Author: zombieFox

src/css/link.css

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

src/index.html

@@ -549,11 +549,11 @@ <h1 class="menu-item-header-text">Date</h1>
 <labelclass="control-header-date-format-label">Format</label>
 <divclass="input-wrap">
 <inputid="control-header-date-format-datemonth" class="control-header-date-format-datemonth" type="radio" name="control-header-date-format" value="datemonth" tabindex="1">
-<labelfor="control-header-date-format-datemonth">Date / Month</label>
+<labelfor="control-header-date-format-datemonth">Date/Month</label>
 </div>
 <divclass="input-wrap">
 <inputid="control-header-date-format-monthdate" class="control-header-date-format-monthdate" type="radio" name="control-header-date-format" value="monthdate" tabindex="1">
-<labelfor="control-header-date-format-monthdate">Month / Date</label>
+<labelfor="control-header-date-format-monthdate">Month/Date</label>
 </div>
 <hr>
 <divclass="input-wrap">
@@ -881,6 +881,16 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
 </div>
 </div>
 </div>
+<hr>
+<divclass="input-wrap">
+<inputid="control-link-item-order-displayname" class="control-link-item-order-displayname" type="radio" name="control-link-item-order" value="displayname" tabindex="1">
+<labelfor="control-link-item-order-displayname">Letter/Icon then Name</label>
+</div>
+<divclass="input-wrap">
+<inputid="control-link-item-order-namedisplay" class="control-link-item-order-namedisplay" type="radio" name="control-link-item-order" value="namedisplay" tabindex="1">
+<labelfor="control-link-item-order-namedisplay">Name then Letter/Icon</label>
+<pclass="input-helper small muted">Only available when Letter/Icon and Name is shown.</p>
+</div>
 <hr>
 <divclass="input-wrap">
 <inputid="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="1">
@@ -893,8 +903,8 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
 </div>
 <hr>
 <divclass="input-wrap">
-<inputid="control-link-item-hover-scale" class="control-link-item-hover-scale" type="checkbox" tabindex="1">
-<labelfor="control-link-item-hover-scale">Grow tile on hover</label>
+<inputid="control-link-item-hoverscale" class="control-link-item-hoverscale" type="checkbox" tabindex="1">
+<labelfor="control-link-item-hoverscale">Grow tile on hover</label>
 </div>
 <hr>
 <divclass="input-wrap">

src/js/control.js

@@ -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",
@@ -1743,13 +1752,67 @@ var control = (function(){
 update();
 }
 },{
-element: helper.e(".control-link-show"),
-path: "link.show",
-type: "checkbox",
+element: helper.e(".control-link-item-display-alignment-topleft"),
+path: "link.item.display.alignment",
+type: "radio",
+func: function(){
+render();
+}
+},{
+element: helper.e(".control-link-item-display-alignment-topcenter"),
+path: "link.item.display.alignment",
+type: "radio",
+func: function(){
+render();
+}
+},{
+element: helper.e(".control-link-item-display-alignment-topright"),
+path: "link.item.display.alignment",
+type: "radio",
+func: function(){
+render();
+}
+},{
+element: helper.e(".control-link-item-display-alignment-centerleft"),
+path: "link.item.display.alignment",
+type: "radio",
+func: function(){
+render();
+}
+},{
+element: helper.e(".control-link-item-display-alignment-centercenter"),
+path: "link.item.display.alignment",
+type: "radio",
+func: function(){
+render();
+}
+},{
+element: helper.e(".control-link-item-display-alignment-centerright"),
+path: "link.item.display.alignment",
+type: "radio",
+func: function(){
+render();
+}
+},{
+element: helper.e(".control-link-item-display-alignment-bottomleft"),
+path: "link.item.display.alignment",
+type: "radio",
+func: function(){
+render();
+}
+},{
+element: helper.e(".control-link-item-display-alignment-bottomcenter"),
+path: "link.item.display.alignment",
+type: "radio",
+func: function(){
+render();
+}
+},{
+element: helper.e(".control-link-item-display-alignment-bottomright"),
+path: "link.item.display.alignment",
+type: "radio",
 func: function(){
 render();
-dependents();
-search.render.engine();
 }
 },{
 element: helper.e(".control-link-item-display-show"),
@@ -1791,14 +1854,6 @@ var control = (function(){
 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",
@@ -1816,87 +1871,50 @@ var control = (function(){
 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",
-type: "radio",
-func: function(){
-render();
-}
-},{
-element: helper.e(".control-link-item-display-alignment-topcenter"),
-path: "link.item.display.alignment",
-type: "radio",
-func: function(){
-render();
-}
-},{
-element: helper.e(".control-link-item-display-alignment-topright"),
-path: "link.item.display.alignment",
-type: "radio",
-func: function(){
-render();
-}
-},{
-element: helper.e(".control-link-item-display-alignment-centerleft"),
-path: "link.item.display.alignment",
+element: helper.e(".control-link-item-order-displayname"),
+path: "link.item.order",
 type: "radio",
 func: function(){
-render();
+link.clear();
+link.render.item.all();
+sortable(".link-area");
 }
 },{
-element: helper.e(".control-link-item-display-alignment-centercenter"),
-path: "link.item.display.alignment",
+element: helper.e(".control-link-item-order-namedisplay"),
+path: "link.item.order",
 type: "radio",
 func: function(){
-render();
+link.clear();
+link.render.item.all();
+sortable(".link-area");
 }
 },{
-element: helper.e(".control-link-item-display-alignment-centerright"),
-path: "link.item.display.alignment",
-type: "radio",
+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-display-alignment-bottomleft"),
-path: "link.item.display.alignment",
-type: "radio",
+element: helper.e(".control-link-item-line-show"),
+path: "link.item.line.show",
+type: "checkbox",
 func: function(){
 render();
 }
 },{
-element: helper.e(".control-link-item-display-alignment-bottomcenter"),
-path: "link.item.display.alignment",
-type: "radio",
+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-display-alignment-bottomright"),
-path: "link.item.display.alignment",
-type: "radio",
+element: helper.e(".control-link-item-hoverscale"),
+path: "link.item.hoverScale",
+type: "checkbox",
 func: function(){
 render();
 }
@@ -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;

src/js/link.js

@@ -497,8 +497,13 @@ var link = (function(){
 }elseif(data.display=="icon"&&data.icon.prefix!=null&&data.icon.name!=null){
 linkDisplay.appendChild(linkDisplayIcon);
 };
-linkPanelFront.appendChild(linkDisplay);
-linkPanelFront.appendChild(linkName);
+if(state.get().link.item.order=="displayname"){
+linkPanelFront.appendChild(linkDisplay);
+linkPanelFront.appendChild(linkName);
+}elseif(state.get().link.item.order=="namedisplay"){
+linkPanelFront.appendChild(linkName);
+linkPanelFront.appendChild(linkDisplay);
+};
 linkHandle.appendChild(linkHandleIcon);
 linkControl.appendChild(linkHandle);
 linkEdit.appendChild(linkEditIcon);

src/js/state.js

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

src/js/update.js

@@ -564,6 +564,10 @@ var update = (function(){
 };
 data.state.layout.order=data.state.layout.order.toLowerCase();
 returndata;
+},
+"3.30.0": function(data){
+data.state.link.item.order="displayname";
+returndata;
 }
 };
 

src/js/version.js

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="3.29.1";
+varcurrent="3.30.0";
 
 varcompare=function(a,b){
 varpa=a.split(".");

src/manifest.json

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