Skip to content

Commit 859bbc5

Browse files
notriddlenotriddle
committed
rustdoc: clean up source sidebar hide button
This is a redesign of the feature, with parts pulled from rust-lang#119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
1 parent 43dcc9b commit 859bbc5

File tree

10 files changed

+92
-196
lines changed

10 files changed

+92
-196
lines changed

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

+52-87
Original file line numberDiff line numberDiff line change
@@ -366,22 +366,12 @@ img {
366366
max-width: 100%;
367367
}
368368

369-
.sub-logo-container, .logo-container {
369+
.logo-container {
370370
/* zero text boxes so that computed line height = image height exactly */
371371
line-height: 0;
372372
display: block;
373373
}
374374

375-
.sub-logo-container {
376-
margin-right: 32px;
377-
}
378-
379-
.sub-logo-container > img {
380-
height: 60px;
381-
width: 60px;
382-
object-fit: contain;
383-
}
384-
385375
.rust-logo {
386376
filter: var(--rust-logo-filter);
387377
}
@@ -424,14 +414,14 @@ img {
424414
}
425415

426416
.rustdoc.src .sidebar-resizer {
427-
/* when closed, place resizer glow on top of the normal src sidebar border (no need to worry
428-
about sidebar) */
429-
left: 49px;
417+
/* src pages have separate closed flag */
418+
display: none;
430419
}
431420

432-
.src-sidebar-expanded .rustdoc.src .sidebar-resizer {
421+
.src-sidebar-expanded .src .sidebar-resizer {
433422
/* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer
434423
to right of it */
424+
display: block;
435425
left: var(--src-sidebar-width);
436426
}
437427

@@ -447,7 +437,7 @@ img {
447437
}
448438

449439
.sidebar-resizing .sidebar {
450-
position: fixed;
440+
position: fixed !important;
451441
z-index: 100;
452442
}
453443
.sidebar-resizing > body {
@@ -497,28 +487,25 @@ img {
497487
}
498488

499489
.sidebar, .mobile-topbar, .sidebar-menu-toggle,
500-
#src-sidebar-toggle, #src-sidebar {
490+
#src-sidebar {
501491
background-color: var(--sidebar-background-color);
502492
}
503493

504-
#src-sidebar-toggle > button:hover, #src-sidebar-toggle > button:focus {
505-
background-color: var(--sidebar-background-color-hover);
506-
}
507-
508-
.src .sidebar > *:not(#src-sidebar-toggle) {
509-
visibility: hidden;
494+
.src .sidebar {
495+
position: absolute;
496+
top: 0;
497+
bottom: 0;
498+
left: -1000px;
510499
}
511500

512501
.src-sidebar-expanded .src .sidebar {
502+
position: sticky;
503+
left: 0;
513504
overflow-y: auto;
514505
flex-basis: var(--src-sidebar-width);
515506
width: var(--src-sidebar-width);
516507
}
517508

518-
.src-sidebar-expanded .src .sidebar > *:not(#src-sidebar-toggle) {
519-
visibility: visible;
520-
}
521-
522509
#all-types {
523510
margin-top: 1em;
524511
}
@@ -1528,18 +1515,6 @@ a.tooltip:hover::after {
15281515
font-weight: normal;
15291516
}
15301517

1531-
#src-sidebar-toggle {
1532-
position: sticky;
1533-
top: 0;
1534-
left: 0;
1535-
font-size: 1.25rem;
1536-
border-bottom: 1px solid;
1537-
display: flex;
1538-
height: 40px;
1539-
justify-content: stretch;
1540-
align-items: stretch;
1541-
z-index: 10;
1542-
}
15431518
#src-sidebar {
15441519
width: 100%;
15451520
overflow: auto;
@@ -1557,18 +1532,14 @@ a.tooltip:hover::after {
15571532
#src-sidebar div.files > a.selected {
15581533
background-color: var(--src-sidebar-background-selected);
15591534
}
1560-
#src-sidebar-toggle > button {
1561-
font-size: inherit;
1562-
font-weight: bold;
1563-
background: none;
1564-
color: inherit;
1565-
text-align: center;
1566-
border: none;
1567-
outline: none;
1568-
flex: 1 1;
1569-
/* iOS button gradient: https://stackoverflow.com/q/5438567 */
1570-
-webkit-appearance: none;
1571-
opacity: 1;
1535+
1536+
.src-sidebar-title {
1537+
position: sticky;
1538+
top: 0;
1539+
display: flex;
1540+
padding: 8px;
1541+
padding-left: 48px;
1542+
background: var(--sidebar-background-color);
15721543
}
15731544

15741545
#settings-menu, #help-button {
@@ -1578,7 +1549,8 @@ a.tooltip:hover::after {
15781549
#sidebar-button {
15791550
display: none;
15801551
}
1581-
.hide-sidebar #sidebar-button {
1552+
.hide-sidebar #sidebar-button,
1553+
.src #sidebar-button {
15821554
display: flex;
15831555
margin-right: 4px;
15841556
position: fixed;
@@ -1588,6 +1560,16 @@ a.tooltip:hover::after {
15881560
background-color: var(--main-background-color);
15891561
z-index: 1;
15901562
}
1563+
.src #sidebar-button {
1564+
left: 12px;
1565+
z-index: 101;
1566+
}
1567+
.src .search-form {
1568+
margin-left: 40px;
1569+
}
1570+
.src-sidebar-expanded .src .search-form {
1571+
margin-left: 0;
1572+
}
15911573
#settings-menu > a, #help-button > a, #sidebar-button > a {
15921574
display: flex;
15931575
align-items: center;
@@ -1843,10 +1825,6 @@ in src-script.js and main.js
18431825
scroll-margin-top: 45px;
18441826
}
18451827

1846-
.hide-sidebar #sidebar-button {
1847-
position: static;
1848-
}
1849-
18501828
.rustdoc {
18511829
/* Sidebar should overlay main content, rather than pushing main content to the right.
18521830
Turn off `display: flex` on the body element. */
@@ -1974,31 +1952,6 @@ in src-script.js and main.js
19741952
left: -11px;
19751953
}
19761954

1977-
#src-sidebar-toggle {
1978-
position: fixed;
1979-
left: 1px;
1980-
top: 100px;
1981-
width: 30px;
1982-
font-size: 1.5rem;
1983-
padding: 0;
1984-
z-index: 10;
1985-
border-top-right-radius: 3px;
1986-
border-bottom-right-radius: 3px;
1987-
border: 1px solid;
1988-
border-left: 0;
1989-
}
1990-
1991-
.src-sidebar-expanded #src-sidebar-toggle {
1992-
left: unset;
1993-
top: unset;
1994-
width: unset;
1995-
border-top-right-radius: unset;
1996-
border-bottom-right-radius: unset;
1997-
position: sticky;
1998-
border: 0;
1999-
border-bottom: 1px solid;
2000-
}
2001-
20021955
/* We don't display these buttons on mobile devices. */
20031956
#copy-path, #help-button {
20041957
display: none;
@@ -2015,6 +1968,14 @@ in src-script.js and main.js
20151968
height: 22px;
20161969
}
20171970

1971+
/* src sidebar button opens modal
1972+
use hamburger button */
1973+
.src #sidebar-button > a:before {
1974+
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
1975+
viewBox="0 0 22 22" fill="none" stroke="black">\
1976+
<path d="M3,5h16M3,11h16M3,17h16" stroke-width="3"/></svg>');
1977+
}
1978+
20181979
/* Display an alternating layout on tablets and phones */
20191980
.item-table, .item-row, .item-table > li, .item-table > li > div,
20201981
.search-results > a, .search-results > a > div {
@@ -2040,9 +2001,19 @@ in src-script.js and main.js
20402001
}
20412002

20422003
.src-sidebar-expanded .src .sidebar {
2004+
position: fixed;
20432005
max-width: 100vw;
20442006
width: 100vw;
20452007
}
2008+
.src .src-sidebar-title {
2009+
padding-top: 0;
2010+
}
2011+
.hide-sidebar #sidebar-button {
2012+
position: static;
2013+
}
2014+
.src #sidebar-button {
2015+
position: fixed;
2016+
}
20462017

20472018
/* Position of the "[-]" element. */
20482019
details.toggle:not(.top-doc) > summary {
@@ -2114,12 +2085,6 @@ in src-script.js and main.js
21142085
.search-form {
21152086
align-self: stretch;
21162087
}
2117-
2118-
.sub-logo-container > img {
2119-
height: 35px;
2120-
width: 35px;
2121-
margin-bottom: var(--nav-sub-mobile-padding);
2122-
}
21232088
}
21242089

21252090
.variant,

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

+13-6
Original file line numberDiff line numberDiff line change
@@ -1519,11 +1519,18 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
15191519
// and it can be activated by resizing the sidebar into nothing.
15201520
const sidebarButton = document.getElementById("sidebar-button");
15211521
if (sidebarButton) {
1522-
sidebarButton.addEventListener("click", e => {
1523-
removeClass(document.documentElement, "hide-sidebar");
1524-
updateLocalStorage("hide-sidebar", "false");
1525-
e.preventDefault();
1526-
});
1522+
if (document.querySelector(".rustdoc.src")) {
1523+
sidebarButton.addEventListener("click", e => {
1524+
window.rustdocToggleSrcSidebar();
1525+
e.preventDefault();
1526+
});
1527+
} else {
1528+
sidebarButton.addEventListener("click", e => {
1529+
removeClass(document.documentElement, "hide-sidebar");
1530+
updateLocalStorage("hide-sidebar", "false");
1531+
e.preventDefault();
1532+
});
1533+
}
15271534
}
15281535

15291536
// Pointer capture.
@@ -1646,7 +1653,7 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
16461653
return;
16471654
}
16481655
e.preventDefault();
1649-
const pos = e.clientX - sidebar.offsetLeft - 3;
1656+
const pos = e.clientX - 3;
16501657
if (pos < SIDEBAR_VANISH_THRESHOLD) {
16511658
hideSidebar();
16521659
} else if (pos >= SIDEBAR_MIN) {

‎src/librustdoc/html/static/js/src-script.js

+4-38
Original file line numberDiff line numberDiff line change
@@ -71,68 +71,34 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) {
7171
return hasFoundFile;
7272
}
7373

74-
let toggleLabel;
75-
76-
function getToggleLabel() {
77-
toggleLabel = toggleLabel || document.querySelector("#src-sidebar-toggle button");
78-
return toggleLabel;
79-
}
80-
8174
window.rustdocCloseSourceSidebar = () => {
8275
removeClass(document.documentElement, "src-sidebar-expanded");
83-
getToggleLabel().innerText = ">";
8476
updateLocalStorage("source-sidebar-show", "false");
8577
};
8678

8779
window.rustdocShowSourceSidebar = () => {
8880
addClass(document.documentElement, "src-sidebar-expanded");
89-
getToggleLabel().innerText = "<";
9081
updateLocalStorage("source-sidebar-show", "true");
9182
};
9283

93-
function toggleSidebar() {
94-
const child = this.parentNode.children[0];
95-
if (child.innerText === ">") {
96-
window.rustdocShowSourceSidebar();
97-
} else {
84+
window.rustdocToggleSrcSidebar = () => {
85+
if (document.documentElement.classList.contains("src-sidebar-expanded")) {
9886
window.rustdocCloseSourceSidebar();
99-
}
100-
}
101-
102-
function createSidebarToggle() {
103-
const sidebarToggle = document.createElement("div");
104-
sidebarToggle.id = "src-sidebar-toggle";
105-
106-
const inner = document.createElement("button");
107-
108-
if (getCurrentValue("source-sidebar-show") === "true") {
109-
inner.innerText = "<";
11087
} else {
111-
inner.innerText = ">";
88+
window.rustdocShowSourceSidebar();
11289
}
113-
inner.onclick = toggleSidebar;
114-
115-
sidebarToggle.appendChild(inner);
116-
return sidebarToggle;
117-
}
90+
};
11891

11992
// This function is called from "src-files.js", generated in `html/render/write_shared.rs`.
12093
// eslint-disable-next-line no-unused-vars
12194
function createSrcSidebar() {
12295
const container = document.querySelector("nav.sidebar");
12396

124-
const sidebarToggle = createSidebarToggle();
125-
container.insertBefore(sidebarToggle, container.firstChild);
126-
12797
const sidebar = document.createElement("div");
12898
sidebar.id = "src-sidebar";
12999

130100
let hasFoundFile = false;
131101

132-
const title = document.createElement("div");
133-
title.className = "title";
134-
title.innerText = "Files";
135-
sidebar.appendChild(title);
136102
for (const [key, source] of srcIndex) {
137103
source[NAME_OFFSET] = key;
138104
hasFoundFile = createDirEntry(source, sidebar, "", hasFoundFile);

‎src/librustdoc/html/templates/page.html

+4-11
Original file line numberDiff line numberDiff line change
@@ -111,29 +111,22 @@ <h2> {# #}
111111
{% if !display_krate_version_extra.is_empty() %}
112112
<div class="version">{{+ display_krate_version_extra}}</div> {# #}
113113
{% endif %}
114+
{% else %}
115+
<div class="src-sidebar-title">
116+
<h2>Files</h2> {# #}
117+
</div> {# #}
114118
{% endif %}
115119
{{ sidebar|safe }}
116120
</nav> {# #}
117121
<div class="sidebar-resizer"></div>
118122
<main> {# #}
119123
{% if page.css_class != "src" %}<div class="width-limiter">{% endif %}
120124
<nav class="sub"> {# #}
121-
{% if page.css_class == "src" && (!layout.logo.is_empty() || page.rust_logo) %}
122-
<a class="sub-logo-container" href="{{page.root_path|safe}}{{display_krate_with_trailing_slash|safe}}index.html"> {# #}
123-
{% if page.rust_logo %}
124-
<img class="rust-logo" src="{{static_root_path|safe}}{{files.rust_logo_svg}}" alt="{{display_krate}}"> {# #}
125-
{% else if !layout.logo.is_empty() %}
126-
<img src="{{layout.logo}}" alt="{{display_krate}}"> {# #}
127-
{% endif %}
128-
</a> {# #}
129-
{% endif %}
130125
<form class="search-form"> {# #}
131126
<span></span> {# This empty span is a hacky fix for Safari - See #93184 #}
132-
{% if page.css_class != "src" %}
133127
<div id="sidebar-button" tabindex="-1"> {# #}
134128
<a href="{{page.root_path|safe}}{{layout.krate|safe}}/all.html" title="show sidebar"></a> {# #}
135129
</div> {# #}
136-
{% endif %}
137130
<input {#+ #}
138131
class="search-input" {#+ #}
139132
name="search" {#+ #}

0 commit comments

Comments
 (0)