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",
"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": {

6
src/css/header.css
View File

@ -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;

52
src/css/link.css
View File

@ -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));
}

10
src/css/variables.css
View File

@ -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;

11
src/index.html
View File

@ -915,6 +915,17 @@
</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-header">
<h1 class="menu-item-header-text">Style</h1>

24
src/js/control.js
View File

@ -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");
};

4
src/js/layout.js
View File

@ -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() {

5
src/js/link.js
View File

@ -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();
};

2
src/js/state.js
View File

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

5
src/js/update.js
View File

@ -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;
}
};

2
src/js/version.js
View File

@ -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(".");

2
src/manifest.json
View File

@ -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"