From 5e01ba36c9f1037c4cf3e7421413fc6c41f85d05 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Tue, 10 May 2022 16:09:41 +0200 Subject: [PATCH] Improve settings menu display --- src/librustdoc/html/static/css/rustdoc.css | 33 ++++++++ src/librustdoc/html/static/css/themes/ayu.css | 6 +- .../html/static/css/themes/dark.css | 6 +- .../html/static/css/themes/light.css | 6 +- src/librustdoc/html/static/js/settings.js | 82 +++++++++++++------ src/librustdoc/html/templates/page.html | 8 +- 6 files changed, 110 insertions(+), 31 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 0f4d842f4336d..57c2ba8611443 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1404,6 +1404,15 @@ pre.rust { border-radius: 2px; cursor: pointer; } +#settings-menu { + padding: 0; +} +#settings-menu > a { + padding: 5px; + width: 100%; + height: 100%; + display: block; +} @keyframes rotating { from { @@ -1416,6 +1425,30 @@ pre.rust { #settings-menu.rotate img { animation: rotating 2s linear infinite; } +#settings-menu #settings { + position: absolute; + right: 0; + z-index: 1; + display: block; + margin-top: 7px; + border-radius: 3px; + border: 1px solid; +} +#settings-menu #settings .setting-line { + margin: 0.6em; +} +/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */ +#settings-menu #settings::before { + content: ''; + position: absolute; + right: 11px; + border: solid; + border-width: 1px 1px 0 0; + display: inline-block; + padding: 4px; + transform: rotate(-45deg); + top: -5px; +} #help-button { font-family: "Fira Sans", Arial, sans-serif; diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index b1bf06c1865c7..ad8f642152bab 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -5,7 +5,7 @@ Original by Dempfi (https://github.com/dempfi/ayu) /* General structure and fonts */ -body { +body, #settings-menu #settings, #settings-menu #settings::before { background-color: #0f1419; color: #c5c5c5; } @@ -541,6 +541,10 @@ kbd { filter: invert(100); } +#settings-menu #settings, #settings-menu #settings::before { + border-color: #5c6773; +} + #copy-path { color: #fff; } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 236304ccc9f1b..dc38b04c88789 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -1,4 +1,4 @@ -body { +body, #settings-menu #settings, #settings-menu #settings::before { background-color: #353535; color: #ddd; } @@ -420,6 +420,10 @@ kbd { border-color: #ffb900; } +#settings-menu #settings, #settings-menu #settings::before { + border-color: #d2d2d2; +} + #copy-path { color: #999; } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index c923902aba2d3..48f67af040e6d 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -1,6 +1,6 @@ /* General structure and fonts */ -body { +body, #settings-menu #settings, #settings-menu #settings::before { background-color: white; color: black; } @@ -405,6 +405,10 @@ kbd { border-color: #717171; } +#settings-menu #settings, #settings-menu #settings::before { + border-color: #DDDDDD; +} + #copy-path { color: #999; } diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js index ad32a19389389..df828b5ce4c3a 100644 --- a/src/librustdoc/html/static/js/settings.js +++ b/src/librustdoc/html/static/js/settings.js @@ -1,7 +1,7 @@ // Local js definitions: /* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme */ -/* global addClass, removeClass, onEach, onEachLazy, NOT_DISPLAYED_ID */ -/* global MAIN_ID, getVar, getSettingsButton, switchDisplayedElement, getNotDisplayedElem */ +/* global addClass, removeClass, onEach, onEachLazy */ +/* global MAIN_ID, getVar, getSettingsButton */ "use strict"; @@ -206,38 +206,60 @@ ]; // Then we build the DOM. - const el = document.createElement("section"); - el.id = "settings"; - let innerHTML = ` -
+ let innerHTML = ""; + let elementKind = "div"; + + if (isSettingsPage) { + elementKind = "section"; + innerHTML = `

Rustdoc settings

- `; - - if (isSettingsPage) { - innerHTML += - "Back"; - } else { - innerHTML += "Back"; + + Back + +
`; } - innerHTML += ` -
-
${buildSettingsPageSections(settings)}
`; + innerHTML += `
${buildSettingsPageSections(settings)}
`; + const el = document.createElement(elementKind); + el.id = "settings"; el.innerHTML = innerHTML; if (isSettingsPage) { document.getElementById(MAIN_ID).appendChild(el); } else { - getNotDisplayedElem().appendChild(el); + el.setAttribute("tabindex", "-1"); + getSettingsButton().appendChild(el); } return el; } const settingsMenu = buildSettingsPage(); + function displaySettings() { + settingsMenu.style.display = ""; + } + + function elemIsInParent(elem, parent) { + while (elem && elem !== document.body) { + if (elem === parent) { + return true; + } + elem = elem.parentElement; + } + return false; + } + + function blurHandler(event) { + const settingsButton = getSettingsButton(); + if (!elemIsInParent(document.activeElement, settingsButton) && + !elemIsInParent(event.relatedTarget, settingsButton)) + { + window.hideSettings(); + } + } + if (isSettingsPage) { // We replace the existing "onclick" callback to do nothing if clicked. getSettingsButton().onclick = function(event) { @@ -246,17 +268,27 @@ } else { // We replace the existing "onclick" callback. const settingsButton = getSettingsButton(); + const settingsMenu = document.getElementById("settings"); + window.hideSettings = function() { + settingsMenu.style.display = "none"; + }; settingsButton.onclick = function(event) { + if (elemIsInParent(event.target, settingsMenu)) { + return; + } event.preventDefault(); - if (settingsMenu.parentElement.id === NOT_DISPLAYED_ID) { - switchDisplayedElement(settingsMenu); - } else { + if (settingsMenu.style.display !== "none") { window.hideSettings(); + } else { + displaySettings(); } }; - window.hideSettings = function() { - switchDisplayedElement(null); - }; + settingsButton.onblur = blurHandler; + settingsButton.querySelector("a").onblur = blurHandler; + onEachLazy(settingsMenu.querySelectorAll("input"), el => { + el.onblur = blurHandler; + }); + settingsMenu.onblur = blurHandler; } // We now wait a bit for the web browser to end re-computing the DOM... @@ -264,7 +296,7 @@ setEvents(settingsMenu); // The setting menu is already displayed if we're on the settings page. if (!isSettingsPage) { - switchDisplayedElement(settingsMenu); + displaySettings(); } removeClass(getSettingsButton(), "rotate"); }, 0); diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index 470cce93a5020..e57d08c9456e1 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -126,10 +126,12 @@

placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#} type="search"> {#- -#} {#- -#} - {#- -#} - Change settings + {#- -#} + Change settings {#- -#} - {#- -#} + {#- -#} + {#- -#} {#- -#} {#- -#}