extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-25 08:09:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add shade theme controls

Browse Source
This commit is contained in:
zombieFox 2020-01-13 19:42:45 +00:00
parent 887ab26f73
commit ee73519438
11 changed files with 184 additions and 38 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.16.1",
"version": "4.17.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

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

2
src/css/shade.css
View File

@ -1,5 +1,5 @@
.shade {
background-color: rgba(var(--theme-accent), 0.4);
background-color: rgba(var(--theme-accent), var(--theme-shade-opacity));
position: fixed;
top: -1em;
left: -1em;

1
src/css/variables.css
View File

@ -71,6 +71,7 @@
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 2))),
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 3))),
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 4)));
--theme-shade-opacity: 0.4;
/* header */
--header-area-width: 100%;
--header-shade-color: var(--theme-color-01);

22
src/index.html
View File

@ -1877,7 +1877,27 @@
</div>
</div>
<div class="form-helper">
<p class="control-theme-shadow-helper form-helper-item">Bookmarks and Modals will use the Large shadow.</p>
<p class="control-theme-shadow-helper form-helper-item">Bookmarks and Modals use the Large shadow.</p>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Shade</h1>
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-theme-shade-opacity">Opacity</label>
<div class="form-group form-group-block">
<input id="control-theme-shade-opacity" class="control-theme-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-theme-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="form-wrap">
<button class="control-theme-shade-opacity-default button" tabindex="-1">Default opacity</button>
</div>
<div class="form-helper">
<p class="control-theme-shade-opacity-helper form-helper-item">The shade appears behind Modals and the Menu.</p>
</div>
</div>
</div>

22
src/js/control.js
View File

@ -2984,6 +2984,28 @@ var control = (function() {
theme.render.shadow();
render.range.count(this);
}
}, {
element: helper.e(".control-theme-shade-opacity"),
path: "theme.shade.opacity",
type: "range",
valueMod: ["reverse", "float"],
rangeCountElement: helper.e(".control-theme-shade-opacity-count"),
func: function() {
theme.render.shade.opacity();
render.class();
render.range.count(this);
}
}, {
element: helper.e(".control-theme-shade-opacity-default"),
type: "button",
func: function() {
mod.setValue("theme.shade.opacity", helper.getObject({
object: state.get.default(),
path: "theme.shade.opacity"
}));
theme.render.shade.opacity();
render.update();
}
}, {
element: helper.e(".control-theme-shadow-default"),
type: "button",

8
src/js/state.js
View File

@ -262,6 +262,9 @@ var state = (function() {
style: "dark",
radius: 0.25,
shadow: 1,
shade: {
opacity: 0.4
},
custom: {
all: [],
edit: false
@ -402,7 +405,10 @@ var state = (function() {
},
style: "dark",
radius: 0.25,
shadow: 1
shadow: 1,
shade: {
opacity: 0.4
}
}
};

153
src/js/theme.js
View File

@ -9,11 +9,13 @@ var theme = (function() {
},
theme: {
name: null,
style: null,
font: null,
color: null,
accent: null,
radius: null,
shadow: null,
style: null,
shade: null,
timestamp: null
}
};
@ -27,6 +29,7 @@ var theme = (function() {
stagedThemeCustom.theme.radius = null;
stagedThemeCustom.theme.shadow = null;
stagedThemeCustom.theme.style = null;
stagedThemeCustom.theme.shade = null;
stagedThemeCustom.theme.timestamp = null;
};
@ -53,6 +56,11 @@ var theme = (function() {
path: "theme.radius",
newValue: data.radius
});
helper.setObject({
object: state.get.current(),
path: "theme.shadow",
newValue: data.shadow
});
helper.setObject({
object: state.get.current(),
path: "theme.style",
@ -60,8 +68,8 @@ var theme = (function() {
});
helper.setObject({
object: state.get.current(),
path: "theme.shadow",
newValue: data.shadow
path: "theme.shade",
newValue: data.shade
});
};
@ -178,7 +186,8 @@ var theme = (function() {
accent: state.get.default().theme.accent.current,
radius: state.get.default().theme.radius,
shadow: state.get.default().theme.shadow,
style: state.get.default().theme.style
style: state.get.default().theme.style,
shade: state.get.default().theme.shade
}, {
name: "Black",
font: state.get.default().theme.font,
@ -205,7 +214,8 @@ var theme = (function() {
},
radius: state.get.default().theme.radius,
shadow: state.get.default().theme.shadow,
style: "dark"
style: "dark",
shade: state.get.default().theme.shade
}, {
name: "White",
font: state.get.default().theme.font,
@ -232,7 +242,8 @@ var theme = (function() {
},
radius: state.get.default().theme.radius,
shadow: state.get.default().theme.shadow,
style: "light"
style: "light",
shade: state.get.default().theme.shade
}, {
name: "Midnight",
font: {
@ -270,7 +281,10 @@ var theme = (function() {
},
radius: 0.5,
shadow: 0.75,
style: "dark"
style: "dark",
shade: {
opacity: 0.1
}
}, {
name: "Lex",
font: {
@ -308,7 +322,10 @@ var theme = (function() {
},
radius: 0.1,
shadow: 1,
style: "dark"
style: "dark",
shade: {
opacity: 0.9
}
}, {
name: "Cruiser",
font: {
@ -346,7 +363,10 @@ var theme = (function() {
},
radius: 0.2,
shadow: 1.5,
style: "dark"
style: "dark",
shade: {
opacity: 0.7
}
}, {
name: "Sharp Mint",
font: {
@ -384,7 +404,10 @@ var theme = (function() {
},
radius: 0.8,
shadow: 1,
style: "dark"
style: "dark",
shade: {
opacity: 0.4
}
}, {
name: "Snow Glow",
font: {
@ -422,7 +445,10 @@ var theme = (function() {
},
radius: 0,
shadow: 0.5,
style: "light"
style: "light",
shade: {
opacity: 0.6
}
}, {
name: "Rumble",
font: {
@ -460,7 +486,10 @@ var theme = (function() {
},
radius: 0.75,
shadow: 1.75,
style: "dark"
style: "dark",
shade: {
opacity: 0.5
}
}, {
name: "Sol",
font: {
@ -498,7 +527,10 @@ var theme = (function() {
},
radius: 0.5,
shadow: 0.25,
style: "light"
style: "light",
shade: {
opacity: 0.9
}
}, {
name: "Art Deco",
font: {
@ -536,7 +568,10 @@ var theme = (function() {
},
radius: 2,
shadow: 0.5,
style: "dark"
style: "dark",
shade: {
opacity: 0.1
}
}, {
name: "Grimm",
font: {
@ -574,7 +609,10 @@ var theme = (function() {
},
radius: 1,
shadow: 1.5,
style: "dark"
style: "dark",
shade: {
opacity: 0.9
}
}, {
name: "Macaroon",
font: {
@ -612,7 +650,10 @@ var theme = (function() {
},
radius: 0.40,
shadow: 0.5,
style: "light"
style: "light",
shade: {
opacity: 0.3
}
}, {
name: "Hot Pepper",
font: {
@ -650,7 +691,10 @@ var theme = (function() {
},
radius: 0.6,
shadow: 1,
style: "dark"
style: "dark",
shade: {
opacity: 0.1
}
}, {
name: "Steel",
font: {
@ -688,7 +732,10 @@ var theme = (function() {
},
radius: 0.3,
shadow: 0.5,
style: "light"
style: "light",
shade: {
opacity: 0.7
}
}, {
name: "Outrun",
font: {
@ -726,7 +773,10 @@ var theme = (function() {
},
radius: 0,
shadow: 0,
style: "dark"
style: "dark",
shade: {
opacity: 0.4
}
}, {
name: "Pumpkin",
font: {
@ -764,7 +814,10 @@ var theme = (function() {
},
radius: 0.2,
shadow: 1,
style: "dark"
style: "dark",
shade: {
opacity: 0.1
}
}, {
name: "Funkadelic",
font: {
@ -802,7 +855,10 @@ var theme = (function() {
},
radius: 1.2,
shadow: 0,
style: "dark"
style: "dark",
shade: {
opacity: 0.8
}
}, {
name: "Elder Bean",
font: {
@ -840,7 +896,10 @@ var theme = (function() {
},
radius: 0.5,
shadow: 1.75,
style: "dark"
style: "dark",
shade: {
opacity: 0.1
}
}, {
name: "Marker",
font: {
@ -878,7 +937,10 @@ var theme = (function() {
},
radius: 0.3,
shadow: 0.25,
style: "light"
style: "light",
shade: {
opacity: 0.9
}
}, {
name: "Kapow",
font: {
@ -916,7 +978,10 @@ var theme = (function() {
},
radius: 0.4,
shadow: 1,
style: "dark"
style: "dark",
shade: {
opacity: 0.7
}
}, {
name: "Dash",
font: {
@ -954,7 +1019,10 @@ var theme = (function() {
},
radius: 0,
shadow: 0,
style: "light"
style: "light",
shade: {
opacity: 0.5
}
}, {
name: "Savage",
font: {
@ -992,7 +1060,10 @@ var theme = (function() {
},
radius: 0,
shadow: 2.5,
style: "dark"
style: "dark",
shade: {
opacity: 0.8
}
}, {
name: "Trine",
font: {
@ -1030,7 +1101,10 @@ var theme = (function() {
},
radius: 0.5,
shadow: 1.25,
style: "dark"
style: "dark",
shade: {
opacity: 0.1
}
}, {
name: "Obsidian",
font: {
@ -1068,7 +1142,10 @@ var theme = (function() {
},
radius: 0.25,
shadow: 2,
style: "dark"
style: "dark",
shade: {
opacity: 0.05
}
}, {
name: "Earthquake",
font: {
@ -1106,7 +1183,10 @@ var theme = (function() {
},
radius: 0.80,
shadow: 1,
style: "dark"
style: "dark",
shade: {
opacity: 0.8
}
}]
};
@ -1466,8 +1546,9 @@ var theme = (function() {
render.font.ui.style();
render.color.shade();
render.accent.color();
render.shadow();
render.radius();
render.shadow();
render.shade.opacity();
style.check();
link.groupAndItems();
control.render.update();
@ -1557,8 +1638,9 @@ var theme = (function() {
render.font.ui.style();
render.color.shade();
render.accent.color();
render.shadow();
render.radius();
render.shadow();
render.shade.opacity();
style.check();
link.groupAndItems();
control.render.update();
@ -1621,6 +1703,7 @@ var theme = (function() {
stagedThemeCustom.theme.radius = state.get.current().theme.radius;
stagedThemeCustom.theme.shadow = state.get.current().theme.shadow;
stagedThemeCustom.theme.style = state.get.current().theme.style;
stagedThemeCustom.theme.shade = state.get.current().theme.shade;
stagedThemeCustom.theme.timestamp = new Date().getTime();
mod.custom.add();
data.save();
@ -1770,6 +1853,13 @@ var theme = (function() {
}
};
render.shade = {
opacity: function() {
var html = helper.e("html");
html.style.setProperty("--theme-shade-opacity", state.get.current().theme.shade.opacity);
}
};
var accent = {
random: function() {
mod.accent.random();
@ -1835,6 +1925,7 @@ var theme = (function() {
render.accent.color();
render.radius();
render.shadow();
render.shade.opacity();
render.preset();
render.custom.all();
custom.check();

6
src/js/update.js
View File

@ -764,6 +764,12 @@ var update = (function() {
edit: false
};
return data;
},
"4.17.0": function(data) {
data.state.theme.shade = {
opacity: 0.4
};
return data;
}
};

2
src/js/version.js
View File

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

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