Skip to content

Commit b519f6e

Browse files
zombieFoxzombieFox
authored
[feature] adding controls for header search width
1 parent c27af0d commit b519f6e

11 files changed

Lines changed: 282 additions & 112 deletions

File tree

‎css/base.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
--header-shade-color: transparent;
6868
--header-shade-opacity: none;
6969
--header-height: 0;
70+
--header-search-width: 0%;
7071
--header-shade-padding-top: calc(var(--line-width) * var(--header-shade-padding-multiplier-top));
7172
--header-shade-padding-bottom: calc(var(--line-width) * var(--header-shade-padding-multiplier-bottom));
7273
--header-shade-padding-multiplier-top: 4;

‎css/header.css‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,18 @@
7171
position: relative;
7272
}
7373

74+
.is-header-search-text-align-left .header-search-input {
75+
text-align: left;
76+
}
77+
78+
.is-header-search-text-align-center .header-search-input {
79+
text-align: center;
80+
}
81+
82+
.is-header-search-text-align-right .header-search-input {
83+
text-align: right;
84+
}
85+
7486
.is-header-searching .header-search-input[type="text"] {
7587
padding-right: 3.5em;
7688
}
@@ -93,20 +105,16 @@
93105
justify-content: flex-end;
94106
}
95107

96-
.is-header-search-grow .header-search {
97-
flex-grow: 1;
98-
flex-basis: 100%;
108+
.header-search {
109+
width: var(--header-search-width);
99110
}
100111

101-
@media (min-width: 550px) {
102-
.is-header-search-grow .header-search {
103-
flex-basis: initial;
104-
}
112+
.is-header-search-width-auto .header-search {
113+
flex-grow: 1;
105114
}
106115

107-
.header-search {
108-
width: 15vw;
109-
min-width: 15em;
116+
.is-header-search-width-custom .header-search {
117+
width: var(--header-search-width);
110118
}
111119

112120
.header-date,

‎css/link.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@
204204
text-overflow: ellipsis;
205205
}
206206

207-
.bookmarks-url-dark .link-url-text {
207+
.is-bookmarks-url-dark .link-url-text {
208208
color: rgb(var(--black));
209209
}
210210

‎index.html‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117

118118
<div class="menu-content-area menu-content-area-header">
119119
<div class="menu-item">
120-
<h1 class="menu-header">Greeting</h1>
120+
<h1 class="menu-header"></h1>
121121
<div class="checkbox-wrap">
122122
<input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="1">
123123
<label for="control-header-greeting-show"><span class="label-icon"></span>Show</label>
@@ -203,9 +203,19 @@ <h1 class="menu-header">Search</h1>
203203
<input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="1">
204204
<label for="control-header-search-show"><span class="label-icon"></span>Show</label>
205205
</div>
206-
<div class="checkbox-wrap form-indent-1">
207-
<input id="control-header-search-grow" class="control-header-search-grow" type="checkbox" tabindex="1">
208-
<label for="control-header-search-grow"><span class="label-icon"></span>Grow to fill available space</label>
206+
<label class="control-header-search-width-label form-indent-1">Search box size</label>
207+
<div class="radio-wrap form-indent-1">
208+
<input id="control-header-search-width-style-auto" class="control-header-search-width-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
209+
<label for="control-header-search-width-style-auto"><span class="label-icon"></span>Auto</label>
210+
<p class="input-helper small muted">Search box will grow to best fit available space.</p>
211+
</div>
212+
<div class="radio-wrap form-indent-1">
213+
<input id="control-header-search-width-style-custom" class="control-header-search-width-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
214+
<label for="control-header-search-width-style-custom"><span class="label-icon"></span>Custom</label>
215+
</div>
216+
<div class="input-wrap form-indent-2">
217+
<label for="control-header-search-width-custom">Percentage of content container</label>
218+
<input id="control-header-search-width-custom" class="control-header-search-width-custom" type="range" min="10" max="100" value="0" tabindex="1">
209219
</div>
210220
<div class="checkbox-wrap form-indent-1">
211221
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="1">
@@ -243,6 +253,19 @@ <h1 class="menu-header">Search</h1>
243253
<p class="input-helper small muted">Eneter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
244254
<p class="input-helper small muted">nightTab would add the search term entered into the Search input at the end of the above URL</p>
245255
</div>
256+
<label class="control-header-search-text-align-label form-indent-1">Text align</label>
257+
<div class="radio-wrap form-indent-1">
258+
<input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1">
259+
<label for="control-header-search-text-align-left"><span class="label-icon"></span>Left</label>
260+
</div>
261+
<div class="radio-wrap form-indent-1">
262+
<input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1">
263+
<label for="control-header-search-text-align-center"><span class="label-icon"></span>Center</label>
264+
</div>
265+
<div class="radio-wrap form-indent-1">
266+
<input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1">
267+
<label for="control-header-search-text-align-right"><span class="label-icon"></span>Right</label>
268+
</div>
246269
</div>
247270
<div class="menu-item">
248271
<h1 class="menu-header">Buttons</h1>
@@ -268,7 +291,7 @@ <h1 class="menu-header">Horizontal Alignment</h1>
268291
<div class="radio-wrap">
269292
<input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
270293
<label for="control-layout-alignment-horizontal-right"><span class="label-icon"></span>Right</label>
271-
<p class="input-helper small muted">Effects may not be visible if the Search box is set to grow to fill available space.</p>
294+
<p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
272295
</div>
273296
</div>
274297
<div class="menu-item">

‎js/control.js‎

Lines changed: 81 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -173,18 +173,35 @@ var control = (function() {
173173
header.render();
174174
}
175175
}, {
176-
element: helper.e(".control-header-search-grow"),
177-
path: "header.search.grow",
178-
type: "checkbox",
176+
element: helper.e(".control-header-search-width-style-auto"),
177+
path: "header.search.width.style",
178+
type: "radio",
179+
func: function() {
180+
render();
181+
dependents();
182+
header.render();
183+
}
184+
}, {
185+
element: helper.e(".control-header-search-width-style-custom"),
186+
path: "header.search.width.style",
187+
type: "radio",
188+
func: function() {
189+
render();
190+
dependents();
191+
header.render();
192+
}
193+
}, {
194+
element: helper.e(".control-header-search-width-custom"),
195+
path: "header.search.width.custom",
196+
type: "range",
179197
func: function() {
180198
render();
181199
header.render();
182200
}
183201
}, {
184202
element: helper.e(".control-header-search-focus"),
185203
path: "header.search.focus",
186-
type: "checkbox",
187-
func: function() {}
204+
type: "checkbox"
188205
}, {
189206
element: helper.e(".control-header-search-engine-google"),
190207
path: "header.search.engine.selected",
@@ -244,19 +261,42 @@ var control = (function() {
244261
func: function() {
245262
search.render();
246263
}
264+
}, {
265+
element: helper.e(".control-header-search-text-align-left"),
266+
path: "header.search.text.align",
267+
type: "radio",
268+
func: function() {
269+
render();
270+
}
271+
}, {
272+
element: helper.e(".control-header-search-text-align-center"),
273+
path: "header.search.text.align",
274+
type: "radio",
275+
func: function() {
276+
render();
277+
}
278+
}, {
279+
element: helper.e(".control-header-search-text-align-right"),
280+
path: "header.search.text.align",
281+
type: "radio",
282+
func: function() {
283+
render();
284+
}
247285
}, {
248286
element: helper.e(".control-header-edit-add-show"),
249287
path: "header.editAdd.show",
250288
type: "checkbox",
251289
func: function() {
252290
render();
291+
header.render();
253292
}
254293
}, {
255294
element: helper.e(".control-header-accent-show"),
256295
path: "header.accent.show",
257296
type: "checkbox",
258297
func: function() {
259298
render();
299+
header.render();
260300
}
261301
}, {
262302
element: helper.e(".control-layout-alignment-horizontal-left"),
@@ -813,11 +853,13 @@ var control = (function() {
813853
} else {
814854
helper.removeClass(html, "is-header-search-show");
815855
};
816-
if (state.get().header.search.grow) {
817-
helper.addClass(html, "is-header-search-grow");
818-
} else {
819-
helper.removeClass(html, "is-header-search-grow");
820-
};
856+
helper.removeClass(html, "is-header-search-width-custom");
857+
helper.removeClass(html, "is-header-search-width-auto");
858+
helper.addClass(html, "is-header-search-width-" + state.get().header.search.width.style);
859+
helper.removeClass(html, "is-header-search-text-align-left");
860+
helper.removeClass(html, "is-header-search-text-align-center");
861+
helper.removeClass(html, "is-header-search-text-align-right");
862+
helper.addClass(html, "is-header-search-text-align-" + state.get().header.search.text.align);
821863
helper.e(".control-header-search-engine-custom-name").value = state.get().header.search.engine.custom.name;
822864
helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
823865
};
@@ -860,11 +902,11 @@ var control = (function() {
860902
};
861903
var urlText = {
862904
dark: function() {
863-
helper.addClass(html, "bookmarks-url-dark");
905+
helper.addClass(html, "is-bookmarks-url-dark");
864906
helper.removeClass(html, "bookmarks-url-light");
865907
},
866908
light: function() {
867-
helper.removeClass(html, "bookmarks-url-dark");
909+
helper.removeClass(html, "is-bookmarks-url-dark");
868910
helper.addClass(html, "bookmarks-url-light");
869911
}
870912
};
@@ -1021,23 +1063,39 @@ var control = (function() {
10211063
};
10221064
var _search = function() {
10231065
if (state.get().header.search.show) {
1024-
helper.e(".control-header-search-grow").disabled = false;
1066+
helper.e(".control-header-search-width-label").removeAttribute("disabled");
1067+
helper.e(".control-header-search-width-style-auto").disabled = false;
1068+
helper.e(".control-header-search-width-style-custom").disabled = false;
1069+
helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled");
1070+
helper.e(".control-header-search-width-custom").disabled = false;
10251071
helper.e(".control-header-search-focus").disabled = false;
1072+
helper.e(".control-header-search-engine-label").removeAttribute("disabled");
10261073
helper.e(".control-header-search-engine-google").disabled = false;
10271074
helper.e(".control-header-search-engine-duckduckgo").disabled = false;
10281075
helper.e(".control-header-search-engine-youtube").disabled = false;
10291076
helper.e(".control-header-search-engine-giphy").disabled = false;
10301077
helper.e(".control-header-search-engine-custom").disabled = false;
1031-
helper.e(".control-header-search-engine-label").removeAttribute("disabled");
1078+
helper.e(".control-header-search-text-align-label").removeAttribute("disabled");
1079+
helper.e(".control-header-search-text-align-left").disabled = false;
1080+
helper.e(".control-header-search-text-align-center").disabled = false;
1081+
helper.e(".control-header-search-text-align-right").disabled = false;
10321082
} else {
1033-
helper.e(".control-header-search-grow").disabled = true;
1083+
helper.e(".control-header-search-width-label").setAttribute("disabled", "");
1084+
helper.e(".control-header-search-width-style-auto").disabled = true;
1085+
helper.e(".control-header-search-width-style-custom").disabled = true;
1086+
helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", "");
1087+
helper.e(".control-header-search-width-custom").disabled = true;
10341088
helper.e(".control-header-search-focus").disabled = true;
1089+
helper.e(".control-header-search-engine-label").setAttribute("disabled", "");
10351090
helper.e(".control-header-search-engine-google").disabled = true;
10361091
helper.e(".control-header-search-engine-duckduckgo").disabled = true;
10371092
helper.e(".control-header-search-engine-youtube").disabled = true;
10381093
helper.e(".control-header-search-engine-giphy").disabled = true;
10391094
helper.e(".control-header-search-engine-custom").disabled = true;
1040-
helper.e(".control-header-search-engine-label").setAttribute("disabled", "");
1095+
helper.e(".control-header-search-text-align-label").setAttribute("disabled", "");
1096+
helper.e(".control-header-search-text-align-left").disabled = true;
1097+
helper.e(".control-header-search-text-align-center").disabled = true;
1098+
helper.e(".control-header-search-text-align-right").disabled = true;
10411099
};
10421100
if (state.get().header.search.show && state.get().header.search.engine.selected === "custom") {
10431101
helper.e("[for=control-header-search-engine-custom-name]").removeAttribute("disabled");
@@ -1050,6 +1108,13 @@ var control = (function() {
10501108
helper.e("[for=control-header-search-engine-custom-url]").setAttribute("disabled", "");
10511109
helper.e(".control-header-search-engine-custom-url").disabled = true;
10521110
};
1111+
if (state.get().header.search.show && state.get().header.search.width.style === "custom") {
1112+
helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled");
1113+
helper.e(".control-header-search-width-custom").disabled = false;
1114+
} else {
1115+
helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", "");
1116+
helper.e(".control-header-search-width-custom").disabled = true;
1117+
};
10531118
};
10541119
var _theme = function() {
10551120
if (state.get().theme.accent.random.active) {

‎js/data.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,12 @@ var data = (function() {
3535

3636
var _checkForSavedData = function(data) {
3737
if (data) {
38-
console.log("data loaded");
3938
if (!("version" in data) || data.version != version.get()) {
40-
console.log("data version", data.version, "found less than current");
39+
console.log("data version " + data.version + " found less than current");
4140
data = update.run(data);
4241
set(saveName, JSON.stringify(data));
4342
} else {
44-
console.log("data version =", version.get());
43+
console.log("data version " + version.get() + " no need to run update");
4544
};
4645
} else {
4746
console.log("no data found to load");

‎js/header.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ var header = (function() {
1212
render();
1313
}, false);
1414
});
15+
document.fonts.ready.then(function() {
16+
render();
17+
});
1518
};
1619

1720
var edge = function(action) {
@@ -80,6 +83,14 @@ var header = (function() {
8083
html.style.setProperty("--header-border-width-multiplier-top", state.get().header.shade.border.top.width);
8184
html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.shade.border.bottom.width);
8285
};
86+
var _search = function() {
87+
if (state.get().header.search.show && state.get().header.search.width.style === "custom") {
88+
html.style.setProperty("--header-search-width", state.get().header.search.width.custom + "%");
89+
} else {
90+
html.style.removeProperty("--header-search-width");
91+
};
92+
};
93+
_search();
8394
_color();
8495
_opacity();
8596
_padding();

‎js/init.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// log version
2-
console.log("nightTab v", version.get(), "loaded");
2+
console.log("nightTab version", version.get());
33

44
// check for old versions
55
data.init();
@@ -47,9 +47,6 @@ tip.init();
4747
// render page title
4848
layout.init();
4949

50-
// render header height padding
51-
header.init();
52-
5350
// render background image
5451
background.init();
5552

@@ -60,3 +57,6 @@ search.init();
6057

6158
// render page title
6259
title.init();
60+
61+
// render header height padding
62+
header.init();

‎js/state.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ var state = (function() {
2626
},
2727
search: {
2828
show: true,
29-
grow: true,
29+
width: {
30+
style: "auto",
31+
custom: 30
32+
},
3033
focus: false,
3134
engine: {
3235
selected: "google",
@@ -50,6 +53,9 @@ var state = (function() {
5053
url: "",
5154
name: ""
5255
}
56+
},
57+
text: {
58+
align: "left"
5359
}
5460
},
5561
alignment: {

0 commit comments

Comments
 (0)