Skip to content

Commit

Permalink
Rollup merge of rust-lang#96958 - GuillaumeGomez:settings-menu-displa…
Browse files Browse the repository at this point in the history
…y, r=jsha

Improve settings menu display and remove theme menu

We talked about improving the settings menu and we mentioned that firefox pocket was a nice inspiration so I implemented it. The result looks like this:

![Screenshot from 2022-05-11 23-59-53](https://user-images.githubusercontent.com/3050060/167954743-438c0a06-4628-478c-bf0c-d20313c1fdfc.png)

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

Only question I have is: should I re-assign the shortcut `T` to this setting menu now that the theme menu is gone? For now I simply removed it.

Important to be noted: the full settings page (at `settings.html`) is still rendered the same as currently.

r? `@jsha`
  • Loading branch information
Dylan-DPC authored May 15, 2022
2 parents 7fb2d0e + dee2947 commit cbe1594
Show file tree
Hide file tree
Showing 16 changed files with 152 additions and 276 deletions.
17 changes: 7 additions & 10 deletions src/doc/rustdoc/src/how-to-read-rustdoc.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,8 @@ or the current item whose documentation is being displayed.
## The Theme Picker and Search Interface

When viewing `rustdoc`'s output in a browser with JavaScript enabled,
a dynamic interface appears at the top of the page.
To the left is the theme picker, denoted with a paint-brush icon,
and the search interface, help screen, and options appear to the right of that.

### The Theme Picker

Clicking on the theme picker provides a list of themes -
by default `ayu`, `light`, and `dark` -
which are available for viewing.
a dynamic interface appears at the top of the page composed of the search
interface, help screen, and options.

### The Search Interface

Expand All @@ -91,12 +84,16 @@ When typing in the search bar, you can prefix your search term with a type
followed by a colon (such as `mod:`) to restrict the results to just that
kind of item. (The available items are listed in the help popup.)

### Changing displayed theme

You can change the displayed theme by opening the settings menu (the gear
icon in the upper right) and then pick a new one from there.

### Shortcuts

Pressing `S` while focused elsewhere on the page will move focus to the
search bar, and pressing `?` shows the help screen,
which includes all these shortcuts and more.
Pressing `T` focuses the theme picker.

When the search results are focused,
the left and right arrows move between tabs and the up and down arrows move
Expand Down
5 changes: 3 additions & 2 deletions src/doc/rustdoc/src/write-documentation/what-to-include.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,9 @@ rustdoc --extend-css custom.css src/lib.rs

A good example of using this feature to create a dark theme is documented [on
this blog]. Just remember, dark theme is already included in the rustdoc output
by clicking on the paintbrush. Adding additional options to the themes are
as easy as creating a custom theme `.css` file and using the following syntax:
by clicking on the gear icon in the upper right. Adding additional options to the
themes are as easy as creating a custom theme `.css` file and using the following
syntax:

```bash
rustdoc --theme awesome.css src/lib.rs
Expand Down
2 changes: 0 additions & 2 deletions src/librustdoc/html/markdown.rs
Original file line number Diff line number Diff line change
Expand Up @@ -1448,8 +1448,6 @@ fn init_id_map() -> FxHashMap<Cow<'static, str>, usize> {
// used in tera template files).
map.insert("mainThemeStyle".into(), 1);
map.insert("themeStyle".into(), 1);
map.insert("theme-picker".into(), 1);
map.insert("theme-choices".into(), 1);
map.insert("settings-menu".into(), 1);
map.insert("help-button".into(), 1);
map.insert("main-content".into(), 1);
Expand Down
1 change: 0 additions & 1 deletion src/librustdoc/html/render/write_shared.rs
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,6 @@ pub(super) fn write_shared(
write_toolchain("favicon-16x16.png", static_files::RUST_FAVICON_PNG_16)?;
write_toolchain("favicon-32x32.png", static_files::RUST_FAVICON_PNG_32)?;
}
write_toolchain("brush.svg", static_files::BRUSH_SVG)?;
write_toolchain("wheel.svg", static_files::WHEEL_SVG)?;
write_toolchain("clipboard.svg", static_files::CLIPBOARD_SVG)?;
write_toolchain("down-arrow.svg", static_files::DOWN_ARROW_SVG)?;
Expand Down
4 changes: 0 additions & 4 deletions src/librustdoc/html/static/css/noscript.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,3 @@ rules.
/* The search bar and related controls don't work without JS */
display: none;
}

#theme-picker {
display: none;
}
55 changes: 36 additions & 19 deletions src/librustdoc/html/static/css/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -1379,31 +1379,30 @@ pre.rust {
margin-bottom: 6px;
}

.theme-picker {
position: absolute;
left: -38px;
top: 4px;
}

.theme-picker button {
outline: none;
}

#settings-menu, #help-button {
margin-left: 4px;
outline: none;
}

#theme-picker, #copy-path {
#copy-path {
height: 34px;
}
#theme-picker, #settings-menu, #help-button, #copy-path {
#settings-menu > a, #help-button, #copy-path {
padding: 5px;
width: 33px;
border: 1px solid;
border-radius: 2px;
cursor: pointer;
}
#settings-menu {
padding: 0;
}
#settings-menu > a {
padding: 5px;
width: 100%;
height: 100%;
display: block;
}

@keyframes rotating {
from {
Expand All @@ -1413,9 +1412,33 @@ pre.rust {
transform: rotate(360deg);
}
}
#settings-menu.rotate img {
#settings-menu.rotate > a img {
animation: rotating 2s linear infinite;
}
#settings-menu #settings {
position: absolute;
right: 0;
z-index: 1;
display: block;
margin-top: 7px;
border-radius: 3px;
border: 1px solid;
}
#settings-menu #settings .setting-line {
margin: 0.6em;
}
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
#settings-menu #settings::before {
content: '';
position: absolute;
right: 11px;
border: solid;
border-width: 1px 1px 0 0;
display: inline-block;
padding: 4px;
transform: rotate(-45deg);
top: -5px;
}

#help-button {
font-family: "Fira Sans", Arial, sans-serif;
Expand Down Expand Up @@ -1838,12 +1861,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
margin-left: 32px;
}

/* Space is at a premium on mobile, so remove the theme-picker icon. */
#theme-picker {
display: none;
width: 0;
}

.content {
margin-left: 0px;
}
Expand Down
19 changes: 8 additions & 11 deletions src/librustdoc/html/static/css/themes/ayu.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)

/* General structure and fonts */

body {
body, #settings-menu #settings, #settings-menu #settings::before {
background-color: #0f1419;
color: #c5c5c5;
}
Expand Down Expand Up @@ -531,16 +531,20 @@ kbd {
box-shadow: inset 0 -1px 0 #5c6773;
}

#theme-picker, #settings-menu, #help-button {
#settings-menu > a, #help-button {
border-color: #5c6773;
background-color: #0f1419;
color: #fff;
}

#theme-picker > img, #settings-menu > img {
#settings-menu > a img {
filter: invert(100);
}

#settings-menu #settings, #settings-menu #settings::before {
border-color: #5c6773;
}

#copy-path {
color: #fff;
}
Expand All @@ -551,8 +555,7 @@ kbd {
filter: invert(100%);
}

#theme-picker:hover, #theme-picker:focus,
#settings-menu:hover, #settings-menu:focus,
#settings-menu > a:hover, #settings-menu > a:focus,
#help-button:hover, #help-button:focus {
border-color: #e0e0e0;
}
Expand All @@ -570,12 +573,6 @@ kbd {
background-color: rgba(110, 110, 110, 0.33);
}

@media (max-width: 700px) {
#theme-picker {
background: #0f1419;
}
}

.search-results .result-name span.alias {
color: #c5c5c5;
}
Expand Down
17 changes: 7 additions & 10 deletions src/librustdoc/html/static/css/themes/dark.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
body {
body, #settings-menu #settings, #settings-menu #settings::before {
background-color: #353535;
color: #ddd;
}
Expand Down Expand Up @@ -408,18 +408,21 @@ kbd {
box-shadow: inset 0 -1px 0 #c6cbd1;
}

#theme-picker, #settings-menu, #help-button {
#settings-menu > a, #help-button {
border-color: #e0e0e0;
background: #f0f0f0;
color: #000;
}

#theme-picker:hover, #theme-picker:focus,
#settings-menu:hover, #settings-menu:focus,
#settings-menu > a:hover, #settings-menu > a:focus,
#help-button:hover, #help-button:focus {
border-color: #ffb900;
}

#settings-menu #settings, #settings-menu #settings::before {
border-color: #d2d2d2;
}

#copy-path {
color: #999;
}
Expand All @@ -443,12 +446,6 @@ kbd {
background-color: #4e4e4e;
}

@media (max-width: 700px) {
#theme-picker {
background: #f0f0f0;
}
}

.search-results .result-name span.alias {
color: #fff;
}
Expand Down
17 changes: 7 additions & 10 deletions src/librustdoc/html/static/css/themes/light.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* General structure and fonts */

body {
body, #settings-menu #settings, #settings-menu #settings::before {
background-color: white;
color: black;
}
Expand Down Expand Up @@ -394,17 +394,20 @@ kbd {
box-shadow: inset 0 -1px 0 #c6cbd1;
}

#theme-picker, #settings-menu, #help-button {
#settings-menu > a, #help-button {
border-color: #e0e0e0;
background-color: #fff;
}

#theme-picker:hover, #theme-picker:focus,
#settings-menu:hover, #settings-menu:focus,
#settings-menu > a:hover, #settings-menu > a:focus,
#help-button:hover, #help-button:focus {
border-color: #717171;
}

#settings-menu #settings, #settings-menu #settings::before {
border-color: #DDDDDD;
}

#copy-path {
color: #999;
}
Expand All @@ -428,12 +431,6 @@ kbd {
background-color: #eee;
}

@media (max-width: 700px) {
#theme-picker {
background: #fff;
}
}

.search-results .result-name span.alias {
color: #000;
}
Expand Down
Loading

0 comments on commit cbe1594

Please sign in to comment.