[feature] add link orientation controls

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "3.80.0",
+  "version": "3.81.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

@@ -95,16 +95,27 @@
 .link-panel-front {
   background-color: rgb(var(--theme-gray-02));
   border-radius: var(--theme-radius);
+  position: absolute;
+  left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   z-index: 3;
   overflow: hidden;
-  position: relative;
   user-select: none;
   transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
 }
 
+.is-link-orientation-top .link-panel-front {
+  top: inherit;
+  bottom: 0;
+}
+
+.is-link-orientation-bottom .link-panel-front {
+  top: 0;
+  bottom: inherit;
+}
+
 .is-link-item-border .link-panel-front {
   border: calc(calc(var(--layout-line-width) / 2) * var(--link-item-border)) solid rgb(var(--theme-accent));
 }
@@ -244,23 +255,57 @@
   top: var(--layout-line-width);
   left: var(--layout-line-width);
   display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
   align-items: stretch;
+  justify-content: flex-end;
   z-index: 2;
-  transition: height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast);
+  transition: height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), clip-path var(--layout-timing-extra-fast);
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+}
+
+.is-link-orientation-top .link-panel-back {
+  flex-direction: column-reverse;
+}
+
+.is-link-orientation-bottom .link-panel-back {
+  flex-direction: column;
 }
 
 .is-link-item-line-show .link-panel-back {
   height: calc(100% - var(--layout-line-width));
 }
 
-.is-link-edit .link-panel-back,
+.is-link-item-line-show.is-link-orientation-top .link-panel-back {
-.is-link-item-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back,
+  top: 0;
-.is-link-item-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back,
+}
-.is-link-item-url-show:not(.is-link-item-line-show) .link-item:hover .link-panel-back {
+
+.is-link-item-line-show.is-link-orientation-bottom .link-panel-back {
+  top: var(--layout-line-width);
+}
+
+.is-link-orientation-top.is-link-edit .link-panel-back,
+.is-link-orientation-bottom.is-link-edit .link-panel-back {
   height: 100%;
   top: 0;
+}
+
+.link-item:focus .link-panel-back,
+.link-item:focus-within .link-panel-back,
+.link-item:hover .link-panel-back {
+  height: 100%;
+  top: 0;
+}
+
+.is-link-orientation-top.is-link-edit .link-panel-back,
+.is-link-orientation-top .link-item:focus .link-panel-back,
+.is-link-orientation-top .link-item:focus-within .link-panel-back,
+.is-link-orientation-top .link-item:hover .link-panel-back {
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--layout-line-width)), 0 calc(100% - var(--layout-line-width)));
+}
+
+.is-link-orientation-bottom.is-link-edit .link-panel-back,
+.is-link-orientation-bottom .link-item:focus .link-panel-back,
+.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
+.is-link-orientation-bottom .link-item:hover .link-panel-back {
   clip-path: polygon(0 var(--layout-line-width), 100% var(--layout-line-width), 100% 100%, 0 100%);
 }
 
@@ -357,9 +402,9 @@
   justify-content: flex-end;
 }
 
-.is-link-item-url-show .link-item:focus-within .link-url,
+.is-link-item-url-show:not(.is-link-edit) .link-item:focus-within .link-url,
-.is-link-item-url-show .link-item:focus .link-url,
+.is-link-item-url-show:not(.is-link-edit) .link-item:focus .link-url,
-.is-link-item-url-show .link-item:hover .link-url {
+.is-link-item-url-show:not(.is-link-edit) .link-item:hover .link-url {
   height: var(--link-item-url-height);
 }
 
@@ -502,7 +547,7 @@
 .is-link-edit .link-item:hover .link-panel-front,
 .is-link-edit .link-item:focus .link-panel-front {
   height: calc(100% - var(--link-item-edit-height));
-  box-shadow: var(--layout-shadow-medium);
+  box-shadow: var(--layout-shadow-small);
 }
 
 .is-link-edit.is-link-item-url-show .link-item:focus .link-panel-front,

src/css/variables.css

@@ -56,9 +56,9 @@
   --layout-timing-medium: 0.6s ease-in-out;
   --layout-timing-slow: 0.8s ease-in-out;
   --layout-timing-extra-slow: 1s ease-in-out;
-  --layout-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
+  --layout-shadow-small: 0 0 2px rgba(0, 0, 0, 0.2), 0 0 4px rgba(0, 0, 0, 0.1);
-  --layout-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
+  --layout-shadow-medium: 0 0 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.1);
-  --layout-shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2);
+  --layout-shadow-large: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 12px rgba(0, 0, 0, 0.1);
   /* background */
   --background-color-theme: var(--theme-gray-01);
   --background-color-custom: rgb(0, 0, 0);

src/index.html

@@ -943,6 +943,22 @@
               <p class="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide with content stacked horizontally.</p>
             </div>
           </div>
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Orientation</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <input id="control-link-orientation-top" class="control-link-orientation-top" type="radio" name="control-link-orientation" value="top" tabindex="-1">
+                <label for="control-link-orientation-top">Top</label>
+              </div>
+              <div class="input-wrap">
+                <input id="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1">
+                <label for="control-link-orientation-bottom">Bottom</label>
+              </div>
+              <p class="control-link-orientation-helper form-helper small">Display the URL and Controls either at the top of bottom of a Tile.</p>
+            </div>
+          </div>
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Sort</h1>

src/js/control.js

@@ -1991,6 +1991,20 @@ var control = (function() {
     func: function() {
       render.class();
     }
+  }, {
+    element: helper.e(".control-link-orientation-top"),
+    path: "link.orientation",
+    type: "radio",
+    func: function() {
+      render.class();
+    }
+  }, {
+    element: helper.e(".control-link-orientation-bottom"),
+    path: "link.orientation",
+    type: "radio",
+    func: function() {
+      render.class();
+    }
   }, {
     element: helper.e(".control-link-sort-letter"),
     type: "button",
@@ -2524,12 +2538,15 @@ var control = (function() {
       helper.removeClass(html, "is-link-item-border");
       helper.removeClass(html, "is-link-style-list");
       helper.removeClass(html, "is-link-style-block");
+      helper.removeClass(html, "is-link-orientation-top");
+      helper.removeClass(html, "is-link-orientation-bottom");
       helper.removeClass(html, "is-link-edit");
       if (state.get().link.show) {
         helper.addClass(html, "is-link-show");
         helper.addClass(html, "is-link-area-alignment-" + state.get().link.area.alignment);
         helper.addClass(html, "is-link-display-alignment-" + state.get().link.item.display.alignment);
         helper.addClass(html, "is-link-style-" + state.get().link.style);
+        helper.addClass(html, "is-link-orientation-" + state.get().link.orientation);
         if (state.get().link.item.name.show) {
           helper.addClass(html, "is-link-item-name-show");
         };
@@ -2969,6 +2986,9 @@ var control = (function() {
       _disable.element(".control-link-style-block-helper", true);
       _disable.input(".control-link-style-list", true);
       _disable.element(".control-link-style-list-helper", true);
+      _disable.input(".control-link-orientation-top", true);
+      _disable.input(".control-link-orientation-bottom", true);
+      _disable.element(".control-link-orientation-helper", true);
       _disable.input(".control-link-sort-name", true);
       _disable.input(".control-link-sort-letter", true);
       _disable.input(".control-link-sort-icon", true);
@@ -3001,6 +3021,9 @@ var control = (function() {
         _disable.element(".control-link-style-block-helper", false);
         _disable.input(".control-link-style-list", false);
         _disable.element(".control-link-style-list-helper", false);
+        _disable.input(".control-link-orientation-top", false);
+        _disable.input(".control-link-orientation-bottom", false);
+        _disable.element(".control-link-orientation-helper", false);
         _disable.input(".control-link-sort-name", false);
         _disable.input(".control-link-sort-letter", false);
         _disable.input(".control-link-sort-icon", false);

src/js/state.js

@@ -102,10 +102,10 @@ var state = (function() {
       },
       button: {
         editAdd: {
-          show: true,
+          show: true
         },
         accent: {
-          show: true,
+          show: true
         },
         style: "box",
         size: 1
@@ -151,7 +151,7 @@ var state = (function() {
         },
         name: {
           show: true,
-          size: 0.9,
+          size: 0.9
         },
         url: {
           show: true
@@ -169,7 +169,8 @@ var state = (function() {
       show: true,
       add: false,
       edit: false,
-      style: "block"
+      style: "block",
+      orientation: "bottom"
     },
     layout: {
       alignment: "centercenter",
@@ -225,7 +226,7 @@ var state = (function() {
     search: false,
     menu: false,
     modal: false,
-    autoSuggest: false,
+    autoSuggest: false
   };
 
   mod.get = function() {

src/js/update.js

@@ -608,6 +608,10 @@ var update = (function() {
       delete data.state.link.item.newtab;
       data.state.link.item.border = 0;
       return data;
+    },
+    "3.81.0": function(data) {
+      data.state.link.orientation = "bottom";
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.80.0";
+  var current = "3.81.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.80.0",
+  "version": "3.81.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"