[feature] add controls for link item content order

src/css/link.css

@@ -68,13 +68,13 @@
   outline: 0;
 }
 
-.is-link-item-hover-scale .link-item:focus-within,
+.is-link-item-hoverscale .link-item:focus-within,
-.is-link-item-hover-scale .link-item:focus,
+.is-link-item-hoverscale .link-item:focus,
-.is-link-item-hover-scale .link-item:hover {
+.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 @@
               <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">
+                  <input id="control-link-item-hoverscale" class="control-link-item-hoverscale" type="checkbox" tabindex="1">
-                  <label for="control-link-item-hover-scale">Grow tile on hover</label>
+                  <label for="control-link-item-hoverscale">Grow tile on hover</label>
                 </div>
                 <hr>
                 <div class="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",
@@ -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;

src/js/link.js

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

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();
       return data;
+    },
+    "3.30.0": function(data) {
+      data.state.link.item.order = "displayname";
+      return data;
     }
   };
 

src/js/version.js

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

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"