rustdoc: allow resizing the sidebar
This commit is contained in:
Michael Howell
parent
3c23df4935
commit
0983438faa
@ -2000,6 +2000,7 @@ fn init_id_map() -> FxHashMap<Cow<'static, str>, usize> {
|
||||
map.insert("themeStyle".into(), 1);
|
||||
map.insert("settings-menu".into(), 1);
|
||||
map.insert("help-button".into(), 1);
|
||||
map.insert("sidebar-button".into(), 1);
|
||||
map.insert("main-content".into(), 1);
|
||||
map.insert("toggle-all-docs".into(), 1);
|
||||
map.insert("all-types".into(), 1);
|
||||
|
||||
@ -9,7 +9,7 @@ rules.
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
#copy-path {
|
||||
#copy-path, #sidebar-button, .sidebar-resizer {
|
||||
/* It requires JS to work so no need to display it in this case. */
|
||||
display: none;
|
||||
}
|
||||
@ -132,6 +132,8 @@ nav.sub {
|
||||
--scrape-example-help-hover-color: #000;
|
||||
--scrape-example-code-wrapper-background-start: rgba(255, 255, 255, 1);
|
||||
--scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0);
|
||||
--sidebar-resizer-hover: hsl(207, 90%, 66%);
|
||||
--sidebar-resizer-active: hsl(207, 90%, 54%);
|
||||
}
|
||||
/* End theme: light */
|
||||
|
||||
@ -238,6 +240,8 @@ nav.sub {
|
||||
--scrape-example-help-hover-color: #fff;
|
||||
--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
|
||||
--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
|
||||
--sidebar-resizer-hover: hsl(207, 30%, 54%);
|
||||
--sidebar-resizer-active: hsl(207, 90%, 54%);
|
||||
}
|
||||
/* End theme: dark */
|
||||
}
|
||||
|
||||
@ -383,7 +383,7 @@ img {
|
||||
|
||||
.sidebar {
|
||||
font-size: 0.875rem;
|
||||
flex: 0 0 200px;
|
||||
flex: 0 0 var(--desktop-sidebar-width, 200px);
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: contain;
|
||||
position: sticky;
|
||||
@ -401,6 +401,87 @@ img {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hide-sidebar .sidebar,
|
||||
.hide-sidebar .sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-resizer {
|
||||
touch-action: none;
|
||||
width: 9px;
|
||||
cursor: col-resize;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
/* make sure there's a 1px gap between the scrollbar and resize handle */
|
||||
left: calc(var(--desktop-sidebar-width, 200px) + 1px);
|
||||
}
|
||||
|
||||
.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-sidebar-expanded .rustdoc.src .sidebar-resizer {
|
||||
/* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer
|
||||
to right of it */
|
||||
left: var(--src-sidebar-width, 300px);
|
||||
}
|
||||
|
||||
.sidebar-resizing {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sidebar-resizing * {
|
||||
cursor: col-resize !important;
|
||||
}
|
||||
|
||||
.sidebar-resizer:hover,
|
||||
.sidebar-resizer:active,
|
||||
.sidebar-resizer:focus,
|
||||
.sidebar-resizer.active {
|
||||
width: 10px;
|
||||
margin: 0;
|
||||
/* when active or hovered, place resizer glow on top of the sidebar (right next to, or even
|
||||
on top of, the scrollbar) */
|
||||
left: var(--desktop-sidebar-width, 200px);
|
||||
border-left: solid 1px var(--sidebar-resizer-hover);
|
||||
}
|
||||
|
||||
.src-sidebar-expanded .rustdoc.src .sidebar-resizer:hover,
|
||||
.src-sidebar-expanded .rustdoc.src .sidebar-resizer:active,
|
||||
.src-sidebar-expanded .rustdoc.src .sidebar-resizer:focus,
|
||||
.src-sidebar-expanded .rustdoc.src .sidebar-resizer.active {
|
||||
/* when active or hovered, place resizer glow on top of the normal src sidebar border */
|
||||
left: calc(var(--src-sidebar-width, 300px) - 1px);
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
.sidebar-resizer {
|
||||
/* too easy to hit the resizer while trying to hit the [-] toggle */
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-resizer.active {
|
||||
/* make the resize tool bigger when actually resizing, to avoid :hover styles on other stuff
|
||||
while resizing */
|
||||
padding: 0 140px;
|
||||
width: 2px;
|
||||
margin-left: -140px;
|
||||
border-left: none;
|
||||
}
|
||||
.sidebar-resizer.active:before {
|
||||
border-left: solid 2px var(--sidebar-resizer-active);
|
||||
display: block;
|
||||
height: 100%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.sidebar, .mobile-topbar, .sidebar-menu-toggle,
|
||||
#src-sidebar-toggle, #src-sidebar {
|
||||
background-color: var(--sidebar-background-color);
|
||||
@ -416,7 +497,7 @@ img {
|
||||
|
||||
.src-sidebar-expanded .src .sidebar {
|
||||
overflow-y: auto;
|
||||
flex-basis: 300px;
|
||||
flex-basis: var(--src-sidebar-width, 300px);
|
||||
}
|
||||
|
||||
.src-sidebar-expanded .src .sidebar > *:not(#src-sidebar-toggle) {
|
||||
@ -477,6 +558,7 @@ ul.block, .block li {
|
||||
display: block;
|
||||
padding: 0.25rem; /* 4px */
|
||||
margin-left: -0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
@ -778,7 +860,7 @@ h2.small-section-header > .anchor {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.crate.block a.current { font-weight: 500; }
|
||||
.crate.block li.current a { font-weight: 500; }
|
||||
|
||||
/* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap
|
||||
as much as needed on mobile (see
|
||||
@ -1477,7 +1559,20 @@ a.tooltip:hover::after {
|
||||
margin-left: 4px;
|
||||
display: flex;
|
||||
}
|
||||
#settings-menu > a, #help-button > a {
|
||||
#sidebar-button {
|
||||
display: none;
|
||||
}
|
||||
.hide-sidebar #sidebar-button {
|
||||
display: flex;
|
||||
margin-right: 4px;
|
||||
position: fixed;
|
||||
left: 6px;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
background-color: var(--main-background-color);
|
||||
z-index: 1;
|
||||
}
|
||||
#settings-menu > a, #help-button > a, #sidebar-button > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -1492,7 +1587,8 @@ a.tooltip:hover::after {
|
||||
}
|
||||
|
||||
#settings-menu > a:hover, #settings-menu > a:focus,
|
||||
#help-button > a:hover, #help-button > a:focus {
|
||||
#help-button > a:hover, #help-button > a:focus,
|
||||
#sidebar-button > a:hover, #sidebar-button > a:focus {
|
||||
border-color: var(--settings-button-border-focus);
|
||||
}
|
||||
|
||||
@ -1721,6 +1817,10 @@ in src-script.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. */
|
||||
@ -1749,7 +1849,8 @@ in src-script.js
|
||||
/* Hide the logo and item name from the sidebar. Those are displayed
|
||||
in the mobile-topbar instead. */
|
||||
.sidebar .logo-container,
|
||||
.sidebar .location {
|
||||
.sidebar .location,
|
||||
.sidebar-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1817,6 +1918,10 @@ in src-script.js
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.hide-sidebar .mobile-topbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-menu-toggle {
|
||||
width: 45px;
|
||||
/* Rare exception to specifying font sizes in rem. Since this is acting
|
||||
@ -1826,6 +1931,10 @@ in src-script.js
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.hide-sidebar .sidebar-menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-elems {
|
||||
margin-top: 1em;
|
||||
}
|
||||
@ -2273,6 +2382,8 @@ in src-script.js
|
||||
--scrape-example-help-hover-color: #000;
|
||||
--scrape-example-code-wrapper-background-start: rgba(255, 255, 255, 1);
|
||||
--scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0);
|
||||
--sidebar-resizer-hover: hsl(207, 90%, 66%);
|
||||
--sidebar-resizer-active: hsl(207, 90%, 54%);
|
||||
}
|
||||
/* End theme: light */
|
||||
|
||||
@ -2378,6 +2489,8 @@ in src-script.js
|
||||
--scrape-example-help-hover-color: #fff;
|
||||
--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
|
||||
--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
|
||||
--sidebar-resizer-hover: hsl(207, 30%, 54%);
|
||||
--sidebar-resizer-active: hsl(207, 90%, 54%);
|
||||
}
|
||||
/* End theme: dark */
|
||||
|
||||
@ -2487,6 +2600,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
|
||||
--scrape-example-help-hover-color: #fff;
|
||||
--scrape-example-code-wrapper-background-start: rgba(15, 20, 25, 1);
|
||||
--scrape-example-code-wrapper-background-end: rgba(15, 20, 25, 0);
|
||||
--sidebar-resizer-hover: hsl(34, 50%, 33%);
|
||||
--sidebar-resizer-active: hsl(34, 100%, 66%);
|
||||
}
|
||||
|
||||
:root[data-theme="ayu"] h1,
|
||||
@ -2518,6 +2633,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
|
||||
}
|
||||
|
||||
:root[data-theme="ayu"] .sidebar .current,
|
||||
:root[data-theme="ayu"] .sidebar .current a,
|
||||
:root[data-theme="ayu"] .sidebar a:hover,
|
||||
:root[data-theme="ayu"] #src-sidebar div.files > a:hover,
|
||||
:root[data-theme="ayu"] details.dir-entry summary:hover,
|
||||
@ -2568,7 +2684,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
|
||||
border-bottom: 1px solid rgba(242, 151, 24, 0.3);
|
||||
}
|
||||
|
||||
:root[data-theme="ayu"] #settings-menu > a img {
|
||||
:root[data-theme="ayu"] #settings-menu > a img,
|
||||
:root[data-theme="ayu"] #sidebar-button > a img {
|
||||
filter: invert(100);
|
||||
}
|
||||
/* End theme: ayu */
|
||||
|
||||
15
src/librustdoc/html/static/images/sidebar.svg
Normal file
15
src/librustdoc/html/static/images/sidebar.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="22" height="22" version="1.1" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" stroke="#000">
|
||||
<rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5"/>
|
||||
<path d="m7.6121 3v16" stroke-width="1.2241"/>
|
||||
<g>
|
||||
<g stroke-width="1.25">
|
||||
<path d="m5.375 7.625h-2"/>
|
||||
<path d="m5.375 10.625h-2"/>
|
||||
<path d="m5.375 13.625h-2"/>
|
||||
</g>
|
||||
<circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 509 B |
@ -1,5 +1,5 @@
|
||||
// Local js definitions:
|
||||
/* global addClass, getSettingValue, hasClass, searchState */
|
||||
/* global addClass, getSettingValue, hasClass, searchState, updateLocalStorage */
|
||||
/* global onEach, onEachLazy, removeClass, getVar */
|
||||
|
||||
"use strict";
|
||||
@ -505,7 +505,7 @@ function preLoadCss(cssUrl) {
|
||||
}
|
||||
const link = document.createElement("a");
|
||||
link.href = path;
|
||||
if (link.href === current_page) {
|
||||
if (path === current_page) {
|
||||
link.className = "current";
|
||||
}
|
||||
link.textContent = name;
|
||||
@ -656,12 +656,12 @@ function preLoadCss(cssUrl) {
|
||||
for (const crate of window.ALL_CRATES) {
|
||||
const link = document.createElement("a");
|
||||
link.href = window.rootPath + crate + "/index.html";
|
||||
if (window.rootPath !== "./" && crate === window.currentCrate) {
|
||||
link.className = "current";
|
||||
}
|
||||
link.textContent = crate;
|
||||
|
||||
const li = document.createElement("li");
|
||||
if (window.rootPath !== "./" && crate === window.currentCrate) {
|
||||
li.className = "current";
|
||||
}
|
||||
li.appendChild(link);
|
||||
ul.appendChild(li);
|
||||
}
|
||||
@ -1273,6 +1273,112 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/how-to-read-rustdoc.html\
|
||||
searchState.setup();
|
||||
}());
|
||||
|
||||
(function() {
|
||||
const sidebarButton = document.getElementById("sidebar-button");
|
||||
if (sidebarButton) {
|
||||
sidebarButton.addEventListener("click", e => {
|
||||
removeClass(document.documentElement, "hide-sidebar");
|
||||
updateLocalStorage("hide-sidebar", "false");
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
let currentPointerId = null;
|
||||
const resizer = document.getElementsByClassName("sidebar-resizer")[0];
|
||||
const sidebar = document.getElementsByClassName("sidebar")[0];
|
||||
if (!resizer || !sidebar) {
|
||||
return;
|
||||
}
|
||||
const isSrcPage = hasClass(document.body, "src");
|
||||
function hideSidebar() {
|
||||
if (isSrcPage) {
|
||||
window.rustdocCloseSourceSidebar();
|
||||
updateLocalStorage("src-sidebar-width", null);
|
||||
document.documentElement.style.removeProperty("--src-sidebar-width");
|
||||
} else {
|
||||
addClass(document.documentElement, "hide-sidebar");
|
||||
updateLocalStorage("hide-sidebar", "true");
|
||||
updateLocalStorage("desktop-sidebar-width", null);
|
||||
document.documentElement.style.removeProperty("--desktop-sidebar-width");
|
||||
}
|
||||
}
|
||||
function showSidebar() {
|
||||
if (isSrcPage) {
|
||||
window.rustdocShowSourceSidebar();
|
||||
} else {
|
||||
removeClass(document.documentElement, "hide-sidebar");
|
||||
updateLocalStorage("hide-sidebar", "false");
|
||||
}
|
||||
}
|
||||
function changeSidebarSize(size) {
|
||||
if (isSrcPage) {
|
||||
updateLocalStorage("src-sidebar-width", size);
|
||||
document.documentElement.style.setProperty("--src-sidebar-width", size + "px");
|
||||
} else {
|
||||
updateLocalStorage("desktop-sidebar-width", size);
|
||||
document.documentElement.style.setProperty("--desktop-sidebar-width", size + "px");
|
||||
}
|
||||
}
|
||||
function isSidebarHidden() {
|
||||
return isSrcPage ?
|
||||
!hasClass(document.documentElement, "src-sidebar-expanded") :
|
||||
hasClass(document.documentElement, "hide-sidebar");
|
||||
}
|
||||
function resize(e) {
|
||||
if (currentPointerId === null || currentPointerId !== e.pointerId) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const pos = e.clientX - sidebar.offsetLeft - 3;
|
||||
if (pos < 50) {
|
||||
hideSidebar();
|
||||
} else if (pos >= 100) {
|
||||
// 100 is the size of the logo
|
||||
// don't let the sidebar get smaller than that, or it'll get squished
|
||||
if (isSidebarHidden()) {
|
||||
showSidebar();
|
||||
}
|
||||
// don't let the sidebar get wider than 500
|
||||
changeSidebarSize(Math.min(pos, window.innerWidth - 100, 500));
|
||||
}
|
||||
}
|
||||
function stopResize(e) {
|
||||
if (currentPointerId === null) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
removeClass(resizer, "active");
|
||||
window.removeEventListener("pointermove", resize, false);
|
||||
window.removeEventListener("pointerup", stopResize, false);
|
||||
removeClass(document.documentElement, "sidebar-resizing");
|
||||
if (resizer.releasePointerCapture) {
|
||||
resizer.releasePointerCapture(currentPointerId);
|
||||
currentPointerId = null;
|
||||
}
|
||||
}
|
||||
function initResize(e) {
|
||||
if (currentPointerId !== null || e.altKey || e.ctrlKey || e.metaKey || e.button !== 0) {
|
||||
return;
|
||||
}
|
||||
if (resizer.setPointerCapture) {
|
||||
resizer.setPointerCapture(e.pointerId);
|
||||
if (!resizer.hasPointerCapture(e.pointerId)) {
|
||||
// unable to capture pointer; something else has it
|
||||
// on iOS, this usually means you long-clicked a link instead
|
||||
resizer.releasePointerCapture(e.pointerId);
|
||||
return;
|
||||
}
|
||||
currentPointerId = e.pointerId;
|
||||
}
|
||||
e.preventDefault();
|
||||
window.addEventListener("pointermove", resize, false);
|
||||
window.addEventListener("pointercancel", stopResize, false);
|
||||
window.addEventListener("pointerup", stopResize, false);
|
||||
addClass(resizer, "active");
|
||||
addClass(document.documentElement, "sidebar-resizing");
|
||||
}
|
||||
resizer.addEventListener("pointerdown", initResize, false);
|
||||
}());
|
||||
|
||||
(function() {
|
||||
let reset_button_timeout = null;
|
||||
|
||||
|
||||
@ -29,6 +29,13 @@
|
||||
window.rustdoc_remove_line_numbers_from_examples();
|
||||
}
|
||||
break;
|
||||
case "hide-sidebar":
|
||||
if (value === true) {
|
||||
addClass(document.documentElement, "hide-sidebar");
|
||||
} else {
|
||||
removeClass(document.documentElement, "hide-sidebar");
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -186,6 +193,11 @@
|
||||
"js_name": "line-numbers",
|
||||
"default": false,
|
||||
},
|
||||
{
|
||||
"name": "Hide persistent navigation bar",
|
||||
"js_name": "hide-sidebar",
|
||||
"default": false,
|
||||
},
|
||||
{
|
||||
"name": "Disable keyboard shortcuts",
|
||||
"js_name": "disable-shortcuts",
|
||||
@ -216,6 +228,13 @@
|
||||
|
||||
function displaySettings() {
|
||||
settingsMenu.style.display = "";
|
||||
onEachLazy(settingsMenu.querySelectorAll("input[type='checkbox']"), el => {
|
||||
const val = getSettingValue(el.id);
|
||||
const checked = val === "true";
|
||||
if (checked !== el.checked && val !== null) {
|
||||
el.checked = checked;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function settingsBlurHandler(event) {
|
||||
|
||||
@ -71,16 +71,26 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) {
|
||||
return hasFoundFile;
|
||||
}
|
||||
|
||||
window.rustdocCloseSourceSidebar = () => {
|
||||
const toggleLabel = document.querySelector("#src-sidebar-toggle button");
|
||||
removeClass(document.documentElement, "src-sidebar-expanded");
|
||||
toggleLabel.innerText = ">";
|
||||
updateLocalStorage("source-sidebar-show", "false");
|
||||
};
|
||||
|
||||
window.rustdocShowSourceSidebar = () => {
|
||||
const toggleLabel = document.querySelector("#src-sidebar-toggle button");
|
||||
addClass(document.documentElement, "src-sidebar-expanded");
|
||||
toggleLabel.innerText = "<";
|
||||
updateLocalStorage("source-sidebar-show", "true");
|
||||
};
|
||||
|
||||
function toggleSidebar() {
|
||||
const child = this.parentNode.children[0];
|
||||
if (child.innerText === ">") {
|
||||
addClass(document.documentElement, "src-sidebar-expanded");
|
||||
child.innerText = "<";
|
||||
updateLocalStorage("source-sidebar-show", "true");
|
||||
window.rustdocShowSourceSidebar();
|
||||
} else {
|
||||
removeClass(document.documentElement, "src-sidebar-expanded");
|
||||
child.innerText = ">";
|
||||
updateLocalStorage("source-sidebar-show", "false");
|
||||
window.rustdocCloseSourceSidebar();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -202,6 +202,30 @@ if (getSettingValue("source-sidebar-show") === "true") {
|
||||
addClass(document.documentElement, "src-sidebar-expanded");
|
||||
}
|
||||
|
||||
if (getSettingValue("hide-sidebar") === "true") {
|
||||
// At this point in page load, `document.body` is not available yet.
|
||||
// Set a class on the `<html>` element instead.
|
||||
addClass(document.documentElement, "hide-sidebar");
|
||||
}
|
||||
|
||||
function updateSidebarWidth() {
|
||||
const desktopSidebarWidth = getSettingValue("desktop-sidebar-width");
|
||||
if (desktopSidebarWidth && desktopSidebarWidth !== "null") {
|
||||
document.documentElement.style.setProperty(
|
||||
"--desktop-sidebar-width",
|
||||
desktopSidebarWidth + "px"
|
||||
);
|
||||
}
|
||||
const srcSidebarWidth = getSettingValue("src-sidebar-width");
|
||||
if (srcSidebarWidth && srcSidebarWidth !== "null") {
|
||||
document.documentElement.style.setProperty(
|
||||
"--src-sidebar-width",
|
||||
srcSidebarWidth + "px"
|
||||
);
|
||||
}
|
||||
}
|
||||
updateSidebarWidth();
|
||||
|
||||
// If we navigate away (for example to a settings page), and then use the back or
|
||||
// forward button to get back to a page, the theme may have changed in the meantime.
|
||||
// But scripts may not be re-loaded in such a case due to the bfcache
|
||||
@ -214,5 +238,6 @@ if (getSettingValue("source-sidebar-show") === "true") {
|
||||
window.addEventListener("pageshow", ev => {
|
||||
if (ev.persisted) {
|
||||
setTimeout(updateTheme, 0);
|
||||
setTimeout(updateSidebarWidth, 0);
|
||||
}
|
||||
});
|
||||
|
||||
@ -100,6 +100,7 @@ pub(crate) fn for_each<E>(f: impl Fn(&StaticFile) -> Result<(), E>) -> Result<()
|
||||
storage_js => "static/js/storage.js",
|
||||
scrape_examples_js => "static/js/scrape-examples.js",
|
||||
wheel_svg => "static/images/wheel.svg",
|
||||
sidebar_svg => "static/images/sidebar.svg",
|
||||
clipboard_svg => "static/images/clipboard.svg",
|
||||
copyright => "static/COPYRIGHT.txt",
|
||||
license_apache => "static/LICENSE-APACHE.txt",
|
||||
|
||||
@ -115,6 +115,7 @@
|
||||
{% endif %}
|
||||
{{ sidebar|safe }}
|
||||
</nav> {# #}
|
||||
<div class="sidebar-resizer"></div>
|
||||
<main> {# #}
|
||||
{% if page.css_class != "src" %}<div class="width-limiter">{% endif %}
|
||||
<nav class="sub"> {# #}
|
||||
@ -129,6 +130,14 @@
|
||||
{% 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"> {# #}
|
||||
<img width="22" height="22" alt="Show sidebar" {#+ #}
|
||||
src="{{static_root_path|safe}}{{files.sidebar_svg}}"> {# #}
|
||||
</a> {# #}
|
||||
</div> {# #}
|
||||
{% endif %}
|
||||
<input {#+ #}
|
||||
class="search-input" {#+ #}
|
||||
name="search" {#+ #}
|
||||
@ -137,8 +146,8 @@
|
||||
spellcheck="false" {#+ #}
|
||||
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {#+ #}
|
||||
type="search"> {# #}
|
||||
<div id="help-button" title="help" tabindex="-1"> {# #}
|
||||
<a href="{{page.root_path|safe}}help.html">?</a> {# #}
|
||||
<div id="help-button" tabindex="-1"> {# #}
|
||||
<a href="{{page.root_path|safe}}help.html" title="help">?</a> {# #}
|
||||
</div> {# #}
|
||||
<div id="settings-menu" tabindex="-1"> {# #}
|
||||
<a href="{{page.root_path|safe}}settings.html" title="settings"> {# #}
|
||||
|
||||
20
tests/rustdoc-gui/hide-mobile-topbar.goml
Normal file
20
tests/rustdoc-gui/hide-mobile-topbar.goml
Normal file
@ -0,0 +1,20 @@
|
||||
// Checks sidebar resizing stays synced with the setting
|
||||
go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
|
||||
set-window-size: (400, 600)
|
||||
|
||||
// Verify that the "hide" option is unchecked
|
||||
click: "#settings-menu"
|
||||
wait-for: "#settings"
|
||||
assert-css: ("#settings", {"display": "block"})
|
||||
assert-property: ("#hide-sidebar", {"checked": "false"})
|
||||
assert-css: (".mobile-topbar", {"display": "flex"})
|
||||
|
||||
// Toggle it
|
||||
click: "#hide-sidebar"
|
||||
assert-property: ("#hide-sidebar", {"checked": "true"})
|
||||
assert-css: (".mobile-topbar", {"display": "none"})
|
||||
|
||||
// Toggle it again
|
||||
click: "#hide-sidebar"
|
||||
assert-property: ("#hide-sidebar", {"checked": "false"})
|
||||
assert-css: (".mobile-topbar", {"display": "flex"})
|
||||
@ -26,12 +26,12 @@ define-function: (
|
||||
assert-css: (".item-table .keyword", {"color": |keyword|}, ALL)
|
||||
// Checking sidebar elements.
|
||||
assert-css: (
|
||||
".sidebar-elems a:not(.current)",
|
||||
".sidebar-elems li:not(.current) a",
|
||||
{"color": |sidebar|, "background-color": "rgba(0, 0, 0, 0)", "font-weight": "400"},
|
||||
ALL,
|
||||
)
|
||||
assert-css: (
|
||||
".sidebar-elems a.current",
|
||||
".sidebar-elems li.current a",
|
||||
{
|
||||
"color": |sidebar_current|,
|
||||
"background-color": |sidebar_current_background|,
|
||||
|
||||
@ -17,10 +17,10 @@ define-function: (
|
||||
reload:
|
||||
// Struct
|
||||
assert-css: (
|
||||
".sidebar .block.struct a:not(.current)",
|
||||
".sidebar .block.struct li:not(.current) a",
|
||||
{"color": |struct|, "background-color": "rgba(0, 0, 0, 0)"},
|
||||
)
|
||||
move-cursor-to: ".sidebar .block.struct a:not(.current)"
|
||||
move-cursor-to: ".sidebar .block.struct li:not(.current) a"
|
||||
assert-css: (
|
||||
".sidebar .block.struct a:hover",
|
||||
{"color": |struct_hover|, "background-color": |struct_hover_background|},
|
||||
|
||||
23
tests/rustdoc-gui/sidebar-resize-setting.goml
Normal file
23
tests/rustdoc-gui/sidebar-resize-setting.goml
Normal file
@ -0,0 +1,23 @@
|
||||
// Checks sidebar resizing stays synced with the setting
|
||||
go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
|
||||
assert-property: (".sidebar", {"clientWidth": "200"})
|
||||
show-text: true
|
||||
|
||||
// Verify that the "hide" option is unchecked
|
||||
click: "#settings-menu"
|
||||
wait-for: "#settings"
|
||||
assert-css: ("#settings", {"display": "block"})
|
||||
assert-property: ("#hide-sidebar", {"checked": "false"})
|
||||
press-key: "Escape"
|
||||
wait-for-css: ("#settings", {"display": "none"})
|
||||
|
||||
drag-and-drop: ((205, 100), (5, 100))
|
||||
assert-css: (".sidebar", {"display": "none"})
|
||||
|
||||
// Verify that the "hide" option is checked
|
||||
focus: "#settings-menu a"
|
||||
press-key: "Enter"
|
||||
wait-for-css: ("#settings", {"display": "block"})
|
||||
assert-property: ("#hide-sidebar", {"checked": "true"})
|
||||
click: "#hide-sidebar"
|
||||
wait-for-css: (".sidebar", {"display": "block"})
|
||||
28
tests/rustdoc-gui/sidebar-resize.goml
Normal file
28
tests/rustdoc-gui/sidebar-resize.goml
Normal file
@ -0,0 +1,28 @@
|
||||
// Checks sidebar resizing
|
||||
go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
|
||||
assert-property: (".sidebar", {"clientWidth": "200"})
|
||||
show-text: true
|
||||
// normal resizing
|
||||
drag-and-drop: ((205, 100), (185, 100))
|
||||
assert-property: (".sidebar", {"clientWidth": "182"})
|
||||
// resize past maximum (don't grow past 500)
|
||||
drag-and-drop: ((185, 100), (600, 100))
|
||||
assert-property: (".sidebar", {"clientWidth": "500"})
|
||||
// resize past minimum (hide sidebar)
|
||||
drag-and-drop: ((501, 100), (5, 100))
|
||||
assert-property: (".sidebar", {"clientWidth": "0"})
|
||||
assert-css: (".sidebar", {"display": "none"})
|
||||
assert-local-storage: {"rustdoc-hide-sidebar": "true"}
|
||||
set-local-storage: {"rustdoc-hide-sidebar": "false"}
|
||||
|
||||
// Now same thing, but for source code
|
||||
go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
|
||||
assert-property: (".sidebar", {"clientWidth": "49"})
|
||||
drag-and-drop: ((52, 100), (185, 100))
|
||||
assert-property: (".sidebar", {"clientWidth": "181"})
|
||||
drag-and-drop: ((185, 100), (600, 100))
|
||||
assert-property: (".sidebar", {"clientWidth": "499"})
|
||||
drag-and-drop: ((500, 100), (5, 100))
|
||||
// instead of hiding the sidebar entirely, this
|
||||
// will switch to the toggle mode
|
||||
assert-property: (".sidebar", {"clientWidth": "49"})
|
||||
@ -48,6 +48,7 @@ call-function: (
|
||||
|
||||
// Next, desktop mode layout.
|
||||
set-window-size: (1100, 800)
|
||||
wait-for: "#src-sidebar-toggle"
|
||||
// We check that the sidebar isn't expanded and has the expected width.
|
||||
assert-css: ("nav.sidebar", {"width": "50px"})
|
||||
// We now click on the button to expand the sidebar.
|
||||
@ -58,7 +59,7 @@ assert-css: (".src-sidebar-expanded nav.sidebar a", {"font-size": "14px"})
|
||||
// We collapse the sidebar.
|
||||
click: (10, 10)
|
||||
// We ensure that the class has been removed.
|
||||
wait-for: "html:not(.expanded)"
|
||||
wait-for: "html:not(.src-sidebar-expanded)"
|
||||
assert: "nav.sidebar"
|
||||
|
||||
// Checking that only the path to the current file is "open".
|
||||
|
||||
@ -57,7 +57,7 @@ assert-count: (".sidebar h2", 1)
|
||||
assert-text: ("#all-types", "All Items")
|
||||
assert-css: ("#all-types", {"color": "#356da4"})
|
||||
// We check that we have the crates list and that the "current" on is "test_docs".
|
||||
assert-text: (".sidebar-elems ul.crate > li > a.current", "test_docs")
|
||||
assert-text: (".sidebar-elems ul.crate > li.current > a", "test_docs")
|
||||
// And we're also supposed to have the list of items in the current module.
|
||||
assert-text: (".sidebar-elems section ul > li:nth-child(1)", "Re-exports")
|
||||
assert-text: (".sidebar-elems section ul > li:nth-child(2)", "Modules")
|
||||
@ -98,7 +98,7 @@ assert-property: (".sidebar", {"clientWidth": "200"})
|
||||
assert-text: (".sidebar > .sidebar-crate > h2 > a", "lib2")
|
||||
assert-count: (".sidebar .location", 0)
|
||||
// We check that we have the crates list and that the "current" on is now "lib2".
|
||||
assert-text: (".sidebar-elems ul.crate > li > a.current", "lib2")
|
||||
assert-text: (".sidebar-elems ul.crate > li.current > a", "lib2")
|
||||
// We now go to the "foobar" function page.
|
||||
assert-text: (".sidebar-elems > section ul.block > li:nth-child(1)", "Modules")
|
||||
assert-text: (".sidebar-elems > section ul.block > li:nth-child(2)", "Structs")
|
||||
|
||||
@ -96,4 +96,6 @@
|
||||
--scrape-example-help-hover-color: #000;
|
||||
--scrape-example-code-wrapper-background-start: rgba(255, 255, 255, 1);
|
||||
--scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0);
|
||||
--sidebar-resizer-hover: hsl(207, 90%, 66%);
|
||||
--sidebar-resizer-active: hsl(207, 90%, 54%);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user