diff --git a/static/connections.html b/static/connections.html index f3873d3..ea6297e 100644 --- a/static/connections.html +++ b/static/connections.html @@ -66,7 +66,6 @@ } .tree-chevron:hover { color: var(--primary); background: var(--input); } .tree-chevron.expanded { color: var(--primary); } - .tree-chevron.leaf { visibility: hidden; cursor: default; } .tree-children { padding-left: var(--s-4) !important; margin-left: 15px !important; @@ -379,6 +378,131 @@ padding: 1px var(--s-1); font-size: 0.85em; color: var(--text); } .onboard-hl { color: var(--accent); font-weight: bold; } + + /* UX (#254) layout: sidebar scroll, indent, density */ + /* Sidebar is sticky and scrolls on its own so a long folder tree never + drags the entries table off screen; .main keeps scrolling with the page. */ + .sidebar { + position: sticky; top: var(--s-3); + align-self: flex-start; + max-height: calc(100vh - var(--s-3) * 2); + overflow-y: auto; overflow-x: hidden; + overscroll-behavior: contain; + scrollbar-width: thin; + scrollbar-color: var(--border) transparent; + } + .sidebar::-webkit-scrollbar { width: 6px; } + .sidebar::-webkit-scrollbar-track { background: transparent; } + .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } + /* Header + tools slot pinned at the top of the sidebar while the list scrolls */ + .sidebar-pin { + position: sticky; top: 0; z-index: 2; + display: flex; flex-direction: column; + background: var(--bg); + } + .sidebar-pin .sidebar-header { margin-bottom: var(--s-2); } + #sidebar-tools:not(:empty) { padding-bottom: var(--s-2); } + + /* Rows start flush with the sidebar edge: the 3px accent bar is the only + thing before the content. A chevron is rendered only for folders with + children, so leaves carry no dead indent. */ + .folder-row { + gap: var(--s-1); + padding: var(--s-1) var(--s-2) var(--s-1) var(--s-2); + min-height: 40px; + font-size: var(--fz-sm); + color: var(--text-muted); + transition: background .1s, color .1s; + } + .folder-list li:hover > .folder-row { color: var(--text); } + .folder-list li.selected > .folder-row { color: var(--text); } + .folder-list li.selected > .folder-row .folder-name { color: var(--text); font-weight: bold; } + .tree-chevron { + width: 22px; height: 28px; margin-left: -2px; + font-size: 13px; + } + .tree-children { + padding-left: 0 !important; + margin-left: 14px !important; + margin-top: 1px; + } + .folder-row-main { gap: 0; line-height: 1.3; } + .folder-name-row { gap: var(--s-2); } + .folder-name-row > .folder-name { font-size: var(--fz-sm); } + .folder-count { + flex-shrink: 0; + min-width: 1.6em; padding: 0 var(--s-1); + border-radius: 999px; + background: var(--surface); + color: var(--text-muted); + font-size: var(--fz-xs); line-height: 1.5; + text-align: center; letter-spacing: 0; + transition: background .1s, color .1s; + } + .folder-count::before { content: none; } + .folder-count[data-count="0"] { color: var(--text-dim); background: transparent; box-shadow: inset 0 0 0 1px var(--border); } + .folder-list li.selected > .folder-row .folder-count { background: var(--bg); color: var(--text); } + .folder-row .folder-scope { + width: 16px; height: 16px; + font-size: 16px; + color: var(--text-dim); + } + .folder-list li:hover > .folder-row .folder-scope, + .folder-list li.selected > .folder-row .folder-scope { color: var(--accent); } + .folder-desc { line-height: 1.25; } + + /* UX (#254) selection feedback: jump to top, change animation, skeleton */ + /* Title slides in from the left and the action bar's bottom border + flashes accent when the selected folder changes. The .changed class + is added by announceFolderShown() and removed on animationend so + it can replay on the next selection. */ + #entries-header.changed #entries-title { + animation: rg-title-in 350ms ease-out both; + } + #entries-header.changed .folder-actions { + animation: rg-header-flash 700ms ease-out both; + } + @keyframes rg-title-in { + from { opacity: 0; transform: translateX(-4px); } + to { opacity: 1; transform: none; } + } + @keyframes rg-header-flash { + 0% { border-bottom-color: var(--accent); } + 60% { border-bottom-color: var(--accent); } + 100% { border-bottom-color: var(--border); } + } + /* Skeleton: a real .entries-table so column padding, header height and + the 38px Connect-button row height are identical to the loaded + table; only the cells are replaced by shimmering bars. */ + .entries-table.skeleton tbody tr:hover { background: inherit; } + .sk-bar { + display: inline-block; vertical-align: middle; + height: 1em; width: 60%; max-width: 100%; + border-radius: var(--radius); + background: var(--surface) + linear-gradient(90deg, transparent 0%, var(--input) 50%, transparent 100%) + no-repeat; + background-size: 45% 100%; + animation: rg-shimmer 1.2s ease-in-out infinite; + } + .sk-bar.sk-btn { height: var(--ctl-sm); width: 130px; } + .sk-bar.sk-badge { height: 1.4em; width: 3.2em; } + .sk-bar.sk-check { height: 16px; width: 16px; } + .entries-table.skeleton tbody tr:nth-child(2) td > .sk-bar:only-child:not([class*=" sk-"]) { width: 72%; } + .entries-table.skeleton tbody tr:nth-child(3) td > .sk-bar:only-child:not([class*=" sk-"]) { width: 48%; } + .entries-table.skeleton tbody tr:nth-child(4) td > .sk-bar:only-child:not([class*=" sk-"]) { width: 66%; } + @keyframes rg-shimmer { + from { background-position: -100% 0; } + to { background-position: 250% 0; } + } + @media (prefers-reduced-motion: reduce) { + #entries-header.changed #entries-title, + #entries-header.changed .folder-actions, + .sk-bar { animation: none; } + /* Still mark the change without motion: a static accent border + while .changed is on (flashEntriesHeader clears it by timer). */ + #entries-header.changed .folder-actions { border-bottom-color: var(--accent); } + } @@ -444,9 +568,13 @@

No folders yet

-
- Folders - +
+
+ Folders + +
+ +
    @@ -1904,32 +2032,44 @@

    Enter Credentials

    var row = document.createElement('div'); row.className = 'folder-row'; - var chevron = document.createElement('span'); - chevron.className = 'tree-chevron'; var isExpanded = !!expandedPaths[key]; if (f.has_children) { + // Chevron column exists only for folders that can expand; leaves + // render no placeholder so their names start flush left (#254). // Full-size triangles (U+25BC/U+25B6), matching every other // collapsible on the page; the small variants (U+25BE/U+25B8) - // rendered as faint, hard-to-see ink even at 20px. + // rendered as faint, hard-to-see ink. + var chevron = document.createElement('span'); + chevron.className = 'tree-chevron'; chevron.textContent = isExpanded ? '\u25BC' : '\u25B6'; + chevron.title = isExpanded ? 'Collapse' : 'Expand'; if (isExpanded) chevron.classList.add('expanded'); chevron.addEventListener('click', function(ev) { ev.stopPropagation(); toggleFolder(f); }); - } else { - chevron.classList.add('leaf'); - chevron.textContent = '\u25B6'; + row.appendChild(chevron); } - row.appendChild(chevron); var main = document.createElement('div'); main.className = 'folder-row-main'; var nameRow = document.createElement('div'); nameRow.className = 'folder-name-row'; var nameSpan = document.createElement('span'); + nameSpan.className = 'folder-name'; nameSpan.textContent = f.name; + nameSpan.title = f.name; nameRow.appendChild(nameSpan); + if (folderEntryCounts[key] !== undefined) { + // Entry count as a small right-aligned pill on the name line. + var count = folderEntryCounts[key]; + var countSpan = document.createElement('span'); + countSpan.className = 'folder-count'; + countSpan.setAttribute('data-count', count); + countSpan.textContent = count; + countSpan.title = count + (count === 1 ? ' entry' : ' entries'); + nameRow.appendChild(countSpan); + } if (showScope) { var scopeBadge = document.createElement('span'); scopeBadge.className = 'folder-scope'; @@ -1940,12 +2080,6 @@

    Enter Credentials

    nameRow.appendChild(scopeBadge); } main.appendChild(nameRow); - if (folderEntryCounts[key] !== undefined) { - var countSpan = document.createElement('span'); - countSpan.className = 'folder-count'; - countSpan.textContent = folderEntryCounts[key] + ' entries'; - main.appendChild(countSpan); - } if (f.description) { var desc = document.createElement('span'); desc.className = 'folder-desc'; @@ -2280,18 +2414,23 @@

    Enter Credentials

    var cacheKey = folderKey(scope, folderPath); var cached = folderEntries[cacheKey]; + // UX (#254): jump to the entries header and flash the title, but + // only when the shown folder actually changed (not on initial + // load, live refresh, forceRefresh after a mutation, or search + // clear re-rendering the same folder). + announceFolderShown(cacheKey, header); // Use cache if available and not forcing refresh (e.g. after mutation) if (cached && !forceRefresh) { currentEntries = cached; folderEntryCounts[cacheKey] = cached.length; - renderFolders(); + updateFolderCount(scope, folderPath, cached.length); renderEntries(cached, scope, folderPath); return; } var content = document.getElementById('entries-content'); - content.innerHTML = '

    Loading...

    '; + content.innerHTML = entriesSkeletonHtml(); fetch('/api/addressbook/folders/' + encodeURIComponent(scope) + '/' + encodeURIComponent(folderPath) + '/entries', { headers: apiHeaders(), @@ -2316,7 +2455,7 @@

    Enter Credentials

    currentEntries = entries; folderEntries[cacheKey] = entries; folderEntryCounts[cacheKey] = entries.length; - renderFolders(); // Update count badge + updateFolderCount(scope, folderPath, entries.length); // in-place badge update renderEntries(entries, scope, folderPath); }) .catch(function(err) { @@ -4887,6 +5026,179 @@

    Enter Credentials

    startOnboarding(currentUserRole); }); + // ── UX (#254): selection feedback & sidebar render hygiene ────────── + // Everything here wraps existing functions or post-processes the DOM; + // renderFolders() itself is untouched. + + var prefersReducedMotion = (function() { + try { return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; } + catch (e) { return false; } + })(); + var lastShownFolderKey = null; // "scope|path" last passed to loadEntries() + var sidebarRevealPending = false; // set by loadFolders(); consumed by the renderFolders wrapper + + // Nearest scrollable ancestor of el, stopping at (and including) the + // sidebar. null when the sidebar is not its own scroll container, + // in which case the page scroll already handles visibility. + function sidebarScrollContainer(el) { + var sidebar = document.querySelector('.sidebar'); + var node = el ? el.parentElement : null; + while (node) { + var oy = getComputedStyle(node).overflowY; + if ((oy === 'auto' || oy === 'scroll') && node.scrollHeight > node.clientHeight) return node; + if (node === sidebar) break; + node = node.parentElement; + } + return null; + } + + // scrollIntoView({ block: 'nearest' }) confined to the sidebar's own + // scroll container: moves container.scrollTop only, never the page. + function revealSidebarRow(li) { + if (!li) return; + var box = sidebarScrollContainer(li); + if (!box) return; + var row = li.querySelector('.folder-row') || li; + var cr = box.getBoundingClientRect(); + var lr = row.getBoundingClientRect(); + if (lr.top < cr.top) box.scrollTop -= (cr.top - lr.top); + else if (lr.bottom > cr.bottom) box.scrollTop += Math.min(lr.bottom - cr.bottom, lr.top - cr.top); + } + + function selectedFolderLi() { + return document.querySelector('#folder-list li.selected'); + } + + // Bring the entries header to the top of the viewport when it is not + // comfortably in view (above the viewport after scrolling a long + // sidebar, or pushed into the lower half by the strips above it). + function jumpToEntriesHeader(header) { + if (!header) return; + var r = header.getBoundingClientRect(); + var vh = window.innerHeight || document.documentElement.clientHeight; + var inView = r.top >= 0 && r.top <= vh * 0.5 && r.bottom <= vh; + if (inView) return; + try { + header.scrollIntoView({ block: 'start', behavior: prefersReducedMotion ? 'auto' : 'smooth' }); + } catch (e) { + header.scrollIntoView(true); + } + } + + // Replay the .changed animation on the entries header. + function flashEntriesHeader(header) { + if (!header) return; + header.classList.remove('changed'); + void header.offsetWidth; // restart keyframes + header.classList.add('changed'); + clearTimeout(header._rgChangedTimer); + // Fallback clear: with reduced motion the animation is disabled so + // no animationend fires; otherwise animationend clears it earlier. + header._rgChangedTimer = setTimeout(function() { header.classList.remove('changed'); }, 900); + } + (function() { + var header = document.getElementById('entries-header'); + if (!header) return; + header.addEventListener('animationend', function(e) { + // The title finishes first; clear when the (longer) border + // flash ends so both animations complete. + if (e.animationName === 'rg-header-flash') header.classList.remove('changed'); + }); + })(); + + // Called by loadEntries() for every folder it shows. Only a change of + // folder (after one has already been shown) gets the jump + flash. + function announceFolderShown(key, header) { + var prev = lastShownFolderKey; + lastShownFolderKey = key; + if (prev === null || prev === key) return; + flashEntriesHeader(header); + jumpToEntriesHeader(header); + revealSidebarRow(selectedFolderLi()); + } + + // Skeleton placeholder shown while entries are fetched (never for the + // cached path). Same table class and column count as renderEntries(). + function entriesSkeletonHtml() { + var cols = ['Name', 'Type', 'Host', 'User', '']; + var html = ''; + if (isAdmin) html += ''; + cols.forEach(function(c) { html += ''; }); + if (isAdmin) html += ''; + html += ''; + for (var i = 0; i < 4; i++) { + html += ''; + if (isAdmin) html += ''; + html += '' + + '' + + '' + + '' + + ''; + if (isAdmin) html += ''; + html += ''; + } + return html + '
    ' + c + '
    '; + } + + function cssAttrEscape(s) { + if (window.CSS && CSS.escape) return CSS.escape(s); + return String(s).replace(/["\\]/g, '\\$&'); + } + + // Update one folder's count badge in place instead of rebuilding the + // whole sidebar. Keeps whatever text format renderFolders() produced + // (only the number is swapped). Falls back to a full render when the + // row or its badge does not exist yet. + function updateFolderCount(scope, path, n) { + folderEntryCounts[folderKey(scope, path)] = n; + var li = document.querySelector('#folder-list li[data-scope="' + cssAttrEscape(scope) + '"][data-path="' + cssAttrEscape(path) + '"]'); + var badge = null; + if (li) { + var all = li.querySelectorAll('.folder-count'); + for (var i = 0; i < all.length; i++) { + if (all[i].closest('li') === li) { badge = all[i]; break; } + } + } + if (!badge || !/\d/.test(badge.textContent)) { renderFolders(); return; } + badge.textContent = badge.textContent.replace(/\d[\d,]*/, String(n)); + badge.setAttribute('data-count', String(n)); + badge.title = n + ' entr' + (n === 1 ? 'y' : 'ies'); + } + + // Wrap renderFolders(): preserve the sidebar's scroll position across + // a rebuild, and reveal the selected row (within the sidebar only) + // when the selection changed or a tree reload asked for it. + var __renderFolders = renderFolders; + var __lastRenderedSelKey = null; + renderFolders = function() { + var boxes = []; + var node = document.getElementById('folder-list'); + while (node) { + if (node.scrollTop) boxes.push({ el: node, top: node.scrollTop }); + if (node.classList && node.classList.contains('sidebar')) break; + node = node.parentElement; + } + var result = __renderFolders.apply(this, arguments); + boxes.forEach(function(b) { b.el.scrollTop = b.top; }); + var selKey = selectedFolder ? folderKey(selectedFolder.scope, folderPath(selectedFolder)) : null; + var li = selectedFolderLi(); + if (li && (sidebarRevealPending || selKey !== __lastRenderedSelKey)) { + sidebarRevealPending = false; + revealSidebarRow(li); + } + __lastRenderedSelKey = selKey; + return result; + }; + + // Wrap loadFolders(): after a tree (re)build the selected row should + // be visible in the sidebar. Arguments pass through untouched. + var __loadFolders = loadFolders; + loadFolders = function() { + sidebarRevealPending = true; + return __loadFolders.apply(this, arguments); + }; + // ── end UX (#254) ──────────────────────────────────────────────────── + init(); diff --git a/tests/e2e/README.md b/tests/e2e/README.md index 0744087..b51e0ea 100644 --- a/tests/e2e/README.md +++ b/tests/e2e/README.md @@ -24,6 +24,7 @@ One spec per change, named after the branch that introduced it: | spec | pins | |---|---| | `tables-1710` | #252: no horizontal overflow at 1710px on Connections, Recordings and Reports, with short and with long unbreakable names | +| `connections-sidebar` | #254: independent sidebar scroll, selected row marked and kept in view | The fixture suppresses the first-visit onboarding tour (`options.onboarding` re-enables it) and defaults to the admin role; pass `role` to test gating. diff --git a/tests/e2e/specs/connections-sidebar.spec.mjs b/tests/e2e/specs/connections-sidebar.spec.mjs new file mode 100644 index 0000000..d487e7d --- /dev/null +++ b/tests/e2e/specs/connections-sidebar.spec.mjs @@ -0,0 +1,61 @@ +// #254: with 20+ tenant folders the sidebar shared the page scroll with the +// entries table, picking a folder far down the list changed content off +// screen, and nothing drew the eye to the changed title. The sidebar must +// scroll on its own, the chosen row must be marked and kept in view, and +// selecting a folder must not scroll the page. +import { test, expect } from '@playwright/test'; +import { installApi, settle } from '../lib/api.mjs'; + +// Short viewport so the 22-folder list is longer than the sidebar. +test.use({ viewport: { width: 1400, height: 600 } }); + +test('the sidebar scrolls independently of the page', async ({ page }) => { + await installApi(page); + await page.goto('/connections.html'); + await settle(page); + const sidebar = page.locator('.sidebar'); + await expect(sidebar).toBeVisible(); + const m = await sidebar.evaluate(el => ({ + overflowY: getComputedStyle(el).overflowY, + scrollHeight: el.scrollHeight, + clientHeight: el.clientHeight + })); + expect(['auto', 'scroll']).toContain(m.overflowY); + expect(m.scrollHeight, 'the folder list must overflow the sidebar box').toBeGreaterThan(m.clientHeight); + // Scrolling the sidebar moves the sidebar, not the document. + await sidebar.evaluate(el => { el.scrollTop = 400; }); + const after = await page.evaluate(() => ({ + sidebarTop: document.querySelector('.sidebar').scrollTop, + pageTop: document.scrollingElement.scrollTop + })); + expect(after.sidebarTop).toBeGreaterThan(0); + expect(after.pageTop).toBe(0); +}); + +test('selecting a folder marks the row and keeps it in view', async ({ page }) => { + await installApi(page); + await page.goto('/connections.html'); + await settle(page); + const row = page.locator('.folder-row').filter({ hasText: /tenant-18/ }).first(); + await row.scrollIntoViewIfNeeded(); + await row.click(); + await expect(page.locator('#entries-title')).toHaveText(/tenant-18/); + // The tree marks the chosen node (the row's list item) as selected. + await expect(row.locator('xpath=ancestor::li[1]')).toHaveClass(/selected/); + const vis = await row.evaluate(el => { + const r = el.getBoundingClientRect(); + const s = el.closest('.sidebar').getBoundingClientRect(); + return { inside: r.top >= s.top - 1 && r.bottom <= s.bottom + 1 }; + }); + expect(vis.inside, 'the selected row must be within the sidebar viewport').toBe(true); + // Whether the page itself may move on selection is the app shell's + // business: connections-app-shell.spec.mjs pins that it does not. +}); + +test('leaf folders start flush left: no chevron placeholder before the name', async ({ page }) => { + await installApi(page); + await page.goto('/connections.html'); + await settle(page); + // No fixture folder has children, so no row may carry a chevron. + expect(await page.locator('.folder-row .tree-chevron').count()).toBe(0); +});