[feature] adding link display gutter control

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {

src/css/link.css

@@ -295,19 +295,19 @@
 }
 
 .is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display-letcon {
-  margin-right: 0.5em;
+  margin-right: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
 }
 
 .is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display-letcon {
-  margin-left: 0.5em;
+  margin-left: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
 }
 
 .is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display-letcon {
-  margin-bottom: 0.5em;
+  margin-bottom: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
 }
 
 .is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display-letcon {
-  margin-top: 0.5em;
+  margin-top: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
 }
 
 .is-link-display-alignment-topleft .link-display {

src/css/variables.css

@@ -44,6 +44,8 @@
   /* link */
   --link-area-width:                                    100%;
   --link-item-size:                                     1em;
+  --link-item-display-space:                            0.25em;
+  --link-item-display-gutter:                           2;
   --link-item-display-letter-size:                      2em;
   --link-item-display-icon-size:                        2.5em;
   --link-item-display-rotate:                           0deg;

src/index.html

@@ -1045,7 +1045,7 @@
                   </div>
                   <hr>
                   <div class="input-wrap">
-                    <label for="control-link-item-display-rotate" class="">Content rotation</label>
+                    <label for="control-link-item-display-rotate">Content rotation</label>
                     <div class="form-group form-group-block mb-0">
                       <input id="control-link-item-display-rotate" class="control-link-item-display-rotate mr-3" type="range" min="-180" max="180" value="0" step="5" tabindex="1">
                       <div class="control-link-item-display-rotate-count form-group-text form-group-medium form-group-radius-left"></div>
@@ -1056,7 +1056,7 @@
                   </div>
                   <hr>
                   <div class="input-wrap">
-                    <label for="control-link-item-display-translate-x" class="">Content horizontally offset</label>
+                    <label for="control-link-item-display-translate-x">Content horizontally offset</label>
                     <div class="form-group form-group-block mb-0">
                       <input id="control-link-item-display-translate-x" class="control-link-item-display-translate-x mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
                       <div class="control-link-item-display-translate-x-count form-group-text form-group-medium form-group-radius-left"></div>
@@ -1067,7 +1067,7 @@
                   </div>
                   <hr>
                   <div class="input-wrap">
-                    <label for="control-link-item-display-translate-y" class="">Content vertically offset</label>
+                    <label for="control-link-item-display-translate-y">Content vertically offset</label>
                     <div class="form-group form-group-block mb-0">
                       <input id="control-link-item-display-translate-y" class="control-link-item-display-translate-y mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
                       <div class="control-link-item-display-translate-y-count form-group-text form-group-medium form-group-radius-left"></div>
@@ -1076,6 +1076,17 @@
                   <div class="button-wrap">
                     <button class="control-link-item-display-translate-y-default button mb-0" tabindex="-1">Default vertical translate</button>
                   </div>
+                  <hr>
+                  <div class="input-wrap">
+                    <label for="control-link-item-display-gutter">Content gutter</label>
+                    <div class="form-group form-group-block mb-0">
+                      <input id="control-link-item-display-gutter" class="control-link-item-display-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="1">
+                      <div class="control-link-item-display-gutter-count form-group-text form-group-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <div class="button-wrap">
+                    <button class="control-link-item-display-gutter-default button mb-0" tabindex="-1">Default vertical translate</button>
+                  </div>
                 </div>
                 <hr>
                 <div class="input-wrap">

src/js/control.js

@@ -2333,6 +2333,26 @@ var control = (function() {
       link.render.item.translate.y();
       render.update();
     }
+  }, {
+    element: helper.e(".control-link-item-display-gutter"),
+    path: "link.item.display.gutter",
+    type: "range",
+    rangeCountElement: helper.e(".control-link-item-display-gutter-count"),
+    func: function() {
+      link.render.item.gutter();
+      render.range.count(this);
+    }
+  }, {
+    element: helper.e(".control-link-item-display-gutter-default"),
+    type: "button",
+    func: function() {
+      mod.setValue("link.item.display.gutter", helper.getObject({
+        object: state.mod.default,
+        path: "link.item.display.gutter"
+      }));
+      link.render.item.gutter();
+      render.update();
+    }
   }, {
     element: helper.e(".control-link-item-display-direction-horizontal"),
     path: "link.item.display.direction",
@@ -3508,6 +3528,10 @@ var control = (function() {
       _disable.input(".control-link-item-display-translate-y", true);
       _disable.element(".control-link-item-display-translate-y-count", true);
       _disable.input(".control-link-item-display-translate-y-default", true);
+      _disable.element("[for=control-link-item-display-gutter]", true);
+      _disable.input(".control-link-item-display-gutter", true);
+      _disable.element(".control-link-item-display-gutter-count", true);
+      _disable.input(".control-link-item-display-gutter-default", true);
       _disable.input(".control-link-item-display-direction-horizontal", true);
       _disable.input(".control-link-item-display-direction-vertical", true);
       _disable.input(".control-link-item-display-order-letconname", true);
@@ -3636,6 +3660,10 @@ var control = (function() {
           _disable.input(".control-link-item-display-order-nameletcon", false);
           _disable.element(".control-link-item-display-direction-helper", false);
           _disable.element(".control-link-item-display-order-helper", false);
+          _disable.element("[for=control-link-item-display-gutter]", false);
+          _disable.input(".control-link-item-display-gutter", false);
+          _disable.element(".control-link-item-display-gutter-count", false);
+          _disable.input(".control-link-item-display-gutter-default", false);
         };
       };
     };

src/js/link.js

@@ -1080,6 +1080,10 @@ var link = (function() {
         var html = helper.e("html");
         html.style.setProperty("--link-item-display-translate-y", state.get.current().link.item.display.translate.y + "em");
       }
+    },
+    gutter: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--link-item-display-gutter", state.get.current().link.item.display.gutter);
     }
   };
 
@@ -1717,6 +1721,7 @@ var link = (function() {
     render.item.rotate();
     render.item.translate.x();
     render.item.translate.y();
+    render.item.gutter();
     render.area.width();
   };
 

src/js/state.js

@@ -153,6 +153,7 @@ var state = (function() {
             show: true,
             size: 0.9
           },
+          gutter: 2,
           direction: "vertical",
           order: "letconname",
           alignment: "centercenter",
@@ -301,6 +302,7 @@ var state = (function() {
           name: {
             size: 0.9
           },
+          gutter: 2,
           rotate: 0,
           translate: {
             x: 0,

src/js/update.js

@@ -681,6 +681,10 @@ var update = (function() {
       delete data.state.link.fit;
       data.state.header.search.engine.duckduckgo.name = "DuckDuckGo";
       return data;
+    },
+    "4.1.0": function(data) {
+      data.state.link.item.display.gutter = 2;
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.0.4";
+  var current = "4.1.0";
 
   var name = "Enchanting Aardvark";
 

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": "4.0.4",
+  "version": "4.1.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"