extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-26 15:59:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] adding link display gutter control

Browse Source
This commit is contained in:
zombieFox 2019-12-03 23:16:24 +00:00
parent 3c56a735d7
commit 772dfb0b7b
10 changed files with 62 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

8
src/css/link.css
View File

@ -295,19 +295,19 @@
}
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display-letcon {
margin-right: 0.5em;
margin-right: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
}
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display-letcon {
margin-left: 0.5em;
margin-left: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
}
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display-letcon {
margin-bottom: 0.5em;
margin-bottom: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
}
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display-letcon {
margin-top: 0.5em;
margin-top: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
}
.is-link-display-alignment-topleft .link-display {

2
src/css/variables.css
View File

@ -44,6 +44,8 @@
/* link */
--link-area-width: 100%;
--link-item-size: 1em;
--link-item-display-space: 0.25em;
--link-item-display-gutter: 2;
--link-item-display-letter-size: 2em;
--link-item-display-icon-size: 2.5em;
--link-item-display-rotate: 0deg;

17
src/index.html
View File

@ -1045,7 +1045,7 @@
</div>
<hr>
<div class="input-wrap">
<label for="control-link-item-display-rotate" class="">Content rotation</label>
<label for="control-link-item-display-rotate">Content rotation</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-rotate" class="control-link-item-display-rotate mr-3" type="range" min="-180" max="180" value="0" step="5" tabindex="1">
<div class="control-link-item-display-rotate-count form-group-text form-group-medium form-group-radius-left"></div>
@ -1056,7 +1056,7 @@
</div>
<hr>
<div class="input-wrap">
<label for="control-link-item-display-translate-x" class="">Content horizontally offset</label>
<label for="control-link-item-display-translate-x">Content horizontally offset</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-translate-x" class="control-link-item-display-translate-x mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
<div class="control-link-item-display-translate-x-count form-group-text form-group-medium form-group-radius-left"></div>
@ -1067,7 +1067,7 @@
</div>
<hr>
<div class="input-wrap">
<label for="control-link-item-display-translate-y" class="">Content vertically offset</label>
<label for="control-link-item-display-translate-y">Content vertically offset</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-translate-y" class="control-link-item-display-translate-y mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
<div class="control-link-item-display-translate-y-count form-group-text form-group-medium form-group-radius-left"></div>
@ -1076,6 +1076,17 @@
<div class="button-wrap">
<button class="control-link-item-display-translate-y-default button mb-0" tabindex="-1">Default vertical translate</button>
</div>
<hr>
<div class="input-wrap">
<label for="control-link-item-display-gutter">Content gutter</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-gutter" class="control-link-item-display-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="1">
<div class="control-link-item-display-gutter-count form-group-text form-group-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-link-item-display-gutter-default button mb-0" tabindex="-1">Default vertical translate</button>
</div>
</div>
<hr>
<div class="input-wrap">

28
src/js/control.js
View File

@ -2333,6 +2333,26 @@ var control = (function() {
link.render.item.translate.y();
render.update();
}
}, {
element: helper.e(".control-link-item-display-gutter"),
path: "link.item.display.gutter",
type: "range",
rangeCountElement: helper.e(".control-link-item-display-gutter-count"),
func: function() {
link.render.item.gutter();
render.range.count(this);
}
}, {
element: helper.e(".control-link-item-display-gutter-default"),
type: "button",
func: function() {
mod.setValue("link.item.display.gutter", helper.getObject({
object: state.mod.default,
path: "link.item.display.gutter"
}));
link.render.item.gutter();
render.update();
}
}, {
element: helper.e(".control-link-item-display-direction-horizontal"),
path: "link.item.display.direction",
@ -3508,6 +3528,10 @@ var control = (function() {
_disable.input(".control-link-item-display-translate-y", true);
_disable.element(".control-link-item-display-translate-y-count", true);
_disable.input(".control-link-item-display-translate-y-default", true);
_disable.element("[for=control-link-item-display-gutter]", true);
_disable.input(".control-link-item-display-gutter", true);
_disable.element(".control-link-item-display-gutter-count", true);
_disable.input(".control-link-item-display-gutter-default", true);
_disable.input(".control-link-item-display-direction-horizontal", true);
_disable.input(".control-link-item-display-direction-vertical", true);
_disable.input(".control-link-item-display-order-letconname", true);
@ -3636,6 +3660,10 @@ var control = (function() {
_disable.input(".control-link-item-display-order-nameletcon", false);
_disable.element(".control-link-item-display-direction-helper", false);
_disable.element(".control-link-item-display-order-helper", false);
_disable.element("[for=control-link-item-display-gutter]", false);
_disable.input(".control-link-item-display-gutter", false);
_disable.element(".control-link-item-display-gutter-count", false);
_disable.input(".control-link-item-display-gutter-default", false);
};
};
};

5
src/js/link.js
View File

@ -1080,6 +1080,10 @@ var link = (function() {
var html = helper.e("html");
html.style.setProperty("--link-item-display-translate-y", state.get.current().link.item.display.translate.y + "em");
}
},
gutter: function() {
var html = helper.e("html");
html.style.setProperty("--link-item-display-gutter", state.get.current().link.item.display.gutter);
}
};
@ -1717,6 +1721,7 @@ var link = (function() {
render.item.rotate();
render.item.translate.x();
render.item.translate.y();
render.item.gutter();
render.area.width();
};

2
src/js/state.js
View File

@ -153,6 +153,7 @@ var state = (function() {
show: true,
size: 0.9
},
gutter: 2,
direction: "vertical",
order: "letconname",
alignment: "centercenter",
@ -301,6 +302,7 @@ var state = (function() {
name: {
size: 0.9
},
gutter: 2,
rotate: 0,
translate: {
x: 0,

4
src/js/update.js
View File

@ -681,6 +681,10 @@ var update = (function() {
delete data.state.link.fit;
data.state.header.search.engine.duckduckgo.name = "DuckDuckGo";
return data;
},
"4.1.0": function(data) {
data.state.link.item.display.gutter = 2;
return data;
}
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "4.0.4";
var current = "4.1.0";
var name = "Enchanting Aardvark";

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