[feature] add global size control

Author: zombieFox

src/css/header.css

@@ -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);
+}

src/css/layout.css

@@ -1,6 +1,7 @@
 .layout{
 position: relative;
 width:var(--layout-width);
+font-size:calc(1em*var(--layout-size));
 }
 
 .is-layout-alignment-horizontal-leftbody{

src/css/variables.css

@@ -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;

src/index.html

@@ -54,28 +54,39 @@
 <divclass="header-area">
 <divclass="header-item-grid">
 <divclass="header-item header-greeting">
-<pclass="greeting"></p>
+<divclass="header-greeting-body">
+<pclass="greeting"></p>
+</div>
 </div>
 <divclass="header-item header-transitional">
-<pclass="transitional"></p>
+<divclass="header-transitional-body">
+<pclass="transitional"></p>
+</div>
 </div>
 <divclass="header-item header-clock">
-<pclass="clock"></p>
+<divclass="header-clock-body">
+<pclass="clock"></p>
+</div>
 </div>
 <divclass="header-item header-date">
-<pclass="date"></p>
+<divclass="header-date-body">
+<pclass="date"></p>
+</div>
 </div>
 <divclass="header-item header-search">
-<formclass="search" action="" method="get">
-<inputclass="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">
-<inputtype="submit" value="Search" class="is-hidden">
-</form>
-<buttonclass="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled>
-<spanclass="icon-close"></span>
-</button>
+<divclass="header-search-body">
+<formclass="search" action="" method="get">
+<inputclass="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">
+<inputtype="submit" value="Search" class="is-hidden">
+</form>
+<buttonclass="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled>
+<spanclass="icon-close"></span>
+</button>
+</div>
 </div>
 <divclass="header-item header-button header-edit-add">
-<divclass="form-group nested-button mb-0">
+<divclass="header-button-body">
+<divclass="form-group nested-button mb-0">
 <divclass="input-wrap input-button input-hide py-0">
 <inputid="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
 <labelfor="control-link-edit" class="mb-0"><spanclass="label-icon"></span> Edit</label>
@@ -96,17 +107,22 @@
 </div>
 </div>
 </div>
+</div>
 </div>
 <divclass="header-item header-button header-accent">
-<divclass="input-wrap input-button input-color-dot input-color-dot-accent py-0">
-<inputid="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" tabindex="1">
-<labelfor="control-theme-accent-current-quick">Accent</label>
+<divclass="header-button-body">
+<divclass="input-wrap input-button input-color-dot input-color-dot-accent py-0">
+<inputid="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" tabindex="1">
+<labelfor="control-theme-accent-current-quick">Accent</label>
+</div>
 </div>
 </div>
 <divclass="header-item header-button header-menu">
-<buttonclass="control-menu-open button mb-0" tabindex="1">
-<spanclass="button-text"><spanclass="icon-settings"></span></span>
-</button>
+<divclass="header-button-body">
+<buttonclass="control-menu-open button mb-0" tabindex="1">
+<spanclass="button-text"><spanclass="icon-settings"></span></span>
+</button>
+</div>
 </div>
 </div>
 </div>
@@ -226,6 +242,9 @@ <h1 class="menu-item-header-text">Padding</h1>
 <divclass="control-layout-padding-count form-group-text form-group-medium form-group-radius-left"></div>
 </div>
 </div>
+<divclass="button-wrap">
+<buttonclass="control-layout-padding-default button mb-0" tabindex="1">Default Padding size</button>
+</div>
 </div>
 </div>
 <divclass="menu-item">
@@ -240,6 +259,27 @@ <h1 class="menu-item-header-text">Gutter</h1>
 <divclass="control-layout-gutter-count form-group-text form-group-medium form-group-radius-left"></div>
 </div>
 </div>
+<divclass="button-wrap">
+<buttonclass="control-layout-gutter-default button mb-0" tabindex="1">Default Gutter size</button>
+</div>
+</div>
+</div>
+<divclass="menu-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">Global scaling</h1>
+</div>
+<divclass="menu-item-form">
+<divclass="input-wrap">
+<labelfor="control-layout-size">Size</label>
+<divclass="form-group form-group-block mb-0">
+<inputid="control-layout-size" class="control-layout-size mr-3" type="range" min="50" max="200" value="0" step="5" tabindex="-1">
+<divclass="control-layout-size-count form-group-text form-group-medium form-group-radius-left"></div>
+</div>
+</div>
+<pclass="control-layout-size-helper form-helper small">Resize all elements on the page.</p>
+<divclass="button-wrap">
+<buttonclass="control-layout-size-default button mb-0" tabindex="1">Default Global scaling size</button>
+</div>
 </div>
 </div>
 <divclass="menu-item">

src/js/control.js

@@ -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",

src/js/layout.js

@@ -17,6 +17,11 @@ var layout = (function(){
 html.style.setProperty("--layout-gutter",state.get().layout.gutter);
 };
 
+render.size=function(){
+varhtml=helper.e("html");
+html.style.setProperty("--layout-size",state.get().layout.size);
+};
+
 render.order=function(){
 varhtml=helper.e("html");
 varlayout=helper.e(".layout");
@@ -38,6 +43,7 @@ var layout = (function(){
 render.width();
 render.padding();
 render.gutter();
+render.size();
 render.order();
 render.title();
 };

src/js/state.js

@@ -201,6 +201,7 @@ var state = (function(){
 order: "headerlink",
 padding: 4,
 gutter: 2,
+size: 1,
 width: 80,
 scrollPastEnd: false,
 title: "New Tab"

src/js/update.js

@@ -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={