extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-13 09:28:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add link background colour controls

Browse Source
This commit is contained in:
zombieFox 2019-12-23 01:38:07 +00:00
parent 340fad2656
commit a1ba15a5b3
12 changed files with 143 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "nighttab",
"version": "4.3.0",
"version": "4.5.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "nighttab",
"version": "4.4.1",
"version": "4.5.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": {

18
src/css/link.css
View File

@ -115,7 +115,6 @@
/* link panel front */
.link-panel-front {
background-color: rgb(var(--theme-color-02));
position: absolute;
left: 0;
width: 100%;
@ -128,6 +127,14 @@
transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
}
.is-link-item-color-by-theme .link-panel-front {
background-color: rgb(var(--link-item-color-theme));
}
.is-link-item-color-by-custom .link-panel-front {
background-color: rgb(var(--link-item-color-custom));
}
.is-link-style-block .link-panel-front {
padding: 1em;
}
@ -163,11 +170,18 @@
.link-item:focus-within .link-panel-front,
.link-item:focus .link-panel-front,
.link-item:hover .link-panel-front {
background-color: rgb(var(--theme-color-03));
outline: none;
text-decoration: none;
}
.is-link-item-color-by-theme .link-panel-front:hover,
.is-link-item-color-by-theme .link-panel-front:focus,
.is-link-item-color-by-theme .link-item:focus-within .link-panel-front,
.is-link-item-color-by-theme .link-item:focus .link-panel-front,
.is-link-item-color-by-theme .link-item:hover .link-panel-front {
background-color: rgb(var(--theme-color-03));
}
.is-link-item-shadow-show .link-item:focus .link-panel-front,
.is-link-item-shadow-show .link-item:focus-within .link-panel-front,
.is-link-item-shadow-show .link-item:hover .link-panel-front {

2
src/css/variables.css
View File

@ -44,6 +44,8 @@
--group-border: 0;
/* link */
--link-area-width: 100%;
--link-item-color-theme: var(--theme-color-02);
--link-item-color-custom: rgb(0, 0, 0);
--link-item-size: 1em;
--link-item-display-space: 0.25em;
--link-item-display-gutter: 2;

32
src/index.html
View File

@ -1190,6 +1190,32 @@
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Background colour</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-link-item-color-by-theme" class="control-link-item-color-by-theme" type="radio" name="control-link-item-color-by" value="theme" tabindex="-1">
<label for="control-link-item-color-by-theme"><span class="label-icon"></span> Theme background colour</label>
</div>
<p class="control-link-item-color-by-theme-helper form-helper small">Use the Background colour defined by the Theme.</p>
<div class="input-wrap">
<input id="control-link-item-color-by-custom" class="control-link-item-color-by-custom" type="radio" name="control-link-item-color-by" value="custom" tabindex="-1">
<label for="control-link-item-color-by-custom"><span class="label-icon"></span> Custom background colour</label>
</div>
<p class="control-link-item-color-by-custom-helper form-helper small">Use a custom Background colour.</p>
<p class="control-link-item-color-by-custom-helper form-helper small">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
<div class="form-indent">
<div class="input-wrap">
<div class="form-group form-group-block mb-0">
<input id="control-link-item-color-by-picker" class="form-group-item-half control-link-item-color-by-picker mb-0" type="color" value="#000000" tabindex="1">
<input id="control-link-item-color-by-hex" class="form-group-item-half control-link-item-color-by-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Border</h1>
@ -1486,7 +1512,7 @@
<input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
<label for="control-background-color-by-theme"><span class="label-icon"></span> Theme background colour</label>
</div>
<p class="control-background-color-by-theme-helper form-helper small">Use the Background colour defined by the Dark or Light Theme.</p>
<p class="control-background-color-by-theme-helper form-helper small">Use the Background colour defined by the Theme.</p>
<div class="input-wrap">
<input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
<label for="control-background-color-by-custom"><span class="label-icon"></span> Custom background colour</label>
@ -1496,8 +1522,8 @@
<div class="form-indent">
<div class="input-wrap">
<div class="form-group form-group-block mb-0">
<input id="control-background-color-custom-current-picker" class="form-group-item-half control-background-color-custom-current-picker mb-0" type="color" value="#000000" tabindex="1">
<input id="control-background-color-custom-current-hex" class="form-group-item-half control-background-color-custom-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input id="control-background-color-by-picker" class="form-group-item-half control-background-color-by-picker mb-0" type="color" value="#000000" tabindex="1">
<input id="control-background-color-by-hex" class="form-group-item-half control-background-color-by-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
</div>
</div>

4
src/js/background.js
View File

@ -127,10 +127,10 @@ var background = (function() {
helper.e(".control-background-image-file").value = "";
},
picker: function() {
helper.e(".control-background-color-custom-current-picker").value = helper.rgbToHex(state.get.current().background.color.custom);
helper.e(".control-background-color-by-picker").value = helper.rgbToHex(state.get.current().background.color.custom);
},
hex: function() {
helper.e(".control-background-color-custom-current-hex").value = helper.rgbToHex(state.get.current().background.color.custom);
helper.e(".control-background-color-by-hex").value = helper.rgbToHex(state.get.current().background.color.custom);
}
};

64
src/js/control.js
View File

@ -2417,6 +2417,39 @@ var control = (function() {
func: function() {
link.groupAndItems();
}
}, {
element: helper.e(".control-link-item-color-by-theme"),
path: "link.item.color.by",
type: "radio",
func: function() {
render.dependents();
render.class();
}
}, {
element: helper.e(".control-link-item-color-by-custom"),
path: "link.item.color.by",
type: "radio",
func: function() {
render.dependents();
render.class();
}
}, {
element: helper.e(".control-link-item-color-by-picker"),
path: "link.item.color.custom",
type: "color",
func: function() {
link.render.item.color.custom();
link.render.input.hex();
}
}, {
element: helper.e(".control-link-item-color-by-hex"),
path: "link.item.color.custom",
type: "text",
valueMod: ["hexTextString"],
func: function() {
link.render.item.color.custom();
link.render.input.picker();
}
}, {
element: helper.e(".control-link-item-border"),
path: "link.item.border",
@ -2730,7 +2763,7 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-background-color-custom-current-picker"),
element: helper.e(".control-background-color-by-picker"),
path: "background.color.custom",
type: "color",
func: function() {
@ -2738,7 +2771,7 @@ var control = (function() {
background.render.input.hex();
}
}, {
element: helper.e(".control-background-color-custom-current-hex"),
element: helper.e(".control-background-color-by-hex"),
path: "background.color.custom",
type: "text",
valueMod: ["hexTextString"],
@ -3150,6 +3183,8 @@ 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-item-color-by-theme");
helper.removeClass(html, "is-link-item-color-by-custom");
helper.removeClass(html, "is-link-item-display-direction-horizontal");
helper.removeClass(html, "is-link-item-display-direction-vertical");
helper.removeClass(html, "is-link-item-display-order-letconname");
@ -3168,6 +3203,7 @@ var control = (function() {
if (state.get.current().link.show) {
helper.addClass(html, "is-link-show");
helper.addClass(html, "is-link-area-alignment-" + state.get.current().link.area.alignment);
helper.addClass(html, "is-link-item-color-by-" + state.get.current().link.item.color.by);
helper.addClass(html, "is-link-item-display-direction-" + state.get.current().link.item.display.direction);
helper.addClass(html, "is-link-item-display-order-" + state.get.current().link.item.display.order);
helper.addClass(html, "is-link-display-alignment-" + state.get.current().link.item.display.alignment);
@ -3672,6 +3708,12 @@ var control = (function() {
_disable.input(".control-link-item-display-alignment-bottomcenter", true);
_disable.input(".control-link-item-display-alignment-bottomright", true);
_disable.input(".control-link-newtab", true);
_disable.input(".control-link-item-color-by-theme", true);
_disable.element(".control-link-item-color-by-theme-helper", true);
_disable.input(".control-link-item-color-by-custom", true);
_disable.element(".control-link-item-color-by-custom-helper", true);
_disable.input(".control-link-item-color-by-picker", true);
_disable.input(".control-link-item-color-by-hex", true);
_disable.element("[for=control-link-item-border]", true);
_disable.input(".control-link-item-border", true);
_disable.element(".control-link-item-border-count", true);
@ -3714,6 +3756,10 @@ var control = (function() {
_disable.input(".control-link-item-shadow-show", false);
_disable.input(".control-link-item-hoverscale", false);
_disable.input(".control-link-newtab", false);
_disable.input(".control-link-item-color-by-theme", false);
_disable.element(".control-link-item-color-by-theme-helper", false);
_disable.input(".control-link-item-color-by-custom", false);
_disable.element(".control-link-item-color-by-custom-helper", false);
_disable.element("[for=control-link-item-border]", false);
_disable.input(".control-link-item-border", false);
_disable.element(".control-link-item-border-count", false);
@ -3783,6 +3829,10 @@ var control = (function() {
_disable.element(".control-link-item-display-gutter-count", false);
_disable.input(".control-link-item-display-gutter-default", false);
};
if (state.get.current().link.item.color.by == "custom") {
_disable.input(".control-link-item-color-by-picker", false);
_disable.input(".control-link-item-color-by-hex", false);
};
};
};
var _theme = function() {
@ -3859,13 +3909,11 @@ var control = (function() {
_disable.element(".control-background-image-url-helper", true);
};
if (state.get.current().background.color.by == "theme") {
_disable.input(".control-background-color-custom-current-picker", true);
_disable.input(".control-background-color-custom-current-hex", true);
_disable.element(".control-background-color-theme-helper", true);
_disable.input(".control-background-color-by-picker", true);
_disable.input(".control-background-color-by-hex", true);
} else if (state.get.current().background.color.by == "custom") {
_disable.input(".control-background-color-custom-current-picker", false);
_disable.input(".control-background-color-custom-current-hex", false);
_disable.element(".control-background-color-theme-helper", false);
_disable.input(".control-background-color-by-picker", false);
_disable.input(".control-background-color-by-hex", false);
};
};
_header();

15
src/js/link.js
View File

@ -523,6 +523,11 @@ var link = (function() {
};
render.item = {
color: {
custom: function() {
helper.e("html").style.setProperty("--link-item-color-custom", state.get.current().link.item.color.custom.r + ", " + state.get.current().link.item.color.custom.g + ", " + state.get.current().link.item.color.custom.b);
}
},
link: function() {
var linkItemOptions = {
tag: "div",
@ -1661,6 +1666,15 @@ var link = (function() {
}
};
render.input = {
picker: function() {
helper.e(".control-link-item-color-by-picker").value = helper.rgbToHex(state.get.current().link.item.color.custom);
},
hex: function() {
helper.e(".control-link-item-color-by-hex").value = helper.rgbToHex(state.get.current().link.item.color.custom);
}
};
var add = {
item: {
open: function() {
@ -1756,6 +1770,7 @@ var link = (function() {
groupAndItems();
render.group.size();
render.group.border();
render.item.color.custom();
render.item.size();
render.item.display.letter();
render.item.display.icon();

8
src/js/state.js
View File

@ -139,6 +139,14 @@ var state = (function() {
alignment: "center"
},
item: {
color: {
by: "theme",
custom: {
r: 0,
g: 0,
b: 0
}
},
display: {
letcon: {
show: true,

11
src/js/update.js
View File

@ -711,6 +711,17 @@ var update = (function() {
data.state.header.button.colorAccent = data.state.header.button.accent;
delete data.state.header.button.accent;
return data;
},
"4.5.0": function(data) {
data.state.link.item.color = {
by: "theme",
custom: {
r: 0,
g: 0,
b: 0
}
};
return data;
}
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "4.4.1";
var current = "4.5.0";
var name = "Enchanting Aardvark";

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": "4.4.1",
"version": "4.5.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"