diff --git a/package.json b/package.json index dbc722de..0b298b5d 100644 --- a/package.json +++ b/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": { diff --git a/src/css/link.css b/src/css/link.css index b9b31863..00df2074 100755 --- a/src/css/link.css +++ b/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 { diff --git a/src/css/variables.css b/src/css/variables.css index f524f970..11c8ac8d 100644 --- a/src/css/variables.css +++ b/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; diff --git a/src/index.html b/src/index.html index ee75a624..6859358d 100644 --- a/src/index.html +++ b/src/index.html @@ -1045,7 +1045,7 @@
- +
@@ -1056,7 +1056,7 @@
- +
@@ -1067,7 +1067,7 @@
- +
@@ -1076,6 +1076,17 @@
+
+
+ +
+ +
+
+
+
+ +
diff --git a/src/js/control.js b/src/js/control.js index 8cac1c6c..77157229 100644 --- a/src/js/control.js +++ b/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); }; }; }; diff --git a/src/js/link.js b/src/js/link.js index 64ff95eb..9c282adb 100644 --- a/src/js/link.js +++ b/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(); }; diff --git a/src/js/state.js b/src/js/state.js index 11cac1f2..ff81e001 100644 --- a/src/js/state.js +++ b/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, diff --git a/src/js/update.js b/src/js/update.js index 5fc11049..559d1169 100644 --- a/src/js/update.js +++ b/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; } }; diff --git a/src/js/version.js b/src/js/version.js index e3eb78df..6e8e34d5 100644 --- a/src/js/version.js +++ b/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"; diff --git a/src/manifest.json b/src/manifest.json index 6c6ae248..f5f17fa5 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": "4.0.4", + "version": "4.1.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"