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

[design] improve the menu with new labels and better nesting for some sections

Browse Source
This commit is contained in:
zombieFox 2020-02-19 12:49:47 +00:00
parent 54e00b779f
commit ead026ea0d
5 changed files with 101 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/css/menu.css
View File

@ -115,7 +115,7 @@
}
.menu-content-item {
padding: calc(var(--menu-space) * 3);
padding: calc(var(--menu-space) * 2) calc(var(--menu-space) * 3);
position: relative;
z-index: 1;
}
@ -125,7 +125,7 @@
}
.menu-item-header {
margin-bottom: calc(var(--menu-space) * 2);
margin-bottom: calc(var(--menu-space) * 1);
}
.menu-item-header-text {
@ -196,11 +196,11 @@
}
.menu-content-item {
padding: calc(var(--menu-space) * 4);
padding: calc(var(--menu-space) * 3) calc(var(--menu-space) * 4);
}
.menu-item-header {
margin-bottom: calc(var(--menu-space) * 3);
margin-bottom: calc(var(--menu-space) * 2);
}
.menu-nav-item {
@ -272,11 +272,7 @@
}
.menu-content-item {
padding: calc(var(--menu-space) * 5);
}
.menu-item-header {
margin-bottom: calc(var(--menu-space) * 4);
padding: calc(var(--menu-space) * 4) calc(var(--menu-space) * 5);
}
.menu-close-tab {

2
src/css/typography.css
View File

@ -68,7 +68,7 @@ hr {
border: 0;
border-top: var(--horizontal-rule-small);
border-radius: var(--theme-radius);
margin: var(--form-wrap-space) 0;
margin: calc(var(--form-wrap-space) * 1.5) 0;
clear: both;
}

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

@ -43,24 +43,26 @@
<div class="form-helper">
<p class="control-header-area-justify-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
</div>
<div class="form-indent">
<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 class="form-wrap">
<div class="form-indent">
<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>
</div>
<hr>
@ -111,6 +113,9 @@
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label class="control-header-greeting-type-label">Wording</label>
</div>
<div class="form-wrap">
<input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="-1">
<label for="control-header-greeting-type-good"><span class="label-icon"></span> "Good morning..."</label>
@ -163,6 +168,9 @@
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label class="control-header-transitional-type-label">Wording</label>
</div>
<div class="form-wrap">
<input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="-1">
<label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span> "The time and date is"</label>

125
src/html/menu/menu-content/theme.html
View File

@ -43,6 +43,9 @@
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
<label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
</div>
<div class="form-helper">
<p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p>
</div>
<div class="form-helper">
<p class="control-theme-style-helper form-helper-item">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
</div>
@ -71,6 +74,7 @@
</div>
<div class="form-wrap">
<div class="form-indent">
<hr>
<div class="form-wrap">
<label for="control-theme-font-display-weight-range">Font weight</label>
<div class="form-group form-group-block">
@ -131,6 +135,7 @@
</div>
<div class="form-wrap">
<div class="form-indent">
<hr>
<div class="form-wrap">
<label for="control-theme-font-ui-weight">Font weight</label>
<div class="form-group form-group-block">
@ -270,65 +275,69 @@
<div class="form-helper">
<p class="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
</div>
<hr>
<div class="form-wrap">
<label for="control-theme-color-hsl-h-range">Hue</label>
<div class="form-group form-group-block">
<input id="control-theme-color-hsl-h-range" class="control-theme-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-hsl-s-range">Saturation</label>
<div class="form-group form-group-block">
<input id="control-theme-color-hsl-s-range" class="control-theme-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-hsl-l-range">Lightness</label>
<div class="form-group form-group-block">
<input id="control-theme-color-hsl-l-range" class="control-theme-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-theme-color-rgb-r-range">Red</label>
<div class="form-group form-group-block">
<input id="control-theme-color-rgb-r-range" class="control-theme-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-rgb-g-range">Green</label>
<div class="form-group form-group-block">
<input id="control-theme-color-rgb-g-range" class="control-theme-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-rgb-b-range">Blue</label>
<div class="form-group form-group-block">
<input id="control-theme-color-rgb-b-range" class="control-theme-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-theme-color-contrast-light-range">Light shade contrast</label>
<div class="form-group form-group-block">
<input id="control-theme-color-contrast-light-range" class="control-theme-color-contrast-light-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-contrast-light-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-color-contrast-light-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-contrast-dark-range">Dark shade contrast</label>
<div class="form-group form-group-block">
<input id="control-theme-color-contrast-dark-range" class="control-theme-color-contrast-dark-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-contrast-dark-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-color-contrast-dark-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
<div class="form-indent">
<hr>
<div class="form-wrap">
<label for="control-theme-color-hsl-h-range">Hue</label>
<div class="form-group form-group-block">
<input id="control-theme-color-hsl-h-range" class="control-theme-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-hsl-s-range">Saturation</label>
<div class="form-group form-group-block">
<input id="control-theme-color-hsl-s-range" class="control-theme-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-hsl-l-range">Lightness</label>
<div class="form-group form-group-block">
<input id="control-theme-color-hsl-l-range" class="control-theme-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-theme-color-rgb-r-range">Red</label>
<div class="form-group form-group-block">
<input id="control-theme-color-rgb-r-range" class="control-theme-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-rgb-g-range">Green</label>
<div class="form-group form-group-block">
<input id="control-theme-color-rgb-g-range" class="control-theme-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-rgb-b-range">Blue</label>
<div class="form-group form-group-block">
<input id="control-theme-color-rgb-b-range" class="control-theme-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-theme-color-contrast-light-range">Light shade contrast</label>
<div class="form-group form-group-block">
<input id="control-theme-color-contrast-light-range" class="control-theme-color-contrast-light-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-contrast-light-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-color-contrast-light-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-contrast-dark-range">Dark shade contrast</label>
<div class="form-group form-group-block">
<input id="control-theme-color-contrast-dark-range" class="control-theme-color-contrast-dark-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-contrast-dark-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-color-contrast-dark-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
</div>
</div>
</div>

2
src/js/control.js
View File

@ -6441,6 +6441,7 @@ var control = (function() {
return [
"[for=control-header-greeting-name]",
".control-header-greeting-name",
".control-header-greeting-type-label",
".control-header-greeting-type-good",
".control-header-greeting-type-hello",
".control-header-greeting-type-hi",
@ -6549,6 +6550,7 @@ var control = (function() {
},
dependents: function() {
return [
".control-header-transitional-type-label",
".control-header-transitional-type-timeanddate",
".control-header-transitional-type-its",
"[for=control-header-transitional-size-range]",