mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-03-13 06:08:12 +01:00
[feature] add global size control
This commit is contained in:
Kombie
GitHub
parent
5737518a11
commit
8acfb178ed
@ -156,37 +156,34 @@
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.is-header-search-style-auto .header-search {
|
||||
flex-grow: 1;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.is-header-search-style-custom .header-search {
|
||||
width: var(--header-search-width);
|
||||
}
|
||||
|
||||
.header-date {
|
||||
.header-date-body {
|
||||
font-size: var(--header-date-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-clock {
|
||||
.header-clock-body {
|
||||
font-size: var(--header-clock-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
.header-search-body {
|
||||
font-size: var(--header-search-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
.header-button-body {
|
||||
font-size: var(--header-button-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-greeting {
|
||||
.header-greeting-body {
|
||||
font-size: var(--header-greeting-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-transitional {
|
||||
.header-transitional-body {
|
||||
font-size: var(--header-transitional-size);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-date,
|
||||
@ -210,3 +207,12 @@
|
||||
.is-menu .header-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.is-header-search-style-auto .header-search {
|
||||
flex-grow: 1;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.is-header-search-style-custom .header-search {
|
||||
width: var(--header-search-width);
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
.layout {
|
||||
position: relative;
|
||||
width: var(--layout-width);
|
||||
font-size: calc(1em * var(--layout-size));
|
||||
}
|
||||
|
||||
.is-layout-alignment-horizontal-left body {
|
||||
|
||||
@ -52,9 +52,10 @@
|
||||
--link-item-display-name-size: 0.9em;
|
||||
--link-item-border: 1;
|
||||
/* layout */
|
||||
--layout-size: 1;
|
||||
--layout-width: 80%;
|
||||
--layout-line-width: 0.2em;
|
||||
--layout-space: 0.5rem;
|
||||
--layout-space: 0.5em;
|
||||
--layout-padding: 4;
|
||||
--layout-gutter: 4;
|
||||
--layout-duration-02: 0.2s;
|
||||
|
||||
@ -54,28 +54,39 @@
|
||||
<div class="header-area">
|
||||
<div class="header-item-grid">
|
||||
<div class="header-item header-greeting">
|
||||
<p class="greeting"></p>
|
||||
<div class="header-greeting-body">
|
||||
<p class="greeting"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-transitional">
|
||||
<p class="transitional"></p>
|
||||
<div class="header-transitional-body">
|
||||
<p class="transitional"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-clock">
|
||||
<p class="clock"></p>
|
||||
<div class="header-clock-body">
|
||||
<p class="clock"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-date">
|
||||
<p class="date"></p>
|
||||
<div class="header-date-body">
|
||||
<p class="date"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-search">
|
||||
<form class="search" action="" method="get">
|
||||
<input class="header-search-input search-input mb-0" type="text" placeholder="Find or Search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="1">
|
||||
<input type="submit" value="Search" class="is-hidden">
|
||||
</form>
|
||||
<button class="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled>
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
<div class="header-search-body">
|
||||
<form class="search" action="" method="get">
|
||||
<input class="header-search-input search-input mb-0" type="text" placeholder="Find or Search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="1">
|
||||
<input type="submit" value="Search" class="is-hidden">
|
||||
</form>
|
||||
<button class="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled>
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-button header-edit-add">
|
||||
<div class="form-group nested-button mb-0">
|
||||
<div class="header-button-body">
|
||||
<div class="form-group nested-button mb-0">
|
||||
<div class="input-wrap input-button input-hide py-0">
|
||||
<input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
|
||||
<label for="control-link-edit" class="mb-0"><span class="label-icon"></span> Edit</label>
|
||||
@ -96,17 +107,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-button header-accent">
|
||||
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
|
||||
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" tabindex="1">
|
||||
<label for="control-theme-accent-current-quick">Accent</label>
|
||||
<div class="header-button-body">
|
||||
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
|
||||
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" tabindex="1">
|
||||
<label for="control-theme-accent-current-quick">Accent</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-button header-menu">
|
||||
<button class="control-menu-open button mb-0" tabindex="1">
|
||||
<span class="button-text"><span class="icon-settings"></span></span>
|
||||
</button>
|
||||
<div class="header-button-body">
|
||||
<button class="control-menu-open button mb-0" tabindex="1">
|
||||
<span class="button-text"><span class="icon-settings"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -226,6 +242,9 @@
|
||||
<div class="control-layout-padding-count form-group-text form-group-medium form-group-radius-left"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<button class="control-layout-padding-default button mb-0" tabindex="1">Default Padding size</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -240,6 +259,27 @@
|
||||
<div class="control-layout-gutter-count form-group-text form-group-medium form-group-radius-left"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<button class="control-layout-gutter-default button mb-0" tabindex="1">Default Gutter size</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Global scaling</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<label for="control-layout-size">Size</label>
|
||||
<div class="form-group form-group-block mb-0">
|
||||
<input id="control-layout-size" class="control-layout-size mr-3" type="range" min="50" max="200" value="0" step="5" tabindex="-1">
|
||||
<div class="control-layout-size-count form-group-text form-group-medium form-group-radius-left"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="control-layout-size-helper form-helper small">Resize all elements on the page.</p>
|
||||
<div class="button-wrap">
|
||||
<button class="control-layout-size-default button mb-0" tabindex="1">Default Global scaling size</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
|
||||
@ -285,6 +285,23 @@ var control = (function() {
|
||||
layout.render.padding();
|
||||
render.range.count(this);
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-padding-default"),
|
||||
type: "button",
|
||||
additionalEvents: [{
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
mod.setValue("layout.padding", 4);
|
||||
layout.render.padding();
|
||||
render.update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-gutter"),
|
||||
path: "layout.gutter",
|
||||
@ -333,6 +350,89 @@ var control = (function() {
|
||||
layout.render.gutter();
|
||||
render.range.count(this);
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-gutter-default"),
|
||||
type: "button",
|
||||
additionalEvents: [{
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
mod.setValue("layout.gutter", 2);
|
||||
layout.render.gutter();
|
||||
render.update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-size"),
|
||||
path: "layout.size",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
rangeCountElement: helper.e(".control-layout-size-count"),
|
||||
additionalEvents: [{
|
||||
event: "input",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".layout"),
|
||||
});
|
||||
}
|
||||
}, {
|
||||
event: "mousedown",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".layout"),
|
||||
});
|
||||
}
|
||||
}, {
|
||||
event: "mouseup",
|
||||
func: function() {
|
||||
edge.box.close();
|
||||
}
|
||||
}, {
|
||||
event: "touchend",
|
||||
func: function() {
|
||||
edge.box.close();
|
||||
}
|
||||
}, {
|
||||
event: "keydown",
|
||||
func: function() {
|
||||
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
|
||||
edge.box.open({
|
||||
element: helper.e(".layout"),
|
||||
});
|
||||
};
|
||||
}
|
||||
}, {
|
||||
event: "keyup",
|
||||
func: function() {
|
||||
edge.box.close();
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
layout.render.size();
|
||||
render.range.count(this);
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-size-default"),
|
||||
type: "button",
|
||||
additionalEvents: [{
|
||||
event: "click",
|
||||
func: function() {
|
||||
edge.box.open({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
mod.setValue("layout.size", 1);
|
||||
layout.render.size();
|
||||
render.update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-title"),
|
||||
path: "layout.title",
|
||||
|
||||
@ -17,6 +17,11 @@ var layout = (function() {
|
||||
html.style.setProperty("--layout-gutter", state.get().layout.gutter);
|
||||
};
|
||||
|
||||
render.size = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--layout-size", state.get().layout.size);
|
||||
};
|
||||
|
||||
render.order = function() {
|
||||
var html = helper.e("html");
|
||||
var layout = helper.e(".layout");
|
||||
@ -38,6 +43,7 @@ var layout = (function() {
|
||||
render.width();
|
||||
render.padding();
|
||||
render.gutter();
|
||||
render.size();
|
||||
render.order();
|
||||
render.title();
|
||||
};
|
||||
|
||||
@ -201,6 +201,7 @@ var state = (function() {
|
||||
order: "headerlink",
|
||||
padding: 4,
|
||||
gutter: 2,
|
||||
size: 1,
|
||||
width: 80,
|
||||
scrollPastEnd: false,
|
||||
title: "New Tab"
|
||||
|
||||
@ -624,6 +624,7 @@ var update = (function() {
|
||||
name: "Group 1",
|
||||
items: data.bookmarks
|
||||
}];
|
||||
data.state.layout.size = 1;
|
||||
data.state.header.position = "sticky";
|
||||
data.state.link.item.display.rotate = 0;
|
||||
data.state.link.item.display.translate = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user