feat(userVignette): add external badge when needed
This commit is contained in:
Edouard Vanbelle
@@ -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 <img>.
|
||||
The avatar <span> keeps its background color as a fallback while loading. */
|
||||
The avatar <span> 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 `<img>` 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 `<i>`) 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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 `<i class="fa-…">` for an `<svg>`, invalidating any
|
||||
// reference we'd otherwise hold across the await. Late-resolve
|
||||
// calls used to toggle `.hidden` on the original `<i>` 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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user