Skip to content

Commit 94b8036

Browse files
Dylan-DPCDylan-DPC
authored
Rollup merge of #97089 - GuillaumeGomez:improve-settings-theme-display, r=jsha
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`
2 parents 47365c0 + 70db59c commit 94b8036

File tree

6 files changed

+177
-47
lines changed

6 files changed

+177
-47
lines changed

‎src/librustdoc/html/static/css/settings.css

+20-33
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,40 @@
33
position: relative;
44
}
55

6-
.setting-line > div {
7-
display: inline-block;
8-
vertical-align: top;
9-
font-size: 17px;
10-
padding-top: 2px;
11-
}
12-
13-
.setting-line > .title {
14-
font-size: 19px;
15-
width: 100%;
16-
max-width: none;
17-
border-bottom: 1px solid;
18-
}
19-
20-
.setting-line .radio-line,
216
.setting-line .choices {
227
display: flex;
238
flex-wrap: wrap;
249
}
2510

26-
.setting-line .radio-line .setting-name {
27-
flex-grow: 1;
28-
margin-top: auto;
29-
margin-bottom: auto;
30-
}
31-
3211
.setting-line .radio-line input {
3312
margin-right: 0.3em;
13+
height: 1.2rem;
14+
width: 1.2rem;
15+
border: 1px solid;
16+
outline: none;
17+
-webkit-appearance: none;
18+
cursor: pointer;
19+
border-radius: 50%;
20+
}
21+
.setting-line .radio-line input + span {
22+
padding-bottom: 1px;
23+
}
24+
25+
.radio-line .setting-name {
26+
width: 100%;
3427
}
3528

3629
.radio-line .choice {
37-
border-radius: 0.1em;
38-
border: 1px solid;
39-
margin-left: 0.5em;
4030
margin-top: 0.1em;
4131
margin-bottom: 0.1em;
4232
min-width: 3.8em;
4333
padding: 0.3em;
34+
display: flex;
35+
align-items: center;
36+
cursor: pointer;
37+
}
38+
.radio-line .choice + .choice {
39+
margin-left: 0.5em;
4440
}
4541

4642
.toggle {
@@ -77,18 +73,9 @@
7773
width: 19px;
7874
left: 4px;
7975
bottom: 4px;
80-
background-color: white;
8176
transition: .3s;
8277
}
8378

84-
input:checked + .slider {
85-
background-color: #2196F3;
86-
}
87-
88-
input:focus + .slider {
89-
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
90-
}
91-
9279
input:checked + .slider:before {
9380
transform: translateX(19px);
9481
}

‎src/librustdoc/html/static/css/themes/ayu.css

+32-7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,38 @@ body, #settings-menu #settings, #settings-menu #settings::before {
1010
color: #c5c5c5;
1111
}
1212

13+
.setting-line .radio-line input {
14+
border-color: #c5c5c5;
15+
}
16+
.setting-line .radio-line input:checked {
17+
box-shadow: inset 0 0 0 3px #0f1419;
18+
background-color: #ffb454;
19+
}
20+
.setting-line .radio-line input:focus {
21+
box-shadow: 0 0 1px 1px #ffb454;
22+
}
23+
/* In here we combine both `:focus` and `:checked` properties. */
24+
.setting-line .radio-line input:checked:focus {
25+
box-shadow: inset 0 0 0 3px 0f1419,
26+
0 0 2px 2px #ffb454;
27+
}
28+
.setting-line .radio-line input:hover {
29+
border-color: #ffb454 !important;
30+
}
31+
32+
.slider {
33+
background-color: #ccc;
34+
}
35+
.slider:before {
36+
background-color: white;
37+
}
38+
input:checked + .slider {
39+
background-color: #ffb454;
40+
}
41+
input:focus + .slider {
42+
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
43+
}
44+
1345
h1, h2, h3, h4 {
1446
color: white;
1547
}
@@ -601,13 +633,6 @@ div.files > .selected {
601633
background-color: #14191f;
602634
color: #ffb44c;
603635
}
604-
.setting-line > .title {
605-
border-bottom-color: #5c6773;
606-
}
607-
input:checked + .slider {
608-
background-color: #ffb454 !important;
609-
}
610-
611636

612637
.scraped-example-list .scrape-help {
613638
border-color: #aaa;

‎src/librustdoc/html/static/css/themes/dark.css

+32-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,38 @@ body, #settings-menu #settings, #settings-menu #settings::before {
33
color: #ddd;
44
}
55

6+
.setting-line .radio-line input {
7+
border-color: #ddd;
8+
}
9+
.setting-line .radio-line input:checked {
10+
box-shadow: inset 0 0 0 3px #353535;
11+
background-color: #2196f3;
12+
}
13+
.setting-line .radio-line input:focus {
14+
box-shadow: 0 0 1px 1px #2196f3;
15+
}
16+
/* In here we combine both `:focus` and `:checked` properties. */
17+
.setting-line .radio-line input:checked:focus {
18+
box-shadow: inset 0 0 0 3px #353535,
19+
0 0 2px 2px #2196f3;
20+
}
21+
.setting-line .radio-line input:hover {
22+
border-color: #2196f3 !important;
23+
}
24+
25+
.slider {
26+
background-color: #ccc;
27+
}
28+
.slider:before {
29+
background-color: white;
30+
}
31+
input:checked + .slider {
32+
background-color: #2196F3;
33+
}
34+
input:focus + .slider {
35+
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
36+
}
37+
638
h1, h2, h3, h4 {
739
color: #ddd;
840
}
@@ -472,9 +504,6 @@ div.files > a:hover, div.name:hover {
472504
div.files > .selected {
473505
background-color: #333;
474506
}
475-
.setting-line > .title {
476-
border-bottom-color: #ddd;
477-
}
478507

479508
.scraped-example-list .scrape-help {
480509
border-color: #aaa;

‎src/librustdoc/html/static/css/themes/light.css

+32-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,38 @@ body, #settings-menu #settings, #settings-menu #settings::before {
55
color: black;
66
}
77

8+
.setting-line .radio-line input {
9+
border-color: black;
10+
}
11+
.setting-line .radio-line input:checked {
12+
box-shadow: inset 0 0 0 3px white;
13+
background-color: #2196f3;
14+
}
15+
.setting-line .radio-line input:focus {
16+
box-shadow: 0 0 1px 1px #2196f3;
17+
}
18+
/* In here we combine both `:focus` and `:checked` properties. */
19+
.setting-line .radio-line input:checked:focus {
20+
box-shadow: inset 0 0 0 3px white,
21+
0 0 2px 2px #2196f3;
22+
}
23+
.setting-line .radio-line input:hover {
24+
border-color: #2196f3 !important;
25+
}
26+
27+
.slider {
28+
background-color: #ccc;
29+
}
30+
.slider:before {
31+
background-color: white;
32+
}
33+
input:checked + .slider {
34+
background-color: #2196F3;
35+
}
36+
input:focus + .slider {
37+
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
38+
}
39+
840
h1, h2, h3, h4 {
941
color: black;
1042
}
@@ -456,9 +488,6 @@ div.files > a:hover, div.name:hover {
456488
div.files > .selected {
457489
background-color: #fff;
458490
}
459-
.setting-line > .title {
460-
border-bottom-color: #D5D5D5;
461-
}
462491

463492
.scraped-example-list .scrape-help {
464493
border-color: #555;

‎src/librustdoc/html/static/js/settings.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@
123123
output += `<label for="${js_data_name}-${option}" class="choice">\
124124
<input type="radio" name="${js_data_name}" \
125125
id="${js_data_name}-${option}" value="${option}"${checked}>\
126-
${option}\
126+
<span>${option}</span>\
127127
</label>`;
128128
});
129129
output += "</div></div>";

‎src/test/rustdoc-gui/settings.goml

+60
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// This test ensures that the settings menu display is working as expected.
22
goto: file://|DOC_PATH|/test_docs/index.html
3+
show-text: true // needed when we check for colors below.
34
// First, we check that the settings page doesn't exist.
45
assert-false: "#settings"
56
// We now click on the settings button.
@@ -43,6 +44,65 @@ assert: ".setting-line.hidden #preferred-light-theme"
4344
// We check that the correct theme is selected.
4445
assert-property: ("#theme .choices #theme-dark", {"checked": "true"})
4546

47+
// Some style checks...
48+
// First we check the "default" display.
49+
assert-css: (
50+
"#theme-dark",
51+
{
52+
"border-color": "rgb(221, 221, 221)",
53+
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
54+
},
55+
)
56+
assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
57+
// Let's start with the hover.
58+
move-cursor-to: "#theme-dark"
59+
assert-css: (
60+
"#theme-dark",
61+
{
62+
"border-color": "rgb(33, 150, 243)",
63+
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
64+
},
65+
)
66+
move-cursor-to: "#theme-light"
67+
assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
68+
move-cursor-to: "#theme-ayu"
69+
// Let's now check with the focus.
70+
focus: "#theme-dark"
71+
assert-css: (
72+
"#theme-dark",
73+
{
74+
"border-color": "rgb(221, 221, 221)",
75+
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
76+
},
77+
)
78+
focus: "#theme-light"
79+
assert-css: (
80+
"#theme-light",
81+
{
82+
"border-color": "rgb(221, 221, 221)",
83+
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
84+
},
85+
)
86+
// Now we check we both focus and hover.
87+
move-cursor-to: "#theme-dark"
88+
focus: "#theme-dark"
89+
assert-css: (
90+
"#theme-dark",
91+
{
92+
"border-color": "rgb(33, 150, 243)",
93+
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
94+
},
95+
)
96+
move-cursor-to: "#theme-light"
97+
focus: "#theme-light"
98+
assert-css: (
99+
"#theme-light",
100+
{
101+
"border-color": "rgb(33, 150, 243)",
102+
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
103+
},
104+
)
105+
46106
// We now switch the display.
47107
click: "#use-system-theme"
48108
// Wait for the hidden element to show up.

0 commit comments

Comments
 (0)