[feature] add control for link item line

Author: zombieFox

css/link.css

@@ -65,7 +65,7 @@
   background-color: rgb(var(--gray-02));
   border-radius: var(--radius);
   width: 100%;
-  height: calc(100% - var(--line-width));
+  height: 100%;
   display: flex;
   z-index: 3;
   overflow: hidden;
@@ -74,6 +74,10 @@
   transition: background-color var(--animation-speed-fast) ease-in-out, height var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
 }
 
+.is-link-item-line-show .link-panel-front {
+  height: calc(100% - var(--line-width));
+}
+
 .link-panel-front:hover,
 .link-panel-front:focus {
   background-color: rgb(var(--gray-03));

index.html

@@ -747,6 +747,11 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
                   </div>
                 </div>
                 <hr>
+                <div class="input-wrap">
+                  <input id="control-link-item-line-show" class="control-link-item-line-show" type="checkbox" tabindex="1">
+                  <label for="control-link-item-line-show">Tile line</label>
+                </div>
+                <hr>
                 <div class="input-wrap">
                   <label for="control-link-area-gap">Gap size</label>
                   <input id="control-link-area-gap" class="control-link-area-gap" type="range" min="0" max="20" value="0" tabindex="1">

js/control.js

@@ -1419,6 +1419,13 @@ var control = (function() {
     func: function() {
       render();
     }
+  }, {
+    element: helper.e(".control-link-item-line-show"),
+    path: "link.item.line.show",
+    type: "checkbox",
+    func: function() {
+      render();
+    }
   }, {
     element: helper.e(".control-link-area-gap"),
     path: "link.area.gap",
@@ -1849,6 +1856,7 @@ var control = (function() {
       helper.removeClass(html, "is-link-url-show");
       helper.removeClass(html, "is-link-url-style-light");
       helper.removeClass(html, "is-link-url-style-dark");
+      helper.removeClass(html, "is-link-item-line-show");
       helper.removeClass(html, "is-link-item-alignment-horizontal-left");
       helper.removeClass(html, "is-link-item-alignment-horizontal-center");
       helper.removeClass(html, "is-link-item-alignment-horizontal-right");
@@ -1872,6 +1880,9 @@ var control = (function() {
         if (state.get().link.item.url.show) {
           helper.addClass(html, "is-link-url-show");
         };
+        if (state.get().link.item.line.show) {
+          helper.addClass(html, "is-link-item-line-show");
+        };
         if (state.get().link.edit) {
           helper.addClass(html, "is-link-edit");
           link.render.tabIndex();
@@ -2200,6 +2211,7 @@ var control = (function() {
       helper.e(".control-link-item-url-show").disabled = true;
       helper.e(".control-link-item-url-style-dark").disabled = true;
       helper.e(".control-link-item-url-style-light").disabled = true;
+      helper.e(".control-link-item-line-show").disabled = true;
       helper.e("[for=control-link-area-gap]").setAttribute("disabled", "");
       helper.e(".control-link-area-gap").disabled = true;
       helper.e(".control-link-item-display-alignment-horizontal-label").setAttribute("disabled", "");
@@ -2231,6 +2243,7 @@ var control = (function() {
         helper.e(".control-link-item-display-show").disabled = false;
         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("[for=control-link-area-gap]").removeAttribute("disabled");
         helper.e(".control-link-area-gap").disabled = false;
         helper.e(".control-link-new-tab").disabled = false;

js/state.js

@@ -164,6 +164,9 @@ var state = (function() {
           show: true,
           style: "dark"
         },
+        line: {
+          show: true
+        }
       },
       show: true,
       newTab: false,

js/update.js

@@ -419,6 +419,14 @@ var update = (function() {
     return data;
   };
 
+  var _update_370 = function(data) {
+    data.version = "3.7.0";
+    data.state.link.item.line = {
+      show: true
+    };
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -529,6 +537,10 @@ var update = (function() {
         console.log("\t= running update 3.6.0");
         data = _update_360(data);
       };
+      if (version.compare(data.version, "3.7.0") == -1) {
+        console.log("\t= running update 3.7.0");
+        data = _update_370(data);
+      };
     };
     // if no update is needed
     // version bump

js/version.js

@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "3.6.0";
+  var current = "3.7.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");