extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 12:31:47 +02: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 { .menu-content-item {
padding: calc(var(--menu-space) * 3); padding: calc(var(--menu-space) * 2) calc(var(--menu-space) * 3);
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@ -125,7 +125,7 @@
} }
.menu-item-header { .menu-item-header {
margin-bottom: calc(var(--menu-space) * 2); margin-bottom: calc(var(--menu-space) * 1);
} }
.menu-item-header-text { .menu-item-header-text {
@ -196,11 +196,11 @@
} }
.menu-content-item { .menu-content-item {
padding: calc(var(--menu-space) * 4); padding: calc(var(--menu-space) * 3) calc(var(--menu-space) * 4);
} }
.menu-item-header { .menu-item-header {
margin-bottom: calc(var(--menu-space) * 3); margin-bottom: calc(var(--menu-space) * 2);
} }
.menu-nav-item { .menu-nav-item {
@ -272,11 +272,7 @@
} }
.menu-content-item { .menu-content-item {
padding: calc(var(--menu-space) * 5); padding: calc(var(--menu-space) * 4) calc(var(--menu-space) * 5);
}
.menu-item-header {
margin-bottom: calc(var(--menu-space) * 4);
} }
.menu-close-tab { .menu-close-tab {

2
src/css/typography.css
View File

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

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

@ -43,24 +43,26 @@
<div class="form-helper"> <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> <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>
<div class="form-indent"> <div class="form-wrap">
<hr> <div class="form-indent">
<div class="form-wrap"> <hr>
<label class="control-header-area-align-label">Header item vertical alignment</label> <div class="form-wrap">
</div> <label class="control-header-area-align-label">Header item vertical alignment</label>
<div class="form-wrap"> </div>
<input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1"> <div class="form-wrap">
<label for="control-header-area-align-center"><span class="label-icon"></span> Center</label> <input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1">
</div> <label for="control-header-area-align-center"><span class="label-icon"></span> Center</label>
<div class="form-helper"> </div>
<p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p> <div class="form-helper">
</div> <p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p>
<div class="form-wrap"> </div>
<input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1"> <div class="form-wrap">
<label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label> <input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1">
</div> <label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label>
<div class="form-helper"> </div>
<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-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>
</div> </div>
<hr> <hr>
@ -111,6 +113,9 @@
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<div class="form-wrap">
<label class="control-header-greeting-type-label">Wording</label>
</div>
<div class="form-wrap"> <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"> <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> <label for="control-header-greeting-type-good"><span class="label-icon"></span> "Good morning..."</label>
@ -163,6 +168,9 @@
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<div class="form-wrap">
<label class="control-header-transitional-type-label">Wording</label>
</div>
<div class="form-wrap"> <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"> <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> <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"> <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> <label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
</div> </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"> <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> <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> </div>
@ -71,6 +74,7 @@
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-font-display-weight-range">Font weight</label> <label for="control-theme-font-display-weight-range">Font weight</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
@ -131,6 +135,7 @@
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-font-ui-weight">Font weight</label> <label for="control-theme-font-ui-weight">Font weight</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
@ -270,65 +275,69 @@
<div class="form-helper"> <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> <p class="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
</div> </div>
<hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-color-hsl-h-range">Hue</label> <div class="form-indent">
<div class="form-group form-group-block"> <hr>
<input id="control-theme-color-hsl-h-range" class="control-theme-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1"> <div class="form-wrap">
<input class="control-theme-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <label for="control-theme-color-hsl-h-range">Hue</label>
</div> <div class="form-group form-group-block">
</div> <input id="control-theme-color-hsl-h-range" class="control-theme-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
<div class="form-wrap"> <input class="control-theme-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<label for="control-theme-color-hsl-s-range">Saturation</label> </div>
<div class="form-group form-group-block"> </div>
<input id="control-theme-color-hsl-s-range" class="control-theme-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1"> <div class="form-wrap">
<input class="control-theme-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <label for="control-theme-color-hsl-s-range">Saturation</label>
</div> <div class="form-group form-group-block">
</div> <input id="control-theme-color-hsl-s-range" class="control-theme-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
<div class="form-wrap"> <input class="control-theme-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<label for="control-theme-color-hsl-l-range">Lightness</label> </div>
<div class="form-group form-group-block"> </div>
<input id="control-theme-color-hsl-l-range" class="control-theme-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1"> <div class="form-wrap">
<input class="control-theme-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <label for="control-theme-color-hsl-l-range">Lightness</label>
</div> <div class="form-group form-group-block">
</div> <input id="control-theme-color-hsl-l-range" class="control-theme-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
<hr> <input class="control-theme-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<div class="form-wrap"> </div>
<label for="control-theme-color-rgb-r-range">Red</label> </div>
<div class="form-group form-group-block"> <hr>
<input id="control-theme-color-rgb-r-range" class="control-theme-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1"> <div class="form-wrap">
<input class="control-theme-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <label for="control-theme-color-rgb-r-range">Red</label>
</div> <div class="form-group form-group-block">
</div> <input id="control-theme-color-rgb-r-range" class="control-theme-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
<div class="form-wrap"> <input class="control-theme-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<label for="control-theme-color-rgb-g-range">Green</label> </div>
<div class="form-group form-group-block"> </div>
<input id="control-theme-color-rgb-g-range" class="control-theme-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1"> <div class="form-wrap">
<input class="control-theme-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <label for="control-theme-color-rgb-g-range">Green</label>
</div> <div class="form-group form-group-block">
</div> <input id="control-theme-color-rgb-g-range" class="control-theme-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
<div class="form-wrap"> <input class="control-theme-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<label for="control-theme-color-rgb-b-range">Blue</label> </div>
<div class="form-group form-group-block"> </div>
<input id="control-theme-color-rgb-b-range" class="control-theme-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1"> <div class="form-wrap">
<input class="control-theme-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <label for="control-theme-color-rgb-b-range">Blue</label>
</div> <div class="form-group form-group-block">
</div> <input id="control-theme-color-rgb-b-range" class="control-theme-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
<hr> <input class="control-theme-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<div class="form-wrap"> </div>
<label for="control-theme-color-contrast-light-range">Light shade contrast</label> </div>
<div class="form-group form-group-block"> <hr>
<input id="control-theme-color-contrast-light-range" class="control-theme-color-contrast-light-range mr-3" type="range" value="0" tabindex="-1"> <div class="form-wrap">
<input class="control-theme-color-contrast-light-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <label for="control-theme-color-contrast-light-range">Light shade contrast</label>
<button class="control-theme-color-contrast-light-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <div class="form-group form-group-block">
</div> <input id="control-theme-color-contrast-light-range" class="control-theme-color-contrast-light-range mr-3" type="range" value="0" tabindex="-1">
</div> <input class="control-theme-color-contrast-light-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<div class="form-wrap"> <button class="control-theme-color-contrast-light-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
<label for="control-theme-color-contrast-dark-range">Dark shade contrast</label> </div>
<div class="form-group form-group-block"> </div>
<input id="control-theme-color-contrast-dark-range" class="control-theme-color-contrast-dark-range mr-3" type="range" value="0" tabindex="-1"> <div class="form-wrap">
<input class="control-theme-color-contrast-dark-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <label for="control-theme-color-contrast-dark-range">Dark shade contrast</label>
<button class="control-theme-color-contrast-dark-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <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> </div>
</div> </div>

2
src/js/control.js
View File

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