From 074ca33e1dccff8e8480299d0560d7976b7fdbe0 Mon Sep 17 00:00:00 2001 From: Edouard Vanbelle Date: Tue, 2 Jun 2026 12:39:18 +0200 Subject: [PATCH] feat(userVignette): add external badge when needed --- static/css/components/userVignette.css | 113 ++++++++++++------- static/js/components/pendingEmailVignette.js | 19 ++-- static/js/components/userVignette.js | 49 ++++---- static/js/model/systemUsers.js | 17 ++- 4 files changed, 130 insertions(+), 68 deletions(-) diff --git a/static/css/components/userVignette.css b/static/css/components/userVignette.css index 121869e2..b4f52f5f 100644 --- a/static/css/components/userVignette.css +++ b/static/css/components/userVignette.css @@ -28,11 +28,15 @@ justify-content: center; font-weight: 700; flex-shrink: 0; - /* Default size = --sm; overridden by size modifier below */ - width: 24px; - height: 24px; + /* Diameter comes from `--avatar-size`, declared per size variant on + the wrapper so the origin badge (a wrapper sibling or an avatar + child) can size off the same value. Default fallback is `--sm`. */ + width: var(--avatar-size, 24px); + height: var(--avatar-size, 24px); font-size: 10px; - /* Anchor for the bottom-right `__origin` badge. */ + /* Anchor for `__origin--overlay` (the avatar-only-mode badge that + sits on the bottom-right corner of the picture). Harmless when + no overlay child is present. */ position: relative; } @@ -66,45 +70,60 @@ /* ── Size variants ─────────────────────────────────────────────────────────── */ +/* `--avatar-size` is the single source of truth for the diameter. The + `__avatar` element reads it for width/height; the `__origin` badge + reads it (via the wrapper's inheritance scope) to scale itself to a + fixed proportion of the avatar regardless of variant. The avatar's + own `font-size` (used for initials) stays per-variant because the + initials-to-avatar ratio is a deliberate design choice, not a fixed + fraction. */ + +.user-vignette--xs { + --avatar-size: 20px; +} .user-vignette--xs .user-vignette__avatar { - width: 20px; - height: 20px; font-size: 9px; } +.user-vignette--sm { + --avatar-size: 24px; +} .user-vignette--sm .user-vignette__avatar { - width: 24px; - height: 24px; font-size: 10px; } +.user-vignette--list { + --avatar-size: 36px; +} .user-vignette--list .user-vignette__avatar { - width: 36px; - height: 36px; font-size: 13px; } +.user-vignette--md { + --avatar-size: 32px; +} .user-vignette--md .user-vignette__avatar { - width: 32px; - height: 32px; font-size: 12px; } +.user-vignette--lg { + --avatar-size: 40px; +} .user-vignette--lg .user-vignette__avatar { - width: 40px; - height: 40px; font-size: 15px; } +.user-vignette--menu { + --avatar-size: 38px; +} .user-vignette--menu .user-vignette__avatar { - width: 38px; - height: 38px; font-size: 14px; } +.user-vignette--xl { + --avatar-size: 48px; +} .user-vignette--xl .user-vignette__avatar { - width: 48px; - height: 48px; font-size: 17px; } @@ -141,9 +160,13 @@ /* ── Photo rendering ───────────────────────────────────────────────────────── */ /* When a photo is available the JS replaces the initials text with an . - The avatar keeps its background color as a fallback while loading. */ + The avatar keeps its background color as a fallback while loading. + The `:not(.user-vignette__origin)` carve-out excludes the overlay badge + (avatar-only mode) which is also an `.oxi-icon` inside `.__avatar` + after SVG conversion — without the carve-out it would inherit the + 100% / 100% sizing and fill the whole circle. */ .user-vignette__avatar img, -.user-vignette__avatar .oxi-icon { +.user-vignette__avatar .oxi-icon:not(.user-vignette__origin) { width: 100%; height: 100%; object-fit: cover; @@ -180,35 +203,49 @@ } /* ── Origin badge (external-user marker) ─────────────────────────────────── - * Tiny FontAwesome icon overlaid on the bottom-right of the avatar circle. - * Shown ONLY for external users — internal users render the bare avatar + * Inline-flex sibling rendered to the right of the avatar + name. Shown + * ONLY for external users — internal users render the bare vignette * (Ed's "external only" preference: quiet UI for the common case). * - * The white background ring lifts the icon off coloured avatars so it - * stays readable across the full palette. */ + * Earlier iterations placed this inside `.__avatar` as an absolute- + * positioned corner badge. The corner approach failed once the avatar + * showed a user photo — the `` masked the badge out. Pulling it + * out to a sibling keeps it visible regardless of avatar content. */ .user-vignette__origin { - position: absolute; - /* Bottom-right corner, slightly tucked past the avatar's edge. */ - right: -2px; - bottom: -2px; - /* Scale to ~40% of avatar diameter via em — the parent's font-size - changes per size variant, so the badge naturally tracks. */ - font-size: 0.9em; + flex-shrink: 0; line-height: 1; - background: var(--color-bg-surface); - color: var(--color-text-secondary); - border-radius: 50%; - /* Halo ring so the icon visually detaches from coloured avatars. */ - box-shadow: 0 0 0 1.5px var(--color-bg-surface); - /* Don't intercept hover events on the avatar itself. */ - pointer-events: auto; + /* Default (sibling mode, with name): track the avatar's font-size + so the badge matches the row's text scale. The overlay mode + overrides this below with the explicit 30%-of-avatar-diameter + rule. */ + font-size: 1em; } .user-vignette__origin--external { color: var(--color-warning-orange-text); } +/* Avatar-only renders (the user-menu toolbar button is the canonical + case) have no sibling row to anchor the badge against. The + `--overlay` modifier puts it on the bottom-right corner of the + picture at exactly 30% of the avatar diameter, regardless of size + variant. `--avatar-size` is declared per variant on the wrapper and + inherits to the badge via the cascade. Halo ring lifts the icon off + coloured avatars + the user's photo so it stays readable across the + palette. */ +.user-vignette__origin--overlay { + position: absolute; + right: -2px; + bottom: -2px; + /* `.oxi-icon` (the SVG that replaces the original ``) is + `width: 1em; height: 1em`, so font-size IS the rendered size. */ + font-size: calc(var(--avatar-size, 24px) * 0.3); + background: var(--color-bg-surface); + border-radius: 50%; + box-shadow: 0 0 0 1.5px var(--color-bg-surface); +} + .user-vignette__origin.hidden { display: none; } diff --git a/static/js/components/pendingEmailVignette.js b/static/js/components/pendingEmailVignette.js index a0c9e81d..3d1e8e51 100644 --- a/static/js/components/pendingEmailVignette.js +++ b/static/js/components/pendingEmailVignette.js @@ -49,14 +49,6 @@ export function createPendingEmailVignette(email, size = 'sm') { const [local, domain] = trimmed.split('@'); const synthName = local && domain ? `${local[0]} ${domain[0]}` : trimmed.slice(0, 2); avatar.textContent = _initials(synthName); - - // Forced external badge — this is the whole point of the component. - const badge = document.createElement('i'); - badge.className = 'user-vignette__origin user-vignette__origin--external fa-solid fa-building-circle-xmark'; - badge.title = 'External invitation'; - badge.setAttribute('aria-hidden', 'true'); - avatar.appendChild(badge); - wrapper.appendChild(avatar); // The "name" for a pending invite is just the email itself — there @@ -66,5 +58,16 @@ export function createPendingEmailVignette(email, size = 'sm') { nameEl.textContent = trimmed; wrapper.appendChild(nameEl); + // Forced external badge — this is the whole point of the component. + // Lives as a sibling at the end of the wrapper (mirrors the + // userVignette layout) so it stays visible regardless of avatar + // content (initials today, possibly a photo in a future "saved + // email contact" mode). + const badge = document.createElement('i'); + badge.className = 'user-vignette__origin user-vignette__origin--external fa-solid fa-building-circle-xmark'; + badge.title = 'External invitation'; + badge.setAttribute('aria-hidden', 'true'); + wrapper.appendChild(badge); + return wrapper; } diff --git a/static/js/components/userVignette.js b/static/js/components/userVignette.js index f6e0f6e0..1bee1e16 100644 --- a/static/js/components/userVignette.js +++ b/static/js/components/userVignette.js @@ -119,18 +119,6 @@ export function createUserVignette(userId, size = 'sm', { showName = true, showE avatar.textContent = userId.slice(0, 2).toUpperCase(); wrapper.appendChild(avatar); - // Origin badge (external-only — internal users render unchanged). - // Created hidden; revealed once `getIsExternal` resolves to true. - // FontAwesome glyph classes are added alongside the component - // class so the icon renders as a building-with-x glyph. - /** @type {HTMLElement | null} */ - const originEl = showOrigin ? document.createElement('i') : null; - if (originEl) { - originEl.className = 'user-vignette__origin user-vignette__origin--external hidden fa-solid fa-building-circle-xmark'; - originEl.setAttribute('aria-hidden', 'true'); - avatar.appendChild(originEl); - } - /** @type {HTMLElement | null} */ const nameEl = showName ? document.createElement('span') : null; @@ -157,11 +145,21 @@ export function createUserVignette(userId, size = 'sm', { showName = true, showE // Resolve name, photo, email, and (when requested) is_external // asynchronously. All four go through the systemUsers cache so a // single fetch back-fills every facet. + // + // The origin badge (external-user marker) is created here only + // when `isExternal` is true — NOT pre-created hidden — because the + // global icon-replacement `MutationObserver` (core/icons.js) swaps + // every `` for an ``, invalidating any + // reference we'd otherwise hold across the await. Late-resolve + // calls used to toggle `.hidden` on the original `` that no + // longer existed in the DOM, leaving the badge invisible until + // the next render. Creating-then-appending keeps the icon system + // and our reveal step in agreement. Promise.all([ systemUsers.getDisplayName(userId), systemUsers.getPhoto(userId), emailEl ? systemUsers.getEmail(userId) : Promise.resolve(null), - originEl ? systemUsers.getIsExternal(userId) : Promise.resolve(false) + showOrigin ? systemUsers.getIsExternal(userId) : Promise.resolve(false) ]).then(([name, photo, email, isExternal]) => { if (nameEl) nameEl.textContent = name; if (emailEl) emailEl.textContent = email ?? ''; @@ -170,14 +168,23 @@ export function createUserVignette(userId, size = 'sm', { showName = true, showE } else { avatar.textContent = _initials(name); } - // Both branches above replace the avatar's children, wiping the - // pre-attached badge node. Re-attach AFTER the avatar's content - // is final so the badge sits on top. - if (originEl) { - avatar.appendChild(originEl); - if (isExternal) { - originEl.classList.remove('hidden'); - originEl.title = 'External user'; + if (showOrigin && isExternal) { + const badge = document.createElement('i'); + // In avatar-only mode (no name span), overlay the badge on + // the bottom-right corner of the picture — the right-hand + // sibling spot doesn't exist there and a row-end position + // would visually float in nothing. With a name, keep the + // badge as a sibling on the right of the row. + const overlay = !showName; + badge.className = overlay + ? 'user-vignette__origin user-vignette__origin--external user-vignette__origin--overlay fa-solid fa-building-circle-xmark' + : 'user-vignette__origin user-vignette__origin--external fa-solid fa-building-circle-xmark'; + badge.title = 'External user'; + badge.setAttribute('aria-hidden', 'true'); + if (overlay) { + avatar.appendChild(badge); + } else { + wrapper.appendChild(badge); } } }); diff --git a/static/js/model/systemUsers.js b/static/js/model/systemUsers.js index f7f040b3..8b7c9767 100644 --- a/static/js/model/systemUsers.js +++ b/static/js/model/systemUsers.js @@ -62,7 +62,22 @@ function _nameFor(c) { */ async function _ensureIndex() { if (_index !== null) return; - const contacts = await addressBook.listContacts(SYSTEM_BOOK_ID); + + // System address book load. Tolerates ANY error (most relevantly the + // 403 external users receive on `/api/address-books/system/contacts` + // since PR 11.1's defense-in-depth lockout): treat as "empty book" + // and fall through to the per-user localStorage injection below so + // at least the logged-in user resolves correctly. Without this + // try/catch an external user's systemUsers cache stays unbuilt and + // every userVignette (including their own avatar in the user menu) + // falls back to the UUID-prefix placeholder. + /** @type {ContactItem[]} */ + let contacts = []; + try { + contacts = await addressBook.listContacts(SYSTEM_BOOK_ID); + } catch { + // 403 / 5xx / network error — leave contacts empty. + } _index = new Map(contacts.map((c) => [c.id, _nameFor(c)])); _photoIndex = new Map(contacts.map((c) => [c.id, c.photo_url ?? null])); _emailIndex = new Map(