Skip to content

Commit 934e98d

Browse files
GuillaumeGomezGuillaumeGomez
committed
Unify theme and settings menus
1 parent 7c52091 commit 934e98d

File tree

3 files changed

+72
-98
lines changed

3 files changed

+72
-98
lines changed

‎util/gh-pages/index.html‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,27 +26,15 @@
2626
<link rel="stylesheet" href="style.css">
2727
</head>
2828
<body ng-app="clippy" ng-controller="lintList">
29-
<div id="settings">
30-
<div theme-dropdown class="theme-dropdown">
31-
<div class="menu-container">
32-
<div id="theme-icon" class="theme-icon">&#128396;</div>
33-
<ul id="theme-menu" class="theme-choice">
34-
<li id="{{id}}" ng-repeat="(id, name) in themes" ng-click="selectTheme(id)">{{name}}</li>
35-
</ul>
36-
</div>
37-
</div>
38-
<div settings-dropdown class="settings-dropdown">
39-
<div class="menu-container">
40-
<div id="settings-icon" class="settings-icon"></div>
41-
<ul id="settings-menu" class="settings-choice">
42-
<li>
43-
<label>
44-
<input type="checkbox" id="disable-shortcuts" onchange="changeSetting(this)">
45-
<span>Disable keyboard shortcuts</span>
46-
</label>
47-
</li>
48-
</ul>
49-
</div>
29+
<div id="settings-dropdown">
30+
<div class="settings-icon" tabindex="-1"></div>
31+
<div class="settings-menu" tabindex="-1">
32+
<div class="setting-radio-name">Theme</div>
33+
<select id="theme-choice" onchange="setTheme(this.value, true)"></select>
34+
<label>
35+
<input type="checkbox" id="disable-shortcuts" onchange="changeSetting(this)">
36+
<span>Disable keyboard shortcuts</span>
37+
</label>
5038
</div>
5139
</div>
5240

‎util/gh-pages/script.js‎

Lines changed: 44 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -50,42 +50,6 @@
5050
);
5151
};
5252
})
53-
.directive('themeDropdown', function ($document) {
54-
return {
55-
restrict: 'A',
56-
link: function ($scope, $element, $attr) {
57-
$element.bind('click', function () {
58-
$element.toggleClass('open');
59-
$element.addClass('open-recent');
60-
});
61-
62-
$document.bind('click', function () {
63-
if (!$element.hasClass('open-recent')) {
64-
$element.removeClass('open');
65-
}
66-
$element.removeClass('open-recent');
67-
})
68-
}
69-
}
70-
})
71-
.directive('settingsDropdown', function ($document) {
72-
return {
73-
restrict: 'A',
74-
link: function ($scope, $element, $attr) {
75-
$element.bind('click', function () {
76-
$element.toggleClass('open');
77-
$element.addClass('open-recent');
78-
});
79-
80-
$document.bind('click', function () {
81-
if (!$element.hasClass('open-recent')) {
82-
$element.removeClass('open');
83-
}
84-
$element.removeClass('open-recent');
85-
})
86-
}
87-
}
88-
})
8953
.directive('filterDropdown', function ($document) {
9054
return {
9155
restrict: 'A',
@@ -145,15 +109,6 @@
145109
...GROUPS_FILTER_DEFAULT
146110
};
147111

148-
const THEMES_DEFAULT = {
149-
light: "Light",
150-
rust: "Rust",
151-
coal: "Coal",
152-
navy: "Navy",
153-
ayu: "Ayu"
154-
};
155-
$scope.themes = THEMES_DEFAULT;
156-
157112
$scope.versionFilters = {
158113
"≥": {enabled: false, minorVersion: null },
159114
"≤": {enabled: false, minorVersion: null },
@@ -339,10 +294,6 @@
339294
$location.path($scope.search);
340295
}
341296

342-
$scope.selectTheme = function (theme) {
343-
setTheme(theme, true);
344-
}
345-
346297
$scope.toggleLevels = function (value) {
347298
const levels = $scope.levels;
348299
for (const key in levels) {
@@ -598,6 +549,8 @@ function setTheme(theme, store) {
598549

599550
if (store) {
600551
storeValue("theme", theme);
552+
} else {
553+
document.getElementById(`theme-choice`).value = theme;
601554
}
602555
}
603556

@@ -634,6 +587,48 @@ function changeSetting(elem) {
634587
}
635588
}
636589

590+
function onEachLazy(lazyArray, func) {
591+
const arr = Array.prototype.slice.call(lazyArray);
592+
for (const el of arr) {
593+
func(el);
594+
}
595+
}
596+
597+
function handleBlur(event) {
598+
const parent = document.getElementById("settings-dropdown");
599+
if (!parent.contains(document.activeElement) &&
600+
!parent.contains(event.relatedTarget)
601+
) {
602+
parent.classList.remove("open");
603+
}
604+
}
605+
606+
function generateSettings() {
607+
const THEMES = ["Ayu", "Coal", "Light", "Navy", "Rust"];
608+
const themesElem = document.getElementById("theme-choice");
609+
let children = '';
610+
611+
for (const theme of THEMES) {
612+
const id = theme.toLowerCase();
613+
children += `<option value="${id}">${theme}</option>`;
614+
}
615+
themesElem.innerHTML = children;
616+
themesElem.onblur = handleBlur;
617+
618+
const settings = document.getElementById("settings-dropdown");
619+
const settingsButton = settings.querySelector(".settings-icon")
620+
settingsButton.onclick = () => settings.classList.toggle("open");
621+
settingsButton.onblur = handleBlur;
622+
const settingsMenu = settings.querySelector(".settings-menu");
623+
settingsMenu.onblur = handleBlur;
624+
onEachLazy(
625+
settingsMenu.querySelectorAll("input"),
626+
el => el.onblur = handleBlur,
627+
);
628+
}
629+
630+
generateSettings();
631+
637632
// loading the theme after the initial load
638633
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
639634
const theme = loadValue('theme');

‎util/gh-pages/style.css‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -220,20 +220,15 @@ details[open] {
220220
--inline-code-bg: #191f26;
221221
}
222222

223-
#settings {
223+
#settings-dropdown {
224224
position: absolute;
225225
margin: 0.7em;
226226
z-index: 10;
227227
display: flex;
228228
}
229229

230-
.menu-container {
231-
position: relative;
232-
width: 28px;
233-
}
234-
235230
/* Applying the mdBook theme */
236-
.theme-icon, .settings-icon {
231+
.settings-icon {
237232
text-align: center;
238233
width: 2em;
239234
height: 2em;
@@ -242,24 +237,20 @@ details[open] {
242237
border-radius: 5px;
243238
user-select: none;
244239
cursor: pointer;
245-
}
246-
.theme-icon:hover, .settings-icon:hover {
247240
background: var(--theme-hover);
248241
}
249-
.theme-choice, .settings-choice {
242+
.settings-menu {
250243
display: none;
251244
list-style: none;
252245
border: 1px solid var(--theme-popup-border);
253246
border-radius: 5px;
254247
color: var(--fg);
255248
background: var(--theme-popup-bg);
256-
padding: 0 0;
257249
overflow: hidden;
250+
padding: 9px;
251+
width: 207px;
258252
position: absolute;
259-
}
260-
261-
.settings-dropdown {
262-
margin-left: 4px;
253+
top: 28px;
263254
}
264255

265256
.settings-icon::before {
@@ -285,28 +276,28 @@ L4.75,12h2.5l0.5393066-2.1572876 c0.2276001-0.1062012,0.4459839-0.2269287,0.649
285276
padding-top: 3px;
286277
}
287278

288-
.settings-choice {
289-
padding: 4px;
290-
width: 212px;
279+
.settings-menu * {
280+
font-weight: normal;
291281
}
292282

293-
.settings-choice label {
283+
.settings-menu label {
294284
cursor: pointer;
295285
}
296286

297-
.theme-dropdown.open .theme-choice, .settings-dropdown.open .settings-choice {
287+
#settings-dropdown.open .settings-menu {
298288
display: block;
299289
}
300290

301-
.theme-choice > li {
302-
padding: 5px 10px;
303-
font-size: 0.8em;
304-
user-select: none;
291+
#theme-choice {
292+
margin-bottom: 10px;
293+
background: var(--searchbar-bg);
294+
color: var(--searchbar-fg);
295+
border-color: var(--theme-popup-border);
296+
border-radius: 5px;
305297
cursor: pointer;
306-
}
307-
308-
.theme-choice > li:hover {
309-
background: var(--theme-hover);
298+
width: 100%;
299+
border-width: 1px;
300+
padding: 5px;
310301
}
311302

312303
.alert {

0 commit comments

Comments
 (0)