rustdoc: clean up source sidebar hide button
This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
This commit is contained in:
Michael Howell
parent
43dcc9b786
commit
859bbc5def
10 changed files with 92 additions and 196 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -111,6 +111,10 @@
|
|||
{% 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> {# #}
|
||||
|
|
@ -118,22 +122,11 @@
|
|||
<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…
Add table
Add a link
Reference in a new issue