snw/SharedDocsLib
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix workspace sizing and placeholder timing

Browse source
This commit is contained in:
Server 2026-08-09 23:50:57 +00:00
parent cf2373f4a9
commit ea92de93af
3 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docslib/templates/client.css
View file

@ -63,7 +63,7 @@ button { color: inherit; }
.tree-number { flex: 0 0 auto; color: var(--muted); }
.tree-title { min-width: 0; overflow-wrap: anywhere; }
.workspace { display: flex; min-width: 0; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; }
.workspace { display: flex; min-width: 0; height: 100%; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.desktop-toolbar { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; }
.desktop-search-shell { position: relative; width: min(320px, 30vw); max-width: min(320px, 30vw); flex: 0 1 min(320px, 30vw); transition: max-width .24s ease, opacity .16s ease, transform .24s ease; }
.search-control { display: flex; width: 100%; height: 44px; align-items: center; border-radius: 24px; background: var(--control); }

24
docslib/templates/client.js
View file

@ -39,6 +39,7 @@
let placeholderText = "";
let placeholderTarget = "";
let placeholderIndex = 0;
let placeholderDots = 0;
let placeholderPhase = "typing";
let lastPlaceholderPage = -1;
@ -330,8 +331,8 @@
return words.slice(0, Math.max(1, count)).join(" ");
}
function applyPlaceholder(value, complete = false) {
const display = value ? `${value}${complete ? "…" : ""}` : "";
function applyPlaceholder(value, dots = 0) {
const display = value ? `${value}${".".repeat(dots)}` : "";
elements.desktopSearchInput.placeholder = display;
elements.mobileSearchInput.placeholder = display;
}
@ -347,14 +348,22 @@
if (placeholderPhase === "typing") {
placeholderIndex += 1;
placeholderText = placeholderTarget.slice(0, placeholderIndex);
const complete = placeholderIndex >= placeholderTarget.length;
applyPlaceholder(placeholderText, complete);
applyPlaceholder(placeholderText);
if (placeholderIndex >= placeholderTarget.length) {
placeholderPhase = "dots";
placeholderTimer = setTimeout(placeholderTick, 180);
} else placeholderTimer = setTimeout(placeholderTick, 95 + Math.random() * 90);
} else if (placeholderPhase === "dots") {
placeholderDots += 1;
applyPlaceholder(placeholderText, placeholderDots);
if (placeholderDots >= 3) {
placeholderPhase = "waiting";
placeholderTimer = setTimeout(placeholderTick, 10000);
} else placeholderTimer = setTimeout(placeholderTick, 130 + Math.random() * 120);
placeholderTimer = setTimeout(placeholderTick, 5000);
} else placeholderTimer = setTimeout(placeholderTick, 220);
} else if (placeholderPhase === "waiting") {
placeholderPhase = "erasing";
placeholderDots = 0;
applyPlaceholder(placeholderText);
placeholderTimer = setTimeout(placeholderTick, 180);
} else {
placeholderIndex -= 1;
@ -373,9 +382,10 @@
placeholderText = "";
placeholderTarget = choosePlaceholder();
placeholderIndex = 0;
placeholderDots = 0;
placeholderPhase = "typing";
if (reducedMotion.matches) {
applyPlaceholder(placeholderTarget, true);
applyPlaceholder(placeholderTarget, 3);
return;
}
placeholderTimer = setTimeout(placeholderTick, 500);

4
tests/test_server.py
View file

@ -74,6 +74,7 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
assert "100vh" not in html
assert "html, body { width: 100%; height: 100dvh" in html
assert "overflow-y: auto" in html
assert "flex: 1 1 auto; flex-direction: column" in html
assert "elements.pageSurface.scrollTo" in html
assert "font-family: system-ui; font-size: 16px" in html
assert ".glyph-button, .refresh-glyph { font-family: Arial" in html
@ -87,7 +88,8 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
assert 'id="mobile-menu-view"' in html
assert 'id="mobile-search-view"' in html
assert "placeholderTick" in html
assert "setTimeout(placeholderTick, 10000)" in html
assert '".".repeat(dots)' in html
assert "setTimeout(placeholderTick, 5000)" in html
assert '.sidebar-header-buttons .header-link:not(.active):first-child' not in html
assert "--tree-line: #2c2c2c" in html
assert "height: 44px" in html