mathieu/os-rust
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rollup merge of #97089 - GuillaumeGomez:improve-settings-theme-display, r=jsha

Browse source 
Improve settings theme display

This is a follow-up of #96958. In this PR, I changed how the theme radio buttons are displayed and improved their look as well.

It now looks like this:

![Screenshot from 2022-05-17 20-46-20](https://user-images.githubusercontent.com/3050060/168887703-a01e3bd5-9644-4012-ac11-2ae7bacd6be6.png)
![Screenshot from 2022-05-17 20-46-12](https://user-images.githubusercontent.com/3050060/168887707-132f8b2d-1163-462f-b7dd-f861121bdee7.png)

You can test it [here](https://rustdoc.crud.net/imperio/improve-settings-theme-display/doc/foo/index.html).

r? `@jsha`
This commit is contained in:
Dylan DPC 2022-05-31 07:57:32 +02:00 • committed by GitHub
commit 94b8036147
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 177 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/librustdoc/html/static/css/settings.css
View file

@ -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 {
@ -77,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);
}

39
src/librustdoc/html/static/css/themes/ayu.css
View file

@ -10,6 +10,38 @@ 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;
}
.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;
}
@ -601,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;

35
src/librustdoc/html/static/css/themes/dark.css
View file

@ -3,6 +3,38 @@ 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;
}
.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;
}
@ -472,9 +504,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;

35
src/librustdoc/html/static/css/themes/light.css
View file

@ -5,6 +5,38 @@ 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;
}
.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;
}
@ -456,9 +488,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;

2
src/librustdoc/html/static/js/settings.js
View file

@ -123,7 +123,7 @@
output += `<label for="${js_data_name}-${option}" class="choice">\
<input type="radio" name="${js_data_name}" \
id="${js_data_name}-${option}" value="${option}"${checked}>\
${option}\
<span>${option}</span>\
</label>`;
});
output += "</div></div>";

60
src/test/rustdoc-gui/settings.goml
View file

@ -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.