Rollup merge of rust-lang#97089 - GuillaumeGomez:improve-settings-the…

…me-display, r=jsha Improve settings theme display This is a follow-up of rust-lang#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`
Dylan-DPC · May 31, 2022 · 94b8036 · 94b8036
2 parents 47365c0 + 70db59c
commit 94b8036
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 47 deletions.
diff --git 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 {
@@ -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);
 }

diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
@@ -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;

diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
@@ -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;

diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
@@ -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;

diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js
@@ -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>";

diff --git 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.