From 7c5209121d52411d95bca199124d35ab3300ce9d Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Tue, 30 Jul 2024 17:31:42 +0200 Subject: [PATCH] Add new settings menu --- util/gh-pages/index.html | 27 ++++++++++++++++---- util/gh-pages/script.js | 45 ++++++++++++++++++++++++++++++---- util/gh-pages/style.css | 53 ++++++++++++++++++++++++++++++++++++---- 3 files changed, 110 insertions(+), 15 deletions(-) diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index 267354cc8bf..12c9608f6f5 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -26,11 +26,28 @@ Otherwise, have a great day =^.^= -
-
🖌
- +
+
+
+
🖌
+
    +
  • {{name}}
    • +
+
+
+
+
+
+
    +
  • + +
    • +
+
+
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js index ed1e090e1b5..f072327bc34 100644 --- a/util/gh-pages/script.js +++ b/util/gh-pages/script.js @@ -68,6 +68,24 @@ } } }) + .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', @@ -537,6 +555,16 @@ function getQueryVariable(variable) { } } +function storeValue(settingName, value) { + try { + localStorage.setItem(`clippy-lint-list-${settingName}`, value); + } catch (e) { } +} + +function loadValue(settingName) { + return localStorage.getItem(`clippy-lint-list-${settingName}`); +} + function setTheme(theme, store) { let enableHighlight = false; let enableNight = false; @@ -569,14 +597,12 @@ function setTheme(theme, store) { document.getElementById("styleAyu").disabled = !enableAyu; if (store) { - try { - localStorage.setItem('clippy-lint-list-theme', theme); - } catch (e) { } + storeValue("theme", theme); } } function handleShortcut(ev) { - if (ev.ctrlKey || ev.altKey || ev.metaKey) { + if (ev.ctrlKey || ev.altKey || ev.metaKey || disableShortcuts) { return; } @@ -601,11 +627,20 @@ function handleShortcut(ev) { document.addEventListener("keypress", handleShortcut); document.addEventListener("keydown", handleShortcut); +function changeSetting(elem) { + if (elem.id === "disable-shortcuts") { + disableShortcuts = elem.checked; + storeValue(elem.id, elem.checked); + } +} + // loading the theme after the initial load const prefersDark = window.matchMedia("(prefers-color-scheme: dark)"); -const theme = localStorage.getItem('clippy-lint-list-theme'); +const theme = loadValue('theme'); if (prefersDark.matches && !theme) { setTheme("coal", false); } else { setTheme(theme, false); } +let disableShortcuts = loadValue('disable-shortcuts') === "true"; +document.getElementById("disable-shortcuts").checked = disableShortcuts; diff --git a/util/gh-pages/style.css b/util/gh-pages/style.css index f9feb0ba13a..4ad8b502dd8 100644 --- a/util/gh-pages/style.css +++ b/util/gh-pages/style.css @@ -220,14 +220,20 @@ details[open] { --inline-code-bg: #191f26; } -.theme-dropdown { +#settings { position: absolute; margin: 0.7em; z-index: 10; + display: flex; +} + +.menu-container { + position: relative; + width: 28px; } /* Applying the mdBook theme */ -.theme-icon { +.theme-icon, .settings-icon { text-align: center; width: 2em; height: 2em; @@ -237,10 +243,10 @@ details[open] { user-select: none; cursor: pointer; } -.theme-icon:hover { +.theme-icon:hover, .settings-icon:hover { background: var(--theme-hover); } -.theme-choice { +.theme-choice, .settings-choice { display: none; list-style: none; border: 1px solid var(--theme-popup-border); @@ -249,9 +255,46 @@ details[open] { background: var(--theme-popup-bg); padding: 0 0; overflow: hidden; + position: absolute; } -.theme-dropdown.open .theme-choice { +.settings-dropdown { + margin-left: 4px; +} + +.settings-icon::before { + /* Wheel */ + content: url('data:image/svg+xml,\ +'); + width: 18px; + height: 18px; + display: block; + filter: invert(0.7); + padding-left: 4px; + padding-top: 3px; +} + +.settings-choice { + padding: 4px; + width: 212px; +} + +.settings-choice label { + cursor: pointer; +} + +.theme-dropdown.open .theme-choice, .settings-dropdown.open .settings-choice { display: block; }