feat: change visual representation of stacked avatars #793
Conversation
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
Contributor
There was a problem hiding this comment.
Pull Request Overview
Refactors the stacked avatars component to dynamically assign z-index values for proper layering.
- Introduces a
avatarsReftemplate reference to the avatars container - Adds an
onMountedhook to set decreasingz-indexon each avatar element - Imports new Vue APIs (
useTemplateRef,unref,onMounted)
Comments suppressed due to low confidence (3)
packages/design-system/src/components/OcAvatars/OcAvatars.vue:39
- Vue does not export
useTemplateRef; consider usingref<HTMLElement|null>()for template refs instead of a nonexistent API.
import { computed, onMounted, unref, useTemplateRef } from 'vue'
packages/design-system/src/components/OcAvatars/OcAvatars.vue:110
- The
observervariable is declared but never used; it can be safely removed to reduce clutter.
const observer = null
packages/design-system/src/components/OcAvatars/OcAvatars.vue:169
- The
onMountedhook always applies z-index styling; it should be guarded (e.g., only run whenstackedis true) to avoid unnecessary work when avatars aren’t stacked.
onMounted(() => {
AlexAndBear
commented
Jun 3, 2025
kulmann
reviewed
Jun 4, 2025
| const avatarElements = Array.from(unref(avatarsRef).children) | ||
| avatarElements.forEach((child, index) => { |
Contributor
There was a problem hiding this comment.
We can avoid the repaint. You can give the desired z-index as property to all the avatars individually and then inside oc-avatar use the prop for a css variable.
Contributor
Author
There was a problem hiding this comment.
I am not sure if this is possible, since we have a slot for #userAvatars 🤔
Contributor
Author
|
@kulmann I think it's finally time to close the chapter avatars ;) |
AlexAndBear
force-pushed
the
oc-avatars-change-direction
branch
from
af9e527 to
fb94a04
Compare
kulmann
reviewed
Jun 5, 2025
openclouders
pushed a commit
that referenced
this pull request
Jun 5, 2025
Co-authored-by: Benedikt Kulmann <b.kulmann@opencloud.eu>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Before
After
Related Issue
How Has This Been Tested?
Types of changes