Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rustdoc: clean up source sidebar hide button #119066

Merged
merged 6 commits into from
Dec 31, 2023
Merged

rustdoc: clean up source sidebar hide button #119066

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
859bbc5
rustdoc: clean up source sidebar hide button
notriddle Dec 18, 2023
bd14fb6
Add back the column
notriddle Dec 18, 2023
c3e29ea
Stop using the trigram of heaven as a hamburger button
notriddle Dec 18, 2023
66779ff
Add border bottom for source sidebar title area
notriddle Dec 18, 2023
34984a6
Use folder icon instead of hamburger and sidebar
notriddle Dec 19, 2023
9566db1
Fix corner cases when dealing with mobile mode
notriddle Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
rustdoc: clean up source sidebar hide button 
This is a redesign of the feature, with parts pulled from
#119049
but with a button that looks more like a button and matches the
one used on other sidebar pages.
  • Loading branch information
@notriddle
notriddle committed Dec 18, 2023
commit 859bbc5deffbee7870433c541cdbeb4a4a23780f
139 changes: 52 additions & 87 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Original file line number Diff line number Diff line change
@@ -366,22 +366,12 @@ img {
max-width: 100%;
}

.sub-logo-container, .logo-container {
.logo-container {
/* zero text boxes so that computed line height = image height exactly */
line-height: 0;
display: block;
}

.sub-logo-container {
margin-right: 32px;
}

.sub-logo-container > img {
height: 60px;
width: 60px;
object-fit: contain;
}

.rust-logo {
filter: var(--rust-logo-filter);
}
@@ -424,14 +414,14 @@ img {
}

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

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

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

.sidebar-resizing .sidebar {
position: fixed;
position: fixed !important;
z-index: 100;
}
.sidebar-resizing > body {
@@ -497,28 +487,25 @@ img {
}

.sidebar, .mobile-topbar, .sidebar-menu-toggle,
#src-sidebar-toggle, #src-sidebar {
#src-sidebar {
background-color: var(--sidebar-background-color);
}

#src-sidebar-toggle > button:hover, #src-sidebar-toggle > button:focus {
background-color: var(--sidebar-background-color-hover);
}

.src .sidebar > *:not(#src-sidebar-toggle) {
visibility: hidden;
.src .sidebar {
position: absolute;
top: 0;
bottom: 0;
left: -1000px;
}

.src-sidebar-expanded .src .sidebar {
position: sticky;
left: 0;
overflow-y: auto;
flex-basis: var(--src-sidebar-width);
width: var(--src-sidebar-width);
}

.src-sidebar-expanded .src .sidebar > *:not(#src-sidebar-toggle) {
visibility: visible;
}

#all-types {
margin-top: 1em;
}
@@ -1528,18 +1515,6 @@ a.tooltip:hover::after {
font-weight: normal;
}

#src-sidebar-toggle {
position: sticky;
top: 0;
left: 0;
font-size: 1.25rem;
border-bottom: 1px solid;
display: flex;
height: 40px;
justify-content: stretch;
align-items: stretch;
z-index: 10;
}
#src-sidebar {
width: 100%;
overflow: auto;
@@ -1557,18 +1532,14 @@ a.tooltip:hover::after {
#src-sidebar div.files > a.selected {
background-color: var(--src-sidebar-background-selected);
}
#src-sidebar-toggle > button {
font-size: inherit;
font-weight: bold;
background: none;
color: inherit;
text-align: center;
border: none;
outline: none;
flex: 1 1;
/* iOS button gradient: https://stackoverflow.com/q/5438567 */
-webkit-appearance: none;
opacity: 1;

.src-sidebar-title {
position: sticky;
top: 0;
display: flex;
padding: 8px;
padding-left: 48px;
background: var(--sidebar-background-color);
}

#settings-menu, #help-button {
@@ -1578,7 +1549,8 @@ a.tooltip:hover::after {
#sidebar-button {
display: none;
}
.hide-sidebar #sidebar-button {
.hide-sidebar #sidebar-button,
.src #sidebar-button {
display: flex;
margin-right: 4px;
position: fixed;
@@ -1588,6 +1560,16 @@ a.tooltip:hover::after {
background-color: var(--main-background-color);
z-index: 1;
}
.src #sidebar-button {
left: 12px;
z-index: 101;
}
.src .search-form {
margin-left: 40px;
}
.src-sidebar-expanded .src .search-form {
margin-left: 0;
}
#settings-menu > a, #help-button > a, #sidebar-button > a {
display: flex;
align-items: center;
@@ -1843,10 +1825,6 @@ in src-script.js and main.js
scroll-margin-top: 45px;
}

.hide-sidebar #sidebar-button {
position: static;
}

.rustdoc {
/* Sidebar should overlay main content, rather than pushing main content to the right.
Turn off `display: flex` on the body element. */
@@ -1974,31 +1952,6 @@ in src-script.js and main.js
left: -11px;
}

#src-sidebar-toggle {
position: fixed;
left: 1px;
top: 100px;
width: 30px;
font-size: 1.5rem;
padding: 0;
z-index: 10;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid;
border-left: 0;
}

.src-sidebar-expanded #src-sidebar-toggle {
left: unset;
top: unset;
width: unset;
border-top-right-radius: unset;
border-bottom-right-radius: unset;
position: sticky;
border: 0;
border-bottom: 1px solid;
}

/* We don't display these buttons on mobile devices. */
#copy-path, #help-button {
display: none;
@@ -2015,6 +1968,14 @@ in src-script.js and main.js
height: 22px;
}

/* src sidebar button opens modal
use hamburger button */
.src #sidebar-button > a:before {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
viewBox="0 0 22 22" fill="none" stroke="black">\
<path d="M3,5h16M3,11h16M3,17h16" stroke-width="3"/></svg>');
}

/* Display an alternating layout on tablets and phones */
.item-table, .item-row, .item-table > li, .item-table > li > div,
.search-results > a, .search-results > a > div {
@@ -2040,9 +2001,19 @@ in src-script.js and main.js
}

.src-sidebar-expanded .src .sidebar {
position: fixed;
max-width: 100vw;
width: 100vw;
}
.src .src-sidebar-title {
padding-top: 0;
}
.hide-sidebar #sidebar-button {
position: static;
}
.src #sidebar-button {
position: fixed;
}

/* Position of the "[-]" element. */
details.toggle:not(.top-doc) > summary {
@@ -2114,12 +2085,6 @@ in src-script.js and main.js
.search-form {
align-self: stretch;
}

.sub-logo-container > img {
height: 35px;
width: 35px;
margin-bottom: var(--nav-sub-mobile-padding);
}
}

.variant,
19 changes: 13 additions & 6 deletions src/librustdoc/html/static/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1519,11 +1519,18 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
// and it can be activated by resizing the sidebar into nothing.
const sidebarButton = document.getElementById("sidebar-button");
if (sidebarButton) {
sidebarButton.addEventListener("click", e => {
removeClass(document.documentElement, "hide-sidebar");
updateLocalStorage("hide-sidebar", "false");
e.preventDefault();
});
if (document.querySelector(".rustdoc.src")) {
sidebarButton.addEventListener("click", e => {
window.rustdocToggleSrcSidebar();
e.preventDefault();
});
} else {
sidebarButton.addEventListener("click", e => {
removeClass(document.documentElement, "hide-sidebar");
updateLocalStorage("hide-sidebar", "false");
e.preventDefault();
});
}
}

// Pointer capture.
@@ -1646,7 +1653,7 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
return;
}
e.preventDefault();
const pos = e.clientX - sidebar.offsetLeft - 3;
const pos = e.clientX - 3;
if (pos < SIDEBAR_VANISH_THRESHOLD) {
hideSidebar();
} else if (pos >= SIDEBAR_MIN) {
42 changes: 4 additions & 38 deletions src/librustdoc/html/static/js/src-script.js
View file
Original file line number Diff line number Diff line change
@@ -71,68 +71,34 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) {
return hasFoundFile;
}

let toggleLabel;

function getToggleLabel() {
toggleLabel = toggleLabel || document.querySelector("#src-sidebar-toggle button");
return toggleLabel;
}

window.rustdocCloseSourceSidebar = () => {
removeClass(document.documentElement, "src-sidebar-expanded");
getToggleLabel().innerText = ">";
updateLocalStorage("source-sidebar-show", "false");
};

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

function toggleSidebar() {
const child = this.parentNode.children[0];
if (child.innerText === ">") {
window.rustdocShowSourceSidebar();
} else {
window.rustdocToggleSrcSidebar = () => {
if (document.documentElement.classList.contains("src-sidebar-expanded")) {
window.rustdocCloseSourceSidebar();
}
}

function createSidebarToggle() {
const sidebarToggle = document.createElement("div");
sidebarToggle.id = "src-sidebar-toggle";

const inner = document.createElement("button");

if (getCurrentValue("source-sidebar-show") === "true") {
inner.innerText = "<";
} else {
inner.innerText = ">";
window.rustdocShowSourceSidebar();
}
inner.onclick = toggleSidebar;

sidebarToggle.appendChild(inner);
return sidebarToggle;
}
};

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

const sidebarToggle = createSidebarToggle();
container.insertBefore(sidebarToggle, container.firstChild);

const sidebar = document.createElement("div");
sidebar.id = "src-sidebar";

let hasFoundFile = false;

const title = document.createElement("div");
title.className = "title";
title.innerText = "Files";
sidebar.appendChild(title);
for (const [key, source] of srcIndex) {
source[NAME_OFFSET] = key;
hasFoundFile = createDirEntry(source, sidebar, "", hasFoundFile);
15 changes: 4 additions & 11 deletions src/librustdoc/html/templates/page.html
View file
Original file line number Diff line number Diff line change
@@ -111,29 +111,22 @@ <h2> {# #}
{% if !display_krate_version_extra.is_empty() %}
<div class="version">{{+ display_krate_version_extra}}</div> {# #}
{% endif %}
{% else %}
<div class="src-sidebar-title">
<h2>Files</h2> {# #}
</div> {# #}
{% endif %}
{{ sidebar|safe }}
</nav> {# #}
<div class="sidebar-resizer"></div>
<main> {# #}
{% if page.css_class != "src" %}<div class="width-limiter">{% endif %}
<nav class="sub"> {# #}
{% if page.css_class == "src" && (!layout.logo.is_empty() || page.rust_logo) %}
<a class="sub-logo-container" href="{{page.root_path|safe}}{{display_krate_with_trailing_slash|safe}}index.html"> {# #}
{% if page.rust_logo %}
<img class="rust-logo" src="{{static_root_path|safe}}{{files.rust_logo_svg}}" alt="{{display_krate}}"> {# #}
{% else if !layout.logo.is_empty() %}
<img src="{{layout.logo}}" alt="{{display_krate}}"> {# #}
{% endif %}
</a> {# #}
{% endif %}
<form class="search-form"> {# #}
<span></span> {# This empty span is a hacky fix for Safari - See #93184 #}
{% if page.css_class != "src" %}
<div id="sidebar-button" tabindex="-1"> {# #}
<a href="{{page.root_path|safe}}{{layout.krate|safe}}/all.html" title="show sidebar"></a> {# #}
</div> {# #}
{% endif %}
<input {#+ #}
class="search-input" {#+ #}
name="search" {#+ #}
Loading