[feature] add link orientation controls

Author: zombieFox

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(00,100%0,100%100%,0100%);
+}
+
+.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-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back,
-.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-top .link-panel-back{
+top:0;
+}
+
+.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(00,100%0,100%calc(100%-var(--layout-line-width)),0calc(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(0var(--layout-line-width),100%var(--layout-line-width),100%100%,0100%);
 }
 
@@ -357,9 +402,9 @@
 justify-content: flex-end;
 }
 
-.is-link-item-url-show .link-item:focus-within .link-url,
-.is-link-item-url-show .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:focus-within .link-url,
+.is-link-item-url-show:not(.is-link-edit) .link-item:focus .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:01px2pxrgba(0,0,0,0.1),02px4pxrgba(0,0,0,0.2);
---layout-shadow-medium:02px4pxrgba(0,0,0,0.1),04px8pxrgba(0,0,0,0.2);
---layout-shadow-large:03px6pxrgba(0,0,0,0.1),06px12pxrgba(0,0,0,0.2);
+--layout-shadow-small:002pxrgba(0,0,0,0.2),004pxrgba(0,0,0,0.1);
+--layout-shadow-medium:004pxrgba(0,0,0,0.2),008pxrgba(0,0,0,0.1);
+--layout-shadow-large:008pxrgba(0,0,0,0.2),0012pxrgba(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 @@ <h1 class="menu-item-header-text">Style</h1>
 <pclass="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide with content stacked horizontally.</p>
 </div>
 </div>
+<divclass="menu-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">Orientation</h1>
+</div>
+<divclass="menu-item-form">
+<divclass="input-wrap">
+<inputid="control-link-orientation-top" class="control-link-orientation-top" type="radio" name="control-link-orientation" value="top" tabindex="-1">
+<labelfor="control-link-orientation-top">Top</label>
+</div>
+<divclass="input-wrap">
+<inputid="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1">
+<labelfor="control-link-orientation-bottom">Bottom</label>
+</div>
+<pclass="control-link-orientation-helper form-helper small">Display the URL and Controls either at the top of bottom of a Tile.</p>
+</div>
+</div>
 <divclass="menu-item">
 <divclass="menu-item-header">
 <h1class="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(){
 deletedata.state.link.item.newtab;
 data.state.link.item.border=0;
 returndata;
+},
+"3.81.0": function(data){
+data.state.link.orientation="bottom";
+returndata;
 }
 };
 

src/js/version.js

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