Unify theme and settings menus

GuillaumeGomez · GuillaumeGomez · commit 934e98d59135 · 2024-08-11T19:39:19.000+02:00
diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html
@@ -26,27 +26,15 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body ng-app="clippy" ng-controller="lintList">
-    <div id="settings">
-        <div theme-dropdown class="theme-dropdown">
-            <div class="menu-container">
-                <div id="theme-icon" class="theme-icon">&#128396;</div>
-                <ul id="theme-menu" class="theme-choice">
-                    <li id="{{id}}" ng-repeat="(id, name) in themes" ng-click="selectTheme(id)">{{name}}</li>
-                </ul>
-            </div>
-        </div>
-        <div settings-dropdown class="settings-dropdown">
-            <div class="menu-container">
-                <div id="settings-icon" class="settings-icon"></div>
-                <ul id="settings-menu" class="settings-choice">
-                    <li>
-                        <label>
-                            <input type="checkbox" id="disable-shortcuts" onchange="changeSetting(this)">
-                            <span>Disable keyboard shortcuts</span>
-                        </label>
-                    </li>
-                </ul>
-            </div>
+    <div id="settings-dropdown">
+        <div class="settings-icon" tabindex="-1"></div>
+        <div class="settings-menu" tabindex="-1">
+            <div class="setting-radio-name">Theme</div>
+            <select id="theme-choice" onchange="setTheme(this.value, true)"></select>
+            <label>
+                <input type="checkbox" id="disable-shortcuts" onchange="changeSetting(this)">
+                <span>Disable keyboard shortcuts</span>
+            </label>
         </div>
     </div>
 
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js
@@ -50,42 +50,6 @@
                 );
             };
         })
-        .directive('themeDropdown', function ($document) {
-            return {
-                restrict: 'A',
-                link: function ($scope, $element, $attr) {
-                    $element.bind('click', function () {
-                        $element.toggleClass('open');
-                        $element.addClass('open-recent');
-                    });
-
-                    $document.bind('click', function () {
-                        if (!$element.hasClass('open-recent')) {
-                            $element.removeClass('open');
-                        }
-                        $element.removeClass('open-recent');
-                    })
-                }
-            }
-        })
-        .directive('settingsDropdown', function ($document) {
-            return {
-                restrict: 'A',
-                link: function ($scope, $element, $attr) {
-                    $element.bind('click', function () {
-                        $element.toggleClass('open');
-                        $element.addClass('open-recent');
-                    });
-
-                    $document.bind('click', function () {
-                        if (!$element.hasClass('open-recent')) {
-                            $element.removeClass('open');
-                        }
-                        $element.removeClass('open-recent');
-                    })
-                }
-            }
-        })
         .directive('filterDropdown', function ($document) {
             return {
                 restrict: 'A',
@@ -145,15 +109,6 @@
                 ...GROUPS_FILTER_DEFAULT
             };
 
-            const THEMES_DEFAULT = {
-                light: "Light",
-                rust: "Rust",
-                coal: "Coal",
-                navy: "Navy",
-                ayu: "Ayu"
-            };
-            $scope.themes = THEMES_DEFAULT;
-
             $scope.versionFilters = {
                 "≥": {enabled: false, minorVersion: null },
                 "≤": {enabled: false, minorVersion: null },
@@ -339,10 +294,6 @@
                 $location.path($scope.search);
             }
 
-            $scope.selectTheme = function (theme) {
-                setTheme(theme, true);
-            }
-
             $scope.toggleLevels = function (value) {
                 const levels = $scope.levels;
                 for (const key in levels) {
@@ -598,6 +549,8 @@ function setTheme(theme, store) {
 
     if (store) {
         storeValue("theme", theme);
+    } else {
+        document.getElementById(`theme-choice`).value = theme;
     }
 }
 
@@ -634,6 +587,48 @@ function changeSetting(elem) {
     }
 }
 
+function onEachLazy(lazyArray, func) {
+    const arr = Array.prototype.slice.call(lazyArray);
+    for (const el of arr) {
+        func(el);
+    }
+}
+
+function handleBlur(event) {
+    const parent = document.getElementById("settings-dropdown");
+    if (!parent.contains(document.activeElement) &&
+        !parent.contains(event.relatedTarget)
+    ) {
+        parent.classList.remove("open");
+    }
+}
+
+function generateSettings() {
+    const THEMES = ["Ayu", "Coal", "Light", "Navy", "Rust"];
+    const themesElem = document.getElementById("theme-choice");
+    let children = '';
+
+    for (const theme of THEMES) {
+        const id = theme.toLowerCase();
+        children += `<option value="${id}">${theme}</option>`;
+    }
+    themesElem.innerHTML = children;
+    themesElem.onblur = handleBlur;
+
+    const settings = document.getElementById("settings-dropdown");
+    const settingsButton = settings.querySelector(".settings-icon")
+    settingsButton.onclick = () => settings.classList.toggle("open");
+    settingsButton.onblur = handleBlur;
+    const settingsMenu = settings.querySelector(".settings-menu");
+    settingsMenu.onblur = handleBlur;
+    onEachLazy(
+        settingsMenu.querySelectorAll("input"),
+        el => el.onblur = handleBlur,
+    );
+}
+
+generateSettings();
+
 // loading the theme after the initial load
 const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
 const theme = loadValue('theme');
diff --git a/util/gh-pages/style.css b/util/gh-pages/style.css
@@ -220,20 +220,15 @@ details[open] {
     --inline-code-bg: #191f26;
 }
 
-#settings {
+#settings-dropdown {
     position: absolute;
     margin: 0.7em;
     z-index: 10;
     display: flex;
 }
 
-.menu-container {
-    position: relative;
-    width: 28px;
-}
-
 /* Applying the mdBook theme */
-.theme-icon, .settings-icon {
+.settings-icon {
     text-align: center;
     width: 2em;
     height: 2em;
@@ -242,24 +237,20 @@ details[open] {
     border-radius: 5px;
     user-select: none;
     cursor: pointer;
-}
-.theme-icon:hover, .settings-icon:hover {
     background: var(--theme-hover);
 }
-.theme-choice, .settings-choice {
+.settings-menu {
     display: none;
     list-style: none;
     border: 1px solid var(--theme-popup-border);
     border-radius: 5px;
     color: var(--fg);
     background: var(--theme-popup-bg);
-    padding: 0 0;
     overflow: hidden;
+    padding: 9px;
+    width: 207px;
     position: absolute;
-}
-
-.settings-dropdown {
-    margin-left: 4px;
+    top: 28px;
 }
 
 .settings-icon::before {
@@ -285,28 +276,28 @@ L4.75,12h2.5l0.5393066-2.1572876  c0.2276001-0.1062012,0.4459839-0.2269287,0.649
   padding-top: 3px;
 }
 
-.settings-choice {
-    padding: 4px;
-    width: 212px;
+.settings-menu * {
+    font-weight: normal;
 }
 
-.settings-choice label {
+.settings-menu label {
     cursor: pointer;
 }
 
-.theme-dropdown.open .theme-choice, .settings-dropdown.open .settings-choice {
+#settings-dropdown.open .settings-menu {
     display: block;
 }
 
-.theme-choice > li {
-    padding: 5px 10px;
-    font-size: 0.8em;
-    user-select: none;
+#theme-choice {
+    margin-bottom: 10px;
+    background: var(--searchbar-bg);
+    color: var(--searchbar-fg);
+    border-color: var(--theme-popup-border);
+    border-radius: 5px;
     cursor: pointer;
-}
-
-.theme-choice > li:hover {
-    background: var(--theme-hover);
+    width: 100%;
+    border-width: 1px;
+    padding: 5px;
 }
 
 .alert {
