From 3391cfb7ef7f374a7f0ed43313aa61717237c584 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Wed, 20 Aug 2025 15:17:53 +0200 Subject: [PATCH] Add UI component EditableOrgAvatar Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3643-2678&m=dev --- .../components/avatar/AvatarDataProvider.kt | 8 +- .../components/avatar/AvatarSize.kt | 2 + .../matrix/ui/components/EditableOrgAvatar.kt | 159 ++++++++++++++++++ 3 files changed, 166 insertions(+), 3 deletions(-) create mode 100644 libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/EditableOrgAvatar.kt diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarDataProvider.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarDataProvider.kt index 3c209df2cf..7ccebd2082 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarDataProvider.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarDataProvider.kt @@ -16,8 +16,8 @@ open class AvatarDataProvider : PreviewParameterProvider { .map { sequenceOf( anAvatarData(size = it), - anAvatarData(size = it).copy(name = null), - anAvatarData(size = it).copy(url = "aUrl"), + anAvatarData(size = it, name = null), + anAvatarData(size = it, url = "aUrl"), ) } .flatten() @@ -26,10 +26,12 @@ open class AvatarDataProvider : PreviewParameterProvider { fun anAvatarData( // Let's the id not start with a 'a'. id: String = "@id_of_alice:server.org", - name: String = "Alice", + name: String? = "Alice", + url: String? = null, size: AvatarSize = AvatarSize.RoomListItem, ) = AvatarData( id = id, name = name, + url = url, size = size, ) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt index 622fd54547..58fbe74674 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt @@ -63,4 +63,6 @@ enum class AvatarSize(val dp: Dp) { DmCreationConfirmation(64.dp), UserVerification(52.dp), + + OrganizationHeader(64.dp), } diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/EditableOrgAvatar.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/EditableOrgAvatar.kt new file mode 100644 index 0000000000..d7257a494f --- /dev/null +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/EditableOrgAvatar.kt @@ -0,0 +1,159 @@ +/* + * 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.matrix.ui.components + +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.ripple +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.drawWithContent +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.BlendMode +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.CompositingStrategy +import androidx.compose.ui.graphics.graphicsLayer +import androidx.compose.ui.platform.LocalLayoutDirection +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.semantics.clearAndSetSemantics +import androidx.compose.ui.semantics.contentDescription +import androidx.compose.ui.semantics.onClick +import androidx.compose.ui.unit.LayoutDirection +import androidx.compose.ui.unit.dp +import io.element.android.compound.theme.ElementTheme +import io.element.android.compound.tokens.generated.CompoundIcons +import io.element.android.libraries.designsystem.components.avatar.Avatar +import io.element.android.libraries.designsystem.components.avatar.AvatarData +import io.element.android.libraries.designsystem.components.avatar.AvatarSize +import io.element.android.libraries.designsystem.components.avatar.AvatarType +import io.element.android.libraries.designsystem.components.avatar.anAvatarData +import io.element.android.libraries.designsystem.preview.ElementPreview +import io.element.android.libraries.designsystem.preview.PreviewsDayNight +import io.element.android.libraries.designsystem.text.toPx +import io.element.android.libraries.designsystem.theme.components.Icon +import io.element.android.libraries.designsystem.theme.components.Surface +import io.element.android.libraries.ui.strings.CommonStrings + +/** + * Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3643-2678&m=dev + */ +@Composable +fun EditableOrgAvatar( + avatarData: AvatarData, + onEdit: () -> Unit, + modifier: Modifier = Modifier, +) { + val actionEdit = stringResource(id = CommonStrings.action_edit) + val description = stringResource(CommonStrings.a11y_avatar) + Box( + modifier = modifier + .width(avatarData.size.dp + 16.dp) + .clearAndSetSemantics { + contentDescription = description + // Note: this does not set the click effect to the whole Box + // when talkback is not enabled + onClick( + label = actionEdit, + action = { + onEdit() + true + } + ) + } + ) { + val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl + val editIconRadius = 17.dp.toPx() + val editIconXOffset = 7.dp.toPx() + val editIconYOffset = 15.dp.toPx() + Avatar( + avatarData = avatarData, + avatarType = AvatarType.Space(false), + modifier = Modifier + .align(Alignment.Center) + .graphicsLayer { + compositingStrategy = CompositingStrategy.Offscreen + } + .drawWithContent { + drawContent() + val xOffset = if (isRtl) { + editIconXOffset + } else { + size.width - editIconXOffset + } + drawCircle( + color = Color.Black, + center = Offset( + x = xOffset, + y = size.height - editIconYOffset, + ), + radius = editIconRadius, + blendMode = BlendMode.Clear, + ) + }, + ) + Surface( + color = ElementTheme.colors.bgCanvasDefault, + modifier = Modifier + .clip(CircleShape) + .size(30.dp) + .border(1.dp, color = ElementTheme.colors.borderInteractiveSecondary, shape = CircleShape) + .align(Alignment.BottomEnd) + .clickable( + indication = ripple(), + interactionSource = remember { MutableInteractionSource() }, + onClick = onEdit, + ), + ) { + Icon( + imageVector = CompoundIcons.Edit(), + // Note: keep the context description for the test + contentDescription = stringResource(id = CommonStrings.action_edit), + tint = ElementTheme.colors.iconPrimary, + modifier = Modifier.padding(6.dp) + ) + } + } +} + +@PreviewsDayNight +@Composable +internal fun EditableOrgAvatarPreview() = ElementPreview { + EditableOrgAvatar( + avatarData = anAvatarData( + url = "anUrl", + size = AvatarSize.OrganizationHeader, + ), + onEdit = {}, + ) +} + +@PreviewsDayNight +@Composable +internal fun EditableOrgAvatarRtlPreview() = CompositionLocalProvider( + LocalLayoutDirection provides LayoutDirection.Rtl, +) { + ElementPreview { + EditableOrgAvatar( + avatarData = anAvatarData( + url = "anUrl", + size = AvatarSize.OrganizationHeader, + ), + onEdit = {}, + ) + } +}