Space avatar rounded corner has radius of 25% of the width.

This commit is contained in:
Benoit Marty
2025-06-24 11:00:53 +02:00
parent 6e7696a2fe
commit 475b8543de
6 changed files with 27 additions and 26 deletions

View File

@@ -11,12 +11,22 @@ import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Dp
@Composable
fun AvatarType.avatarShape(): Shape {
fun AvatarType.User.avatarShape() = CircleShape
@Composable
fun AvatarType.Room.avatarShape() = CircleShape
@Composable
fun AvatarType.Space.avatarShape(avatarSize: Dp) = RoundedCornerShape(avatarSize * 0.25f)
@Composable
fun AvatarType.avatarShape(avatarSize: Dp): Shape {
return when (this) {
is AvatarType.Space -> RoundedCornerShape(cornerSize)
is AvatarType.Room,
AvatarType.User -> CircleShape
is AvatarType.Space -> avatarShape(avatarSize)
is AvatarType.Room -> avatarShape()
is AvatarType.User -> avatarShape()
}
}

View File

@@ -8,7 +8,6 @@
package io.element.android.libraries.designsystem.components.avatar
import androidx.compose.runtime.Immutable
import androidx.compose.ui.unit.Dp
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
@@ -22,7 +21,6 @@ sealed interface AvatarType {
) : AvatarType
data class Space(
val cornerSize: Dp,
val isTombstoned: Boolean = false,
) : AvatarType
}

View File

@@ -57,7 +57,7 @@ internal fun AvatarCluster(
InitialOrImageAvatar(
avatarData = limitedAvatars[0],
hideAvatarImage = hideAvatarImages,
avatarShape = avatarType.avatarShape(),
avatarShape = avatarType.avatarShape(limitedAvatars[0].size.dp),
forcedAvatarSize = null,
modifier = modifier,
contentDescription = contentDescription,
@@ -106,14 +106,7 @@ internal fun AvatarCluster(
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(),
avatarShape = avatarType.avatarShape(heroAvatarSize),
forcedAvatarSize = heroAvatarSize,
modifier = Modifier,
contentDescription = contentDescription,
@@ -134,7 +127,7 @@ internal fun AvatarClusterPreview() = ElementThemedPreview {
listOf(
AvatarType.User,
AvatarType.Room(),
AvatarType.Space(8.dp),
AvatarType.Space(),
).forEach { avatarType ->
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp)

View File

@@ -32,17 +32,18 @@ internal fun SpaceAvatar(
hideAvatarImage: Boolean = false,
contentDescription: String? = null,
) {
val size = forcedAvatarSize ?: avatarData.size.dp
when {
avatarType.isTombstoned -> TombstonedRoomAvatar(
size = forcedAvatarSize ?: avatarData.size.dp,
avatarShape = avatarType.avatarShape(),
size = size,
avatarShape = avatarType.avatarShape(size),
modifier = modifier,
contentDescription = contentDescription,
)
else -> InitialOrImageAvatar(
avatarData = avatarData,
hideAvatarImage = hideAvatarImage,
avatarShape = avatarType.avatarShape(),
avatarShape = avatarType.avatarShape(size),
forcedAvatarSize = forcedAvatarSize,
modifier = modifier,
contentDescription = contentDescription,
@@ -62,12 +63,11 @@ internal fun SpaceAvatarPreview() =
) {
SpaceAvatar(
avatarData = anAvatarData(),
avatarType = AvatarType.Space(cornerSize = 16.dp),
avatarType = AvatarType.Space(),
)
SpaceAvatar(
avatarData = anAvatarData(),
avatarType = AvatarType.Space(
cornerSize = 16.dp,
isTombstoned = true,
),
)

View File

@@ -77,7 +77,7 @@ internal fun TextAvatarPreview() = ElementPreview {
listOf(
AvatarType.User,
AvatarType.Room(),
AvatarType.Space(8.dp),
AvatarType.Space(),
).forEach { avatarType ->
TextAvatar(
text = "AB",
@@ -86,7 +86,7 @@ internal fun TextAvatarPreview() = ElementPreview {
background = ElementTheme.colors.bgSubtlePrimary,
foreground = ElementTheme.colors.iconPrimary,
),
avatarShape = avatarType.avatarShape(),
avatarShape = avatarType.avatarShape(40.dp),
contentDescription = null,
)
}

View File

@@ -50,7 +50,7 @@ fun UnsavedAvatar(
) {
val commonModifier = modifier
.size(avatarSize.dp)
.clip(avatarType.avatarShape())
.clip(avatarType.avatarShape(avatarSize.dp))
if (avatarUri != null) {
val context = LocalContext.current
@@ -87,7 +87,7 @@ internal fun UnsavedAvatarPreview() = ElementPreview {
) {
UnsavedAvatar(null, AvatarSize.EditRoomDetails, AvatarType.User)
UnsavedAvatar(Uri.EMPTY, AvatarSize.EditRoomDetails, AvatarType.User)
UnsavedAvatar(null, AvatarSize.EditRoomDetails, AvatarType.Space(8.dp))
UnsavedAvatar(Uri.EMPTY, AvatarSize.EditRoomDetails, AvatarType.Space(8.dp))
UnsavedAvatar(null, AvatarSize.EditRoomDetails, AvatarType.Space())
UnsavedAvatar(Uri.EMPTY, AvatarSize.EditRoomDetails, AvatarType.Space())
}
}