Merge pull request #5185 from element-hq/feature/bma/invitePoepleUi

Iterate on invite people UI

Author: bmarty

features/invitepeople/impl/src/main/kotlin/io/element/android/features/invitepeople/impl/InvitePeopleView.kt

@@ -30,7 +30,6 @@ import io.element.android.libraries.designsystem.components.async.AsyncLoading
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.SearchBar
 import io.element.android.libraries.designsystem.theme.components.SearchBarResultState
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -192,10 +191,6 @@ private fun InvitePeopleSearchBar(
                         onCheckedChange = { onToggleUser(invitableUser.matrixUser) },
                         modifier = Modifier.fillMaxWidth()
                     )
-
-                    if (index < results.lastIndex) {
-                        HorizontalDivider()
-                    }
                 }
             }
         },

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/SelectedIndicatorAtom.kt

@@ -0,0 +1,81 @@
+/*
+ * 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.atomic.atoms
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.selection.toggleable
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.Role
+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.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.Icon
+
+@Composable
+fun SelectedIndicatorAtom(
+    checked: Boolean,
+    enabled: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    if (checked) {
+        Icon(
+            modifier = modifier.toggleable(
+                value = true,
+                role = Role.Companion.Checkbox,
+                enabled = enabled,
+                onValueChange = {},
+            ),
+            imageVector = CompoundIcons.CheckCircleSolid(),
+            contentDescription = null,
+            tint = if (enabled) {
+                ElementTheme.colors.iconAccentPrimary
+            } else {
+                ElementTheme.colors.iconDisabled
+            },
+        )
+    } else {
+        Box(modifier)
+    }
+}
+
+@Composable
+@PreviewsDayNight
+internal fun SelectedIndicatorAtomPreview() = ElementPreview {
+    Column(
+        modifier = Modifier.padding(8.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        SelectedIndicatorAtom(
+            modifier = Modifier.size(24.dp),
+            checked = false,
+            enabled = false,
+        )
+        SelectedIndicatorAtom(
+            modifier = Modifier.size(24.dp),
+            checked = true,
+            enabled = false,
+        )
+        SelectedIndicatorAtom(
+            modifier = Modifier.size(24.dp),
+            checked = false,
+            enabled = true,
+        )
+        SelectedIndicatorAtom(
+            modifier = Modifier.size(24.dp),
+            checked = true,
+            enabled = true,
+        )
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt

@@ -24,7 +24,7 @@ enum class AvatarSize(val dp: Dp) {
     UserHeader(96.dp),
     UserListItem(36.dp),
 
-    SelectedUser(56.dp),
+    SelectedUser(52.dp),
     SelectedRoom(56.dp),
 
     DmCluster(75.dp),

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CheckableUserRow.kt

@@ -19,10 +19,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.atomic.atoms.SelectedIndicatorAtom
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
-import io.element.android.libraries.designsystem.theme.components.Checkbox
 import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.matrix.ui.model.getAvatarData
 
@@ -50,21 +50,21 @@ fun CheckableUserRow(
                     avatarData = data.avatarData,
                     name = data.name,
                     subtext = data.subtext,
+                    enabled = enabled,
                 )
             }
             is CheckableUserRowData.Unresolved -> {
                 UnresolvedUserRow(
                     modifier = rowModifier,
                     avatarData = data.avatarData,
                     id = data.id,
+                    enabled = enabled,
                 )
             }
         }
-
-        Checkbox(
-            modifier = Modifier.padding(end = 4.dp),
+        SelectedIndicatorAtom(
+            modifier = Modifier.padding(end = 24.dp),
             checked = checked,
-            onCheckedChange = null,
             enabled = enabled,
         )
     }

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserProvider.kt

@@ -15,7 +15,24 @@ open class MatrixUserProvider : PreviewParameterProvider<MatrixUser> {
     override val values: Sequence<MatrixUser>
         get() = sequenceOf(
             aMatrixUser(),
-            aMatrixUser().copy(displayName = null),
+            aMatrixUser(displayName = null),
+        )
+}
+
+open class MatrixUserWithNullProvider : PreviewParameterProvider<MatrixUser?> {
+    override val values: Sequence<MatrixUser?>
+        get() = sequenceOf(
+            aMatrixUser(),
+            aMatrixUser(displayName = null),
+            null,
+        )
+}
+
+open class MatrixUserWithAvatarProvider : PreviewParameterProvider<MatrixUser?> {
+    override val values: Sequence<MatrixUser?>
+        get() = sequenceOf(
+            aMatrixUser(displayName = "John Doe"),
+            aMatrixUser(displayName = "John Doe", avatarUrl = "anUrl"),
         )
 }
 
@@ -41,12 +58,3 @@ fun aMatrixUserList() = listOf(
     aMatrixUser("@victor:server.org", "Victor"),
     aMatrixUser("@walter:server.org", "Walter"),
 )
-
-open class MatrixUserWithNullProvider : PreviewParameterProvider<MatrixUser?> {
-    override val values: Sequence<MatrixUser?>
-        get() = sequenceOf(
-            aMatrixUser(),
-            aMatrixUser().copy(displayName = null),
-            null,
-        )
-}

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt

@@ -28,7 +28,7 @@ fun MatrixUserRow(
     name = matrixUser.getBestName(),
     subtext = if (matrixUser.displayName.isNullOrEmpty()) null else matrixUser.userId.value,
     modifier = modifier,
-    trailingContent,
+    trailingContent = trailingContent,
 )
 
 @PreviewsDayNight

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectRoomInfoProvider.kt

@@ -20,7 +20,7 @@ class SelectRoomInfoProvider : PreviewParameterProvider<SelectRoomInfo> {
         get() = sequenceOf(
             aSelectRoomInfo(roomId = RoomId("!room1:domain")),
             aSelectRoomInfo(roomId = RoomId("!room2:domain"), name = "Room with a name"),
-            aSelectRoomInfo(roomId = RoomId("!room3:domain"), name = "Room with a name and alias", canonicalAlias = RoomAlias("#alias:domain")),
+            aSelectRoomInfo(roomId = RoomId("!room3:domain"), name = "Room with a name and avatar", avatarUrl = "anUrl"),
         )
 }
 

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedItem.kt

@@ -0,0 +1,148 @@
+/*
+ * 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.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.MaterialTheme
+import androidx.compose.material3.ripple
+import androidx.compose.runtime.Composable
+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.clipToBounds
+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.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+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.AvatarType
+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.designsystem.theme.components.Text
+import io.element.android.libraries.ui.strings.CommonStrings
+
+@Composable
+fun SelectedItem(
+    avatarData: AvatarData,
+    avatarType: AvatarType,
+    text: String,
+    maxLines: Int,
+    a11yContentDescription: String,
+    canRemove: Boolean,
+    onRemoveClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val actionRemove = stringResource(id = CommonStrings.action_remove)
+    Box(
+        modifier = modifier
+            .width(avatarData.size.dp)
+            .clearAndSetSemantics {
+                contentDescription = a11yContentDescription
+                if (canRemove) {
+                    // Note: this does not set the click effect to the whole Box
+                    // when talkback is not enabled
+                    onClick(
+                        label = actionRemove,
+                        action = {
+                            onRemoveClick()
+                            true
+                        }
+                    )
+                }
+            }
+    ) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
+            val closeIconRadius = 12.dp.toPx()
+            val closeIconOffset = 10.dp.toPx()
+            Avatar(
+                avatarData = avatarData,
+                avatarType = avatarType,
+                modifier = Modifier
+                    .graphicsLayer {
+                        compositingStrategy = CompositingStrategy.Offscreen
+                    }
+                    .drawWithContent {
+                        drawContent()
+                        if (canRemove) {
+                            val xOffset = if (isRtl) {
+                                closeIconOffset
+                            } else {
+                                size.width - closeIconOffset
+                            }
+                            drawCircle(
+                                color = Color.Black,
+                                center = Offset(
+                                    x = xOffset,
+                                    y = closeIconOffset,
+                                ),
+                                radius = closeIconRadius,
+                                blendMode = BlendMode.Clear,
+                            )
+                        }
+                    },
+            )
+            Text(
+                modifier = Modifier.clipToBounds(),
+                text = text,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = maxLines,
+                style = MaterialTheme.typography.bodyMedium,
+                color = ElementTheme.colors.textSecondary,
+                textAlign = TextAlign.Center,
+            )
+        }
+        if (canRemove) {
+            Surface(
+                color = ElementTheme.colors.bgActionPrimaryRest,
+                modifier = Modifier
+                    .clip(CircleShape)
+                    .size(20.dp)
+                    .align(Alignment.TopEnd)
+                    .clickable(
+                        indication = ripple(),
+                        interactionSource = remember { MutableInteractionSource() },
+                        onClick = onRemoveClick,
+                    ),
+            ) {
+                Icon(
+                    imageVector = CompoundIcons.Close(),
+                    // Note: keep the context description for the test
+                    contentDescription = stringResource(id = CommonStrings.action_remove),
+                    tint = ElementTheme.colors.iconOnSolidPrimary,
+                    modifier = Modifier.padding(2.dp)
+                )
+            }
+        }
+    }
+}