extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-26 10:03:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add link border control

Browse Source
This commit is contained in:
Kuldeep M 2019-09-03 15:32:39 +01:00
parent f090dc7699
commit 7e6f0eb3e8
12 changed files with 81 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nighttab", "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.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

6
src/css/header.css
View File

@ -63,7 +63,7 @@
} }
.header-area { .header-area {
padding: calc(var(--layout-gutter) * var(--layout-padding-multiplier)); padding: calc(var(--layout-space) * var(--layout-padding));
position: relative; position: relative;
width: var(--header-area-width); width: var(--header-area-width);
pointer-events: none; pointer-events: none;
@ -122,7 +122,7 @@
} }
.header-item-grid { .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; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -142,7 +142,7 @@
} }
.header-item { .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; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;

52
src/css/link.css
View File

@ -22,33 +22,33 @@
} }
.link-area { .link-area {
padding-left: calc(var(--layout-gutter) * var(--layout-padding-multiplier)); padding-left: calc(var(--layout-space) * var(--layout-padding));
padding-right: calc(var(--layout-gutter) * var(--layout-padding-multiplier)); padding-right: calc(var(--layout-space) * var(--layout-padding));
font-size: calc(var(--link-item-size) * 1); font-size: calc(var(--link-item-size) * 1);
position: relative; position: relative;
width: var(--link-area-width); width: var(--link-area-width);
display: grid; display: grid;
grid-auto-rows: 1fr; 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)); grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
} }
.is-layout-order-headerlink .link-area { .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-border-bottom .link-area,
.is-layout-order-headerlink.is-header-shade-style-always .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 { .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-border-top .link-area,
.is-layout-order-linkheader.is-header-shade-style-always .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 { .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); 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 { .is-link-item-line-show .link-panel-front {
height: calc(100% - var(--layout-line-width)); height: calc(100% - var(--layout-line-width));
} }
@ -225,9 +229,9 @@
align-items: flex-end; align-items: flex-end;
} }
.is-link-url-show .link-item:focus .link-panel-front, .is-link-item-url-show .link-item:focus .link-panel-front,
.is-link-url-show .link-item:focus-within .link-panel-front, .is-link-item-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:hover .link-panel-front {
height: calc(100% - var(--link-item-url-height)); height: calc(100% - var(--link-item-url-height));
} }
@ -252,9 +256,9 @@
} }
.is-link-edit .link-panel-back, .is-link-edit .link-panel-back,
.is-link-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 .link-panel-back,
.is-link-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: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:hover .link-panel-back {
height: 100%; height: 100%;
top: 0; top: 0;
clip-path: polygon(0 var(--layout-line-width), 100% var(--layout-line-width), 100% 100%, 0 100%); 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); transition: all var(--layout-timing-extra-fast);
} }
.is-link-url-show .link-url { .is-link-item-url-show .link-url {
display: flex; display: flex;
} }
@ -353,9 +357,9 @@
justify-content: flex-end; justify-content: flex-end;
} }
.is-link-url-show .link-item:focus-within .link-url, .is-link-item-url-show .link-item:focus-within .link-url,
.is-link-url-show .link-item:focus .link-url, .is-link-item-url-show .link-item:focus .link-url,
.is-link-url-show .link-item:hover .link-url { .is-link-item-url-show .link-item:hover .link-url {
height: var(--link-item-url-height); height: var(--link-item-url-height);
} }
@ -381,7 +385,7 @@
display: none; display: none;
} }
.is-link-display-show .link-display { .is-link-display-item-show .link-display {
display: block; display: block;
} }
@ -414,11 +418,11 @@
font-size: var(--link-item-display-icon-size); 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; 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 margin-right: 0.5em
} }
@ -466,7 +470,7 @@
text-align: right; text-align: right;
} }
.is-link-name-show .link-name { .is-link-item-name-show .link-name {
display: block; display: block;
} }
@ -501,9 +505,9 @@
box-shadow: var(--layout-shadow-medium); box-shadow: var(--layout-shadow-medium);
} }
.is-link-edit.is-link-url-show .link-item:focus .link-panel-front, .is-link-edit.is-link-item-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-item-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:hover .link-panel-front {
height: calc(100% - var(--link-item-edit-height)); height: calc(100% - var(--link-item-edit-height));
} }

10
src/css/variables.css
View File

@ -40,17 +40,17 @@
--header-transitional-size: 1em; --header-transitional-size: 1em;
/* link */ /* link */
--link-area-width: 100%; --link-area-width: 100%;
--link-area-gutter-multiplier: 2;
--link-item-size: 1em; --link-item-size: 1em;
--link-item-display-letter-size: 2em; --link-item-display-letter-size: 2em;
--link-item-display-icon-size: 2.5em; --link-item-display-icon-size: 2.5em;
--link-item-name-size: 0.9em; --link-item-name-size: 0.9em;
--link-item-border: 1;
/* layout */ /* layout */
--layout-line-width: 0.2em;
--layout-gutter: 0.5rem;
--layout-width: 80%; --layout-width: 80%;
--layout-padding-multiplier: 4; --layout-line-width: 0.2em;
--layout-gutter-multiplier: 4; --layout-space: 0.5rem;
--layout-padding: 4;
--layout-gutter: 4;
--layout-timing-extra-fast: 0.2s ease-in-out; --layout-timing-extra-fast: 0.2s ease-in-out;
--layout-timing-fast: 0.4s ease-in-out; --layout-timing-fast: 0.4s ease-in-out;
--layout-timing-medium: 0.6s ease-in-out; --layout-timing-medium: 0.6s ease-in-out;

11
src/index.html
View File

@ -915,6 +915,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Border</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-link-item-border">All sides</label>
<input id="control-link-item-border" class="control-link-item-border mb-0" type="range" min="0" max="40" value="0" tabindex="-1">
</div>
</div>
</div>
<div class="menu-item"> <div class="menu-item">
<div class="menu-item-header"> <div class="menu-item-header">
<h1 class="menu-item-header-text">Style</h1> <h1 class="menu-item-header-text">Style</h1>

24
src/js/control.js
View File

@ -1969,6 +1969,14 @@ var control = (function() {
func: function() { func: function() {
link.items(); 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"), element: helper.e(".control-link-style-block"),
path: "link.style", 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-left");
helper.removeClass(html, "is-link-area-alignment-center"); helper.removeClass(html, "is-link-area-alignment-center");
helper.removeClass(html, "is-link-area-alignment-right"); helper.removeClass(html, "is-link-area-alignment-right");
helper.removeClass(html, "is-link-name-show"); helper.removeClass(html, "is-link-item-name-show");
helper.removeClass(html, "is-link-display-show"); helper.removeClass(html, "is-link-display-item-show");
helper.removeClass(html, "is-link-display-alignment-topleft"); helper.removeClass(html, "is-link-display-alignment-topleft");
helper.removeClass(html, "is-link-display-alignment-topcenter"); helper.removeClass(html, "is-link-display-alignment-topcenter");
helper.removeClass(html, "is-link-display-alignment-topright"); 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-bottomleft");
helper.removeClass(html, "is-link-display-alignment-bottomcenter"); helper.removeClass(html, "is-link-display-alignment-bottomcenter");
helper.removeClass(html, "is-link-display-alignment-bottomright"); 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-line-show");
helper.removeClass(html, "is-link-item-hoverscale"); helper.removeClass(html, "is-link-item-hoverscale");
helper.removeClass(html, "is-link-item-alignment-left"); helper.removeClass(html, "is-link-item-alignment-left");
helper.removeClass(html, "is-link-item-alignment-center"); helper.removeClass(html, "is-link-item-alignment-center");
helper.removeClass(html, "is-link-item-alignment-right"); 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-list");
helper.removeClass(html, "is-link-style-block"); helper.removeClass(html, "is-link-style-block");
helper.removeClass(html, "is-link-edit"); 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-display-alignment-" + state.get().link.item.display.alignment);
helper.addClass(html, "is-link-style-" + state.get().link.style); helper.addClass(html, "is-link-style-" + state.get().link.style);
if (state.get().link.item.name.show) { 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) { 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) { 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) { if (state.get().link.item.line.show) {
helper.addClass(html, "is-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) { if (state.get().link.item.hoverScale) {
helper.addClass(html, "is-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) { if (state.get().link.edit) {
helper.addClass(html, "is-link-edit"); helper.addClass(html, "is-link-edit");
}; };

4
src/js/layout.js
View File

@ -9,12 +9,12 @@ var layout = (function() {
render.padding = function() { render.padding = function() {
var html = helper.e("html"); 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() { render.gutter = function() {
var html = helper.e("html"); 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() { render.order = function() {

5
src/js/link.js
View File

@ -556,6 +556,10 @@ var link = (function() {
arrayItem.tabIndex = -1; 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.letter();
render.item.display.icon(); render.item.display.icon();
render.item.name(); render.item.name();
render.item.border();
bind.sort(); bind.sort();
}; };

2
src/js/state.js
View File

@ -164,7 +164,7 @@ var state = (function() {
}, },
order: "displayname", order: "displayname",
size: 1, size: 1,
newTab: false border: 0
}, },
show: true, show: true,
add: false, add: false,

5
src/js/update.js
View File

@ -603,6 +603,11 @@ var update = (function() {
} }
}; };
return data; return data;
},
"3.80.0": function(data) {
delete data.state.link.item.newtab;
data.state.link.item.border = 0;
return data;
} }
}; };

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "3.79.0"; var current = "3.80.0";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_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.", "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, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"