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

[feature] add header vertical align controls

Browse Source
This commit is contained in:
zombieFox 2020-02-18 08:31:17 +00:00
parent b38e9c727b
commit 5c9c0b0cd3
18 changed files with 247 additions and 187 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", "name": "nightTab",
"version": "4.39.0", "version": "4.40.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "4.39.0", "version": "4.40.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": {

16
src/css/clock.css
View File

@ -6,24 +6,24 @@
font-weight: var(--theme-font-display-weight); font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style); font-style: var(--theme-font-display-style);
color: rgb(var(--theme-style-text)); color: rgb(var(--theme-style-text));
min-height: 2.5em;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
line-height: 1.2;
} }
.is-header-item-alignment-left .clock { .is-header-item-justify-left .clock {
justify-content: flex-start; justify-content: flex-start;
text-align: left; text-align: left;
} }
.is-header-item-alignment-center .clock { .is-header-item-justify-center .clock {
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.is-header-item-alignment-right .clock { .is-header-item-justify-right .clock {
justify-content: flex-end; justify-content: flex-end;
text-align: right; text-align: right;
} }
@ -53,19 +53,19 @@
/* min-width: 1.25em; */ /* min-width: 1.25em; */
} }
.is-header-item-alignment-left .clock-item:not(:last-child) { .is-header-item-justify-left .clock-item:not(:last-child) {
margin-right: 0.2em; margin-right: 0.2em;
} }
.is-header-item-alignment-center .clock-item:not(:first-child) { .is-header-item-justify-center .clock-item:not(:first-child) {
margin-left: 0.1em; margin-left: 0.1em;
} }
.is-header-item-alignment-center .clock-item:not(:last-child) { .is-header-item-justify-center .clock-item:not(:last-child) {
margin-right: 0.1em; margin-right: 0.1em;
} }
.is-header-item-alignment-right .clock-item:not(:first-child) { .is-header-item-justify-right .clock-item:not(:first-child) {
margin-left: 0.2em; margin-left: 0.2em;
} }

16
src/css/date.css
View File

@ -6,24 +6,24 @@
font-weight: var(--theme-font-display-weight); font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style); font-style: var(--theme-font-display-style);
color: rgb(var(--theme-style-text)); color: rgb(var(--theme-style-text));
min-height: 2.5em;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
line-height: 1.2;
} }
.is-header-item-alignment-left .date { .is-header-item-justify-left .date {
justify-content: flex-start; justify-content: flex-start;
text-align: left; text-align: left;
} }
.is-header-item-alignment-center .date { .is-header-item-justify-center .date {
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.is-header-item-alignment-right .date { .is-header-item-justify-right .date {
justify-content: flex-end; justify-content: flex-end;
text-align: right; text-align: right;
} }
@ -52,19 +52,19 @@
justify-content: center; justify-content: center;
} }
.is-header-item-alignment-left .date-item:not(:last-child) { .is-header-item-justify-left .date-item:not(:last-child) {
margin-right: 0.2em; margin-right: 0.2em;
} }
.is-header-item-alignment-center .date-item:not(:first-child) { .is-header-item-justify-center .date-item:not(:first-child) {
margin-left: 0.1em; margin-left: 0.1em;
} }
.is-header-item-alignment-center .date-item:not(:last-child) { .is-header-item-justify-center .date-item:not(:last-child) {
margin-right: 0.1em; margin-right: 0.1em;
} }
.is-header-item-alignment-right .date-item:not(:first-child) { .is-header-item-justify-right .date-item:not(:first-child) {
margin-left: 0.2em; margin-left: 0.2em;
} }

8
src/css/greeting.css
View File

@ -6,24 +6,24 @@
font-weight: var(--theme-font-display-weight); font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style); font-style: var(--theme-font-display-style);
color: rgb(var(--theme-style-text)); color: rgb(var(--theme-style-text));
min-height: 2.5em;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
flex-wrap: nowrap; flex-wrap: nowrap;
line-height: 1.2;
} }
.is-header-item-alignment-left .greeting { .is-header-item-justify-left .greeting {
justify-content: flex-start; justify-content: flex-start;
text-align: left; text-align: left;
} }
.is-header-item-alignment-center .greeting { .is-header-item-justify-center .greeting {
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.is-header-item-alignment-right .greeting { .is-header-item-justify-right .greeting {
justify-content: flex-end; justify-content: flex-end;
text-align: right; text-align: right;
} }

13
src/css/group.css
View File

@ -40,16 +40,16 @@
transition: padding var(--layout-timing-extra-fast); transition: padding var(--layout-timing-extra-fast);
} }
.is-group-area-alignment-left .group-header { .is-group-area-justify-left .group-header {
flex-direction: row; flex-direction: row;
} }
.is-group-area-alignment-center .group-header { .is-group-area-justify-center .group-header {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
.is-group-area-alignment-right .group-header { .is-group-area-justify-right .group-header {
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-start; justify-content: flex-start;
} }
@ -73,7 +73,6 @@
overflow: hidden; overflow: hidden;
font-size: var(--group-name-size); font-size: var(--group-name-size);
transition: height var(--layout-timing-extra-fast); transition: height var(--layout-timing-extra-fast);
transition: height var(--layout-timing-extra-fast);
} }
.is-group-name-show .group-name { .is-group-name-show .group-name {
@ -111,12 +110,12 @@
margin var(--layout-timing-extra-fast) var(--layout-duration-04); margin var(--layout-timing-extra-fast) var(--layout-duration-04);
} }
.is-edit.is-group-name-show.is-group-area-alignment-left .group-control, .is-edit.is-group-name-show.is-group-area-justify-left .group-control,
.is-edit.is-group-name-show.is-group-area-alignment-center .group-control { .is-edit.is-group-name-show.is-group-area-justify-center .group-control {
margin-right: 1em; margin-right: 1em;
} }
.is-edit.is-group-name-show.is-group-area-alignment-right .group-control { .is-edit.is-group-name-show.is-group-area-justify-right .group-control {
margin-left: 1em; margin-left: 1em;
} }

76
src/css/header.css
View File

@ -10,15 +10,15 @@
pointer-events: all; pointer-events: all;
} }
.is-header-area-alignment-left .header { .is-header-area-justify-left .header {
justify-content: flex-start; justify-content: flex-start;
} }
.is-header-area-alignment-center .header { .is-header-area-justify-center .header {
justify-content: center; justify-content: center;
} }
.is-header-area-alignment-right .header { .is-header-area-justify-right .header {
justify-content: flex-end; justify-content: flex-end;
} }
@ -115,19 +115,26 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline;
flex-wrap: wrap; flex-wrap: wrap;
} }
.is-header-item-alignment-left .header-item-grid { .is-header-area-align-center .header-item-grid {
align-items: center;
}
.is-header-area-align-baseline .header-item-grid {
align-items: baseline;
}
.is-header-item-justify-left .header-item-grid {
justify-content: flex-start; justify-content: flex-start;
} }
.is-header-item-alignment-center .header-item-grid { .is-header-item-justify-center .header-item-grid {
justify-content: center; justify-content: center;
} }
.is-header-item-alignment-right .header-item-grid { .is-header-item-justify-right .header-item-grid {
justify-content: flex-end; justify-content: flex-end;
} }
@ -182,6 +189,7 @@
.is-header-item-newline-menu .header-item-menu { .is-header-item-newline-menu .header-item-menu {
flex-basis: 100%; flex-basis: 100%;
position: relative;
} }
.header-item-menu-baseline-alignment-character { .header-item-menu-baseline-alignment-character {
@ -257,48 +265,48 @@
width: var(--header-search-width-size); width: var(--header-search-width-size);
} }
.is-header-item-alignment-left.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search { .is-header-item-justify-left.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
justify-content: flex-start; justify-content: flex-start;
} }
.is-header-item-alignment-center.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search { .is-header-item-justify-center.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
justify-content: center; justify-content: center;
} }
.is-header-item-alignment-right.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search { .is-header-item-justify-right.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
justify-content: flex-end; justify-content: flex-end;
} }
.is-header-item-alignment-left .header-item-body-greeting, .is-header-item-justify-left .header-item-body-greeting,
.is-header-item-alignment-left .header-item-body-clock, .is-header-item-justify-left .header-item-body-clock,
.is-header-item-alignment-left .header-item-body-transitional, .is-header-item-justify-left .header-item-body-transitional,
.is-header-item-alignment-left .header-item-body-date, .is-header-item-justify-left .header-item-body-date,
.is-header-item-alignment-left .header-item-body-search, .is-header-item-justify-left .header-item-body-search,
.is-header-item-alignment-left .header-item-body-editadd, .is-header-item-justify-left .header-item-body-editadd,
.is-header-item-alignment-left .header-item-body-coloraccent, .is-header-item-justify-left .header-item-body-coloraccent,
.is-header-item-alignment-left .header-item-body-menu { .is-header-item-justify-left .header-item-body-menu {
justify-content: flex-start; justify-content: flex-start;
} }
.is-header-item-alignment-center .header-item-body-greeting, .is-header-item-justify-center .header-item-body-greeting,
.is-header-item-alignment-center .header-item-body-clock, .is-header-item-justify-center .header-item-body-clock,
.is-header-item-alignment-center .header-item-body-transitional, .is-header-item-justify-center .header-item-body-transitional,
.is-header-item-alignment-center .header-item-body-date, .is-header-item-justify-center .header-item-body-date,
.is-header-item-alignment-center .header-item-body-search, .is-header-item-justify-center .header-item-body-search,
.is-header-item-alignment-center .header-item-body-editadd, .is-header-item-justify-center .header-item-body-editadd,
.is-header-item-alignment-center .header-item-body-coloraccent, .is-header-item-justify-center .header-item-body-coloraccent,
.is-header-item-alignment-center .header-item-body-menu { .is-header-item-justify-center .header-item-body-menu {
justify-content: center; justify-content: center;
} }
.is-header-item-alignment-right .header-item-body-greeting, .is-header-item-justify-right .header-item-body-greeting,
.is-header-item-alignment-right .header-item-body-clock, .is-header-item-justify-right .header-item-body-clock,
.is-header-item-alignment-right .header-item-body-transitional, .is-header-item-justify-right .header-item-body-transitional,
.is-header-item-alignment-right .header-item-body-date, .is-header-item-justify-right .header-item-body-date,
.is-header-item-alignment-right .header-item-body-search, .is-header-item-justify-right .header-item-body-search,
.is-header-item-alignment-right .header-item-body-editadd, .is-header-item-justify-right .header-item-body-editadd,
.is-header-item-alignment-right .header-item-body-coloraccent, .is-header-item-justify-right .header-item-body-coloraccent,
.is-header-item-alignment-right .header-item-body-menu { .is-header-item-justify-right .header-item-body-menu {
justify-content: flex-end; justify-content: flex-end;
} }

6
src/css/link.css
View File

@ -9,15 +9,15 @@
display: flex; display: flex;
} }
.is-link-area-alignment-left .link { .is-link-area-justify-left .link {
align-items: flex-start; align-items: flex-start;
} }
.is-link-area-alignment-center .link { .is-link-area-justify-center .link {
align-items: center; align-items: center;
} }
.is-link-area-alignment-right .link { .is-link-area-justify-right .link {
align-items: flex-end; align-items: flex-end;
} }

6
src/css/search.css
View File

@ -14,15 +14,15 @@
transform: translate(0, -50%); transform: translate(0, -50%);
} }
.is-header-search-text-alignment-left .search-input { .is-header-search-text-justify-left .search-input {
text-align: left; text-align: left;
} }
.is-header-search-text-alignment-center .search-input { .is-header-search-text-justify-center .search-input {
text-align: center; text-align: center;
} }
.is-header-search-text-alignment-right .search-input { .is-header-search-text-justify-right .search-input {
text-align: right; text-align: right;
} }

8
src/css/transitional.css
View File

@ -6,24 +6,24 @@
font-weight: var(--theme-font-display-weight); font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style); font-style: var(--theme-font-display-style);
color: rgb(var(--theme-color-14)); color: rgb(var(--theme-color-14));
min-height: 2.5em;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
flex-wrap: nowrap; flex-wrap: nowrap;
line-height: 1.2;
} }
.is-header-item-alignment-left .transitional { .is-header-item-justify-left .transitional {
justify-content: flex-start; justify-content: flex-start;
text-align: left; text-align: left;
} }
.is-header-item-alignment-center .transitional { .is-header-item-justify-center .transitional {
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.is-header-item-alignment-right .transitional { .is-header-item-justify-right .transitional {
justify-content: flex-end; justify-content: flex-end;
text-align: right; text-align: right;
} }

18
src/html/menu/menu-content/bookmarks.html
View File

@ -20,26 +20,26 @@
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label class="control-link-area-alignment-label">Horizontal alignment</label> <label class="control-link-area-justify-label">Horizontal alignment</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-grid form-grid-3x1 control-link-area-alignment-grid"> <div class="form-grid form-grid-3x1 control-link-area-justify-grid">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-link-area-alignment-left" class="control-link-area-alignment-left" type="radio" name="control-link-area-alignment" value="left" tabindex="-1"> <input id="control-link-area-justify-left" class="control-link-area-justify-left" type="radio" name="control-link-area-justify" value="left" tabindex="-1">
<label for="control-link-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label> <label for="control-link-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-link-area-alignment-center" class="control-link-area-alignment-center" type="radio" name="control-link-area-alignment" value="center" tabindex="-1"> <input id="control-link-area-justify-center" class="control-link-area-justify-center" type="radio" name="control-link-area-justify" value="center" tabindex="-1">
<label for="control-link-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label> <label for="control-link-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-link-area-alignment-right" class="control-link-area-alignment-right" type="radio" name="control-link-area-alignment" value="right" tabindex="-1"> <input id="control-link-area-justify-right" class="control-link-area-justify-right" type="radio" name="control-link-area-justify" value="right" tabindex="-1">
<label for="control-link-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label> <label for="control-link-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-link-area-alignment-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p> <p class="control-link-area-justify-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p>
</div> </div>
</div> </div>
</div> </div>

18
src/html/menu/menu-content/groups.html
View File

@ -23,27 +23,27 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-wrap"> <div class="form-wrap">
<label class="control-group-area-alignment-label">Group name horizontal alignment</label> <label class="control-group-area-justify-label">Group name horizontal alignment</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-grid form-grid-3x1 control-group-area-alignment-grid"> <div class="form-grid form-grid-3x1 control-group-area-justify-grid">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-group-area-alignment-left" class="control-group-area-alignment-left" type="radio" name="control-group-area-alignment" value="left" tabindex="-1"> <input id="control-group-area-justify-left" class="control-group-area-justify-left" type="radio" name="control-group-area-justify" value="left" tabindex="-1">
<label for="control-group-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label> <label for="control-group-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-group-area-alignment-center" class="control-group-area-alignment-center" type="radio" name="control-group-area-alignment" value="center" tabindex="-1"> <input id="control-group-area-justify-center" class="control-group-area-justify-center" type="radio" name="control-group-area-justify" value="center" tabindex="-1">
<label for="control-group-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label> <label for="control-group-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-group-area-alignment-right" class="control-group-area-alignment-right" type="radio" name="control-group-area-alignment" value="right" tabindex="-1"> <input id="control-group-area-justify-right" class="control-group-area-justify-right" type="radio" name="control-group-area-justify" value="right" tabindex="-1">
<label for="control-group-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label> <label for="control-group-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-group-area-alignment-helper form-helper-item">Effects may not be visible if the Group Name is not shown.</p> <p class="control-group-area-justify-helper form-helper-item">Effects may not be visible if the Group Name is not shown.</p>
</div> </div>
</div> </div>
</div> </div>

72
src/html/menu/menu-content/header.html
View File

@ -21,56 +21,74 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-wrap"> <div class="form-wrap">
<label class="control-header-area-alignment-label">Area horizontal alignment</label> <label class="control-header-area-justify-label">Area horizontal alignment</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-grid form-grid-3x1 control-header-area-alignment-grid"> <div class="form-grid form-grid-3x1 control-header-area-justify-grid">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-area-alignment-left" class="control-header-area-alignment-left" type="radio" name="control-header-area-alignment" value="left" tabindex="-1"> <input id="control-header-area-justify-left" class="control-header-area-justify-left" type="radio" name="control-header-area-justify" value="left" tabindex="-1">
<label for="control-header-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label> <label for="control-header-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-area-alignment-center" class="control-header-area-alignment-center" type="radio" name="control-header-area-alignment" value="center" tabindex="-1"> <input id="control-header-area-justify-center" class="control-header-area-justify-center" type="radio" name="control-header-area-justify" value="center" tabindex="-1">
<label for="control-header-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label> <label for="control-header-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-area-alignment-right" class="control-header-area-alignment-right" type="radio" name="control-header-area-alignment" value="right" tabindex="-1"> <input id="control-header-area-justify-right" class="control-header-area-justify-right" type="radio" name="control-header-area-justify" value="right" tabindex="-1">
<label for="control-header-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label> <label for="control-header-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-header-area-alignment-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p> <p class="control-header-area-justify-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
</div>
<hr>
<div class="form-wrap">
<label class="control-header-area-align-label">Header item vertical alignment</label>
</div>
<div class="form-wrap">
<input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1">
<label for="control-header-area-align-center"><span class="label-icon"></span> Center</label>
</div>
<div class="form-helper">
<p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p>
</div>
<div class="form-wrap">
<input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1">
<label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label>
</div>
<div class="form-helper">
<p class="control-header-area-align-baseline-helper form-helper-item">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</p>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-wrap"> <div class="form-wrap">
<label class="control-header-item-alignment-label">Item horizontal alignment</label> <label class="control-header-item-justify-label">Item horizontal alignment</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-grid form-grid-3x1 control-header-item-alignment-grid"> <div class="form-grid form-grid-3x1 control-header-item-justify-grid">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-item-alignment-left" class="control-header-item-alignment-left" type="radio" name="control-header-item-alignment" value="left" tabindex="-1"> <input id="control-header-item-justify-left" class="control-header-item-justify-left" type="radio" name="control-header-item-justify" value="left" tabindex="-1">
<label for="control-header-item-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label> <label for="control-header-item-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-item-alignment-center" class="control-header-item-alignment-center" type="radio" name="control-header-item-alignment" value="center" tabindex="-1"> <input id="control-header-item-justify-center" class="control-header-item-justify-center" type="radio" name="control-header-item-justify" value="center" tabindex="-1">
<label for="control-header-item-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label> <label for="control-header-item-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-item-alignment-right" class="control-header-item-alignment-right" type="radio" name="control-header-item-alignment" value="right" tabindex="-1"> <input id="control-header-item-justify-right" class="control-header-item-justify-right" type="radio" name="control-header-item-justify" value="right" tabindex="-1">
<label for="control-header-item-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label> <label for="control-header-item-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-header-item-alignment-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p> <p class="control-header-item-justify-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label class="control-header-item-alignment-label">Header item order</label> <label class="control-header-order-label">Header item order</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="header-order"></div> <div class="header-order"></div>
@ -537,21 +555,21 @@
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label class="control-header-search-text-alignment-label">Align Text</label> <label class="control-header-search-text-justify-label">Align Text</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-grid form-grid-3x1 control-header-search-text-alignment-grid"> <div class="form-grid form-grid-3x1 control-header-search-text-justify-grid">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-search-text-alignment-left" class="control-header-search-text-alignment-left" type="radio" name="control-header-search-text-alignment" value="left" tabindex="-1"> <input id="control-header-search-text-justify-left" class="control-header-search-text-justify-left" type="radio" name="control-header-search-text-justify" value="left" tabindex="-1">
<label for="control-header-search-text-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label> <label for="control-header-search-text-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-search-text-alignment-center" class="control-header-search-text-alignment-center" type="radio" name="control-header-search-text-alignment" value="center" tabindex="-1"> <input id="control-header-search-text-justify-center" class="control-header-search-text-justify-center" type="radio" name="control-header-search-text-justify" value="center" tabindex="-1">
<label for="control-header-search-text-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label> <label for="control-header-search-text-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-search-text-alignment-right" class="control-header-search-text-alignment-right" type="radio" name="control-header-search-text-alignment" value="right" tabindex="-1"> <input id="control-header-search-text-justify-right" class="control-header-search-text-justify-right" type="radio" name="control-header-search-text-justify" value="right" tabindex="-1">
<label for="control-header-search-text-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label> <label for="control-header-search-text-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div> </div>
</div> </div>
</div> </div>

144
src/js/control.js
View File

@ -770,8 +770,8 @@ var control = (function() {
render.update.control.menu(); render.update.control.menu();
} }
}, { }, {
element: ".control-header-area-alignment-left", element: ".control-header-area-justify-left",
path: "header.area.alignment", path: "header.area.justify",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -786,8 +786,8 @@ var control = (function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-header-area-alignment-center", element: ".control-header-area-justify-center",
path: "header.area.alignment", path: "header.area.justify",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -802,8 +802,8 @@ var control = (function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-header-area-alignment-right", element: ".control-header-area-justify-right",
path: "header.area.alignment", path: "header.area.justify",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -818,22 +818,36 @@ var control = (function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-header-item-alignment-left", element: ".control-header-area-align-center",
path: "header.item.alignment", path: "header.area.align",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-header-item-alignment-center", element: ".control-header-area-align-baseline",
path: "header.item.alignment", path: "header.area.align",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-header-item-alignment-right", element: ".control-header-item-justify-left",
path: "header.item.alignment", path: "header.item.justify",
type: "radio",
func: function() {
render.class();
}
}, {
element: ".control-header-item-justify-center",
path: "header.item.justify",
type: "radio",
func: function() {
render.class();
}
}, {
element: ".control-header-item-justify-right",
path: "header.item.justify",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
@ -2052,22 +2066,22 @@ var control = (function() {
search.render.engine(); search.render.engine();
} }
}, { }, {
element: ".control-header-search-text-alignment-left", element: ".control-header-search-text-justify-left",
path: "header.search.text.alignment", path: "header.search.text.justify",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-header-search-text-alignment-center", element: ".control-header-search-text-justify-center",
path: "header.search.text.alignment", path: "header.search.text.justify",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-header-search-text-alignment-right", element: ".control-header-search-text-justify-right",
path: "header.search.text.alignment", path: "header.search.text.justify",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
@ -2911,22 +2925,22 @@ var control = (function() {
render.update.control.menu(); render.update.control.menu();
} }
}, { }, {
element: ".control-group-area-alignment-left", element: ".control-group-area-justify-left",
path: "group.area.alignment", path: "group.area.justify",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-group-area-alignment-center", element: ".control-group-area-justify-center",
path: "group.area.alignment", path: "group.area.justify",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-group-area-alignment-right", element: ".control-group-area-justify-right",
path: "group.area.alignment", path: "group.area.justify",
type: "radio", type: "radio",
func: function() { func: function() {
render.class(); render.class();
@ -3204,8 +3218,8 @@ var control = (function() {
render.update.control.menu(); render.update.control.menu();
} }
}, { }, {
element: ".control-link-area-alignment-left", element: ".control-link-area-justify-left",
path: "link.area.alignment", path: "link.area.justify",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -3220,8 +3234,8 @@ var control = (function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-link-area-alignment-center", element: ".control-link-area-justify-center",
path: "link.area.alignment", path: "link.area.justify",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -3236,8 +3250,8 @@ var control = (function() {
render.class(); render.class();
} }
}, { }, {
element: ".control-link-area-alignment-right", element: ".control-link-area-justify-right",
path: "link.area.alignment", path: "link.area.justify",
type: "radio", type: "radio",
additionalEvents: [{ additionalEvents: [{
event: "change", event: "change",
@ -5951,19 +5965,25 @@ var control = (function() {
header: { header: {
area: [{ area: [{
remove: [ remove: [
"is-header-area-alignment-left", "is-header-area-justify-left",
"is-header-area-alignment-center", "is-header-area-justify-center",
"is-header-area-alignment-right" "is-header-area-justify-right"
], ],
name: "is-header-area-alignment-" + state.get.current().header.area.alignment name: "is-header-area-justify-" + state.get.current().header.area.justify
}, {
remove: [
"is-header-area-align-center",
"is-header-area-align-baseline"
],
name: "is-header-area-align-" + state.get.current().header.area.align
}], }],
item: [{ item: [{
remove: [ remove: [
"is-header-item-alignment-left", "is-header-item-justify-left",
"is-header-item-alignment-center", "is-header-item-justify-center",
"is-header-item-alignment-right" "is-header-item-justify-right"
], ],
name: "is-header-item-alignment-" + state.get.current().header.item.alignment name: "is-header-item-justify-" + state.get.current().header.item.justify
}], }],
greeting: [{ greeting: [{
remove: [ remove: [
@ -6003,14 +6023,14 @@ var control = (function() {
}], }],
search: [{ search: [{
remove: [ remove: [
"is-header-search-text-alignment-left", "is-header-search-text-justify-left",
"is-header-search-text-alignment-center", "is-header-search-text-justify-center",
"is-header-search-text-alignment-right" "is-header-search-text-justify-right"
], ],
condition: function() { condition: function() {
return state.get.current().header.search.show; return state.get.current().header.search.show;
}, },
name: "is-header-search-text-alignment-" + state.get.current().header.search.text.alignment name: "is-header-search-text-justify-" + state.get.current().header.search.text.justify
}, { }, {
remove: [ remove: [
"is-header-search-width-by-custom", "is-header-search-width-by-custom",
@ -6024,7 +6044,7 @@ var control = (function() {
condition: function() { condition: function() {
return state.get.current().header.search.show; return state.get.current().header.search.show;
}, },
name: "is-header-search-text-alignment-" + state.get.current().header.search.text.alignment name: "is-header-search-text-justify-" + state.get.current().header.search.text.justify
}, { }, {
remove: [ remove: [
"is-header-item-newline-search" "is-header-item-newline-search"
@ -6125,11 +6145,11 @@ var control = (function() {
group: { group: {
area: [{ area: [{
remove: [ remove: [
"is-group-area-alignment-left", "is-group-area-justify-left",
"is-group-area-alignment-center", "is-group-area-justify-center",
"is-group-area-alignment-right" "is-group-area-justify-right"
], ],
name: "is-group-area-alignment-" + state.get.current().group.area.alignment name: "is-group-area-justify-" + state.get.current().group.area.justify
}], }],
name: [{ name: [{
remove: [ remove: [
@ -6167,14 +6187,14 @@ var control = (function() {
name: "is-link-show" name: "is-link-show"
}, { }, {
remove: [ remove: [
"is-link-area-alignment-left", "is-link-area-justify-left",
"is-link-area-alignment-center", "is-link-area-justify-center",
"is-link-area-alignment-right" "is-link-area-justify-right"
], ],
condition: function() { condition: function() {
return state.get.current().link.show; return state.get.current().link.show;
}, },
name: "is-link-area-alignment-" + state.get.current().link.area.alignment name: "is-link-area-justify-" + state.get.current().link.area.justify
}, { }, {
remove: [ remove: [
"is-link-display-alignment-topleft", "is-link-display-alignment-topleft",
@ -6692,11 +6712,11 @@ var control = (function() {
".control-header-search-engine-giphy", ".control-header-search-engine-giphy",
".control-header-search-engine-bing", ".control-header-search-engine-bing",
".control-header-search-engine-custom", ".control-header-search-engine-custom",
".control-header-search-text-alignment-grid", ".control-header-search-text-justify-grid",
".control-header-search-text-alignment-label", ".control-header-search-text-justify-label",
".control-header-search-text-alignment-left", ".control-header-search-text-justify-left",
".control-header-search-text-alignment-center", ".control-header-search-text-justify-center",
".control-header-search-text-alignment-right", ".control-header-search-text-justify-right",
"[for=control-header-search-size-range]", "[for=control-header-search-size-range]",
".control-header-search-size-range", ".control-header-search-size-range",
".control-header-search-size-number", ".control-header-search-size-number",
@ -6852,12 +6872,12 @@ var control = (function() {
".control-link-area-width-default", ".control-link-area-width-default",
".control-link-area-width-match", ".control-link-area-width-match",
".control-link-area-width-helper", ".control-link-area-width-helper",
".control-link-area-alignment-grid", ".control-link-area-justify-grid",
".control-link-area-alignment-label", ".control-link-area-justify-label",
".control-link-area-alignment-left", ".control-link-area-justify-left",
".control-link-area-alignment-center", ".control-link-area-justify-center",
".control-link-area-alignment-right", ".control-link-area-justify-right",
".control-link-area-alignment-helper", ".control-link-area-justify-helper",
"[for=control-link-item-size-range]", "[for=control-link-item-size-range]",
".control-link-item-size-range", ".control-link-item-size-range",
".control-link-item-size-number", ".control-link-item-size-number",

11
src/js/state.js
View File

@ -6,10 +6,11 @@ var state = (function() {
header: { header: {
area: { area: {
width: 100, width: 100,
alignment: "center" justify: "center",
align: "center"
}, },
item: { item: {
alignment: "left" justify: "left"
}, },
greeting: { greeting: {
show: false, show: false,
@ -114,7 +115,7 @@ var state = (function() {
} }
}, },
text: { text: {
alignment: "center" justify: "center"
}, },
size: 1, size: 1,
newLine: false newLine: false
@ -163,7 +164,7 @@ var state = (function() {
link: { link: {
area: { area: {
width: 100, width: 100,
alignment: "center" justify: "center"
}, },
item: { item: {
color: { color: {
@ -222,7 +223,7 @@ var state = (function() {
}, },
group: { group: {
area: { area: {
alignment: "left" justify: "left"
}, },
name: { name: {
show: true, show: true,

14
src/js/update.js
View File

@ -847,6 +847,20 @@ var update = (function() {
"4.38.0": function(data) { "4.38.0": function(data) {
data.state.theme.color.generated = {}; data.state.theme.color.generated = {};
return data; return data;
},
"4.40.0": function(data) {
data.state.header.area.justify = data.state.header.area.alignment;
delete data.state.header.area.alignment;
data.state.header.item.justify = data.state.header.item.alignment;
delete data.state.header.item.alignment;
data.state.header.search.text.justify = data.state.header.search.text.alignment;
delete data.state.header.search.text.alignment;
data.state.link.area.justify = data.state.link.area.alignment;
delete data.state.link.area.alignment;
data.state.group.area.justify = data.state.group.area.alignment;
delete data.state.group.area.alignment;
data.state.group.area.align = "center";
return data;
} }
}; };

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "4.39.0"; var current = "4.40.0";
var name = "Naughty Goose"; var name = "Naughty Goose";

2
src/manifest.json
View File

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