Sulkta-OSS/element-x-ada
3
0
Fork 0
Code Issues 1 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Improve preview of AvatarCluster to show all types.

Browse source
This commit is contained in:
Benoit Marty 2025-06-23 22:00:25 +02:00
parent e1bde435f5
commit 341dff7f03
5 changed files with 45 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt
View file

@ -38,6 +38,7 @@ fun Avatar(
avatarType = avatarType, avatarType = avatarType,
modifier = modifier, modifier = modifier,
hideAvatarImage = hideImage, hideAvatarImage = hideImage,
forcedAvatarSize = forcedAvatarSize,
contentDescription = contentDescription, contentDescription = contentDescription,
) )
AvatarType.User -> UserAvatar( AvatarType.User -> UserAvatar(
@ -52,6 +53,7 @@ fun Avatar(
avatarType = avatarType, avatarType = avatarType,
modifier = modifier, modifier = modifier,
hideAvatarImage = hideImage, hideAvatarImage = hideImage,
forcedAvatarSize = forcedAvatarSize,
contentDescription = contentDescription, contentDescription = contentDescription,
) )
} }

40
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarCluster.kt
View file

@ -9,6 +9,7 @@ package io.element.android.libraries.designsystem.components.avatar
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
@ -98,11 +99,20 @@ internal fun AvatarCluster(
y = yOffset, y = yOffset,
) )
) { ) {
Avatar( InitialOrImageAvatar(
avatarData = heroAvatar, avatarData = heroAvatar,
hideAvatarImage = hideAvatarImages,
avatarShape = avatarType.let { avatarType ->
if (avatarType is AvatarType.Space) {
// Reduce corner size for small Space avatars
avatarType.copy(cornerSize = avatarType.cornerSize / 2f)
} else {
avatarType
}
}.avatarShape(),
forcedAvatarSize = heroAvatarSize, forcedAvatarSize = heroAvatarSize,
avatarType = avatarType, modifier = Modifier,
hideImage = hideAvatarImages, contentDescription = contentDescription,
) )
} }
} }
@ -114,14 +124,24 @@ internal fun AvatarCluster(
@Preview(group = PreviewGroup.Avatars) @Preview(group = PreviewGroup.Avatars)
@Composable @Composable
internal fun AvatarClusterPreview() = ElementThemedPreview { internal fun AvatarClusterPreview() = ElementThemedPreview {
Row( Column(
horizontalArrangement = Arrangement.spacedBy(8.dp) verticalArrangement = Arrangement.spacedBy(8.dp),
) { ) {
for (ngOfAvatars in 1..5) { listOf(
AvatarCluster( AvatarType.User,
avatars = List(ngOfAvatars) { anAvatarData(it) }.toPersistentList(), AvatarType.Room(),
avatarType = AvatarType.User, AvatarType.Space(8.dp),
) ).forEach { avatarType ->
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
for (ngOfAvatars in 1..5) {
AvatarCluster(
avatars = List(ngOfAvatars) { anAvatarData(it) }.toPersistentList(),
avatarType = avatarType,
)
}
}
} }
} }
} }

6
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/RoomAvatar.kt
View file

@ -9,6 +9,7 @@ package io.element.android.libraries.designsystem.components.avatar
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
@Composable @Composable
internal fun RoomAvatar( internal fun RoomAvatar(
@ -16,12 +17,13 @@ internal fun RoomAvatar(
avatarType: AvatarType.Room, avatarType: AvatarType.Room,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
hideAvatarImage: Boolean = false, hideAvatarImage: Boolean = false,
forcedAvatarSize: Dp? = null,
contentDescription: String? = null, contentDescription: String? = null,
) { ) {
when { when {
avatarType.isTombstoned -> { avatarType.isTombstoned -> {
TombstonedRoomAvatar( TombstonedRoomAvatar(
size = avatarData.size, size = forcedAvatarSize ?: avatarData.size.dp,
modifier = modifier, modifier = modifier,
avatarShape = avatarType.avatarShape(), avatarShape = avatarType.avatarShape(),
contentDescription = contentDescription contentDescription = contentDescription
@ -32,7 +34,7 @@ internal fun RoomAvatar(
avatarData = avatarData, avatarData = avatarData,
hideAvatarImage = hideAvatarImage, hideAvatarImage = hideAvatarImage,
avatarShape = avatarType.avatarShape(), avatarShape = avatarType.avatarShape(),
forcedAvatarSize = null, forcedAvatarSize = forcedAvatarSize,
modifier = modifier, modifier = modifier,
contentDescription = contentDescription, contentDescription = contentDescription,
) )

6
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/SpaceAvatar.kt
View file

@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.preview.ElementThemedPreview import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup import io.element.android.libraries.designsystem.preview.PreviewGroup
@ -23,12 +24,13 @@ internal fun SpaceAvatar(
avatarData: AvatarData, avatarData: AvatarData,
avatarType: AvatarType.Space, avatarType: AvatarType.Space,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
forcedAvatarSize: Dp? = null,
hideAvatarImage: Boolean = false, hideAvatarImage: Boolean = false,
contentDescription: String? = null, contentDescription: String? = null,
) { ) {
when { when {
avatarType.isTombstoned -> TombstonedRoomAvatar( avatarType.isTombstoned -> TombstonedRoomAvatar(
size = avatarData.size, size = forcedAvatarSize ?: avatarData.size.dp,
avatarShape = avatarType.avatarShape(), avatarShape = avatarType.avatarShape(),
modifier = modifier, modifier = modifier,
contentDescription = contentDescription, contentDescription = contentDescription,
@ -37,7 +39,7 @@ internal fun SpaceAvatar(
avatarData = avatarData, avatarData = avatarData,
hideAvatarImage = hideAvatarImage, hideAvatarImage = hideAvatarImage,
avatarShape = avatarType.avatarShape(), avatarShape = avatarType.avatarShape(),
forcedAvatarSize = null, forcedAvatarSize = forcedAvatarSize,
modifier = modifier, modifier = modifier,
contentDescription = contentDescription, contentDescription = contentDescription,
) )

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TombstonedRoomAvatar.kt
View file

@ -12,6 +12,8 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.AvatarColors import io.element.android.compound.theme.AvatarColors
import io.element.android.compound.theme.ElementTheme import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.ElementPreview
@ -19,14 +21,14 @@ import io.element.android.libraries.designsystem.preview.PreviewGroup
@Composable @Composable
internal fun TombstonedRoomAvatar( internal fun TombstonedRoomAvatar(
size: AvatarSize, size: Dp,
avatarShape: Shape, avatarShape: Shape,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
contentDescription: String? = null, contentDescription: String? = null,
) { ) {
TextAvatar( TextAvatar(
text = "!", text = "!",
size = size.dp, size = size,
colors = AvatarColors( colors = AvatarColors(
background = ElementTheme.colors.bgSubtlePrimary, background = ElementTheme.colors.bgSubtlePrimary,
foreground = ElementTheme.colors.iconTertiary foreground = ElementTheme.colors.iconTertiary
@ -41,7 +43,7 @@ internal fun TombstonedRoomAvatar(
@Composable @Composable
internal fun TombstonedRoomAvatarPreview() = ElementPreview { internal fun TombstonedRoomAvatarPreview() = ElementPreview {
TombstonedRoomAvatar( TombstonedRoomAvatar(
size = AvatarSize.RoomListItem, size = 52.dp,
avatarShape = CircleShape, avatarShape = CircleShape,
contentDescription = null, contentDescription = null,
) )