Skip to content

rustdoc: use checkbox instead of switch for settings toggles #104267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 12, 2022
Merged

rustdoc: use checkbox instead of switch for settings toggles #104267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f3ae62
rustdoc: use checkbox instead of switch for settings toggles
notriddle Nov 10, 2022
269dad2
rustdoc: add test cases for checkbox toggles
notriddle Nov 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 19 additions & 38 deletions src/librustdoc/html/static/css/settings.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
flex-wrap: wrap;
}

.setting-line .radio-line input {
.setting-line .radio-line input,
.setting-line .toggle input {
margin-right: 0.3em;
height: 1.2rem;
width: 1.2rem;
Expand All @@ -17,9 +18,18 @@
outline: none;
-webkit-appearance: none;
cursor: pointer;
}
.setting-line .radio-line input {
border-radius: 50%;
}
.setting-line .radio-line input + span {
.setting-line .toggle input:checked {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">\
<path d="M7,25L17,32L33,12" fill="none" stroke="black" stroke-width="5"/>\
<path d="M7,23L17,30L33,10" fill="none" stroke="white" stroke-width="5"/></svg>');
}

.setting-line .radio-line input + span,
.setting-line .toggle span {
padding-bottom: 1px;
}

Expand Down Expand Up @@ -49,37 +59,6 @@
cursor: pointer;
}

.toggle input {
opacity: 0;
position: absolute;
}

.slider {
position: relative;
width: 45px;
min-width: 45px;
display: block;
height: 28px;
margin-right: 20px;
cursor: pointer;
background-color: #ccc;
transition: .3s;
}

.slider:before {
position: absolute;
content: "";
height: 19px;
width: 19px;
left: 4px;
bottom: 4px;
transition: .3s;
}

input:checked + .slider:before {
transform: translateX(19px);
}

.setting-line > .sub-settings {
padding-left: 42px;
width: 100%;
Expand All @@ -94,17 +73,19 @@ input:checked + .slider:before {
box-shadow: inset 0 0 0 3px var(--main-background-color);
background-color: var(--settings-input-color);
}
.setting-line .radio-line input:focus {
.setting-line .toggle input:checked {
background-color: var(--settings-input-color);
}
.setting-line .radio-line input:focus,
.setting-line .toggle input:focus {
box-shadow: 0 0 1px 1px var(--settings-input-color);
}
/* In here we combine both `:focus` and `:checked` properties. */
.setting-line .radio-line input:checked:focus {
box-shadow: inset 0 0 0 3px var(--main-background-color),
0 0 2px 2px var(--settings-input-color);
}
.setting-line .radio-line input:hover {
.setting-line .radio-line input:hover,
.setting-line .toggle input:hover {
border-color: var(--settings-input-color) !important;
}
input:checked + .slider {
background-color: var(--settings-input-color);
}
10 changes: 0 additions & 10 deletions src/librustdoc/html/static/css/themes/ayu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--crate-search-hover-border: #e0e0e0;
}

.slider {
background-color: #ccc;
}
.slider:before {
background-color: white;
}
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;
}
Expand Down
10 changes: 0 additions & 10 deletions src/librustdoc/html/static/css/themes/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,16 +70,6 @@
--crate-search-hover-border: #2196f3;
}

.slider {
background-color: #ccc;
}
.slider:before {
background-color: white;
}
input:focus + .slider {
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
}

.content .item-info::before { color: #ccc; }

body.source .example-wrap pre.rust a {
Expand Down
9 changes: 0 additions & 9 deletions src/librustdoc/html/static/css/themes/light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,6 @@
--crate-search-hover-border: #717171;
}

.slider {
background-color: #ccc;
}
.slider:before {
background-color: white;
}
input:focus + .slider {
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
}

.content .item-info::before { color: #ccc; }

Expand Down
4 changes: 1 addition & 3 deletions src/librustdoc/html/static/js/settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,7 @@

function setEvents(settingsElement) {
updateLightAndDark();
onEachLazy(settingsElement.getElementsByClassName("slider"), elem => {
const toggle = elem.previousElementSibling;
onEachLazy(settingsElement.querySelectorAll("input[type=\"checkbox\"]"), toggle => {
const settingId = toggle.id;
const settingValue = getSettingValue(settingId);
if (settingValue !== null) {
Expand Down Expand Up @@ -139,7 +138,6 @@
const checked = setting["default"] === true ? " checked" : "";
output += `<label class="toggle">\
<input type="checkbox" id="${js_data_name}"${checked}>\
<span class="slider"></span>\
<span class="label">${setting_name}</span>\
</label>`;
}
Expand Down
4 changes: 2 additions & 2 deletions src/test/rustdoc-gui/docblock-code-block-line-number.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ wait-for: "#settings"
assert-css: ("#settings", {"display": "block"})

// Then, click the toggle button.
click: "input#line-numbers + .slider"
click: "input#line-numbers"
wait-for: 100 // wait-for-false does not exist
assert-false: "pre.example-line-numbers"

// Finally, turn it on again.
click: "input#line-numbers + .slider"
click: "input#line-numbers"
wait-for: "pre.example-line-numbers"
92 changes: 82 additions & 10 deletions src/test/rustdoc-gui/settings.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ assert: ".setting-line.hidden #preferred-light-theme"
assert-property: ("#theme .choices #theme-dark", {"checked": "true"})

// Some style checks...
// First we check the "default" display.
move-cursor-to: "#settings-menu > a"
// First we check the "default" display for radio buttons.
assert-css: (
"#theme-dark",
{
Expand All @@ -57,7 +58,7 @@ assert-css: (
},
)
assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
// Let's start with the hover.
// Let's start with the hover for radio buttons.
move-cursor-to: "#theme-dark"
assert-css: (
"#theme-dark",
Expand All @@ -69,7 +70,7 @@ assert-css: (
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.
// Let's now check with the focus for radio buttons.
focus: "#theme-dark"
assert-css: (
"#theme-dark",
Expand All @@ -86,7 +87,7 @@ assert-css: (
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
},
)
// Now we check we both focus and hover.
// Now we check we both focus and hover for radio buttons.
move-cursor-to: "#theme-dark"
focus: "#theme-dark"
assert-css: (
Expand All @@ -106,6 +107,80 @@ assert-css: (
},
)

// First we check the "default" display for toggles.
assert-css: (
"#auto-hide-large-items",
{
"background-color": "rgb(33, 150, 243)",
"border-color": "rgb(221, 221, 221)",
},
)
assert-css: (
"#use-system-theme",
{
"background-color": "rgba(0, 0, 0, 0)",
"border-color": "rgb(221, 221, 221)",
}
)
// Let's start with the hover for toggles.
move-cursor-to: "#auto-hide-large-items"
assert-css: (
"#auto-hide-large-items",
{
"background-color": "rgb(33, 150, 243)",
"border-color": "rgb(33, 150, 243)",
},
)
move-cursor-to: "#use-system-theme"
assert-css: (
"#use-system-theme",
{
"background-color": "rgba(0, 0, 0, 0)",
"border-color": "rgb(33, 150, 243)",
}
)
move-cursor-to: "#settings-menu > a"
// Let's now check with the focus for toggles.
focus: "#auto-hide-large-items"
assert-css: (
"#auto-hide-large-items",
{
"background-color": "rgb(33, 150, 243)",
"border-color": "rgb(221, 221, 221)",
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
},
)
focus: "#use-system-theme"
assert-css: (
"#use-system-theme",
{
"background-color": "rgba(0, 0, 0, 0)",
"border-color": "rgb(221, 221, 221)",
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
},
)
// Now we check we both focus and hover for toggles.
move-cursor-to: "#auto-hide-large-items"
focus: "#auto-hide-large-items"
assert-css: (
"#auto-hide-large-items",
{
"background-color": "rgb(33, 150, 243)",
"border-color": "rgb(33, 150, 243)",
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
},
)
move-cursor-to: "#use-system-theme"
focus: "#use-system-theme"
assert-css: (
"#use-system-theme",
{
"background-color": "rgba(0, 0, 0, 0)",
"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.
Expand All @@ -118,7 +193,7 @@ assert: ".setting-line.hidden #theme"
assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme")
assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme")

// We now check that clicking on the "sliders"' text is like clicking on the slider.
// We now check that clicking on the toggles' text is like clicking on the checkbox.
// To test it, we use the "Disable keyboard shortcuts".
local-storage: {"rustdoc-disable-shortcuts": "false"}
click: ".setting-line:last-child .toggle .label"
Expand All @@ -141,10 +216,7 @@ assert-css: ("#settings-menu .popover", {"display": "none"})
// Now we go to the settings page to check that the CSS is loaded as expected.
goto: "file://" + |DOC_PATH| + "/settings.html"
wait-for: "#settings"
assert-css: (
".setting-line .toggle .slider",
{"width": "45px", "margin-right": "20px", "border": "0px none rgb(0, 0, 0)"},
)
assert-css: (".setting-line", {"position": "relative"})

assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS)
compare-elements-position: (".sub form", "#settings", ("x"))
Expand All @@ -162,4 +234,4 @@ reload:
size: (300, 1000)
click: "#settings-menu"
wait-for: "#settings"
assert-css: ("#settings .slider", {"width": "45px"}, ALL)
assert-css: (".setting-line", {"position": "relative"})