From 08bbd7219c41a80a595598693373d83f4599ec3b Mon Sep 17 00:00:00 2001 From: ganfra Date: Fri, 13 Jun 2025 18:12:57 +0200 Subject: [PATCH] change (room avatar) : introduce TextAvatar component --- .../components/avatar/TextAvatar.kt | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TextAvatar.kt diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TextAvatar.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TextAvatar.kt new file mode 100644 index 0000000000..b63b99678e --- /dev/null +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TextAvatar.kt @@ -0,0 +1,76 @@ +/* + * Copyright 2025 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial + * Please see LICENSE files in the repository root for full details. + */ + +package io.element.android.libraries.designsystem.components.avatar + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.requiredSize +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.semantics.clearAndSetSemantics +import androidx.compose.ui.semantics.contentDescription +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import io.element.android.compound.theme.AvatarColors +import io.element.android.compound.theme.ElementTheme +import io.element.android.libraries.designsystem.preview.ElementPreview +import io.element.android.libraries.designsystem.preview.PreviewGroup +import io.element.android.libraries.designsystem.text.toSp +import io.element.android.libraries.designsystem.theme.components.Text + +@Composable +internal fun TextAvatar( + text: String, + size: Dp, + colors: AvatarColors, + contentDescription: String?, + modifier: Modifier = Modifier, +) { + Box( + modifier + .requiredSize(size) + .clip(CircleShape) + .background(color = colors.background) + ) { + val fontSize = size.toSp() / 2 + val originalFont = ElementTheme.typography.fontHeadingMdBold + val ratio = fontSize.value / originalFont.fontSize.value + val lineHeight = originalFont.lineHeight * ratio + Text( + modifier = Modifier + .clearAndSetSemantics { + contentDescription?.let { + this.contentDescription = it + } + } + .align(Alignment.Center), + text = text, + style = originalFont.copy(fontSize = fontSize, lineHeight = lineHeight, letterSpacing = 0.sp), + color = colors.foreground, + ) + } +} + +@Preview(group = PreviewGroup.Avatars) +@Composable +internal fun TextAvatarPreview() = ElementPreview { + TextAvatar( + text = "AB", + size = 40.dp, + colors = AvatarColors( + background = ElementTheme.colors.bgSubtlePrimary, + foreground = ElementTheme.colors.iconPrimary, + ), + contentDescription = null, + ) + }