diff options
| author | Guillaume Gomez <guillaume1.gomez@gmail.com> | 2024-08-06 21:38:14 +0200 |
|---|---|---|
| committer | Guillaume Gomez <guillaume1.gomez@gmail.com> | 2024-08-11 19:39:19 +0200 |
| commit | 934e98d59135b64647e9756dafbd2151d67dd234 (patch) | |
| tree | f3e8186b06503aa36efca9566e95a82f56610af9 | |
| parent | 7c5209121d52411d95bca199124d35ab3300ce9d (diff) | |
| download | rust-934e98d59135b64647e9756dafbd2151d67dd234.tar.gz rust-934e98d59135b64647e9756dafbd2151d67dd234.zip | |
Unify theme and settings menus
| -rw-r--r-- | util/gh-pages/index.html | 30 | ||||
| -rw-r--r-- | util/gh-pages/script.js | 93 | ||||
| -rw-r--r-- | util/gh-pages/style.css | 47 |
3 files changed, 72 insertions, 98 deletions
diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index 12c9608f6f5..845e37feadd 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -26,27 +26,15 @@ Otherwise, have a great day =^.^= <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">🖌</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 index f072327bc34..fc643309db3 100644 --- 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 index 4ad8b502dd8..a9485d51104 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 { |