{{ message }}
xiiui ← Update collab avatar indicator design#27162
Open
formfcw wants to merge 6 commits intoflorian/cms-2143-update-primary-header-actions-to-show-label-and-replacefrom
Open
xiiui ← Update collab avatar indicator design#27162formfcw wants to merge 6 commits intoflorian/cms-2143-update-primary-header-actions-to-show-label-and-replacefrom
formfcw wants to merge 6 commits intoflorian/cms-2143-update-primary-header-actions-to-show-label-and-replacefrom
Conversation
Introduce shared `xs` breakpoint (28rem) in both the TS constants and the SCSS mixin so components can target very narrow viewports without hardcoding values.
Replace ad-hoc `labelMin: 25rem` breakpoint with the shared `xs` breakpoint to drive label/icon switching.
Replace static COLLAB_USERS_DISPLAY_LIMIT constant with a `useCollabIndicator` composable that adapts the visible avatar count to viewport size and header-bar inline state. Also document the `useInjectHeaderBarInline` return value.
Swap `flex-basis: 1.375rem` for `flex-shrink: 0` so the avatar keeps its intrinsic size without being stretched by flex sizing.
…label-and-replace' into florian/cms-1943-update-avatar-design
alvarosabu
requested changes
Apr 22, 2026
Contributor
alvarosabu
left a comment
alvarosabu
left a comment
There was a problem hiding this comment.
Nice refactor @formfcw.
I believe we can abstract a lot of repeated logic into this use-collab-indicator with computed properties, cleaner and easy to maintain.
| <template> | ||
| <div class="collab-field"> | ||
| <template v-for="(user, index) in users.slice(0, COLLAB_USERS_DISPLAY_LIMIT)" :key="user.id"> | ||
| <template v-for="(user, index) in users.slice(0, indicatorLimit)" :key="user.id"> |
Contributor
There was a problem hiding this comment.
Suggestion:
Since you are passing down the users on L25, I would rather have a computed visibleUsers on the useCollabIndicator since its directly tied to the computed limit
// use-collab-indicator.ts
export function useCollabIndicator<T>(users: ComputedRef<T[]>) {
// ...existing breakpoint logic...
const indicatorLimit = computed(() => {
const actualLimit = shouldDisplayMinimal() ? 2 : 4;
if (users.value.length > actualLimit) return actualLimit - 1;
return actualLimit;
});
const visibleUsers = computed(() => users.value.slice(0, indicatorLimit.value));
return { indicatorLimit, visibleUsers };
}
Comment on lines
+94
to
+97
Contributor
There was a problem hiding this comment.
Following https://github.com/directus/directus/pull/27162/changes#r3126614384 approach, you can have computed properties for all these
// use-collab-indicator.ts
const hiddenUsers = computed(() => users.value.slice(indicatorLimit.value));
const overflowCount = computed(() => users.value.length - indicatorLimit.value);
const hasOverflow = computed(() => overflowCount.value > 0);And then the template becomes cleaner:
<template v-for="(user, index) in visibleUsers" :key="user.id">
<!-- ... -->
<VMenu v-if="hasOverflow">
<template #activator="{ toggle }">
<VAvatar>+{{ overflowCount }}</VAvatar>
</template>
<VList>
<VListItem v-for="user in hiddenUsers" :key="user.connection">
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Scope
What's changed:
CollabIndicatorHeader/CollabIndicatorFielduser-limit responsive instead of a fixed constant of 3. Extracted logic into a newuseCollabIndicatorcomposable that returns a limit of 4 (default) or 2 (small viewports / inline drawer contexts), and reserves a slot for the+Noverflow avatar only when it is actually needed.COLLAB_USERS_DISPLAY_LIMITconstant and the unreferenced.more-usersCSS class fromCollabIndicatorHeader.vue.labelMin(25rem) threshold to a sharedxs: 28rembreakpoint, added in bothconstants.tsand_breakpoints.scss(kept in sync).PrivateViewHeaderBarActionButtonnow consumes the shared token instead of declaring its own.comment-item-header.vue: replaceflex-basis: 1.375rem(which clamped width) withflex-shrink: 0(preserves natural size, still won't be squeezed).useInjectHeaderBarInlineclarifying its return value.Potential Risks / Drawbacks
—
Tested Scenarios
+N) and narrow screen / inline drawer (expect up to 2 ++N).CollabIndicatorField): same user counts, same breakpoints.xs/sm/lgthresholds — labels collapse to icons at the right widths, tooltip still appears in icon-only state.x-smallcircular, doesn't compress.Review Notes / Questions
limit - 1avatars ++N, which differs slightly from the previous "always render limit, then+N" behavior.Checklist
Addresses CMS-1943