From 341dff7f03e050563cdd4e90bcc67b2d80ebb997 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Mon, 23 Jun 2025 22:00:25 +0200 Subject: [PATCH] Improve preview of AvatarCluster to show all types. --- .../designsystem/components/avatar/Avatar.kt | 2 + .../components/avatar/AvatarCluster.kt | 40 ++++++++++++++----- .../components/avatar/RoomAvatar.kt | 6 ++- .../components/avatar/SpaceAvatar.kt | 6 ++- .../components/avatar/TombstonedRoomAvatar.kt | 8 ++-- 5 files changed, 45 insertions(+), 17 deletions(-) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt index 93e458bfcc..ceb6b64528 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt @@ -38,6 +38,7 @@ fun Avatar( avatarType = avatarType, modifier = modifier, hideAvatarImage = hideImage, + forcedAvatarSize = forcedAvatarSize, contentDescription = contentDescription, ) AvatarType.User -> UserAvatar( @@ -52,6 +53,7 @@ fun Avatar( avatarType = avatarType, modifier = modifier, hideAvatarImage = hideImage, + forcedAvatarSize = forcedAvatarSize, contentDescription = contentDescription, ) } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarCluster.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarCluster.kt index d2dae9e25c..8c1c650aa2 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarCluster.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarCluster.kt @@ -9,6 +9,7 @@ package io.element.android.libraries.designsystem.components.avatar import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.size @@ -98,11 +99,20 @@ internal fun AvatarCluster( y = yOffset, ) ) { - Avatar( + InitialOrImageAvatar( 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, - avatarType = avatarType, - hideImage = hideAvatarImages, + modifier = Modifier, + contentDescription = contentDescription, ) } } @@ -114,14 +124,24 @@ internal fun AvatarCluster( @Preview(group = PreviewGroup.Avatars) @Composable internal fun AvatarClusterPreview() = ElementThemedPreview { - Row( - horizontalArrangement = Arrangement.spacedBy(8.dp) + Column( + verticalArrangement = Arrangement.spacedBy(8.dp), ) { - for (ngOfAvatars in 1..5) { - AvatarCluster( - avatars = List(ngOfAvatars) { anAvatarData(it) }.toPersistentList(), - avatarType = AvatarType.User, - ) + listOf( + AvatarType.User, + AvatarType.Room(), + 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, + ) + } + } } } } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/RoomAvatar.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/RoomAvatar.kt index b194262c95..a27a4e166a 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/RoomAvatar.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/RoomAvatar.kt @@ -9,6 +9,7 @@ package io.element.android.libraries.designsystem.components.avatar import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.Dp @Composable internal fun RoomAvatar( @@ -16,12 +17,13 @@ internal fun RoomAvatar( avatarType: AvatarType.Room, modifier: Modifier = Modifier, hideAvatarImage: Boolean = false, + forcedAvatarSize: Dp? = null, contentDescription: String? = null, ) { when { avatarType.isTombstoned -> { TombstonedRoomAvatar( - size = avatarData.size, + size = forcedAvatarSize ?: avatarData.size.dp, modifier = modifier, avatarShape = avatarType.avatarShape(), contentDescription = contentDescription @@ -32,7 +34,7 @@ internal fun RoomAvatar( avatarData = avatarData, hideAvatarImage = hideAvatarImage, avatarShape = avatarType.avatarShape(), - forcedAvatarSize = null, + forcedAvatarSize = forcedAvatarSize, modifier = modifier, contentDescription = contentDescription, ) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/SpaceAvatar.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/SpaceAvatar.kt index 45d0bf4cc9..bae590c006 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/SpaceAvatar.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/SpaceAvatar.kt @@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview +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.PreviewGroup @@ -23,12 +24,13 @@ internal fun SpaceAvatar( avatarData: AvatarData, avatarType: AvatarType.Space, modifier: Modifier = Modifier, + forcedAvatarSize: Dp? = null, hideAvatarImage: Boolean = false, contentDescription: String? = null, ) { when { avatarType.isTombstoned -> TombstonedRoomAvatar( - size = avatarData.size, + size = forcedAvatarSize ?: avatarData.size.dp, avatarShape = avatarType.avatarShape(), modifier = modifier, contentDescription = contentDescription, @@ -37,7 +39,7 @@ internal fun SpaceAvatar( avatarData = avatarData, hideAvatarImage = hideAvatarImage, avatarShape = avatarType.avatarShape(), - forcedAvatarSize = null, + forcedAvatarSize = forcedAvatarSize, modifier = modifier, contentDescription = contentDescription, ) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TombstonedRoomAvatar.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TombstonedRoomAvatar.kt index 7fcbb13ea1..4610f22514 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TombstonedRoomAvatar.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TombstonedRoomAvatar.kt @@ -12,6 +12,8 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Shape 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.ElementTheme import io.element.android.libraries.designsystem.preview.ElementPreview @@ -19,14 +21,14 @@ import io.element.android.libraries.designsystem.preview.PreviewGroup @Composable internal fun TombstonedRoomAvatar( - size: AvatarSize, + size: Dp, avatarShape: Shape, modifier: Modifier = Modifier, contentDescription: String? = null, ) { TextAvatar( text = "!", - size = size.dp, + size = size, colors = AvatarColors( background = ElementTheme.colors.bgSubtlePrimary, foreground = ElementTheme.colors.iconTertiary @@ -41,7 +43,7 @@ internal fun TombstonedRoomAvatar( @Composable internal fun TombstonedRoomAvatarPreview() = ElementPreview { TombstonedRoomAvatar( - size = AvatarSize.RoomListItem, + size = 52.dp, avatarShape = CircleShape, contentDescription = null, )