From ba23f57d9c836f5b1a4a1d8a92159ecb0b9dc50c Mon Sep 17 00:00:00 2001 From: zombieFox Date: Thu, 16 Jan 2020 12:12:25 +0000 Subject: [PATCH] [design] improve default controls --- package-lock.json | 2 +- package.json | 2 +- src/css/icons.css | 8 ++ src/fonts/icons/icons.eot | Bin 3564 -> 3704 bytes src/fonts/icons/icons.json | 2 +- src/fonts/icons/icons.svg | 2 + src/fonts/icons/icons.ttf | Bin 3400 -> 3540 bytes src/fonts/icons/icons.woff | Bin 3476 -> 3616 bytes src/index.html | 237 ++++++++++++++++--------------------- src/js/control.js | 194 ++++++++++++++++++++++++++++++ src/js/state.js | 31 ++++- src/js/version.js | 2 +- src/manifest.json | 2 +- 13 files changed, 334 insertions(+), 148 deletions(-) mode change 100755 => 100644 src/fonts/icons/icons.eot mode change 100755 => 100644 src/fonts/icons/icons.json mode change 100755 => 100644 src/fonts/icons/icons.svg mode change 100755 => 100644 src/fonts/icons/icons.ttf mode change 100755 => 100644 src/fonts/icons/icons.woff diff --git a/package-lock.json b/package-lock.json index 6e6c9109..9acee134 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.19.4", + "version": "4.20.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index b9f1b58e..94a966f9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.19.4", + "version": "4.20.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/icons.css b/src/css/icons.css index c84bda1d..87bcf301 100755 --- a/src/css/icons.css +++ b/src/css/icons.css @@ -127,3 +127,11 @@ .icon-reorder:before { content: "\e901"; } + +.icon-undo:before { + content: "\e902"; +} + +.icon-redo:before { + content: "\e903"; +} diff --git a/src/fonts/icons/icons.eot b/src/fonts/icons/icons.eot old mode 100755 new mode 100644 index 15fe49b9abf5a6875ad9caa520a91493c0f28afd..3c3a99399647ec52ffab7c6f1e1491f5092624be GIT binary patch delta 413 zcmaDO{X>Sef{%gW%0yOkmW_N3))O7d1r-?>81?{hLUL|mfx$*S{)s1K>dQ8})G#nG zeqdnW_>+;Em?EB`Q^3H$^#-WUECVRO-oX5jfq`2E$XCh8EvYDD5ZMIedjRi6J-zhh-qJTk_A%=m0hX=@4$V<#ko$1B-8_3rI+R;{!UtGe#43uHu-2#$l zU}k1~H#voIIV1CA9;RSMvCRognH=?u3}K9n%=?%c83cg3jKsyn+11q5l$F@U6$Qo3 zn8YTPl<1`>MMf6XB+U8OFr$tsG%Tz`A;ZxzU>0M;tULxr1}C8YRZ#urf{NxK&1~%I zX69zbM$AGp{x!@=s7Z^DS4hz*EuFNA@%gNO4YLAVT#^(z!onCPpWq5mvToqp7|(C> zm4TZDEJpcdz delta 293 zcmew%^G2HW4KD+O$3#|h7T5MBadQ$X@`oqpcvnxP*ZjD8s<3 z0g`86W@dalIfZdKBjaQqreH>q%?V7I9Fsk{{gn)o+g;=NZN4&avw+ky+|&&_jZ8DI wn!Jl!UU(G)BUl + + \ No newline at end of file diff --git a/src/fonts/icons/icons.ttf b/src/fonts/icons/icons.ttf old mode 100755 new mode 100644 index 8b778a591872cf1a156d3bcead939ad3602f569f..42250c912baa70984f9c3a04fbf1c0fb21466e0d GIT binary patch delta 460 zcmX>hbw#?KfsuiMft#U$ftkU;KUm+0Ux-Z+D6$8L6OwZi3k){u@iQvzGJpc?4a^UL7N`LEDjB&Y z6=e(}n}B=|Aip6eKiM%+rc0^;C~yKO;FOzKQNWY%jm<9@Z8_>08NwJDnfEa@ zf*oumE+)>drmm)}#4fHVC~n3iHmRgUFGVRbvY;km&cB8kbxfgQVI2w?j*bDd7#n8g z0RzSfsDBkyzqz2IIY=`bySkaVnXwVG(2Rc#a}sLO;^P%kbV^GntzvvW>tDmH02h}e zg^sW=hRG^i0ZP^ld>iBWZN4&avw&R9aLe@zFfasO}6276t`lDVyOd4f?`X7A&LQF923yD!kZU!FJ%M(8%Agv delta 322 zcmca2eL||9fsuiMft#U$ftkU;KUm+0Ux-ZsD6$8L6OwZi3k){uaWgP5$^iLi(i4jd zfV2RR{{l#Jq~}zob&H)m59EIUa%(bD6H`Q$J_6;qa)9z?89)K{9OnB#{t_TxB_p?_ zB9B2t3dlbJ|8OQFG%DFq&*88w(RD&r1iMKKK2;d7t-=+s@m?&8hKmAb`~*gTU9u2Oy@K ziif_IUGH*Q)d7fx{GO}-y3e_)ZXlzB*xPGzt*&jaAPXV-EO7KN}hVp*{4po9Bl QSf~Xl{_&Rbt8hWS0nD^&t^fc4 delta 382 zcmZ1=Geugg+~3WOfsp|Sc&9LMgJ};2#>s+AViR?Q>lKo76AKs^7&CwpXF%9sqaJs9 zVlhyR$ppyffMS94oXRwym<>><286rCPM*(5O-x~6;MxIHV+O*aN*`Zj00n_!AAo!n z5N6L|zMqj>Qo+E$Edt~NX@-hC1`(;8{A8dyKkgo&fE@@+2#BfWCRP9~<_0-L0gROy zV)7DmQ-NY{fR1bf;hA2XzYFqSize
-
+
+
-
- -

Resize all elements on the page.

@@ -191,12 +189,10 @@
-
+
+
-
- -
@@ -275,12 +271,10 @@
-
+
+
-
- -
@@ -292,12 +286,10 @@
-
+
+
-
- -
@@ -328,7 +320,8 @@
-
+
+
@@ -422,12 +415,10 @@
-
+
+
-
- -
@@ -459,12 +450,10 @@
-
+
+
-
- -
@@ -543,12 +532,10 @@
-
+
+
-
- -
@@ -711,12 +698,10 @@
-
+
+
-
- -
@@ -753,7 +738,8 @@
-
+
+
@@ -835,15 +821,13 @@
-
+
+

Only the Search box width control will change the Width of the Search box.

-
- -
@@ -888,12 +872,10 @@
-
+
+
-
- -
@@ -905,7 +887,8 @@
-
+
+
@@ -913,7 +896,8 @@
-
+
+
@@ -969,7 +953,8 @@
-
+
+
@@ -1002,12 +987,10 @@
-
+
+
-
- -
@@ -1061,7 +1044,8 @@
-
+
+
@@ -1081,15 +1065,16 @@
-
+
+
-
-

Max width is defined by Layout Area Width.

-
+
+

Max width is defined by Layout Area Width.

+
@@ -1130,12 +1115,10 @@
-
+
+
-
- -
@@ -1185,45 +1168,37 @@
-
+
+
-
- -
-
+
+
-
- -
-
+
+
-
- -
-
+
+
-
- -
@@ -1265,23 +1240,19 @@
-
+
+
-
- -
-
+
+
-
- -
@@ -1295,12 +1266,10 @@
-
+
+
-
- -
@@ -1378,7 +1347,8 @@
-
+
+
@@ -1512,10 +1482,10 @@
- -
-
- +
+ + +

Use a Google Font to customise the Clock, Date, Group names and Bookmark Letters.

@@ -1532,7 +1502,7 @@
-
+
@@ -1561,17 +1531,19 @@
- - -
-
- +
+ +
+ + +
+

Use a Google Font to customise the Bookmark name, URL and form elements.

-

Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto" or "Source Sans Pro"

+

Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"

Clear the field to use the default font "Open Sans".

@@ -1582,7 +1554,7 @@
-
+
@@ -1703,11 +1675,9 @@
+
-
- -

Light and dark shades from this colour are used across nightTabs.

@@ -1716,21 +1686,21 @@
-
+
-
+
-
+
@@ -1738,21 +1708,21 @@
-
+
-
+
-
+
@@ -1760,22 +1730,18 @@
-
+
+
-
- -
-
+
+
-
- -
@@ -1788,11 +1754,9 @@
+
-
- -

Accent Colour can also be changed from the Header Area.

@@ -1839,12 +1803,10 @@
-
+
+
-
- -
@@ -1856,12 +1818,10 @@
-
+
+
-
- -
@@ -1873,12 +1833,10 @@
-
+
+
-
- -

The shade appears behind Modals and the Menu.

@@ -1985,35 +1943,40 @@
-
+
+
-
+
+
-
+
+
- -
+ +
+
-
+
+
diff --git a/src/js/control.js b/src/js/control.js index fce70be3..4f84dcc1 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -508,6 +508,26 @@ var control = (function() { header.render.area.width(); render.range.count(this); } + }, { + element: helper.e(".control-header-area-width-default"), + type: "button", + additionalEvents: [{ + event: "click", + func: function() { + edge.box.open({ + element: helper.e(".header-area"), + delay: 500 + }); + } + }], + func: function() { + mod.setValue("header.area.width", helper.getObject({ + object: state.get.default(), + path: "header.area.width" + })); + header.render.area.width(); + render.update(); + } }, { element: helper.e(".control-header-area-width-match"), type: "button", @@ -1459,6 +1479,26 @@ var control = (function() { header.render.search.width(); render.range.count(this); } + }, { + element: helper.e(".control-header-search-width-default"), + type: "button", + additionalEvents: [{ + event: "click", + func: function() { + edge.box.open({ + element: helper.e(".header-search-input"), + delay: 500 + }); + } + }], + func: function() { + mod.setValue("header.search.width", helper.getObject({ + object: state.get.default(), + path: "header.search.width" + })); + header.render.search.width(); + render.update(); + } }, { element: helper.e(".control-header-search-focus"), path: "header.search.focus", @@ -1756,6 +1796,17 @@ var control = (function() { header.render.opacity(); render.range.count(this); } + }, { + element: helper.e(".control-header-shade-opacity-default"), + type: "button", + func: function() { + mod.setValue("header.shade.opacity", helper.getObject({ + object: state.get.default(), + path: "header.shade.opacity" + })); + header.render.opacity(); + render.update(); + } }, { element: helper.e(".control-header-radius"), path: "header.radius", @@ -1885,6 +1936,18 @@ var control = (function() { render.class(); render.range.count(this); } + }, { + element: helper.e(".control-group-border-default"), + type: "button", + func: function() { + mod.setValue("group.border", helper.getObject({ + object: state.get.default(), + path: "group.border" + })); + link.render.group.border(); + render.class(); + render.update(); + } }, { element: helper.e(".control-header-border-top"), path: "header.border.top", @@ -1895,6 +1958,18 @@ var control = (function() { render.class(); render.range.count(this); } + }, { + element: helper.e(".control-header-border-top-default"), + type: "button", + func: function() { + mod.setValue("header.border.top", helper.getObject({ + object: state.get.default(), + path: "header.border.top" + })); + header.render.border(); + render.class(); + render.update(); + } }, { element: helper.e(".control-header-border-bottom"), path: "header.border.bottom", @@ -1905,6 +1980,18 @@ var control = (function() { render.class(); render.range.count(this); } + }, { + element: helper.e(".control-header-border-bottom-default"), + type: "button", + func: function() { + mod.setValue("header.border.bottom", helper.getObject({ + object: state.get.default(), + path: "header.border.bottom" + })); + header.render.border(); + render.class(); + render.update(); + } }, { element: helper.e(".control-header-position-sticky"), path: "header.position", @@ -1967,6 +2054,26 @@ var control = (function() { link.render.area.width(); render.range.count(this); } + }, { + element: helper.e(".control-link-area-width-default"), + type: "button", + additionalEvents: [{ + event: "click", + func: function() { + edge.box.open({ + element: helper.e(".group"), + delay: 500 + }); + } + }], + func: function() { + mod.setValue("link.area.width", helper.getObject({ + object: state.get.default(), + path: "link.area.width" + })); + link.render.area.width(); + render.update(); + } }, { element: helper.e(".control-link-area-width-match"), type: "button", @@ -2449,6 +2556,18 @@ var control = (function() { link.render.item.border(); render.range.count(this); } + }, { + element: helper.e(".control-link-item-border-default"), + type: "button", + func: function() { + mod.setValue("link.item.border", helper.getObject({ + object: state.get.default(), + path: "link.item.border" + })); + render.class(); + link.render.item.border(); + render.update(); + } }, { element: helper.e(".control-link-style-block"), path: "link.style", @@ -3108,6 +3227,17 @@ var control = (function() { background.render.opacity(); render.range.count(this); } + }, { + element: helper.e(".control-background-image-opacity-default"), + type: "button", + func: function() { + mod.setValue("background.image.opacity", helper.getObject({ + object: state.get.default(), + path: "background.image.opacity" + })); + background.render.opacity(); + render.update(); + } }, { element: helper.e(".control-background-image-grayscale"), path: "background.image.grayscale", @@ -3118,6 +3248,17 @@ var control = (function() { background.render.grayscale(); render.range.count(this); } + }, { + element: helper.e(".control-background-image-grayscale-default"), + type: "button", + func: function() { + mod.setValue("background.image.grayscale", helper.getObject({ + object: state.get.default(), + path: "background.image.grayscale" + })); + background.render.grayscale(); + render.update(); + } }, { element: helper.e(".control-background-image-blur"), path: "background.image.blur", @@ -3127,6 +3268,17 @@ var control = (function() { background.render.blur(); render.range.count(this); } + }, { + element: helper.e(".control-background-image-blur-default"), + type: "button", + func: function() { + mod.setValue("background.image.blur", helper.getObject({ + object: state.get.default(), + path: "background.image.blur" + })); + background.render.blur(); + render.update(); + } }, { element: helper.e(".control-background-image-accent"), path: "background.image.accent", @@ -3137,6 +3289,17 @@ var control = (function() { background.render.accent(); render.range.count(this); } + }, { + element: helper.e(".control-background-image-accent-default"), + type: "button", + func: function() { + mod.setValue("background.image.accent", helper.getObject({ + object: state.get.default(), + path: "background.image.accent" + })); + background.render.accent(); + render.update(); + } }, { element: helper.e(".control-background-image-scale"), path: "background.image.scale", @@ -3147,6 +3310,17 @@ var control = (function() { background.render.scale(); render.range.count(this); } + }, { + element: helper.e(".control-background-image-scale-default"), + type: "button", + func: function() { + mod.setValue("background.image.scale", helper.getObject({ + object: state.get.default(), + path: "background.image.scale" + })); + background.render.scale(); + render.update(); + } }, { element: helper.e(".control-data-import"), type: "file", @@ -3742,7 +3916,9 @@ var control = (function() { _disable.element("[for=control-header-shade-opacity]", false); _disable.input(".control-header-shade-opacity", false); _disable.element(".control-header-shade-opacity-count", false); + _disable.input(".control-header-shade-opacity-default", false); _disable.input(".control-header-radius", false); + _disable.element(".control-header-radius-helper", false); } else { _disable.input(".control-header-shade-style-always", true); _disable.element(".control-header-shade-style-always-helper", true); @@ -3751,7 +3927,9 @@ var control = (function() { _disable.element("[for=control-header-shade-opacity]", true); _disable.input(".control-header-shade-opacity", true); _disable.element(".control-header-shade-opacity-count", true); + _disable.input(".control-header-shade-opacity-default", true); _disable.input(".control-header-radius", true); + _disable.element(".control-header-radius-helper", true); }; }; var _button = function() { @@ -3770,6 +3948,7 @@ var control = (function() { _disable.element("[for=control-header-search-width]", false); _disable.input(".control-header-search-width", false); _disable.element(".control-header-search-width-count", false); + _disable.input(".control-header-search-width-default", false); _disable.input(".control-header-search-focus", false); _disable.element(".control-header-search-focus-helper", false); _disable.element(".control-header-search-engine-label", false); @@ -3798,6 +3977,7 @@ var control = (function() { _disable.element("[for=control-header-search-width]", true); _disable.input(".control-header-search-width", true); _disable.element(".control-header-search-width-count", true); + _disable.input(".control-header-search-width-default", true); _disable.input(".control-header-search-focus", true); _disable.element(".control-header-search-focus-helper", true); _disable.element(".control-header-search-engine-label", true); @@ -3835,10 +4015,12 @@ var control = (function() { _disable.element("[for=control-header-search-width]", false); _disable.input(".control-header-search-width", false); _disable.element(".control-header-search-width-count", false); + _disable.input(".control-header-search-width-default", false); } else { _disable.element("[for=control-header-search-width]", true); _disable.input(".control-header-search-width", true); _disable.element(".control-header-search-width-count", true); + _disable.input(".control-header-search-width-default", true); }; }; var _greeting = function() { @@ -3995,6 +4177,7 @@ var control = (function() { _disable.element("[for=control-link-item-border]", true); _disable.input(".control-link-item-border", true); _disable.element(".control-link-item-border-count", true); + _disable.input(".control-link-item-border-default", true); _disable.input(".control-link-style-block", true); _disable.element(".control-link-style-block-helper", true); _disable.input(".control-link-style-list", true); @@ -4042,6 +4225,7 @@ var control = (function() { _disable.element("[for=control-link-item-border]", false); _disable.input(".control-link-item-border", false); _disable.element(".control-link-item-border-count", false); + _disable.input(".control-link-item-border-default", false); _disable.input(".control-link-style-block", false); _disable.element(".control-link-style-block-helper", false); _disable.input(".control-link-style-list", false); @@ -4141,36 +4325,46 @@ var control = (function() { _disable.element("[for=control-background-image-opacity]", false); _disable.input(".control-background-image-opacity", false); _disable.element(".control-background-image-opacity-count", false); + _disable.input(".control-background-image-opacity-default", false); _disable.element("[for=control-background-image-blur]", false); _disable.input(".control-background-image-blur", false); _disable.element(".control-background-image-blur-count", false); + _disable.input(".control-background-image-blur-default", false); _disable.element("[for=control-background-image-grayscale]", false); _disable.input(".control-background-image-grayscale", false); _disable.element(".control-background-image-grayscale-count", false); + _disable.input(".control-background-image-grayscale-default", false); _disable.element("[for=control-background-image-accent]", false); _disable.input(".control-background-image-accent", false); _disable.element(".control-background-image-accent-count", false); + _disable.input(".control-background-image-accent-default", false); _disable.element("[for=control-background-image-scale]", false); _disable.input(".control-background-image-scale", false); _disable.element(".control-background-image-scale-count", false); + _disable.input(".control-background-image-scale-default", false); } else { _disable.input(".control-background-image-from-file", true); _disable.input(".control-background-image-from-url", true); _disable.element("[for=control-background-image-opacity]", true); _disable.input(".control-background-image-opacity", true); _disable.element(".control-background-image-opacity-count", true); + _disable.input(".control-background-image-opacity-default", true); _disable.element("[for=control-background-image-blur]", true); _disable.input(".control-background-image-blur", true); _disable.element(".control-background-image-blur-count", true); + _disable.input(".control-background-image-blur-default", true); _disable.element("[for=control-background-image-grayscale]", true); _disable.input(".control-background-image-grayscale", true); _disable.element(".control-background-image-grayscale-count", true); + _disable.input(".control-background-image-grayscale-default", true); _disable.element("[for=control-background-image-accent]", true); _disable.input(".control-background-image-accent", true); _disable.element(".control-background-image-accent-count", true); + _disable.input(".control-background-image-accent-default", true); _disable.element("[for=control-background-image-scale]", true); _disable.input(".control-background-image-scale", true); _disable.element(".control-background-image-scale-count", true); + _disable.input(".control-background-image-scale-default", true); }; if (state.get.current().background.image.show && state.get.current().background.image.from == "file") { _disable.element(".control-background-image-file-feedback", false); diff --git a/src/js/state.js b/src/js/state.js index 948cdd9c..6176ab3f 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -317,11 +317,19 @@ var state = (function() { size: 1 }, search: { + width: 30, size: 1 }, button: { size: 1 }, + shade: { + opacity: 0.95 + }, + border: { + top: 0, + bottom: 0 + }, greeting: { size: 1 }, @@ -329,11 +337,6 @@ var state = (function() { size: 1 } }, - group: { - name: { - size: 1 - } - }, link: { area: { width: 100 @@ -358,9 +361,16 @@ var state = (function() { y: 0 } }, - size: 1 + size: 1, + border: 0 } }, + group: { + name: { + size: 1 + }, + border: 0 + }, layout: { padding: 4, gutter: 2, @@ -409,6 +419,15 @@ var state = (function() { shade: { opacity: 0.4 } + }, + background: { + image: { + blur: 0, + scale: 1, + opacity: 1, + grayscale: 0, + accent: 0 + } } }; diff --git a/src/js/version.js b/src/js/version.js index 2d036862..f250dafd 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "4.19.4"; + var current = "4.20.0"; var name = "Naughty Goose"; diff --git a/src/manifest.json b/src/manifest.json index eebfb281..ef3496cb 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.19.4", + "version": "4.20.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"