mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-03-10 20:58:19 +01:00
[feature] add scrollbar width controls
This commit is contained in:
zombieFox
parent
701cb49786
commit
1988a0ecb9
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nightTab",
|
"name": "nightTab",
|
||||||
"version": "4.32.1",
|
"version": "4.33.0",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nightTab",
|
"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.",
|
"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": {
|
||||||
|
|||||||
@ -27,3 +27,21 @@
|
|||||||
.is-layout-alignment-vertical-bottom body {
|
.is-layout-alignment-vertical-bottom body {
|
||||||
justify-content: flex-end;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
@ -199,45 +199,45 @@
|
|||||||
<label>Area alignment</label>
|
<label>Area alignment</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
|
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
|
||||||
<div class="form-wrap">
|
<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">
|
<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>
|
<label for="control-layout-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-wrap">
|
<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">
|
<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>
|
<label for="control-layout-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-wrap">
|
<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">
|
<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>
|
<label for="control-layout-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-wrap">
|
<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">
|
<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>
|
<label for="control-layout-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-wrap">
|
<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">
|
<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>
|
<label for="control-layout-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-wrap">
|
<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">
|
<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>
|
<label for="control-layout-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-wrap">
|
<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">
|
<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>
|
<label for="control-layout-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-wrap">
|
<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">
|
<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>
|
<label for="control-layout-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-wrap">
|
<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">
|
<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>
|
<label for="control-layout-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="form-helper">
|
<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>
|
<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>
|
</div>
|
||||||
@ -305,6 +305,25 @@
|
|||||||
<input id="control-layout-scrollpastend" class="control-layout-scrollpastend" type="checkbox" tabindex="-1">
|
<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>
|
<label for="control-layout-scrollpastend"><span class="label-icon"></span> Scroll past end</label>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -572,6 +572,27 @@ var control = (function() {
|
|||||||
render.class();
|
render.class();
|
||||||
header.render.color.scrolling();
|
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"),
|
element: helper.e(".control-header-area-width-range"),
|
||||||
path: "header.area.width",
|
path: "header.area.width",
|
||||||
@ -5570,8 +5591,12 @@ var control = (function() {
|
|||||||
helper.removeClass(html, "is-layout-alignment-bottomright");
|
helper.removeClass(html, "is-layout-alignment-bottomright");
|
||||||
helper.removeClass(html, "is-layout-order-headerlink");
|
helper.removeClass(html, "is-layout-order-headerlink");
|
||||||
helper.removeClass(html, "is-layout-order-linkheader");
|
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-alignment-" + state.get.current().layout.alignment);
|
||||||
helper.addClass(html, "is-layout-order-" + state.get.current().layout.order);
|
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) {
|
if (state.get.current().layout.scrollPastEnd) {
|
||||||
helper.addClass(html, "is-layout-scrollpastend");
|
helper.addClass(html, "is-layout-scrollpastend");
|
||||||
};
|
};
|
||||||
|
|||||||
@ -223,6 +223,7 @@ var state = (function() {
|
|||||||
size: 1,
|
size: 1,
|
||||||
width: 80,
|
width: 80,
|
||||||
scrollPastEnd: false,
|
scrollPastEnd: false,
|
||||||
|
scrollbars: "auto",
|
||||||
title: "New Tab"
|
title: "New Tab"
|
||||||
},
|
},
|
||||||
theme: {
|
theme: {
|
||||||
|
|||||||
@ -801,6 +801,10 @@ var update = (function() {
|
|||||||
b: 0
|
b: 0
|
||||||
};
|
};
|
||||||
return data;
|
return data;
|
||||||
|
},
|
||||||
|
"4.33.0": function(data) {
|
||||||
|
data.state.layout.scrollbars = "auto";
|
||||||
|
return data;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
var version = (function() {
|
var version = (function() {
|
||||||
|
|
||||||
var current = "4.32.1";
|
var current = "4.33.0";
|
||||||
|
|
||||||
var name = "Naughty Goose";
|
var name = "Naughty Goose";
|
||||||
|
|
||||||
|
|||||||
@ -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.32.1",
|
"version": "4.33.0",
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
"chrome_url_overrides": {
|
"chrome_url_overrides": {
|
||||||
"newtab": "index.html"
|
"newtab": "index.html"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user