fix: expanded message composer improvements [WPB-5131] (#2351)

Co-authored-by: yamilmedina <[email protected]>
wireapp · Oct 23, 2023 · f33e2f8 · f33e2f8
1 parent 66df8a7
commit f33e2f8
Show file tree

Hide file tree

Showing 9 changed files with 197 additions and 129 deletions.
diff --git a/app/src/main/kotlin/com/wire/android/ui/common/AttachmentButton.kt b/app/src/main/kotlin/com/wire/android/ui/common/AttachmentButton.kt
@@ -32,8 +32,8 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Text
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -43,7 +43,6 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import com.wire.android.R
 import com.wire.android.ui.common.spacers.VerticalSpace
@@ -90,7 +89,6 @@ fun AttachmentButton(
             text = text,
             maxLines = 2,
             textAlign = TextAlign.Center,
-            overflow = TextOverflow.Ellipsis,
             style = labelStyle,
             color = MaterialTheme.wireColorScheme.onBackground,
         )

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/conversations/ConversationScreen.kt b/app/src/main/kotlin/com/wire/android/ui/home/conversations/ConversationScreen.kt
@@ -30,9 +30,8 @@ import androidx.compose.animation.shrinkOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
@@ -55,6 +54,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusManager
 import androidx.compose.ui.platform.LocalContext
@@ -832,16 +832,21 @@ fun MessageList(
         }
     }
 
-    Scaffold(
-        floatingActionButton = { JumpToLastMessageButton(lazyListState = lazyListState) },
+    Box(
+        contentAlignment = Alignment.BottomEnd,
+        modifier = Modifier
+            .fillMaxSize()
+            .background(color = colorsScheme().backgroundVariant),
         content = {
             LazyColumn(
                 state = lazyListState,
                 reverseLayout = true,
+                // calculating bottom padding to have space for [UsersTypingIndicator]
+                contentPadding = PaddingValues(
+                    bottom = dimensions().typingIndicatorHeight - (dimensions().messageItemBottomPadding / 2)
+                ),
                 modifier = Modifier
-                    .fillMaxHeight()
-                    .fillMaxWidth()
-                    .background(color = colorsScheme().backgroundVariant)
+                    .fillMaxSize()
             ) {
                 itemsIndexed(lazyPagingMessages, key = { _, uiMessage ->
                     uiMessage.header.messageId
@@ -891,6 +896,7 @@ fun MessageList(
                     }
                 }
             }
+            JumpToLastMessageButton(lazyListState = lazyListState)
         })
 }
 
@@ -905,7 +911,6 @@ fun JumpToLastMessageButton(
         exit = shrinkOut { it }
     ) {
         SmallFloatingActionButton(
-            modifier = Modifier.offset(y = dimensions().spacing18x),
             onClick = { coroutineScope.launch { lazyListState.animateScrollToItem(0) } },
             containerColor = MaterialTheme.wireColorScheme.onSecondaryButtonDisabled,
             contentColor = MaterialTheme.wireColorScheme.secondaryButtonDisabled,

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/conversations/UsersTypingIndicator.kt b/app/src/main/kotlin/com/wire/android/ui/home/conversations/UsersTypingIndicator.kt
@@ -78,16 +78,17 @@ fun UsersTypingIndicatorForConversation(
 
 @Composable
 fun UsersTypingIndicator(usersTyping: List<UIParticipant>) {
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-        modifier = Modifier
-            .height(dimensions().spacing24x)
-            .background(
-                color = colorsScheme().surface,
-                shape = RoundedCornerShape(dimensions().corner14x),
-            )
-    ) {
-        if (usersTyping.isNotEmpty()) {
+    if (usersTyping.isNotEmpty()) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .padding(bottom = dimensions().spacing4x)
+                .height(dimensions().typingIndicatorHeight)
+                .background(
+                    color = colorsScheme().surfaceVariant,
+                    shape = RoundedCornerShape(dimensions().corner14x),
+                )
+        ) {
             val rememberTransition =
                 rememberInfiniteTransition(label = stringResource(R.string.animation_label_typing_indicator_horizontal_transition))
             UsersTypingAvatarPreviews(usersTyping)

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/AdditionalOptions.kt b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/AdditionalOptions.kt
@@ -21,13 +21,15 @@
 package com.wire.android.ui.home.messagecomposer
 
 import android.net.Uri
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material3.Divider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import com.wire.android.ui.common.colorsScheme
 import com.wire.android.ui.home.conversations.model.UriAsset
 import com.wire.android.ui.home.messagecomposer.recordaudio.RecordAudioComponent
 import com.wire.android.ui.home.messagecomposer.state.AdditionalOptionMenuState
@@ -54,7 +56,7 @@ fun AdditionalOptionsMenu(
     onRichOptionButtonClicked: (RichTextMarkdown) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Box(modifier) {
+    Box(modifier.background(colorsScheme().messageComposerBackgroundColor)) {
         when (additionalOptionsState) {
             AdditionalOptionMenuState.AttachmentAndAdditionalOptionsMenu -> {
                 AttachmentAndAdditionalOptionsMenuItems(

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt
@@ -123,18 +123,23 @@ fun EnabledMessageComposer(
                         Modifier.weight(1f)
                     }
                 Box(
+                    contentAlignment = Alignment.BottomCenter,
                     modifier = expandOrHideMessagesModifier
                         .background(color = colorsScheme().backgroundVariant)
                 ) {
                     messageListContent()
+                    if (!inputStateHolder.isTextExpanded) {
+                        UsersTypingIndicatorForConversation(conversationId = conversationId)
+                    }
                     if (messageComposerViewState.value.mentionSearchResult.isNotEmpty()) {
                         MembersMentionList(
                             membersToMention = messageComposerViewState.value.mentionSearchResult,
                             searchQuery = messageComposition.value.messageText,
                             onMentionPicked = { pickedMention ->
                                 messageCompositionHolder.addMention(pickedMention)
                                 onClearMentionSearchResult()
-                            }
+                            },
+                            modifier = Modifier.align(Alignment.BottomCenter)
                         )
                     }
                 }
@@ -145,18 +150,11 @@ fun EnabledMessageComposer(
                         Modifier.weight(1f)
                     }
                 Column(
+                    horizontalAlignment = Alignment.CenterHorizontally,
                     modifier = fillRemainingSpaceOrWrapContent
                         .fillMaxWidth()
+                        .background(color = colorsScheme().backgroundVariant)
                 ) {
-                    Column(
-                        modifier = Modifier
-                            .background(color = colorsScheme().backgroundVariant)
-                            .fillMaxWidth(),
-                        horizontalAlignment = Alignment.CenterHorizontally
-                    ) {
-                        UsersTypingIndicatorForConversation(conversationId = conversationId)
-                    }
-
                     Box(Modifier.wrapContentSize()) {
                         SecurityClassificationBannerForConversation(
                             conversationId = conversationId
@@ -169,6 +167,7 @@ fun EnabledMessageComposer(
                             var cursorCoordinateY by remember { mutableStateOf(0F) }
 
                             ActiveMessageComposerInput(
+                                conversationId = conversationId,
                                 messageComposition = messageComposition.value,
                                 isTextExpanded = inputStateHolder.isTextExpanded,
                                 inputType = messageCompositionInputStateHolder.inputType,

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/MessageActions.kt b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/MessageActions.kt
@@ -55,14 +55,11 @@ fun MessageSendActions(
     onSendButtonClicked: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Box(modifier) {
-        Row(Modifier.padding(end = dimensions().spacing8x)) {
-            SendButton(
-                isEnabled = sendButtonEnabled,
-                onSendButtonClicked = onSendButtonClicked
-            )
-        }
-    }
+    SendButton(
+        isEnabled = sendButtonEnabled,
+        onSendButtonClicked = onSendButtonClicked,
+        modifier = modifier.padding(end = dimensions().spacing8x)
+    )
 }
 
 @Composable
@@ -147,9 +144,11 @@ fun MessageEditActions(
 @Composable
 private fun SendButton(
     isEnabled: Boolean,
+    modifier: Modifier = Modifier,
     onSendButtonClicked: () -> Unit
 ) {
     WirePrimaryIconButton(
+        modifier = modifier,
         onButtonClicked = onSendButtonClicked,
         iconResource = R.drawable.ic_send,
         contentDescription = R.string.content_description_send_button,