Skip to content

Commit ec83292

Browse files
zombieFoxzombieFox
committed
[design] improve menu hierarchy and control order
1 parent 80bb0f7 commit ec83292

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+2458
-2325
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nightTab",
3-
"version": "4.42.0",
3+
"version": "4.43.0",
44
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
55
"main": "index.js",
66
"scripts":{

‎src/css/menu.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@
196196
}
197197

198198
.menu-content-overscroll .menu-content-item:last-child{
199-
padding-bottom:calc(var(--menu-space) *30);
199+
padding-bottom:calc(var(--menu-space) *50);
200200
}
201201

202202
.menu-item-header{

‎src/html/menu.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
<sectionclass="menu" tabindex="-1" style="display:none;">
22
<divclass="menu-area">
33

4-
@@include("./menu/menu-nav.html")
4+
@@include("./menu/nav.html")
55

6-
@@include("./menu/menu-close.html")
6+
@@include("./menu/close.html")
77

8-
@@include("./menu/menu-content/layout.html")
8+
@@include("./menu/content/layout.html")
99

10-
@@include("./menu/menu-content/header.html")
10+
@@include("./menu/content/header.html")
1111

12-
@@include("./menu/menu-content/groups.html")
12+
@@include("./menu/content/groups.html")
1313

14-
@@include("./menu/menu-content/bookmarks.html")
14+
@@include("./menu/content/bookmarks.html")
1515

16-
@@include("./menu/menu-content/theme.html")
16+
@@include("./menu/content/theme.html")
1717

18-
@@include("./menu/menu-content/background.html")
18+
@@include("./menu/content/background.html")
1919

20-
@@include("./menu/menu-content/data.html")
20+
@@include("./menu/content/data.html")
2121

22-
@@include("./menu/menu-content/coffee.html")
22+
@@include("./menu/content/coffee.html")
2323

24-
@@include("./menu/menu-content/nighttab.html")
24+
@@include("./menu/content/nighttab.html")
2525

2626
</div>
2727
</section>

src/html/menu/menu-close.html renamed to src/html/menu/close.html

File renamed without changes.

‎src/html/menu/content/background.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<divid="menu-content-background" class="menu-content menu-content-overscroll menu-content-background is-hidden">
2+
3+
@@include("./background/color.html")
4+
5+
@@include("./background/image.html")
6+
7+
</div>

‎src/html/menu/content/background/color.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<divid="menu-content-background-color" class="menu-content-item">
2+
<divclass="menu-item-header">
3+
<h1class="menu-item-header-text">Colour</h1>
4+
</div>
5+
<divclass="menu-item-form">
6+
<divclass="form-wrap">
7+
<inputid="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
8+
<labelfor="control-background-color-by-theme"><spanclass="label-icon"></span> Theme colour</label>
9+
</div>
10+
<divclass="form-helper">
11+
<pclass="control-background-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
12+
</div>
13+
<divclass="form-wrap">
14+
<inputid="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
15+
<labelfor="control-background-color-by-custom"><spanclass="label-icon"></span> Custom colour</label>
16+
</div>
17+
<divclass="form-helper">
18+
<pclass="control-background-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
19+
</div>
20+
<divclass="form-helper">
21+
<pclass="control-background-color-by-custom-helper form-helper-item">Take care as some colours may make the Clock, Date and other text unreadable.</p>
22+
</div>
23+
<divclass="form-wrap">
24+
<divclass="form-indent">
25+
<divclass="form-wrap">
26+
<divclass="form-group form-group-block">
27+
<inputid="control-background-color-rgb-range" class="form-group-item-half control-background-color-rgb-range" type="color" value="#000000" tabindex="1">
28+
<inputid="control-background-color-rgb-text" class="form-group-item-half control-background-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</div>

‎src/html/menu/content/background/image.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<divid="menu-content-background-image" class="menu-content-item">
2+
<divclass="menu-item-header">
3+
<h1class="menu-item-header-text">Image</h1>
4+
</div>
5+
<divclass="menu-item-form">
6+
<divclass="form-wrap">
7+
<inputid="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="-1">
8+
<labelfor="control-background-image-show"><spanclass="label-icon"></span> Show</label>
9+
</div>
10+
<divclass="form-wrap">
11+
<divclass="form-indent">
12+
<divclass="form-wrap">
13+
<inputid="control-background-image-from-file" class="control-background-image-from-file" type="radio" name="control-background-image-from" value="file" tabindex="-1">
14+
<labelfor="control-background-image-from-file"><spanclass="label-icon"></span> Use local file</label>
15+
</div>
16+
<divclass="form-wrap">
17+
<divclass="form-indent">
18+
<divclass="form-inline">
19+
<divclass="form-input-button form-input-hide">
20+
<inputid="control-background-image-file" class="control-background-image-file" type="file">
21+
<labelfor="control-background-image-file">Select image</label>
22+
</div>
23+
<buttonclass="control-background-image-file-clear button">Clear image</button>
24+
</div>
25+
<divclass="form-helper">
26+
<pclass="control-background-image-file-helper form-helper-item">Max image size 5MB, (due to browser local storage limits).</p>
27+
</div>
28+
<divclass="form-helper">
29+
<pclass="control-background-image-file-helper form-helper-item">Take care with large files, they may impact performance.</p>
30+
</div>
31+
<divclass="form-wrap">
32+
<divclass="control-background-image-file-feedback form-feedback"></div>
33+
</div>
34+
</div>
35+
</div>
36+
<divclass="form-wrap">
37+
<inputid="control-background-image-from-url" class="control-background-image-from-url" type="radio" name="control-background-image-from" value="url" tabindex="-1">
38+
<labelfor="control-background-image-from-url"><spanclass="label-icon"></span> Use URL</label>
39+
</div>
40+
<divclass="form-wrap">
41+
<divclass="form-indent">
42+
<divclass="form-wrap">
43+
<textareaid="control-background-image-url" class="control-background-image-url" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
44+
</div>
45+
<divclass="form-helper">
46+
<pclass="control-background-image-url-helper form-helper-item">If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.</p>
47+
</div>
48+
<hr>
49+
<divclass="form-helper">
50+
<pclass="control-background-image-url-helper form-helper-item">Unsplash can be used for random images, eg:</p>
51+
</div>
52+
<divclass="form-helper">
53+
<pclass="control-background-image-url-helper form-helper-item"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
54+
</div>
55+
<divclass="form-helper">
56+
<pclass="control-background-image-url-helper form-helper-item">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p>
57+
</div>
58+
</div>
59+
</div>
60+
<hr>
61+
<divclass="form-wrap">
62+
<labelfor="control-background-image-opacity-range">Opacity</label>
63+
<divclass="form-group form-group-block">
64+
<inputid="control-background-image-opacity-range" class="control-background-image-opacity-range mr-3" type="range" value="0" tabindex="-1">
65+
<inputclass="control-background-image-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
66+
<buttonclass="control-background-image-opacity-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
67+
</div>
68+
</div>
69+
<divclass="form-wrap">
70+
<labelfor="control-background-image-grayscale-range">Grayscale</label>
71+
<divclass="form-group form-group-block">
72+
<inputid="control-background-image-grayscale-range" class="control-background-image-grayscale-range mr-3" type="range" value="0" tabindex="-1">
73+
<inputclass="control-background-image-grayscale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
74+
<buttonclass="control-background-image-grayscale-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
75+
</div>
76+
</div>
77+
<divclass="form-wrap">
78+
<labelfor="control-background-image-blur-range">Blur</label>
79+
<divclass="form-group form-group-block">
80+
<inputid="control-background-image-blur-range" class="control-background-image-blur-range mr-3" type="range" value="0" tabindex="-1">
81+
<inputclass="control-background-image-blur-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
82+
<buttonclass="control-background-image-blur-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
83+
</div>
84+
</div>
85+
<divclass="form-wrap">
86+
<labelfor="control-background-image-accent-range">Accent overlay</label>
87+
<divclass="form-group form-group-block">
88+
<inputid="control-background-image-accent-range" class="control-background-image-accent-range mr-3" type="range" value="0" tabindex="-1">
89+
<inputclass="control-background-image-accent-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
90+
<buttonclass="control-background-image-accent-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
91+
</div>
92+
</div>
93+
<divclass="form-wrap">
94+
<labelfor="control-background-image-scale-range">Size</label>
95+
<divclass="form-group form-group-block">
96+
<inputid="control-background-image-scale-range" class="control-background-image-scale-range mr-3" type="range" value="0" tabindex="-1">
97+
<inputclass="control-background-image-scale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
98+
<buttonclass="control-background-image-scale-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
</div>

‎src/html/menu/content/bookmarks.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<divid="menu-content-bookmarks" class="menu-content menu-content-overscroll menu-content-bookmarks is-hidden">
2+
3+
@@include("./bookmarks/area.html")
4+
5+
@@include("./bookmarks/bookmarks.html")
6+
7+
@@include("./bookmarks/letcon.html")
8+
9+
@@include("./bookmarks/name.html")
10+
11+
@@include("./bookmarks/alignment.html")
12+
13+
@@include("./bookmarks/style.html")
14+
15+
@@include("./bookmarks/color.html")
16+
17+
@@include("./bookmarks/border.html")
18+
19+
@@include("./bookmarks/orientation.html")
20+
21+
@@include("./bookmarks/sort.html")
22+
23+
@@include("./bookmarks/accent.html")
24+
25+
</div>

‎src/html/menu/content/bookmarks/accent.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<divid="menu-content-bookmarks-accent" class="menu-content-item">
2+
<divclass="menu-item-header">
3+
<h1class="menu-item-header-text">Accent override</h1>
4+
</div>
5+
<divclass="menu-item-form">
6+
<divclass="form-wrap">
7+
<buttonclass="control-link-accent-clear button" tabindex="-1">Remove all override colours</button>
8+
</div>
9+
<hr>
10+
<divclass="form-wrap">
11+
<buttonclass="control-link-accent-set button" tabindex="-1">Add override colours</button>
12+
</div>
13+
<divclass="form-helper">
14+
<pclass="control-link-accent-set-helper form-helper-item">Adds a unique override colour to each Bookmark.</p>
15+
</div>
16+
</div>
17+
</div>

0 commit comments

Comments
(0)