Skip to content

Commit 8b148ac

Browse files
GuillaumeGomezGuillaumeGomez
committed
Unify theme and settings menus
1 parent 7c52091 commit 8b148ac

File tree

3 files changed

+54
-62
lines changed

3 files changed

+54
-62
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"></div>
31+
<div class="settings-menu">
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: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -145,15 +145,6 @@
145145
...GROUPS_FILTER_DEFAULT
146146
};
147147

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-
157148
$scope.versionFilters = {
158149
"≥": {enabled: false, minorVersion: null },
159150
"≤": {enabled: false, minorVersion: null },
@@ -339,10 +330,6 @@
339330
$location.path($scope.search);
340331
}
341332

342-
$scope.selectTheme = function (theme) {
343-
setTheme(theme, true);
344-
}
345-
346333
$scope.toggleLevels = function (value) {
347334
const levels = $scope.levels;
348335
for (const key in levels) {
@@ -598,6 +585,8 @@ function setTheme(theme, store) {
598585

599586
if (store) {
600587
storeValue("theme", theme);
588+
} else {
589+
document.getElementById(`theme-choice`).value = theme;
601590
}
602591
}
603592

@@ -634,6 +623,30 @@ function changeSetting(elem) {
634623
}
635624
}
636625

626+
function generateSettings() {
627+
const THEMES = ["Ayu", "Coal", "Light", "Navy", "Rust"];
628+
const themesElem = document.getElementById("theme-choice");
629+
let children = '';
630+
631+
for (const theme of THEMES) {
632+
const id = theme.toLowerCase();
633+
children += `<option value="${id}">${theme}</option>`;
634+
}
635+
themesElem.innerHTML = children;
636+
637+
const settings = document.getElementById("settings-dropdown");
638+
settings.querySelector(".settings-icon").onclick = () => settings.classList.toggle("open");
639+
settings.onblur = event => {
640+
if (!settings.contains(document.activeElement) &&
641+
!settings.contains(event.relatedTarget)
642+
) {
643+
settings.classList.remove("open");
644+
}
645+
};
646+
}
647+
648+
generateSettings();
649+
637650
// loading the theme after the initial load
638651
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
639652
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)