extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-27 04:51:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add header background colour controls

Browse Source
This commit is contained in:
zombieFox 2020-01-16 20:15:54 +00:00
parent 30815c1729
commit bd9b96f537
13 changed files with 245 additions and 129 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", "name": "nighttab",
"version": "4.22.0", "version": "4.23.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

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

26
src/css/header.css
View File

@ -6,7 +6,7 @@
pointer-events: none; pointer-events: none;
} }
.is-header-shade-show .header { .is-header-color-show .header {
pointer-events: all; pointer-events: all;
} }
@ -40,7 +40,7 @@
bottom: 0; bottom: 0;
} }
.header-shade { .header-color {
background-color: transparent; background-color: transparent;
content: ""; content: "";
width: 100%; width: 100%;
@ -53,18 +53,24 @@
transition: background-color var(--layout-timing-medium), opacity var(--layout-timing-medium), border-radius var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-medium), opacity var(--layout-timing-medium), border-radius var(--layout-timing-extra-fast);
} }
.is-header-radius .header-shade { .is-header-radius .header-color {
border-radius: calc(var(--theme-radius) * 4); border-radius: calc(var(--theme-radius) * 4);
} }
.is-background-color-by-theme.is-header-shade-style-always .header-shade, .is-header-color-by-theme.is-header-color-style-always .header-color {
.is-background-color-by-theme.is-header-shade-style-scroll .header-shade { background-color: rgba(var(--header-color-theme), var(--header-opacity));
background-color: rgba(var(--header-shade-color), var(--header-shade-opacity));
} }
.is-background-color-by-custom.is-header-shade-style-always .header-shade, .is-header-color-by-theme.is-header-color-style-scroll.is-header-color-style-scrolling .header-color {
.is-background-color-by-custom.is-header-shade-style-scroll .header-shade { background-color: rgba(var(--header-color-theme), var(--header-opacity));
background-color: rgba(var(--background-color-custom), var(--header-shade-opacity)); }
.is-header-color-by-custom.is-header-color-style-always .header-color {
background-color: rgba(var(--header-color-custom), var(--header-opacity));
}
.is-header-color-by-custom.is-header-color-style-scroll.is-header-color-style-scrolling .header-color {
background-color: rgba(var(--header-color-custom), var(--header-opacity));
} }
.header-area { .header-area {
@ -100,7 +106,7 @@
border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent)); border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
} }
.is-header-radius .header-shade { .is-header-radius .header-color {
border-radius: calc(var(--theme-radius) * 4); border-radius: calc(var(--theme-radius) * 4);
} }

4
src/css/link.css
View File

@ -30,12 +30,12 @@
} }
.is-layout-order-headerlink.is-header-border-bottom .link, .is-layout-order-headerlink.is-header-border-bottom .link,
.is-layout-order-headerlink.is-header-shade-style-always .link { .is-layout-order-headerlink.is-header-color-style-always .link {
margin-top: 0; margin-top: 0;
} }
.is-layout-order-linkheader.is-header-border-top .link, .is-layout-order-linkheader.is-header-border-top .link,
.is-layout-order-linkheader.is-header-shade-style-always .link { .is-layout-order-linkheader.is-header-color-style-always .link {
margin-bottom: 0; margin-bottom: 0;
} }

5
src/css/variables.css
View File

@ -74,8 +74,9 @@
--theme-shade-opacity: 0.4; --theme-shade-opacity: 0.4;
/* header */ /* header */
--header-area-width: 100%; --header-area-width: 100%;
--header-shade-color: var(--theme-color-01); --header-color-theme: var(--theme-color-01);
--header-shade-opacity: 0.95; --header-color-custom: rgb(0, 0, 0);
--header-opacity: 0.95;
--header-search-width: 0%; --header-search-width: 0%;
--header-border-top: 0; --header-border-top: 0;
--header-border-bottom: 0; --header-border-bottom: 0;

57
src/index.html
View File

@ -50,7 +50,7 @@
<main class="layout"> <main class="layout">
<header class="header"> <header class="header">
<div class="header-shade"></div> <div class="header-color"></div>
<div class="header-border"></div> <div class="header-border"></div>
<div class="header-area"> <div class="header-area">
<div class="header-item-grid"> <div class="header-item-grid">
@ -925,36 +925,61 @@
</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">Shade</h1> <h1 class="menu-item-header-text">Background colour</h1>
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="-1"> <input id="control-header-color-show" class="control-header-color-show" type="checkbox" tabindex="-1">
<label for="control-header-shade-show"><span class="label-icon"></span> Show</label> <label for="control-header-color-show"><span class="label-icon"></span> Show</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="-1"> <input id="control-header-color-style-always" class="control-header-color-style-always" type="radio" name="control-header-color-style" value="always" tabindex="-1">
<label for="control-header-shade-style-always"><span class="label-icon"></span> Always visible</label> <label for="control-header-color-style-always"><span class="label-icon"></span> Always visible</label>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-header-shade-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p> <p class="control-header-color-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="-1"> <input id="control-header-color-style-scroll" class="control-header-color-style-scroll" type="radio" name="control-header-color-style" value="scroll" tabindex="-1">
<label for="control-header-shade-style-scroll"><span class="label-icon"></span> Visible on scroll</label> <label for="control-header-color-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-header-shade-style-scroll-helper form-helper-item">The page will not scroll if Bookmarks are not shown.</p> <p class="control-header-color-style-scroll-helper form-helper-item">The page will not scroll if Bookmarks are not shown.</p>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-header-shade-opacity">Opacity</label> <input id="control-header-color-by-theme" class="control-header-color-by-theme" type="radio" name="control-header-color-by" value="theme" tabindex="-1">
<label for="control-header-color-by-theme"><span class="label-icon"></span> Theme colour</label>
</div>
<div class="form-helper">
<p class="control-header-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
</div>
<div class="form-wrap">
<input id="control-header-color-by-custom" class="control-header-color-by-custom" type="radio" name="control-header-color-by" value="custom" tabindex="-1">
<label for="control-header-color-by-custom"><span class="label-icon"></span> Custom colour</label>
</div>
<div class="form-helper">
<p class="control-header-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<div class="form-group form-group-block">
<input id="control-header-color-rgb-picker" class="form-group-item-half control-header-color-rgb-picker" type="color" value="#000000" tabindex="1">
<input id="control-header-color-rgb-hex" class="form-group-item-half control-header-color-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
</div>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-header-color-opacity">Opacity</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<input id="control-header-shade-opacity" class="control-header-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1"> <input id="control-header-color-opacity" class="control-header-color-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-header-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div> <div class="control-header-color-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
<button class="control-header-shade-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button> <button class="control-header-color-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
</div> </div>
</div> </div>
<hr> <hr>
@ -1871,8 +1896,8 @@
<div class="form-indent"> <div class="form-indent">
<div class="form-wrap"> <div class="form-wrap">
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<input id="control-background-color-picker" class="form-group-item-half control-background-color-picker" type="color" value="#000000" tabindex="1"> <input id="control-background-color-rgb-picker" class="form-group-item-half control-background-color-rgb-picker" type="color" value="#000000" tabindex="1">
<input id="control-background-color-hex" class="form-group-item-half control-background-color-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> <input id="control-background-color-rgb-hex" class="form-group-item-half control-background-color-rgb-hex" 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>

4
src/js/background.js
View File

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

158
src/js/control.js
View File

@ -298,7 +298,7 @@ var control = (function() {
func: function() { func: function() {
render.class(); render.class();
layout.render.order(); layout.render.order();
header.render.shade(); header.render.color.scrolling();
} }
}, { }, {
element: helper.e(".control-layout-order-linkheader"), element: helper.e(".control-layout-order-linkheader"),
@ -307,7 +307,7 @@ var control = (function() {
func: function() { func: function() {
render.class(); render.class();
layout.render.order(); layout.render.order();
header.render.shade(); header.render.color.scrolling();
} }
}, { }, {
element: helper.e(".control-layout-padding"), element: helper.e(".control-layout-padding"),
@ -458,7 +458,7 @@ var control = (function() {
type: "checkbox", type: "checkbox",
func: function() { func: function() {
render.class(); render.class();
header.render.shade(); header.render.color.scrolling();
} }
}, { }, {
element: helper.e(".control-header-area-width"), element: helper.e(".control-header-area-width"),
@ -1762,47 +1762,80 @@ var control = (function() {
render.update(); render.update();
} }
}, { }, {
element: helper.e(".control-header-shade-show"), element: helper.e(".control-header-color-show"),
path: "header.shade.show", path: "header.color.show",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
render.class(); render.class();
render.dependents(); render.dependents();
header.render.shade(); header.render.color.scrolling();
} }
}, { }, {
element: helper.e(".control-header-shade-style-always"), element: helper.e(".control-header-color-style-always"),
path: "header.shade.style", path: "header.color.style",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
header.render.shade(); header.render.color.scrolling();
} }
}, { }, {
element: helper.e(".control-header-shade-style-scroll"), element: helper.e(".control-header-color-style-scroll"),
path: "header.shade.style", path: "header.color.style",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
header.render.shade(); header.render.color.scrolling();
} }
}, { }, {
element: helper.e(".control-header-shade-opacity"), element: helper.e(".control-header-color-by-theme"),
path: "header.shade.opacity", path: "header.color.by",
type: "radio",
func: function() {
render.class();
render.dependents();
}
}, {
element: helper.e(".control-header-color-by-custom"),
path: "header.color.by",
type: "radio",
func: function() {
render.class();
render.dependents();
}
}, {
element: helper.e(".control-header-color-rgb-picker"),
path: "header.color.rgb",
type: "color",
func: function() {
header.render.color.custom();
header.render.input.hex();
}
}, {
element: helper.e(".control-header-color-rgb-hex"),
path: "header.color.rgb",
type: "text",
valueMod: ["hexTextString"],
func: function() {
header.render.color.custom();
header.render.input.picker();
}
}, {
element: helper.e(".control-header-color-opacity"),
path: "header.color.opacity",
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
rangeCountElement: helper.e(".control-header-shade-opacity-count"), rangeCountElement: helper.e(".control-header-color-opacity-count"),
func: function() { func: function() {
header.render.opacity(); header.render.opacity();
render.range.count(this); render.range.count(this);
} }
}, { }, {
element: helper.e(".control-header-shade-opacity-default"), element: helper.e(".control-header-color-opacity-default"),
type: "button", type: "button",
func: function() { func: function() {
mod.setValue("header.shade.opacity", helper.getObject({ mod.setValue("header.color.opacity", helper.getObject({
object: state.get.default(), object: state.get.default(),
path: "header.shade.opacity" path: "header.color.opacity"
})); }));
header.render.opacity(); header.render.opacity();
render.update(); render.update();
@ -3151,7 +3184,7 @@ var control = (function() {
render.class(); render.class();
} }
}, { }, {
element: helper.e(".control-background-color-picker"), element: helper.e(".control-background-color-rgb-picker"),
path: "background.color.rgb", path: "background.color.rgb",
type: "color", type: "color",
func: function() { func: function() {
@ -3159,7 +3192,7 @@ var control = (function() {
background.render.input.hex(); background.render.input.hex();
} }
}, { }, {
element: helper.e(".control-background-color-hex"), element: helper.e(".control-background-color-rgb-hex"),
path: "background.color.rgb", path: "background.color.rgb",
type: "text", type: "text",
valueMod: ["hexTextString"], valueMod: ["hexTextString"],
@ -3544,15 +3577,22 @@ var control = (function() {
helper.removeClass(html, "is-header-transitional-show"); helper.removeClass(html, "is-header-transitional-show");
}; };
}; };
var _shade = function() { var _color = function() {
helper.removeClass(html, "is-header-shade-show"); helper.removeClass(html, "is-header-color-show");
if (state.get.current().header.shade.show) { helper.removeClass(html, "is-header-color-style-scroll");
helper.addClass(html, "is-header-shade-show"); helper.removeClass(html, "is-header-color-style-always");
helper.removeClass(html, "is-header-color-by-theme");
helper.removeClass(html, "is-header-color-by-custom");
if (state.get.current().header.color.show) {
helper.addClass(html, "is-header-color-show");
helper.addClass(html, "is-header-color-style-" + state.get.current().header.color.style);
helper.addClass(html, "is-header-color-by-" + state.get.current().header.color.by);
}; };
if (state.get.current().header.radius) { };
var _radius = function() {
helper.removeClass(html, "is-header-radius");
if (state.get.current().header.radius > 0) {
helper.addClass(html, "is-header-radius"); helper.addClass(html, "is-header-radius");
} else {
helper.removeClass(html, "is-header-radius");
}; };
}; };
var _border = function() { var _border = function() {
@ -3576,7 +3616,8 @@ var control = (function() {
_date(); _date();
_search(); _search();
_button(); _button();
_shade(); _color();
_radius();
_border(); _border();
_greeting(); _greeting();
_position(); _position();
@ -3908,29 +3949,48 @@ var control = (function() {
}; };
}; };
var _shade = function() { var _shade = function() {
if (state.get.current().header.shade.show) { if (state.get.current().header.color.show) {
_disable.input(".control-header-shade-style-always", false); _disable.input(".control-header-color-style-always", false);
_disable.element(".control-header-shade-style-always-helper", false); _disable.element(".control-header-color-style-always-helper", false);
_disable.input(".control-header-shade-style-scroll", false); _disable.input(".control-header-color-style-scroll", false);
_disable.element(".control-header-shade-style-scroll-helper", false); _disable.element(".control-header-color-style-scroll-helper", false);
_disable.element("[for=control-header-shade-opacity]", false); _disable.input(".control-header-color-by-theme", false);
_disable.input(".control-header-shade-opacity", false); _disable.element(".control-header-color-by-theme-helper", false);
_disable.element(".control-header-shade-opacity-count", false); _disable.input(".control-header-color-by-custom", false);
_disable.input(".control-header-shade-opacity-default", false); _disable.element(".control-header-color-by-custom-helper", false);
_disable.input(".control-header-color-rgb-picker", false);
_disable.input(".control-header-color-rgb-hex", false);
_disable.element("[for=control-header-color-opacity]", false);
_disable.input(".control-header-color-opacity", false);
_disable.element(".control-header-color-opacity-count", false);
_disable.input(".control-header-color-opacity-default", false);
_disable.input(".control-header-radius", false); _disable.input(".control-header-radius", false);
_disable.element(".control-header-radius-helper", false); _disable.element(".control-header-radius-helper", false);
} else { } else {
_disable.input(".control-header-shade-style-always", true); _disable.input(".control-header-color-style-always", true);
_disable.element(".control-header-shade-style-always-helper", true); _disable.element(".control-header-color-style-always-helper", true);
_disable.input(".control-header-shade-style-scroll", true); _disable.input(".control-header-color-style-scroll", true);
_disable.element(".control-header-shade-style-scroll-helper", true); _disable.element(".control-header-color-style-scroll-helper", true);
_disable.element("[for=control-header-shade-opacity]", true); _disable.input(".control-header-color-by-theme", true);
_disable.input(".control-header-shade-opacity", true); _disable.element(".control-header-color-by-theme-helper", true);
_disable.element(".control-header-shade-opacity-count", true); _disable.input(".control-header-color-by-custom", true);
_disable.input(".control-header-shade-opacity-default", true); _disable.element(".control-header-color-by-custom-helper", true);
_disable.input(".control-header-color-rgb-picker", true);
_disable.input(".control-header-color-rgb-hex", true);
_disable.element("[for=control-header-color-opacity]", true);
_disable.input(".control-header-color-opacity", true);
_disable.element(".control-header-color-opacity-count", true);
_disable.input(".control-header-color-opacity-default", true);
_disable.input(".control-header-radius", true); _disable.input(".control-header-radius", true);
_disable.element(".control-header-radius-helper", true); _disable.element(".control-header-radius-helper", true);
}; };
if (state.get.current().header.color.by == "theme") {
_disable.input(".control-header-color-rgb-picker", true);
_disable.input(".control-header-color-rgb-hex", true);
} else if (state.get.current().header.color.by == "custom") {
_disable.input(".control-header-color-rgb-picker", false);
_disable.input(".control-header-color-rgb-hex", false);
};
}; };
var _button = function() { var _button = function() {
_disable.input(".control-header-button-coloraccent-dot-show", true); _disable.input(".control-header-button-coloraccent-dot-show", true);
@ -4387,11 +4447,11 @@ var control = (function() {
_disable.element(".control-background-image-url-helper", true); _disable.element(".control-background-image-url-helper", true);
}; };
if (state.get.current().background.color.by == "theme") { if (state.get.current().background.color.by == "theme") {
_disable.input(".control-background-color-picker", true); _disable.input(".control-background-color-rgb-picker", true);
_disable.input(".control-background-color-hex", true); _disable.input(".control-background-color-rgb-hex", true);
} else if (state.get.current().background.color.by == "custom") { } else if (state.get.current().background.color.by == "custom") {
_disable.input(".control-background-color-picker", false); _disable.input(".control-background-color-rgb-picker", false);
_disable.input(".control-background-color-hex", false); _disable.input(".control-background-color-rgb-hex", false);
}; };
}; };
_header(); _header();

91
src/js/header.js
View File

@ -4,24 +4,24 @@ var header = (function() {
bind.resize = function() { bind.resize = function() {
window.addEventListener("resize", function() { window.addEventListener("resize", function() {
render.shade(); render.color.scrolling();
}, false); }, false);
}; };
bind.scroll = function() { bind.scroll = function() {
window.addEventListener("scroll", function() { window.addEventListener("scroll", function() {
render.shade(); render.color.scrolling();
}, false); }, false);
helper.eA(".container").forEach(function(arrayItem, index) { helper.eA(".container").forEach(function(arrayItem, index) {
arrayItem.addEventListener("transitionend", function() { arrayItem.addEventListener("transitionend", function() {
render.shade(); render.color.scrolling();
}, false); }, false);
}); });
}; };
bind.fonts = function() { bind.fonts = function() {
document.fonts.ready.then(function() { document.fonts.ready.then(function() {
render.shade(); render.color.scrolling();
}); });
}; };
@ -34,50 +34,56 @@ var header = (function() {
} }
}; };
render.shade = function() { render.color = {
var html = helper.e("html"); custom: function() {
var headerRect = helper.e(".header").getBoundingClientRect(); helper.e("html").style.setProperty("--header-color-custom", state.get.current().header.color.rgb.r + ", " + state.get.current().header.color.rgb.g + ", " + state.get.current().header.color.rgb.b);
var layoutRect = helper.e(".layout").getBoundingClientRect(); },
var fontSize = parseInt(getComputedStyle(html).fontSize, 10); scrolling: function() {
var scrollTop = document.documentElement.scrollTop; var html = helper.e("html");
// var scrollHeight = document.documentElement.scrollHeight; var headerRect = helper.e(".header").getBoundingClientRect();
var innerHeight = window.innerHeight; var layoutRect = helper.e(".layout").getBoundingClientRect();
// if shade show var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
if (state.get.current().header.shade.show) { var scrollTop = document.documentElement.scrollTop;
// shade always // var scrollHeight = document.documentElement.scrollHeight;
if (state.get.current().header.shade.style == "always") { var innerHeight = window.innerHeight;
helper.removeClass(html, "is-header-shade-style-scroll"); // if color show
helper.addClass(html, "is-header-shade-style-always"); if (state.get.current().header.color.show) {
// shade scroll // color always
} else if (state.get.current().header.shade.style == "scroll") { if (state.get.current().header.color.style == "scroll") {
helper.removeClass(html, "is-header-shade-style-always"); // check header position
// check header position if (state.get.current().layout.order == "headerlink") {
if (state.get.current().layout.order == "headerlink") { // check scroll position
// check scroll position if (scrollTop > fontSize * 2 && headerRect.top == 0) {
if (scrollTop > fontSize * 2 && headerRect.top == 0) { helper.addClass(html, "is-header-color-style-scrolling");
helper.addClass(html, "is-header-shade-style-scroll"); } else {
} else { helper.removeClass(html, "is-header-color-style-scrolling");
helper.removeClass(html, "is-header-shade-style-scroll"); };
}; } else if (state.get.current().layout.order == "linkheader") {
} else if (state.get.current().layout.order == "linkheader") { // check scroll position
// check scroll position if (headerRect.bottom == innerHeight && (scrollTop + innerHeight) < ((scrollTop + layoutRect.bottom) - (fontSize * 2))) {
if (headerRect.bottom == innerHeight && (scrollTop + innerHeight) < ((scrollTop + layoutRect.bottom) - (fontSize * 2))) { helper.addClass(html, "is-header-color-style-scrolling");
helper.addClass(html, "is-header-shade-style-scroll"); } else {
} else { helper.removeClass(html, "is-header-color-style-scrolling");
helper.removeClass(html, "is-header-shade-style-scroll"); };
}; };
}; };
}; };
} else { }
helper.removeClass(html, "is-header-shade-style-scroll"); };
helper.removeClass(html, "is-header-shade-style-always");
}; render.input = {
picker: function() {
helper.e(".control-header-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().header.color.rgb);
},
hex: function() {
helper.e(".control-header-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().header.color.rgb);
}
}; };
render.opacity = function() { render.opacity = function() {
var html = helper.e("html"); var html = helper.e("html");
if (state.get.current().header.shade.show) { if (state.get.current().header.color.show) {
html.style.setProperty("--header-shade-opacity", state.get.current().header.shade.opacity); html.style.setProperty("--header-opacity", state.get.current().header.color.opacity);
}; };
}; };
@ -174,7 +180,8 @@ var header = (function() {
bind.scroll(); bind.scroll();
bind.fonts(); bind.fonts();
render.area.width(); render.area.width();
render.shade(); render.color.scrolling();
render.color.custom();
render.opacity(); render.opacity();
render.border(); render.border();
render.greeting.size(); render.greeting.size();

10
src/js/state.js
View File

@ -113,7 +113,13 @@ var state = (function() {
style: "box", style: "box",
size: 1 size: 1
}, },
shade: { color: {
by: "theme",
rgb: {
r: 0,
g: 0,
b: 0
},
show: true, show: true,
style: "scroll", style: "scroll",
opacity: 0.95 opacity: 0.95
@ -323,7 +329,7 @@ var state = (function() {
button: { button: {
size: 1 size: 1
}, },
shade: { color: {
opacity: 0.95 opacity: 0.95
}, },
border: { border: {

11
src/js/update.js
View File

@ -790,6 +790,17 @@ var update = (function() {
data.state.background.color.rgb = data.state.background.color.custom; data.state.background.color.rgb = data.state.background.color.custom;
delete data.state.background.color.custom; delete data.state.background.color.custom;
return data; return data;
},
"4.23.0": function(data) {
data.state.header.color = data.state.header.shade;
delete data.state.header.shade;
data.state.header.color.by = "theme";
data.state.header.color.rgb = {
r: 0,
g: 0,
b: 0
};
return data;
} }
}; };

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "4.22.0"; var current = "4.23.0";
var name = "Naughty Goose"; var name = "Naughty Goose";

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