extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-03-10 12:48:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add scrollbar width controls

Browse Source
This commit is contained in:
zombieFox 2020-01-24 15:00:49 +00:00
parent 701cb49786
commit 1988a0ecb9
9 changed files with 108 additions and 41 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.32.1",
"version": "4.33.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "4.32.1",
"version": "4.33.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/layout.css
View File

@ -27,3 +27,21 @@
.is-layout-alignment-vertical-bottom body {
justify-content: flex-end;
}
html.is-layout-scrollbars-auto,
.is-layout-scrollbars-auto body,
.is-layout-scrollbars-auto * {
scrollbar-width: auto;
}
html.is-layout-scrollbars-thin,
.is-layout-scrollbars-thin body,
.is-layout-scrollbars-thin * {
scrollbar-width: thin;
}
html.is-layout-scrollbars-none,
.is-layout-scrollbars-none body,
.is-layout-scrollbars-none * {
scrollbar-width: none;
}

93
src/index.html
View File

@ -199,45 +199,45 @@
<label>Area alignment</label>
</div>
<div class="form-wrap">
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
<div class="form-wrap">
<input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
<label for="control-layout-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-topcenter" class="control-layout-alignment-topcenter" type="radio" name="control-layout-alignment" value="topcenter" tabindex="-1">
<label for="control-layout-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-topright" class="control-layout-alignment-topright" type="radio" name="control-layout-alignment" value="topright" tabindex="-1">
<label for="control-layout-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-centerleft" class="control-layout-alignment-centerleft" type="radio" name="control-layout-alignment" value="centerleft" tabindex="-1">
<label for="control-layout-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-centercenter" class="control-layout-alignment-centercenter" type="radio" name="control-layout-alignment" value="centercenter" tabindex="-1">
<label for="control-layout-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-centerright" class="control-layout-alignment-centerright" type="radio" name="control-layout-alignment" value="centerright" tabindex="-1">
<label for="control-layout-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-bottomleft" class="control-layout-alignment-bottomleft" type="radio" name="control-layout-alignment" value="bottomleft" tabindex="-1">
<label for="control-layout-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-bottomcenter" class="control-layout-alignment-bottomcenter" type="radio" name="control-layout-alignment" value="bottomcenter" tabindex="-1">
<label for="control-layout-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-bottomright" class="control-layout-alignment-bottomright" type="radio" name="control-layout-alignment" value="bottomright" tabindex="-1">
<label for="control-layout-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
</div>
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
<div class="form-wrap">
<input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
<label for="control-layout-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-topcenter" class="control-layout-alignment-topcenter" type="radio" name="control-layout-alignment" value="topcenter" tabindex="-1">
<label for="control-layout-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-topright" class="control-layout-alignment-topright" type="radio" name="control-layout-alignment" value="topright" tabindex="-1">
<label for="control-layout-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-centerleft" class="control-layout-alignment-centerleft" type="radio" name="control-layout-alignment" value="centerleft" tabindex="-1">
<label for="control-layout-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-centercenter" class="control-layout-alignment-centercenter" type="radio" name="control-layout-alignment" value="centercenter" tabindex="-1">
<label for="control-layout-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-centerright" class="control-layout-alignment-centerright" type="radio" name="control-layout-alignment" value="centerright" tabindex="-1">
<label for="control-layout-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-bottomleft" class="control-layout-alignment-bottomleft" type="radio" name="control-layout-alignment" value="bottomleft" tabindex="-1">
<label for="control-layout-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-bottomcenter" class="control-layout-alignment-bottomcenter" type="radio" name="control-layout-alignment" value="bottomcenter" tabindex="-1">
<label for="control-layout-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
</div>
<div class="form-wrap">
<input id="control-layout-alignment-bottomright" class="control-layout-alignment-bottomright" type="radio" name="control-layout-alignment" value="bottomright" tabindex="-1">
<label for="control-layout-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
</div>
</div>
</div>
<div class="form-helper">
<p class="control-layout-alignment-helper form-helper-item">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
</div>
@ -305,6 +305,25 @@
<input id="control-layout-scrollpastend" class="control-layout-scrollpastend" type="checkbox" tabindex="-1">
<label for="control-layout-scrollpastend"><span class="label-icon"></span> Scroll past end</label>
</div>
<hr>
<div class="form-wrap">
<label class="control-layout-scrollbars-label">Scrollbars</label>
</div>
<div class="form-wrap">
<input id="control-layout-scrollbars-auto" class="control-layout-scrollbars-auto" type="radio" name="control-layout-scrollbars" value="auto" tabindex="-1">
<label for="control-layout-scrollbars-auto"><span class="label-icon"></span> Auto</label>
</div>
<div class="form-wrap">
<input id="control-layout-scrollbars-thin" class="control-layout-scrollbars-thin" type="radio" name="control-layout-scrollbars" value="thin" tabindex="-1">
<label for="control-layout-scrollbars-thin"><span class="label-icon"></span> Thin</label>
</div>
<div class="form-wrap">
<input id="control-layout-scrollbars-none" class="control-layout-scrollbars-none" type="radio" name="control-layout-scrollbars" value="none" tabindex="-1">
<label for="control-layout-scrollbars-none"><span class="label-icon"></span> None</label>
</div>
<div class="form-helper">
<p class="control-layout-scrollbars-helper form-helper-item">May not work in some browsers.</p>
</div>
</div>
</div>
</div>

25
src/js/control.js
View File

@ -572,6 +572,27 @@ var control = (function() {
render.class();
header.render.color.scrolling();
}
}, {
element: helper.e(".control-layout-scrollbars-auto"),
path: "layout.scrollbars",
type: "radio",
func: function() {
render.class();
}
}, {
element: helper.e(".control-layout-scrollbars-thin"),
path: "layout.scrollbars",
type: "radio",
func: function() {
render.class();
}
}, {
element: helper.e(".control-layout-scrollbars-none"),
path: "layout.scrollbars",
type: "radio",
func: function() {
render.class();
}
}, {
element: helper.e(".control-header-area-width-range"),
path: "header.area.width",
@ -5570,8 +5591,12 @@ var control = (function() {
helper.removeClass(html, "is-layout-alignment-bottomright");
helper.removeClass(html, "is-layout-order-headerlink");
helper.removeClass(html, "is-layout-order-linkheader");
helper.removeClass(html, "is-layout-scrollbars-auto");
helper.removeClass(html, "is-layout-scrollbars-thin");
helper.removeClass(html, "is-layout-scrollbars-none");
helper.addClass(html, "is-layout-alignment-" + state.get.current().layout.alignment);
helper.addClass(html, "is-layout-order-" + state.get.current().layout.order);
helper.addClass(html, "is-layout-scrollbars-" + state.get.current().layout.scrollbars);
if (state.get.current().layout.scrollPastEnd) {
helper.addClass(html, "is-layout-scrollpastend");
};

1
src/js/state.js
View File

@ -223,6 +223,7 @@ var state = (function() {
size: 1,
width: 80,
scrollPastEnd: false,
scrollbars: "auto",
title: "New Tab"
},
theme: {

4
src/js/update.js
View File

@ -801,6 +801,10 @@ var update = (function() {
b: 0
};
return data;
},
"4.33.0": function(data) {
data.state.layout.scrollbars = "auto";
return data;
}
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "4.32.1";
var current = "4.33.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.32.1",
"version": "4.33.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"