extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-28 17:48:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve header shade logic

Browse Source
This commit is contained in:
zombieFox 2019-06-25 23:23:27 +01:00
parent c012a476ac
commit ffa7ea4554
6 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/css/header.css
View File

@ -3,6 +3,11 @@
display: flex;
flex-direction: row;
z-index: var(--z-index-header);
pointer-events: none;
}
.is-header-shade-show .header {
pointer-events: all;
}
.is-header-area-alignment-horizontal-left .header {
@ -39,20 +44,19 @@
height: 100%;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
transition: background-color var(--layout-animation-speed-slow) ease-in-out, border-radius var(--layout-animation-speed-fast) ease-in-out;
}
.is-header-radius .header-shade {
border-radius: calc(var(--theme-radius) * 4);
}
.is-header-shade-show .header-shade {
background-color: rgba(var(--header-shade-color), var(--header-shade-opacity));
}
.is-header-shade-style-always .header-shade,
.is-header-shade-style-scroll .header-shade {
transition: background-color var(--layout-animation-speed-slow) ease-in-out;
animation: none;
background-color: rgba(var(--header-shade-color));
opacity: var(--header-shade-opacity);
}
.is-header-border-top .header-shade {
@ -67,6 +71,7 @@
padding: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
position: relative;
width: var(--header-area-width);
pointer-events: none;
}
.is-header-border-top .header-area {
@ -109,7 +114,6 @@
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
pointer-events: none;
}
.is-header-item-alignment-horizontal-left .header-item-grid {

2
src/css/variables.css
View File

@ -27,7 +27,7 @@
--theme-shade-20: 250, 250, 250;
/* header */
--header-area-width: 100%;
--header-shade-color: transparent;
--header-shade-color: var(--theme-gray-01);
--header-shade-opacity: 0.95;
--header-search-width: 0%;
--header-border-top: 0;

3
src/js/control.js
View File

@ -2320,11 +2320,8 @@ var control = (function() {
};
var _shade = function() {
helper.removeClass(html, "is-header-shade-show");
helper.removeClass(html, "is-header-shade-style-always");
helper.removeClass(html, "is-header-shade-style-scroll");
if (state.get().header.shade.show) {
helper.addClass(html, "is-header-shade-show");
helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style);
};
if (state.get().header.radius) {
helper.addClass(html, "is-header-radius");

23
src/js/header.js
View File

@ -81,28 +81,35 @@ var header = (function() {
var scrollTop = document.documentElement.scrollTop;
var scrollHeight = document.documentElement.scrollHeight;
var innerHeight = window.innerHeight;
// if shade show
if (state.get().header.shade.show) {
// shade always
if (state.get().header.shade.style == "always") {
html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
helper.removeClass(html, "is-header-shade-style-scroll");
helper.addClass(html, "is-header-shade-style-always");
// shade scroll
} else if (state.get().header.shade.style == "scroll") {
helper.removeClass(html, "is-header-shade-style-always");
// check header position
if (state.get().layout.order == "headerLink") {
// check scroll position
if (scrollTop > fontSize * 2) {
html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
helper.addClass(html, "is-header-shade-style-scroll");
} else {
html.style.setProperty("--header-shade-color", "transparent");
helper.removeClass(html, "is-header-shade-style-scroll");
};
} else if (state.get().layout.order == "linkHeader") {
// check scroll position
if (scrollTop < (scrollHeight - innerHeight) - (fontSize * 2)) {
html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
helper.addClass(html, "is-header-shade-style-scroll");
} else {
html.style.setProperty("--header-shade-color", "transparent");
helper.removeClass(html, "is-header-shade-style-scroll");
};
};
} else {
html.style.setProperty("--header-shade-color", "transparent");
};
} else {
html.style.setProperty("--header-shade-color", "transparent");
helper.removeClass(html, "is-header-shade-style-scroll");
helper.removeClass(html, "is-header-shade-style-always");
};
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "3.23.1";
var current = "3.24.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.23.1",
"version": "3.24.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"