From 11b17c6c04c027f10dad1ed3c6af571d56bb0a94 Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Sun, 23 Jan 2022 15:11:10 -0800 Subject: [PATCH] rustdoc settings: use radio buttons for theme This reduces the number of clicks required to change theme. Also, simplify the UI a bit (remove setting grouping), and add a "Back" link close to the settings icon. --- src/librustdoc/html/render/mod.rs | 75 ++++++++++----------- src/librustdoc/html/static/css/settings.css | 24 +++++++ src/librustdoc/html/static/js/settings.js | 29 +++++--- 3 files changed, 78 insertions(+), 50 deletions(-) diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs index c3edefc469864..32e4a82918421 100644 --- a/src/librustdoc/html/render/mod.rs +++ b/src/librustdoc/html/render/mod.rs @@ -376,25 +376,21 @@ impl Setting { description, ), Setting::Select { js_data_name, description, default_value, ref options } => format!( - "
\ -
{}
\ - \ -
", - description, + "
{}{}
", js_data_name, + description, options .iter() .map(|opt| format!( - "", - if opt == default_value { "selected" } else { "" }, + "", + js_data_name = js_data_name, name = opt, + checked = if opt == default_value { "checked" } else { "" }, )) .collect::(), - root_path, - suffix, ), } } @@ -418,31 +414,25 @@ impl> From<(&'static str, Vec)> for Setting { fn settings(root_path: &str, suffix: &str, theme_names: Vec) -> Result { // (id, explanation, default value) let settings: &[Setting] = &[ - ( - "Theme preferences", - vec![ - Setting::from(("use-system-theme", "Use system theme", true)), - Setting::Select { - js_data_name: "theme", - description: "Theme", - default_value: "light", - options: theme_names.clone(), - }, - Setting::Select { - js_data_name: "preferred-dark-theme", - description: "Preferred dark theme", - default_value: "dark", - options: theme_names.clone(), - }, - Setting::Select { - js_data_name: "preferred-light-theme", - description: "Preferred light theme", - default_value: "light", - options: theme_names, - }, - ], - ) - .into(), + Setting::from(("use-system-theme", "Use system theme", true)), + Setting::Select { + js_data_name: "theme", + description: "Theme", + default_value: "light", + options: theme_names.clone(), + }, + Setting::Select { + js_data_name: "preferred-light-theme", + description: "Preferred light theme", + default_value: "light", + options: theme_names.clone(), + }, + Setting::Select { + js_data_name: "preferred-dark-theme", + description: "Preferred dark theme", + default_value: "dark", + options: theme_names, + }, ("auto-hide-large-items", "Auto-hide item contents for large items.", true).into(), ("auto-hide-method-docs", "Auto-hide item methods' documentation", false).into(), ("auto-hide-trait-implementations", "Auto-hide trait implementation documentation", false) @@ -454,9 +444,14 @@ fn settings(root_path: &str, suffix: &str, theme_names: Vec) -> Result\ - Rustdoc settings\ - \ + "
+

\ + Rustdoc settings\ +

\ + \ + Back\ + \ +
\
{}
\ \ ", diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css index fb8990b30e2ed..932000487b0a8 100644 --- a/src/librustdoc/html/static/css/settings.css +++ b/src/librustdoc/html/static/css/settings.css @@ -17,6 +17,30 @@ border-bottom: 1px solid; } +.setting-line .radio-line { + display: flex; + flex-wrap: wrap; +} + +.setting-line .radio-line > * { + padding: 0.3em; +} + +.setting-line .radio-line .setting-name { + flex-grow: 1; +} + +.setting-line .radio-line input { + margin-right: 0.3em; +} + +.radio-line .choice { + border-radius: 0.1em; + border: 1px solid; + margin-left: 0.5em; + min-width: 3.5em; +} + .toggle { position: relative; display: inline-block; diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js index e5c7e1ea1a03c..47a8fcdfd5ecf 100644 --- a/src/librustdoc/html/static/js/settings.js +++ b/src/librustdoc/html/static/js/settings.js @@ -33,19 +33,15 @@ } function showLightAndDark() { - addClass(document.getElementById("theme").parentElement.parentElement, "hidden"); - removeClass(document.getElementById("preferred-light-theme").parentElement.parentElement, - "hidden"); - removeClass(document.getElementById("preferred-dark-theme").parentElement.parentElement, - "hidden"); + addClass(document.getElementById("theme").parentElement, "hidden"); + removeClass(document.getElementById("preferred-light-theme").parentElement, "hidden"); + removeClass(document.getElementById("preferred-dark-theme").parentElement, "hidden"); } function hideLightAndDark() { - addClass(document.getElementById("preferred-light-theme").parentElement.parentElement, - "hidden"); - addClass(document.getElementById("preferred-dark-theme").parentElement.parentElement, - "hidden"); - removeClass(document.getElementById("theme").parentElement.parentElement, "hidden"); + addClass(document.getElementById("preferred-light-theme").parentElement, "hidden"); + addClass(document.getElementById("preferred-dark-theme").parentElement, "hidden"); + removeClass(document.getElementById("theme").parentElement, "hidden"); } function updateLightAndDark() { @@ -82,6 +78,19 @@ changeSetting(this.id, this.value); }; }); + onEachLazy(document.querySelectorAll("input[type=\"radio\"]"), function(elem) { + const settingId = elem.name; + const settingValue = getSettingValue(settingId); + if (settingValue !== null && settingValue !== "null") { + elem.checked = settingValue === elem.value; + } + elem.addEventListener("change", function(ev) { + changeSetting(ev.target.name, ev.target.value); + }); + }); + document.getElementById("back").addEventListener("click", function() { + history.back(); + }); } window.addEventListener("DOMContentLoaded", setEvents);