1
Fork 0

Remove theme picker button

This commit is contained in:
Guillaume Gomez 2022-05-11 23:11:18 +02:00
parent 5e01ba36c9
commit e8762757c3
10 changed files with 12 additions and 199 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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)"],

View file

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

View file

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