From 8b148ac020460233960b392e749ef8384b9ca66c Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Tue, 6 Aug 2024 21:38:14 +0200 Subject: [PATCH] Unify theme and settings menus --- util/gh-pages/index.html | 30 ++++++++----------------- util/gh-pages/script.js | 39 ++++++++++++++++++++++----------- util/gh-pages/style.css | 47 ++++++++++++++++------------------------ 3 files changed, 54 insertions(+), 62 deletions(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index 12c9608f6f5f..7b71fbbb7c27 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -26,27 +26,15 @@ -
-
-
-
🖌
-
    -
  • {{name}}
    • -
-
-
-
-
-
-
    -
  • - -
    • -
-
+
+
+
+
Theme
+ +
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js index f072327bc340..0b88e0442318 100644 --- a/util/gh-pages/script.js +++ b/util/gh-pages/script.js @@ -145,15 +145,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 +330,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 +585,8 @@ function setTheme(theme, store) { if (store) { storeValue("theme", theme); + } else { + document.getElementById(`theme-choice`).value = theme; } } @@ -634,6 +623,30 @@ function changeSetting(elem) { } } +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 += ``; + } + themesElem.innerHTML = children; + + const settings = document.getElementById("settings-dropdown"); + settings.querySelector(".settings-icon").onclick = () => settings.classList.toggle("open"); + settings.onblur = event => { + if (!settings.contains(document.activeElement) && + !settings.contains(event.relatedTarget) + ) { + settings.classList.remove("open"); + } + }; +} + +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 index 4ad8b502dd82..a9485d511047 100644 --- 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 {