nordic-dev.net/rust
nordic-dev.net/rust
2
0
Fork 0
mirror of https://github.com/rust-lang/rust.git synced 2024-10-31 22:41:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve settings menu display

Browse Source
This commit is contained in:
Guillaume Gomez 2022-05-10 16:09:41 +02:00
parent 17180f4a56
commit 5e01ba36c9
6 changed files with 110 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/librustdoc/html/static/css/rustdoc.css
View File

@ -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;

6
src/librustdoc/html/static/css/themes/ayu.css
View File

@ -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;
}

6
src/librustdoc/html/static/css/themes/dark.css
View File

@ -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;
}

6
src/librustdoc/html/static/css/themes/light.css
View File

@ -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;
}

82
src/librustdoc/html/static/js/settings.js
View File

@ -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 = `
<div class="main-heading">
let innerHTML = "";
let elementKind = "div";
if (isSettingsPage) {
elementKind = "section";
innerHTML = `<div class="main-heading">
<h1 class="fqn">
<span class="in-band">Rustdoc settings</span>
</h1>
<span class="out-of-band">`;
if (isSettingsPage) {
innerHTML +=
"<a id=\"back\" href=\"javascript:void(0)\" onclick=\"history.back();\">Back</a>";
} else {
innerHTML += "<a id=\"back\" href=\"javascript:void(0)\" " +
"onclick=\"switchDisplayedElement(null);\">Back</a>";
<span class="out-of-band">
<a id="back" href="javascript:void(0)" onclick="history.back();">Back</a>
</span>
</div>`;
}
innerHTML += `</span>
</div>
<div class="settings">${buildSettingsPageSections(settings)}</div>`;
innerHTML += `<div class="settings">${buildSettingsPageSections(settings)}</div>`;
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);

8
src/librustdoc/html/templates/page.html
View File

@ -126,10 +126,12 @@
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
type="search"> {#- -#}
<button type="button" id="help-button" title="help">?</button> {#- -#}
<a id="settings-menu" href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
<img width="22" height="22" alt="Change settings" {# -#}
<div id="settings-menu" tabindex="-1">
<a href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
<img width="22" height="22" alt="Change settings" {# -#}
src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
</a> {#- -#}
</a> {#- -#}
</div>
</div> {#- -#}
</form> {#- -#}
</nav> {#- -#}