From e8d0fbf4eb17346f9af180d944c86e45b5d0447c Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Tue, 17 May 2022 18:09:07 +0200 Subject: [PATCH 1/3] Improve display of settings radio buttons --- src/librustdoc/html/static/css/settings.css | 44 +++++++++---------- src/librustdoc/html/static/css/themes/ayu.css | 19 ++++++++ .../html/static/css/themes/dark.css | 22 ++++++++-- .../html/static/css/themes/light.css | 22 ++++++++-- src/librustdoc/html/static/js/settings.js | 2 +- 5 files changed, 78 insertions(+), 31 deletions(-) diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css index c69ff04236dcb..e51f74259340d 100644 --- a/src/librustdoc/html/static/css/settings.css +++ b/src/librustdoc/html/static/css/settings.css @@ -3,44 +3,40 @@ position: relative; } -.setting-line > div { - display: inline-block; - vertical-align: top; - font-size: 17px; - padding-top: 2px; -} - -.setting-line > .title { - font-size: 19px; - width: 100%; - max-width: none; - border-bottom: 1px solid; -} - -.setting-line .radio-line, .setting-line .choices { display: flex; flex-wrap: wrap; } -.setting-line .radio-line .setting-name { - flex-grow: 1; - margin-top: auto; - margin-bottom: auto; -} - .setting-line .radio-line input { margin-right: 0.3em; + height: 1.2rem; + width: 1.2rem; + border: 1px solid; + outline: none; + -webkit-appearance: none; + cursor: pointer; + border-radius: 50%; +} +.setting-line .radio-line input + span { + padding-bottom: 1px; +} + +.radio-line .setting-name { + width: 100%; } .radio-line .choice { - border-radius: 0.1em; - border: 1px solid; - margin-left: 0.5em; margin-top: 0.1em; margin-bottom: 0.1em; min-width: 3.8em; padding: 0.3em; + display: flex; + align-items: center; + cursor: pointer; +} +.radio-line .choice + .choice { + margin-left: 0.5em; } .toggle { diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index d32bb4cf22d6e..fabf31afa1ef3 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -10,6 +10,25 @@ body, #settings-menu #settings, #settings-menu #settings::before { color: #c5c5c5; } +.setting-line .radio-line input { + border-color: #c5c5c5; +} +.setting-line .radio-line input:checked { + box-shadow: inset 0 0 0 3px #0f1419; + background-color: #ffb454; +} +.setting-line .radio-line input:focus { + box-shadow: 0 0 1px 1px #ffb454; +} +/* In here we combine both `:focus` and `:checked` properties. */ +.setting-line .radio-line input:checked:focus { + box-shadow: inset 0 0 0 3px 0f1419, + 0 0 2px 2px #ffb454; +} +.setting-line .radio-line input:hover { + border-color: #ffb454 !important; +} + h1, h2, h3, h4 { color: white; } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 4957f25bcf358..7da30ad948d14 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -3,6 +3,25 @@ body, #settings-menu #settings, #settings-menu #settings::before { color: #ddd; } +.setting-line .radio-line input { + border-color: #ddd; +} +.setting-line .radio-line input:checked { + box-shadow: inset 0 0 0 3px #353535; + background-color: #2196f3; +} +.setting-line .radio-line input:focus { + box-shadow: 0 0 1px 1px #2196f3; +} +/* In here we combine both `:focus` and `:checked` properties. */ +.setting-line .radio-line input:checked:focus { + box-shadow: inset 0 0 0 3px #353535, + 0 0 2px 2px #2196f3; +} +.setting-line .radio-line input:hover { + border-color: #2196f3 !important; +} + h1, h2, h3, h4 { color: #ddd; } @@ -472,9 +491,6 @@ div.files > a:hover, div.name:hover { div.files > .selected { background-color: #333; } -.setting-line > .title { - border-bottom-color: #ddd; -} .scraped-example-list .scrape-help { border-color: #aaa; diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 7d4acc6c61181..3bf66ef5b5b41 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -5,6 +5,25 @@ body, #settings-menu #settings, #settings-menu #settings::before { color: black; } +.setting-line .radio-line input { + border-color: black; +} +.setting-line .radio-line input:checked { + box-shadow: inset 0 0 0 3px white; + background-color: #2196f3; +} +.setting-line .radio-line input:focus { + box-shadow: 0 0 1px 1px #2196f3; +} +/* In here we combine both `:focus` and `:checked` properties. */ +.setting-line .radio-line input:checked:focus { + box-shadow: inset 0 0 0 3px white, + 0 0 2px 2px #2196f3; +} +.setting-line .radio-line input:hover { + border-color: #2196f3 !important; +} + h1, h2, h3, h4 { color: black; } @@ -456,9 +475,6 @@ div.files > a:hover, div.name:hover { div.files > .selected { background-color: #fff; } -.setting-line > .title { - border-bottom-color: #D5D5D5; -} .scraped-example-list .scrape-help { border-color: #555; diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js index 3d1d942eaa9ee..41bf0ec895580 100644 --- a/src/librustdoc/html/static/js/settings.js +++ b/src/librustdoc/html/static/js/settings.js @@ -123,7 +123,7 @@ output += ``; }); output += ""; From 5b6c5933ccbf6152230d757611dff9d223ae4233 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Wed, 18 May 2022 11:17:56 +0200 Subject: [PATCH 2/3] Move theme rules out of settings.css --- src/librustdoc/html/static/css/settings.css | 9 --------- src/librustdoc/html/static/css/themes/ayu.css | 20 ++++++++++++------- .../html/static/css/themes/dark.css | 13 ++++++++++++ .../html/static/css/themes/light.css | 13 ++++++++++++ 4 files changed, 39 insertions(+), 16 deletions(-) diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css index e51f74259340d..1cd8e39e03648 100644 --- a/src/librustdoc/html/static/css/settings.css +++ b/src/librustdoc/html/static/css/settings.css @@ -73,18 +73,9 @@ width: 19px; left: 4px; bottom: 4px; - background-color: white; transition: .3s; } -input:checked + .slider { - background-color: #2196F3; -} - -input:focus + .slider { - box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); -} - input:checked + .slider:before { transform: translateX(19px); } diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index fabf31afa1ef3..7303cecc0d61a 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -29,6 +29,19 @@ body, #settings-menu #settings, #settings-menu #settings::before { border-color: #ffb454 !important; } +.slider { + background-color: #ccc; +} +.slider:before { + background-color: white; +} +input:checked + .slider { + background-color: #ffb454; +} +input:focus + .slider { + box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); +} + h1, h2, h3, h4 { color: white; } @@ -620,13 +633,6 @@ div.files > .selected { background-color: #14191f; color: #ffb44c; } -.setting-line > .title { - border-bottom-color: #5c6773; -} -input:checked + .slider { - background-color: #ffb454 !important; -} - .scraped-example-list .scrape-help { border-color: #aaa; diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 7da30ad948d14..34a4f446b560b 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -22,6 +22,19 @@ body, #settings-menu #settings, #settings-menu #settings::before { border-color: #2196f3 !important; } +.slider { + background-color: #ccc; +} +.slider:before { + background-color: white; +} +input:checked + .slider { + background-color: #2196F3; +} +input:focus + .slider { + box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); +} + h1, h2, h3, h4 { color: #ddd; } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 3bf66ef5b5b41..aa6ad2f547333 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -24,6 +24,19 @@ body, #settings-menu #settings, #settings-menu #settings::before { border-color: #2196f3 !important; } +.slider { + background-color: #ccc; +} +.slider:before { + background-color: white; +} +input:checked + .slider { + background-color: #2196F3; +} +input:focus + .slider { + box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); +} + h1, h2, h3, h4 { color: black; } From 70db59ca3534d00227d903e10149e5fb677c0067 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 30 May 2022 12:12:29 +0200 Subject: [PATCH 3/3] Add GUI test for settings display --- src/test/rustdoc-gui/settings.goml | 60 ++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/src/test/rustdoc-gui/settings.goml b/src/test/rustdoc-gui/settings.goml index 1b2d1e31f520c..2302201fbb683 100644 --- a/src/test/rustdoc-gui/settings.goml +++ b/src/test/rustdoc-gui/settings.goml @@ -1,5 +1,6 @@ // This test ensures that the settings menu display is working as expected. goto: file://|DOC_PATH|/test_docs/index.html +show-text: true // needed when we check for colors below. // First, we check that the settings page doesn't exist. assert-false: "#settings" // We now click on the settings button. @@ -43,6 +44,65 @@ assert: ".setting-line.hidden #preferred-light-theme" // We check that the correct theme is selected. assert-property: ("#theme .choices #theme-dark", {"checked": "true"}) +// Some style checks... +// First we check the "default" display. +assert-css: ( + "#theme-dark", + { + "border-color": "rgb(221, 221, 221)", + "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset", + }, +) +assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"}) +// Let's start with the hover. +move-cursor-to: "#theme-dark" +assert-css: ( + "#theme-dark", + { + "border-color": "rgb(33, 150, 243)", + "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset", + }, +) +move-cursor-to: "#theme-light" +assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"}) +move-cursor-to: "#theme-ayu" +// Let's now check with the focus. +focus: "#theme-dark" +assert-css: ( + "#theme-dark", + { + "border-color": "rgb(221, 221, 221)", + "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px", + }, +) +focus: "#theme-light" +assert-css: ( + "#theme-light", + { + "border-color": "rgb(221, 221, 221)", + "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px", + }, +) +// Now we check we both focus and hover. +move-cursor-to: "#theme-dark" +focus: "#theme-dark" +assert-css: ( + "#theme-dark", + { + "border-color": "rgb(33, 150, 243)", + "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px", + }, +) +move-cursor-to: "#theme-light" +focus: "#theme-light" +assert-css: ( + "#theme-light", + { + "border-color": "rgb(33, 150, 243)", + "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px", + }, +) + // We now switch the display. click: "#use-system-theme" // Wait for the hidden element to show up.