recipient chip view

relaycorp · Sep 15, 2023 · 5a2184a · 5a2184a
1 parent 092a81b
commit 5a2184a
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 14 deletions.
diff --git a/app/src/main/java/tech/relaycorp/letro/messages/compose/ComposeNewMessageScreen.kt b/app/src/main/java/tech/relaycorp/letro/messages/compose/ComposeNewMessageScreen.kt
@@ -1,6 +1,7 @@
 package tech.relaycorp.letro.messages.compose
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -9,15 +10,18 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Divider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -40,6 +44,7 @@ import tech.relaycorp.letro.contacts.ui.ContactView
 import tech.relaycorp.letro.ui.common.LetroButton
 import tech.relaycorp.letro.ui.common.LetroTextField
 import tech.relaycorp.letro.ui.theme.HorizontalScreenPadding
+import tech.relaycorp.letro.ui.theme.LetroColor
 
 @Composable
 fun CreateNewMessageScreen(
@@ -147,15 +152,32 @@ fun CreateNewMessageScreen(
                 style = MaterialTheme.typography.bodyLarge,
                 color = MaterialTheme.colorScheme.onSurfaceVariant,
             )
-            LetroTextField(
-                modifier = Modifier.fillMaxWidth(),
-                value = recipientTextFieldValueState,
-                textStyle = MaterialTheme.typography.bodyLarge,
-                onValueChange = {
-                    recipientTextFieldValueState = it
-                    viewModel.onRecipientTextChanged(it.text)
-                },
-            )
+            if (uiState.showRecipientAsChip) {
+                Spacer(modifier = Modifier.width(16.dp))
+                Box(
+                    contentAlignment = Alignment.CenterStart,
+                ) {
+                    RecipientChipView(
+                        text = uiState.recipient,
+                        onRemoveClick = {
+                            viewModel.onRecipientRemoveClick()
+                            recipientTextFieldValueState = TextFieldValue()
+                        }
+                    )
+                    Spacer(modifier = Modifier.height(TextFieldDefaults.MinHeight))
+                }
+            } else {
+                LetroTextField(
+                    value = recipientTextFieldValueState,
+                    textStyle = MaterialTheme.typography.bodyLarge,
+                    onValueChange = {
+                        recipientTextFieldValueState = it
+                        if (it.composition != null) {
+                            viewModel.onRecipientTextChanged(it.text)
+                        }
+                    },
+                )
+            }
         }
         Divider()
         Box {
@@ -207,7 +229,8 @@ fun CreateNewMessageScreen(
                             placeHolderText = stringResource(id = R.string.new_message_body_hint),
                             singleLine = false,
                             placeholderColor = MaterialTheme.colorScheme.onSurfaceVariant,
-                            modifier = Modifier.fillMaxSize()
+                            modifier = Modifier
+                                .fillMaxSize()
                                 .onFocusChanged { viewModel.onMessageTextFieldFocused(it.isFocused) },
                         )
                     }
@@ -218,7 +241,7 @@ fun CreateNewMessageScreen(
 }
 
 @Composable
-fun SuggestContactsList(
+private fun SuggestContactsList(
     contacts: List<Contact>,
     onContactClick: (Contact) -> Unit,
 ) {
@@ -240,3 +263,37 @@ fun SuggestContactsList(
         }
     }
 }
+
+@Composable
+private fun RecipientChipView(
+    text: String,
+    onRemoveClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier
+            .background(
+                color = MaterialTheme.colorScheme.surfaceVariant,
+                shape = RoundedCornerShape(80.dp)
+            )
+            .padding(
+                horizontal = 12.dp,
+                vertical = 6.dp,
+            )
+    ) {
+        Text(
+            text = text,
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurface,
+        )
+        Spacer(modifier = Modifier.width(8.dp))
+        Icon(
+            painter = painterResource(id = R.drawable.ic_chip_delete),
+            contentDescription = stringResource(id = R.string.content_description_recipient_clear),
+            tint = LetroColor.OnSurfaceContainer,
+            modifier = Modifier
+                .clickable { onRemoveClick() }
+        )
+    }
+}
diff --git a/app/src/main/java/tech/relaycorp/letro/messages/compose/ComposeNewMessageViewModel.kt b/app/src/main/java/tech/relaycorp/letro/messages/compose/ComposeNewMessageViewModel.kt
@@ -64,18 +64,34 @@ class CreateNewMessageViewModel @Inject constructor(
                     recipient = contact.contactVeraId,
                     suggestedContacts = null,
                     showRecipientIsNotYourContactError = false,
-                    isSendButtonEnabled = isSendButtonEnabled(contact.contactVeraId, it.messageText),
+                    showRecipientAsChip = true,
+                    isSendButtonEnabled = isSendButtonEnabled(contact.contactVeraId, it.messageText)
+                )
+            }
+        }
+    }
+
+    fun onRecipientRemoveClick() {
+        viewModelScope.launch {
+            _uiState.update {
+                it.copy(
+                    recipient = "",
+                    suggestedContacts = null,
+                    showRecipientIsNotYourContactError = false,
+                    showRecipientAsChip = false,
+                    isSendButtonEnabled = false,
                 )
             }
         }
     }
 
     fun onSubjectTextChanged(text: String) {
         viewModelScope.launch {
+            val isFromContacts = contacts.any { it.contactVeraId == uiState.value.recipient }
             _uiState.update {
                 it.copy(
                     subject = text,
-                    showRecipientIsNotYourContactError = !contacts.any { it.contactVeraId == uiState.value.recipient },
+                    showRecipientAsChip = isFromContacts,
                 )
             }
         }
@@ -87,7 +103,6 @@ class CreateNewMessageViewModel @Inject constructor(
                 it.copy(
                     messageText = text,
                     suggestedContacts = null,
-                    showRecipientIsNotYourContactError = !contacts.any { it.contactVeraId == uiState.value.recipient },
                     isSendButtonEnabled = isSendButtonEnabled(uiState.value.recipient, text),
                 )
             }
@@ -140,5 +155,6 @@ data class NewMessageUiState(
     val messageText: String = "",
     val showRecipientIsNotYourContactError: Boolean = false,
     val isSendButtonEnabled: Boolean = false,
+    val showRecipientAsChip: Boolean = false,
     val suggestedContacts: List<Contact>? = null,
 )
diff --git a/app/src/main/res/drawable/ic_chip_delete.xml b/app/src/main/res/drawable/ic_chip_delete.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <group>
+    <clip-path
+        android:pathData="M0,0h16v16h-16z"/>
+    <path
+        android:pathData="M8,8.777L10.264,11.041C10.366,11.143 10.495,11.195 10.649,11.198C10.804,11.2 10.934,11.148 11.041,11.041C11.148,10.934 11.201,10.805 11.201,10.653C11.201,10.501 11.148,10.371 11.041,10.264L8.776,8L11.041,5.736C11.143,5.634 11.195,5.505 11.198,5.351C11.2,5.196 11.148,5.066 11.041,4.959C10.934,4.852 10.805,4.799 10.653,4.799C10.501,4.799 10.371,4.852 10.264,4.959L8,7.224L5.736,4.959C5.634,4.857 5.505,4.805 5.351,4.803C5.196,4.8 5.066,4.852 4.959,4.959C4.852,5.066 4.799,5.195 4.799,5.347C4.799,5.499 4.852,5.629 4.959,5.736L7.223,8L4.959,10.264C4.857,10.366 4.805,10.495 4.803,10.649C4.8,10.804 4.852,10.934 4.959,11.041C5.066,11.148 5.195,11.201 5.347,11.201C5.499,11.201 5.629,11.148 5.736,11.041L8,8.777ZM8.001,15C7.033,15 6.123,14.816 5.271,14.449C4.419,14.081 3.678,13.583 3.048,12.953C2.418,12.323 1.919,11.582 1.551,10.731C1.184,9.879 1,8.969 1,8.001C1,7.033 1.184,6.123 1.551,5.271C1.919,4.419 2.417,3.678 3.047,3.048C3.677,2.418 4.418,1.919 5.269,1.551C6.121,1.184 7.031,1 7.999,1C8.967,1 9.877,1.184 10.729,1.551C11.581,1.919 12.322,2.417 12.952,3.047C13.582,3.677 14.081,4.418 14.449,5.269C14.816,6.121 15,7.031 15,7.999C15,8.967 14.816,9.877 14.449,10.729C14.081,11.581 13.583,12.322 12.953,12.952C12.323,13.582 11.582,14.081 10.731,14.449C9.879,14.816 8.969,15 8.001,15Z"
+        android:fillColor="#6D7B9E"/>
+  </group>
+</vector>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -75,6 +75,7 @@
     <string name="new_message_subject_hint">Subject</string>
     <string name="new_message_body_hint">Type your message…</string>
     <string name="you_not_connected_to_this_contact_error">You’re not connected to this contact.</string>
+    <string name="content_description_recipient_clear">Clear recipient</string>
 
     <string name="new_contact_id_hint">[email protected]</string>
     <string name="new_contact_alias_hint">James Bond</string>