feat: updated ux for adding participants [WPB-6294] (#3438)

wireapp · Sep 13, 2024 · 1e8ac6d · 1e8ac6d
1 parent 466c428
commit 1e8ac6d
Show file tree

Hide file tree

Showing 28 changed files with 543 additions and 191 deletions.
diff --git a/app/src/main/kotlin/com/wire/android/mapper/ContactMapper.kt b/app/src/main/kotlin/com/wire/android/mapper/ContactMapper.kt
@@ -45,6 +45,7 @@ class ContactMapper
                 id = id.value,
                 domain = id.domain,
                 name = name.orEmpty(),
+                handle = handle.orEmpty(),
                 label = UsernameMapper.fromOtherUser(otherUser),
                 avatarData = UserAvatarData(
                     asset = previewPicture?.let { ImageAsset.UserAvatarAsset(wireSessionImageLoader, it) },
@@ -63,6 +64,7 @@ class ContactMapper
                 id = id.id,
                 domain = id.provider,
                 name = name,
+                handle = String.EMPTY,
                 label = String.EMPTY,
                 avatarData = UserAvatarData(
                     asset = previewAssetId?.let { ImageAsset.UserAvatarAsset(wireSessionImageLoader, it) },
@@ -79,7 +81,8 @@ class ContactMapper
             return Contact(
                 id = id.value,
                 domain = id.domain,
-                name = name ?: String.EMPTY,
+                name = name.orEmpty(),
+                handle = handle.orEmpty(),
                 label = mapUserHandle(user),
                 avatarData = UserAvatarData(
                     asset = previewAssetId?.let { ImageAsset.UserAvatarAsset(wireSessionImageLoader, it) },

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/AddContactButton.kt b/app/src/main/kotlin/com/wire/android/ui/common/AddContactButton.kt
@@ -59,6 +59,8 @@ fun AddContactButton(
             iconResource = R.drawable.ic_add_contact,
             contentDescription = R.string.content_description_add_contact,
             loading = isPerformingAction,
+            minSize = dimensions().buttonSmallMinSize,
+            minClickableSize = dimensions().buttonSmallMinSize,
             modifier = modifier
         )
     }

diff --git a/...n/kotlin/com/wire/android/ui/home/conversations/search/InternalContactSearchResultItem.kt b/...n/kotlin/com/wire/android/ui/home/conversations/search/InternalContactSearchResultItem.kt
@@ -26,7 +26,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
 import com.wire.android.appLogger
 import com.wire.android.model.Clickable
 import com.wire.android.model.ItemActionType
@@ -55,23 +54,14 @@ fun InternalContactSearchResultItem(
     searchQuery: String,
     connectionState: ConnectionState,
     onCheckChange: (Boolean) -> Unit,
-    isAddedToGroup: Boolean,
+    isSelected: Boolean,
     clickable: Clickable,
     actionType: ItemActionType,
     modifier: Modifier = Modifier
 ) {
     RowItemTemplate(
         leadingIcon = {
-            Row(verticalAlignment = CenterVertically) {
-                if (actionType.checkable) {
-                    WireCheckbox(
-                        checked = isAddedToGroup,
-                        onCheckedChange = null, // null since we are handling the click on parent
-                        modifier = Modifier.padding(horizontal = dimensions().spacing8x)
-                    )
-                }
                 UserProfileAvatar(avatarData)
-            }
         },
         titleStartPadding = dimensions().spacing0x,
         title = {
@@ -99,15 +89,25 @@ fun InternalContactSearchResultItem(
                 Box(
                     modifier = Modifier
                         .wrapContentWidth()
-                        .padding(end = 8.dp)
+                        .padding(end = dimensions().spacing4x)
                 ) {
                     ArrowRightIcon(Modifier.align(Alignment.TopEnd))
                 }
+            } else if (actionType.checkable) {
+                WireCheckbox(
+                    checked = isSelected,
+                    onCheckedChange = null, // null since we are handling the click on parent,
+                )
             }
         },
         clickable =
-            if (actionType.clickable) clickable
-            else Clickable { onCheckChange(!isAddedToGroup) },
+            if (actionType.clickable) {
+                clickable
+            } else {
+                Clickable {
+                    onCheckChange(!isSelected)
+                }
+            },
         modifier = modifier.padding(start = dimensions().spacing8x)
     )
 }
@@ -185,7 +185,7 @@ fun PreviewInternalContactSearchResultItemCheckable() = WireTheme {
         searchQuery = "",
         connectionState = ConnectionState.ACCEPTED,
         onCheckChange = {},
-        isAddedToGroup = false,
+        isSelected = false,
         clickable = Clickable {},
         actionType = ItemActionType.CHECK,
     )
@@ -201,7 +201,7 @@ fun PreviewInternalContactSearchResultItemClickable() = WireTheme {
         searchQuery = "",
         connectionState = ConnectionState.ACCEPTED,
         onCheckChange = {},
-        isAddedToGroup = false,
+        isSelected = false,
         clickable = Clickable {},
         actionType = ItemActionType.CLICK,
     )
@@ -217,7 +217,7 @@ fun PreviewExternalContactSearchResultItem() = WireTheme {
         label = "label",
         membership = Membership.None,
         searchQuery = "",
-        connectionState = ConnectionState.ACCEPTED,
+        connectionState = ConnectionState.NOT_CONNECTED,
         clickable = Clickable {},
     )
 }