Remove theme picker button
This commit is contained in:
parent
5e01ba36c9
commit
e8762757c3
10 changed files with 12 additions and 199 deletions
|
@ -1448,8 +1448,6 @@ fn init_id_map() -> FxHashMap<Cow<'static, str>, usize> {
|
||||||
// used in tera template files).
|
// used in tera template files).
|
||||||
map.insert("mainThemeStyle".into(), 1);
|
map.insert("mainThemeStyle".into(), 1);
|
||||||
map.insert("themeStyle".into(), 1);
|
map.insert("themeStyle".into(), 1);
|
||||||
map.insert("theme-picker".into(), 1);
|
|
||||||
map.insert("theme-choices".into(), 1);
|
|
||||||
map.insert("settings-menu".into(), 1);
|
map.insert("settings-menu".into(), 1);
|
||||||
map.insert("help-button".into(), 1);
|
map.insert("help-button".into(), 1);
|
||||||
map.insert("main-content".into(), 1);
|
map.insert("main-content".into(), 1);
|
||||||
|
|
|
@ -238,7 +238,6 @@ pub(super) fn write_shared(
|
||||||
write_toolchain("favicon-16x16.png", static_files::RUST_FAVICON_PNG_16)?;
|
write_toolchain("favicon-16x16.png", static_files::RUST_FAVICON_PNG_16)?;
|
||||||
write_toolchain("favicon-32x32.png", static_files::RUST_FAVICON_PNG_32)?;
|
write_toolchain("favicon-32x32.png", static_files::RUST_FAVICON_PNG_32)?;
|
||||||
}
|
}
|
||||||
write_toolchain("brush.svg", static_files::BRUSH_SVG)?;
|
|
||||||
write_toolchain("wheel.svg", static_files::WHEEL_SVG)?;
|
write_toolchain("wheel.svg", static_files::WHEEL_SVG)?;
|
||||||
write_toolchain("clipboard.svg", static_files::CLIPBOARD_SVG)?;
|
write_toolchain("clipboard.svg", static_files::CLIPBOARD_SVG)?;
|
||||||
write_toolchain("down-arrow.svg", static_files::DOWN_ARROW_SVG)?;
|
write_toolchain("down-arrow.svg", static_files::DOWN_ARROW_SVG)?;
|
||||||
|
|
|
@ -18,7 +18,3 @@ rules.
|
||||||
/* The search bar and related controls don't work without JS */
|
/* The search bar and related controls don't work without JS */
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-picker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
|
@ -1379,25 +1379,15 @@ pre.rust {
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-picker {
|
|
||||||
position: absolute;
|
|
||||||
left: -38px;
|
|
||||||
top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-picker button {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#settings-menu, #help-button {
|
#settings-menu, #help-button {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-picker, #copy-path {
|
#copy-path {
|
||||||
height: 34px;
|
height: 34px;
|
||||||
}
|
}
|
||||||
#theme-picker, #settings-menu, #help-button, #copy-path {
|
#settings-menu > a, #help-button, #copy-path {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
width: 33px;
|
width: 33px;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
|
@ -1422,7 +1412,7 @@ pre.rust {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#settings-menu.rotate img {
|
#settings-menu.rotate > a img {
|
||||||
animation: rotating 2s linear infinite;
|
animation: rotating 2s linear infinite;
|
||||||
}
|
}
|
||||||
#settings-menu #settings {
|
#settings-menu #settings {
|
||||||
|
@ -1871,12 +1861,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
||||||
margin-left: 32px;
|
margin-left: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Space is at a premium on mobile, so remove the theme-picker icon. */
|
|
||||||
#theme-picker {
|
|
||||||
display: none;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -531,13 +531,13 @@ kbd {
|
||||||
box-shadow: inset 0 -1px 0 #5c6773;
|
box-shadow: inset 0 -1px 0 #5c6773;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-picker, #settings-menu, #help-button {
|
#settings-menu > a, #help-button {
|
||||||
border-color: #5c6773;
|
border-color: #5c6773;
|
||||||
background-color: #0f1419;
|
background-color: #0f1419;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-picker > img, #settings-menu > img {
|
#settings-menu > a img {
|
||||||
filter: invert(100);
|
filter: invert(100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -555,8 +555,7 @@ kbd {
|
||||||
filter: invert(100%);
|
filter: invert(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-picker:hover, #theme-picker:focus,
|
#settings-menu > a:hover, #settings-menu > a:focus,
|
||||||
#settings-menu:hover, #settings-menu:focus,
|
|
||||||
#help-button:hover, #help-button:focus {
|
#help-button:hover, #help-button:focus {
|
||||||
border-color: #e0e0e0;
|
border-color: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
@ -574,12 +573,6 @@ kbd {
|
||||||
background-color: rgba(110, 110, 110, 0.33);
|
background-color: rgba(110, 110, 110, 0.33);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
#theme-picker {
|
|
||||||
background: #0f1419;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results .result-name span.alias {
|
.search-results .result-name span.alias {
|
||||||
color: #c5c5c5;
|
color: #c5c5c5;
|
||||||
}
|
}
|
||||||
|
|
|
@ -408,14 +408,13 @@ kbd {
|
||||||
box-shadow: inset 0 -1px 0 #c6cbd1;
|
box-shadow: inset 0 -1px 0 #c6cbd1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-picker, #settings-menu, #help-button {
|
#settings-menu > a, #help-button {
|
||||||
border-color: #e0e0e0;
|
border-color: #e0e0e0;
|
||||||
background: #f0f0f0;
|
background: #f0f0f0;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-picker:hover, #theme-picker:focus,
|
#settings-menu > a:hover, #settings-menu > a:focus,
|
||||||
#settings-menu:hover, #settings-menu:focus,
|
|
||||||
#help-button:hover, #help-button:focus {
|
#help-button:hover, #help-button:focus {
|
||||||
border-color: #ffb900;
|
border-color: #ffb900;
|
||||||
}
|
}
|
||||||
|
@ -447,12 +446,6 @@ kbd {
|
||||||
background-color: #4e4e4e;
|
background-color: #4e4e4e;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
#theme-picker {
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results .result-name span.alias {
|
.search-results .result-name span.alias {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
|
@ -394,13 +394,12 @@ kbd {
|
||||||
box-shadow: inset 0 -1px 0 #c6cbd1;
|
box-shadow: inset 0 -1px 0 #c6cbd1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-picker, #settings-menu, #help-button {
|
#settings-menu > a, #help-button {
|
||||||
border-color: #e0e0e0;
|
border-color: #e0e0e0;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-picker:hover, #theme-picker:focus,
|
#settings-menu > a:hover, #settings-menu > a:focus,
|
||||||
#settings-menu:hover, #settings-menu:focus,
|
|
||||||
#help-button:hover, #help-button:focus {
|
#help-button:hover, #help-button:focus {
|
||||||
border-color: #717171;
|
border-color: #717171;
|
||||||
}
|
}
|
||||||
|
@ -432,12 +431,6 @@ kbd {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
#theme-picker {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results .result-name span.alias {
|
.search-results .result-name span.alias {
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
// Local js definitions:
|
// Local js definitions:
|
||||||
/* global addClass, getSettingValue, hasClass, searchState */
|
/* global addClass, getSettingValue, hasClass, searchState */
|
||||||
/* global onEach, onEachLazy, removeClass */
|
/* global onEach, onEachLazy, removeClass */
|
||||||
/* global switchTheme, useSystemTheme */
|
|
||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
@ -109,21 +108,11 @@ function getVirtualKey(ev) {
|
||||||
return String.fromCharCode(c);
|
return String.fromCharCode(c);
|
||||||
}
|
}
|
||||||
|
|
||||||
const THEME_PICKER_ELEMENT_ID = "theme-picker";
|
|
||||||
const THEMES_ELEMENT_ID = "theme-choices";
|
|
||||||
const MAIN_ID = "main-content";
|
const MAIN_ID = "main-content";
|
||||||
const SETTINGS_BUTTON_ID = "settings-menu";
|
const SETTINGS_BUTTON_ID = "settings-menu";
|
||||||
const ALTERNATIVE_DISPLAY_ID = "alternative-display";
|
const ALTERNATIVE_DISPLAY_ID = "alternative-display";
|
||||||
const NOT_DISPLAYED_ID = "not-displayed";
|
const NOT_DISPLAYED_ID = "not-displayed";
|
||||||
|
|
||||||
function getThemesElement() {
|
|
||||||
return document.getElementById(THEMES_ELEMENT_ID);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getThemePickerElement() {
|
|
||||||
return document.getElementById(THEME_PICKER_ELEMENT_ID);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSettingsButton() {
|
function getSettingsButton() {
|
||||||
return document.getElementById(SETTINGS_BUTTON_ID);
|
return document.getElementById(SETTINGS_BUTTON_ID);
|
||||||
}
|
}
|
||||||
|
@ -133,74 +122,10 @@ function getNakedUrl() {
|
||||||
return window.location.href.split("?")[0].split("#")[0];
|
return window.location.href.split("?")[0].split("#")[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
function showThemeButtonState() {
|
|
||||||
const themePicker = getThemePickerElement();
|
|
||||||
const themeChoices = getThemesElement();
|
|
||||||
|
|
||||||
themeChoices.style.display = "block";
|
|
||||||
themePicker.style.borderBottomRightRadius = "0";
|
|
||||||
themePicker.style.borderBottomLeftRadius = "0";
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideThemeButtonState() {
|
|
||||||
const themePicker = getThemePickerElement();
|
|
||||||
const themeChoices = getThemesElement();
|
|
||||||
|
|
||||||
themeChoices.style.display = "none";
|
|
||||||
themePicker.style.borderBottomRightRadius = "3px";
|
|
||||||
themePicker.style.borderBottomLeftRadius = "3px";
|
|
||||||
}
|
|
||||||
|
|
||||||
window.hideSettings = () => {
|
window.hideSettings = () => {
|
||||||
// Does nothing by default.
|
// Does nothing by default.
|
||||||
};
|
};
|
||||||
|
|
||||||
// Set up the theme picker list.
|
|
||||||
(function () {
|
|
||||||
if (!document.location.href.startsWith("file:///")) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const themeChoices = getThemesElement();
|
|
||||||
const themePicker = getThemePickerElement();
|
|
||||||
const availableThemes = getVar("themes").split(",");
|
|
||||||
|
|
||||||
removeClass(themeChoices.parentElement, "hidden");
|
|
||||||
|
|
||||||
function switchThemeButtonState() {
|
|
||||||
if (themeChoices.style.display === "block") {
|
|
||||||
hideThemeButtonState();
|
|
||||||
} else {
|
|
||||||
showThemeButtonState();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleThemeButtonsBlur(e) {
|
|
||||||
const active = document.activeElement;
|
|
||||||
const related = e.relatedTarget;
|
|
||||||
|
|
||||||
if (active.id !== THEME_PICKER_ELEMENT_ID &&
|
|
||||||
(!active.parentNode || active.parentNode.id !== THEMES_ELEMENT_ID) &&
|
|
||||||
(!related ||
|
|
||||||
(related.id !== THEME_PICKER_ELEMENT_ID &&
|
|
||||||
(!related.parentNode || related.parentNode.id !== THEMES_ELEMENT_ID)))) {
|
|
||||||
hideThemeButtonState();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
themePicker.onclick = switchThemeButtonState;
|
|
||||||
themePicker.onblur = handleThemeButtonsBlur;
|
|
||||||
availableThemes.forEach(item => {
|
|
||||||
const but = document.createElement("button");
|
|
||||||
but.textContent = item;
|
|
||||||
but.onclick = () => {
|
|
||||||
switchTheme(window.currentTheme, window.mainTheme, item, true);
|
|
||||||
useSystemTheme(false);
|
|
||||||
};
|
|
||||||
but.onblur = handleThemeButtonsBlur;
|
|
||||||
themeChoices.appendChild(but);
|
|
||||||
});
|
|
||||||
}());
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This function inserts `newNode` after `referenceNode`. It doesn't work if `referenceNode`
|
* This function inserts `newNode` after `referenceNode`. It doesn't work if `referenceNode`
|
||||||
* doesn't have a parent node.
|
* doesn't have a parent node.
|
||||||
|
@ -512,7 +437,7 @@ function loadCss(cssFileName) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
}
|
}
|
||||||
searchState.defocus();
|
searchState.defocus();
|
||||||
hideThemeButtonState();
|
window.hideSettings();
|
||||||
}
|
}
|
||||||
|
|
||||||
const disableShortcuts = getSettingValue("disable-shortcuts") === "true";
|
const disableShortcuts = getSettingValue("disable-shortcuts") === "true";
|
||||||
|
@ -522,8 +447,6 @@ function loadCss(cssFileName) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let themePicker;
|
|
||||||
|
|
||||||
if (document.activeElement.tagName === "INPUT") {
|
if (document.activeElement.tagName === "INPUT") {
|
||||||
switch (getVirtualKey(ev)) {
|
switch (getVirtualKey(ev)) {
|
||||||
case "Escape":
|
case "Escape":
|
||||||
|
@ -553,67 +476,12 @@ function loadCss(cssFileName) {
|
||||||
displayHelp(true, ev);
|
displayHelp(true, ev);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "t":
|
|
||||||
case "T":
|
|
||||||
displayHelp(false, ev);
|
|
||||||
ev.preventDefault();
|
|
||||||
themePicker = getThemePickerElement();
|
|
||||||
themePicker.click();
|
|
||||||
themePicker.focus();
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
default:
|
||||||
if (getThemePickerElement().parentNode.contains(ev.target)) {
|
break;
|
||||||
handleThemeKeyDown(ev);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleThemeKeyDown(ev) {
|
|
||||||
const active = document.activeElement;
|
|
||||||
const themes = getThemesElement();
|
|
||||||
switch (getVirtualKey(ev)) {
|
|
||||||
case "ArrowUp":
|
|
||||||
ev.preventDefault();
|
|
||||||
if (active.previousElementSibling && ev.target.id !== THEME_PICKER_ELEMENT_ID) {
|
|
||||||
active.previousElementSibling.focus();
|
|
||||||
} else {
|
|
||||||
showThemeButtonState();
|
|
||||||
themes.lastElementChild.focus();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "ArrowDown":
|
|
||||||
ev.preventDefault();
|
|
||||||
if (active.nextElementSibling && ev.target.id !== THEME_PICKER_ELEMENT_ID) {
|
|
||||||
active.nextElementSibling.focus();
|
|
||||||
} else {
|
|
||||||
showThemeButtonState();
|
|
||||||
themes.firstElementChild.focus();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "Enter":
|
|
||||||
case "Return":
|
|
||||||
case "Space":
|
|
||||||
if (ev.target.id === THEME_PICKER_ELEMENT_ID && themes.style.display === "none") {
|
|
||||||
ev.preventDefault();
|
|
||||||
showThemeButtonState();
|
|
||||||
themes.firstElementChild.focus();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "Home":
|
|
||||||
ev.preventDefault();
|
|
||||||
themes.firstElementChild.focus();
|
|
||||||
break;
|
|
||||||
case "End":
|
|
||||||
ev.preventDefault();
|
|
||||||
themes.lastElementChild.focus();
|
|
||||||
break;
|
|
||||||
// The escape key is handled in handleEscape, not here,
|
|
||||||
// so that pressing escape will close the menu even if it isn't focused
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("keypress", handleShortcut);
|
document.addEventListener("keypress", handleShortcut);
|
||||||
document.addEventListener("keydown", handleShortcut);
|
document.addEventListener("keydown", handleShortcut);
|
||||||
|
|
||||||
|
@ -1006,7 +874,6 @@ function loadCss(cssFileName) {
|
||||||
const shortcuts = [
|
const shortcuts = [
|
||||||
["?", "Show this help dialog"],
|
["?", "Show this help dialog"],
|
||||||
["S", "Focus the search field"],
|
["S", "Focus the search field"],
|
||||||
["T", "Focus the theme picker menu"],
|
|
||||||
["↑", "Move up in search results"],
|
["↑", "Move up in search results"],
|
||||||
["↓", "Move down in search results"],
|
["↓", "Move down in search results"],
|
||||||
["← / →", "Switch result tab (when results focused)"],
|
["← / →", "Switch result tab (when results focused)"],
|
||||||
|
|
|
@ -41,9 +41,6 @@ crate static SCRAPE_EXAMPLES_JS: &str = include_str!("static/js/scrape-examples.
|
||||||
|
|
||||||
crate static SCRAPE_EXAMPLES_HELP_MD: &str = include_str!("static/scrape-examples-help.md");
|
crate static SCRAPE_EXAMPLES_HELP_MD: &str = include_str!("static/scrape-examples-help.md");
|
||||||
|
|
||||||
/// The file contents of `brush.svg`, the icon used for the theme-switch button.
|
|
||||||
crate static BRUSH_SVG: &[u8] = include_bytes!("static/images/brush.svg");
|
|
||||||
|
|
||||||
/// The file contents of `wheel.svg`, the icon used for the settings button.
|
/// The file contents of `wheel.svg`, the icon used for the settings button.
|
||||||
crate static WHEEL_SVG: &[u8] = include_bytes!("static/images/wheel.svg");
|
crate static WHEEL_SVG: &[u8] = include_bytes!("static/images/wheel.svg");
|
||||||
|
|
||||||
|
|
|
@ -108,13 +108,6 @@
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</a> {#- -#}
|
</a> {#- -#}
|
||||||
<nav class="sub"> {#- -#}
|
<nav class="sub"> {#- -#}
|
||||||
<div class="theme-picker hidden"> {#- -#}
|
|
||||||
<button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
|
|
||||||
<img width="22" height="22" alt="Pick another theme!" {# -#}
|
|
||||||
src="{{static_root_path|safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
|
|
||||||
</button> {#- -#}
|
|
||||||
<div id="theme-choices" role="menu"></div> {#- -#}
|
|
||||||
</div> {#- -#}
|
|
||||||
<form class="search-form"> {#- -#}
|
<form class="search-form"> {#- -#}
|
||||||
<div class="search-container"> {#- -#}
|
<div class="search-container"> {#- -#}
|
||||||
<span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
|
<span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue