From 7e6f0eb3e8f8b1b8ead5b317fd193ea0d4a45d70 Mon Sep 17 00:00:00 2001 From: Kuldeep M Date: Tue, 3 Sep 2019 15:32:39 +0100 Subject: [PATCH] [feature] add link border control --- package.json | 2 +- src/css/header.css | 6 ++--- src/css/link.css | 52 +++++++++++++++++++++++-------------------- src/css/variables.css | 10 ++++----- src/index.html | 11 +++++++++ src/js/control.js | 24 +++++++++++++++----- src/js/layout.js | 4 ++-- src/js/link.js | 5 +++++ src/js/state.js | 2 +- src/js/update.js | 5 +++++ src/js/version.js | 2 +- src/manifest.json | 2 +- 12 files changed, 81 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 1180920a..d0d47f17 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "3.79.0", + "version": "3.80.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": { diff --git a/src/css/header.css b/src/css/header.css index bdcf392e..64dab88f 100755 --- a/src/css/header.css +++ b/src/css/header.css @@ -63,7 +63,7 @@ } .header-area { - padding: calc(var(--layout-gutter) * var(--layout-padding-multiplier)); + padding: calc(var(--layout-space) * var(--layout-padding)); position: relative; width: var(--header-area-width); pointer-events: none; @@ -122,7 +122,7 @@ } .header-item-grid { - margin: calc(-1 * calc(var(--layout-gutter) * var(--layout-gutter-multiplier))) 0 0 calc(-1 * calc(var(--layout-gutter) * var(--layout-gutter-multiplier))); + margin: calc(-1 * calc(var(--layout-space) * var(--layout-gutter))) 0 0 calc(-1 * calc(var(--layout-space) * var(--layout-gutter))); display: flex; flex-direction: row; flex-wrap: wrap; @@ -142,7 +142,7 @@ } .header-item { - margin: calc(var(--layout-gutter) * var(--layout-gutter-multiplier)) 0 0 calc(var(--layout-gutter) * var(--layout-gutter-multiplier)); + margin: calc(var(--layout-space) * var(--layout-gutter)) 0 0 calc(var(--layout-space) * var(--layout-gutter)); display: flex; flex-wrap: nowrap; justify-content: flex-start; diff --git a/src/css/link.css b/src/css/link.css index fd3c4d39..78377dce 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -22,33 +22,33 @@ } .link-area { - padding-left: calc(var(--layout-gutter) * var(--layout-padding-multiplier)); - padding-right: calc(var(--layout-gutter) * var(--layout-padding-multiplier)); + padding-left: calc(var(--layout-space) * var(--layout-padding)); + padding-right: calc(var(--layout-space) * var(--layout-padding)); font-size: calc(var(--link-item-size) * 1); position: relative; width: var(--link-area-width); display: grid; grid-auto-rows: 1fr; - grid-gap: calc(var(--layout-gutter) * var(--layout-gutter-multiplier)); + grid-gap: calc(var(--layout-space) * var(--layout-gutter)); grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr)); } .is-layout-order-headerlink .link-area { - padding-bottom: calc(var(--layout-gutter) * var(--layout-padding-multiplier)); + padding-bottom: calc(var(--layout-space) * var(--layout-padding)); } .is-layout-order-headerlink.is-header-border-bottom .link-area, .is-layout-order-headerlink.is-header-shade-style-always .link-area { - padding-top: calc(var(--layout-gutter) * var(--layout-padding-multiplier)); + padding-top: calc(var(--layout-space) * var(--layout-padding)); } .is-layout-order-linkheader .link-area { - padding-top: calc(var(--layout-gutter) * var(--layout-padding-multiplier)); + padding-top: calc(var(--layout-space) * var(--layout-padding)); } .is-layout-order-linkheader.is-header-border-top .link-area, .is-layout-order-linkheader.is-header-shade-style-always .link-area { - padding-bottom: calc(var(--layout-gutter) * var(--layout-padding-multiplier)); + padding-bottom: calc(var(--layout-space) * var(--layout-padding)); } .link-item { @@ -105,6 +105,10 @@ transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); } +.is-link-item-border .link-panel-front { + border: calc(calc(var(--layout-line-width) / 2) * var(--link-item-border)) solid rgb(var(--theme-accent)); +} + .is-link-item-line-show .link-panel-front { height: calc(100% - var(--layout-line-width)); } @@ -225,9 +229,9 @@ align-items: flex-end; } -.is-link-url-show .link-item:focus .link-panel-front, -.is-link-url-show .link-item:focus-within .link-panel-front, -.is-link-url-show .link-item:hover .link-panel-front { +.is-link-item-url-show .link-item:focus .link-panel-front, +.is-link-item-url-show .link-item:focus-within .link-panel-front, +.is-link-item-url-show .link-item:hover .link-panel-front { height: calc(100% - var(--link-item-url-height)); } @@ -252,9 +256,9 @@ } .is-link-edit .link-panel-back, -.is-link-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back, -.is-link-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back, -.is-link-url-show:not(.is-link-item-line-show) .link-item:hover .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 { height: 100%; top: 0; clip-path: polygon(0 var(--layout-line-width), 100% var(--layout-line-width), 100% 100%, 0 100%); @@ -331,7 +335,7 @@ transition: all var(--layout-timing-extra-fast); } -.is-link-url-show .link-url { +.is-link-item-url-show .link-url { display: flex; } @@ -353,9 +357,9 @@ justify-content: flex-end; } -.is-link-url-show .link-item:focus-within .link-url, -.is-link-url-show .link-item:focus .link-url, -.is-link-url-show .link-item:hover .link-url { +.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 { height: var(--link-item-url-height); } @@ -381,7 +385,7 @@ display: none; } -.is-link-display-show .link-display { +.is-link-display-item-show .link-display { display: block; } @@ -414,11 +418,11 @@ font-size: var(--link-item-display-icon-size); } -.is-link-style-block.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) { +.is-link-style-block.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child) { margin-bottom: 0.5em; } -.is-link-style-list.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) { +.is-link-style-list.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child) { margin-right: 0.5em } @@ -466,7 +470,7 @@ text-align: right; } -.is-link-name-show .link-name { +.is-link-item-name-show .link-name { display: block; } @@ -501,9 +505,9 @@ box-shadow: var(--layout-shadow-medium); } -.is-link-edit.is-link-url-show .link-item:focus .link-panel-front, -.is-link-edit.is-link-url-show .link-item:focus-within .link-panel-front, -.is-link-edit.is-link-url-show .link-item:hover .link-panel-front { +.is-link-edit.is-link-item-url-show .link-item:focus .link-panel-front, +.is-link-edit.is-link-item-url-show .link-item:focus-within .link-panel-front, +.is-link-edit.is-link-item-url-show .link-item:hover .link-panel-front { height: calc(100% - var(--link-item-edit-height)); } diff --git a/src/css/variables.css b/src/css/variables.css index 89aa985d..0be4275a 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -40,17 +40,17 @@ --header-transitional-size: 1em; /* link */ --link-area-width: 100%; - --link-area-gutter-multiplier: 2; --link-item-size: 1em; --link-item-display-letter-size: 2em; --link-item-display-icon-size: 2.5em; --link-item-name-size: 0.9em; + --link-item-border: 1; /* layout */ - --layout-line-width: 0.2em; - --layout-gutter: 0.5rem; --layout-width: 80%; - --layout-padding-multiplier: 4; - --layout-gutter-multiplier: 4; + --layout-line-width: 0.2em; + --layout-space: 0.5rem; + --layout-padding: 4; + --layout-gutter: 4; --layout-timing-extra-fast: 0.2s ease-in-out; --layout-timing-fast: 0.4s ease-in-out; --layout-timing-medium: 0.6s ease-in-out; diff --git a/src/index.html b/src/index.html index b2708b51..ae025645 100644 --- a/src/index.html +++ b/src/index.html @@ -915,6 +915,17 @@ +
+
+

Border

+
+
+
+ + +
+
+

Style

diff --git a/src/js/control.js b/src/js/control.js index 14006afd..621321b4 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -1969,6 +1969,14 @@ var control = (function() { func: function() { link.items(); } + }, { + element: helper.e(".control-link-item-border"), + path: "link.item.border", + type: "range", + func: function() { + render.class(); + link.render.item.border(); + } }, { element: helper.e(".control-link-style-block"), path: "link.style", @@ -2496,8 +2504,8 @@ var control = (function() { helper.removeClass(html, "is-link-area-alignment-left"); helper.removeClass(html, "is-link-area-alignment-center"); helper.removeClass(html, "is-link-area-alignment-right"); - helper.removeClass(html, "is-link-name-show"); - helper.removeClass(html, "is-link-display-show"); + helper.removeClass(html, "is-link-item-name-show"); + helper.removeClass(html, "is-link-display-item-show"); helper.removeClass(html, "is-link-display-alignment-topleft"); helper.removeClass(html, "is-link-display-alignment-topcenter"); helper.removeClass(html, "is-link-display-alignment-topright"); @@ -2507,12 +2515,13 @@ var control = (function() { helper.removeClass(html, "is-link-display-alignment-bottomleft"); helper.removeClass(html, "is-link-display-alignment-bottomcenter"); helper.removeClass(html, "is-link-display-alignment-bottomright"); - helper.removeClass(html, "is-link-url-show"); + helper.removeClass(html, "is-link-item-url-show"); helper.removeClass(html, "is-link-item-line-show"); 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"); + 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-edit"); @@ -2522,13 +2531,13 @@ var control = (function() { helper.addClass(html, "is-link-display-alignment-" + state.get().link.item.display.alignment); helper.addClass(html, "is-link-style-" + state.get().link.style); if (state.get().link.item.name.show) { - helper.addClass(html, "is-link-name-show"); + helper.addClass(html, "is-link-item-name-show"); }; if (state.get().link.item.display.show) { - helper.addClass(html, "is-link-display-show"); + helper.addClass(html, "is-link-display-item-show"); }; if (state.get().link.item.url.show) { - helper.addClass(html, "is-link-url-show"); + helper.addClass(html, "is-link-item-url-show"); }; if (state.get().link.item.line.show) { helper.addClass(html, "is-link-item-line-show"); @@ -2536,6 +2545,9 @@ var control = (function() { if (state.get().link.item.hoverScale) { helper.addClass(html, "is-link-item-hoverscale"); }; + if (state.get().link.item.border > 0) { + helper.addClass(html, "is-link-item-border"); + }; if (state.get().link.edit) { helper.addClass(html, "is-link-edit"); }; diff --git a/src/js/layout.js b/src/js/layout.js index cd86905d..3b0df23f 100644 --- a/src/js/layout.js +++ b/src/js/layout.js @@ -9,12 +9,12 @@ var layout = (function() { render.padding = function() { var html = helper.e("html"); - html.style.setProperty("--layout-padding-multiplier", state.get().layout.padding); + html.style.setProperty("--layout-padding", state.get().layout.padding); }; render.gutter = function() { var html = helper.e("html"); - html.style.setProperty("--layout-gutter-multiplier", state.get().layout.gutter); + html.style.setProperty("--layout-gutter", state.get().layout.gutter); }; render.order = function() { diff --git a/src/js/link.js b/src/js/link.js index e53905cc..a20a01e1 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -556,6 +556,10 @@ var link = (function() { arrayItem.tabIndex = -1; }); }; + }, + border: function() { + var html = helper.e("html"); + html.style.setProperty("--link-item-border", state.get().link.item.border); } }; @@ -855,6 +859,7 @@ var link = (function() { render.item.display.letter(); render.item.display.icon(); render.item.name(); + render.item.border(); bind.sort(); }; diff --git a/src/js/state.js b/src/js/state.js index 3bcf65a5..e3eaa404 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -164,7 +164,7 @@ var state = (function() { }, order: "displayname", size: 1, - newTab: false + border: 0 }, show: true, add: false, diff --git a/src/js/update.js b/src/js/update.js index 4c6c21a1..821d8453 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -603,6 +603,11 @@ var update = (function() { } }; return data; + }, + "3.80.0": function(data) { + delete data.state.link.item.newtab; + data.state.link.item.border = 0; + return data; } }; diff --git a/src/js/version.js b/src/js/version.js index 474b1e4b..5ccb590b 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "3.79.0"; + var current = "3.80.0"; var compare = function(a, b) { var pa = a.split("."); diff --git a/src/manifest.json b/src/manifest.json index d7ffd2fa..10e03b86 100644 --- a/src/manifest.json +++ b/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.79.0", + "version": "3.80.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"