Merge pull request #3695 from element-hq/feature/bma/improveComposerPaddings

Improve composer paddings

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt

@@ -25,9 +25,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.PreviewParameter
 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
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
@@ -37,33 +40,37 @@ import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
 internal fun ComposerModeView(
-    composerMode: MessageComposerMode,
+    composerMode: MessageComposerMode.Special,
     onResetComposerMode: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     when (composerMode) {
         is MessageComposerMode.Edit -> {
-            EditingModeView(onResetComposerMode = onResetComposerMode)
+            EditingModeView(
+                modifier = modifier,
+                onResetComposerMode = onResetComposerMode,
+            )
         }
         is MessageComposerMode.Reply -> {
             ReplyToModeView(
-                modifier = Modifier.padding(8.dp),
+                modifier = modifier.padding(8.dp),
                 replyToDetails = composerMode.replyToDetails,
                 hideImage = composerMode.hideImage,
                 onResetComposerMode = onResetComposerMode,
             )
         }
-        else -> Unit
     }
 }
 
 @Composable
 private fun EditingModeView(
     onResetComposerMode: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     Row(
         horizontalArrangement = Arrangement.spacedBy(4.dp),
         verticalAlignment = Alignment.CenterVertically,
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
             .padding(start = 12.dp)
     ) {
@@ -124,7 +131,7 @@ private fun ReplyToModeView(
             contentDescription = stringResource(CommonStrings.action_close),
             tint = MaterialTheme.colorScheme.secondary,
             modifier = Modifier
-                .padding(end = 4.dp, top = 4.dp, start = 16.dp, bottom = 16.dp)
+                .padding(end = 4.dp, top = 4.dp, start = 8.dp, bottom = 16.dp)
                 .size(16.dp)
                 .clickable(
                     enabled = true,
@@ -135,3 +142,15 @@ private fun ReplyToModeView(
         )
     }
 }
+
+@PreviewsDayNight
+@Composable
+internal fun ComposerModeViewPreview(
+    @PreviewParameter(MessageComposerModeSpecialProvider::class) mode: MessageComposerMode.Special
+) = ElementPreview {
+    ComposerModeView(
+        composerMode = mode,
+        onResetComposerMode = {},
+        modifier = Modifier.background(ElementTheme.colors.bgSubtleSecondary)
+    )
+}

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/MessageComposerModeSpecialProvider.kt

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * Please see LICENSE in the repository root for full details.
+ */
+
+package io.element.android.libraries.textcomposer
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetailsProvider
+import io.element.android.libraries.textcomposer.model.MessageComposerMode
+
+class MessageComposerModeSpecialProvider : PreviewParameterProvider<MessageComposerMode.Special> {
+    override val values: Sequence<MessageComposerMode.Special> = sequenceOf(
+        aMessageComposerModeEdit()
+    ) +
+        // Keep only 3 values from InReplyToDetailsProvider
+        InReplyToDetailsProvider().values.take(3).map {
+            aMessageComposerModeReply(
+                replyToDetails = it
+            )
+        }
+}

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -432,7 +432,7 @@ private fun TextInputBox(
         val defaultTypography = ElementTheme.typography.fontBodyLgRegular
         Box(
             modifier = Modifier
-                .padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 42.dp)
+                .padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 12.dp)
                 // Apply test tag only once, otherwise 2 nodes will have it (both the normal and subcomposing one) and tests will fail
                 .then(if (!subcomposing) Modifier.testTag(TestTags.textEditor) else Modifier),
             contentAlignment = Alignment.CenterStart,
@@ -579,7 +579,7 @@ internal fun TextComposerEditPreview() = ElementPreview {
         ATextComposer(
             TextEditorState.Rich(aRichTextEditorState(initialText = "A message", initialFocus = true)),
             voiceMessageState = VoiceMessageState.Idle,
-            composerMode = MessageComposerMode.Edit(EventId("$1234"), TransactionId("1234"), "Some text"),
+            composerMode = aMessageComposerModeEdit(),
             enableVoiceMessages = true,
         )
     }))
@@ -592,7 +592,7 @@ internal fun MarkdownTextComposerEditPreview() = ElementPreview {
         ATextComposer(
             TextEditorState.Markdown(aMarkdownTextEditorState(initialText = "A message", initialFocus = true)),
             voiceMessageState = VoiceMessageState.Idle,
-            composerMode = MessageComposerMode.Edit(EventId("$1234"), TransactionId("1234"), "Some text"),
+            composerMode = aMessageComposerModeEdit(),
             enableVoiceMessages = true,
         )
     }))
@@ -604,9 +604,8 @@ internal fun TextComposerReplyPreview(@PreviewParameter(InReplyToDetailsProvider
     ATextComposer(
         state = TextEditorState.Rich(aRichTextEditorState()),
         voiceMessageState = VoiceMessageState.Idle,
-        composerMode = MessageComposerMode.Reply(
+        composerMode = aMessageComposerModeReply(
             replyToDetails = inReplyToDetails,
-            hideImage = false,
         ),
         enableVoiceMessages = true,
     )
@@ -718,3 +717,21 @@ fun aRichTextEditorState(
     initialMarkdown = initialMarkdown,
     initialFocus = initialFocus,
 )
+
+fun aMessageComposerModeEdit(
+    eventId: EventId? = EventId("$1234"),
+    transactionId: TransactionId? = TransactionId("1234"),
+    content: String = "Some text",
+) = MessageComposerMode.Edit(
+    eventId = eventId,
+    transactionId = transactionId,
+    content = content
+)
+
+fun aMessageComposerModeReply(
+    replyToDetails: InReplyToDetails,
+    hideImage: Boolean = false,
+) = MessageComposerMode.Reply(
+    replyToDetails = replyToDetails,
+    hideImage = hideImage,
+)

tests/uitests/src/test/snapshots/images/libraries.textcomposer_ComposerModeView_Day_0_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7d4d42730ec3015b56f13fcce98c4be694133b2101272e8f9173a5f938aef5ec
+size 5455

tests/uitests/src/test/snapshots/images/libraries.textcomposer_ComposerModeView_Day_1_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bc65eecc2dc531039f061e96df9777e8a3cdb2813c94750fc81e2b2a71f12c55
+size 11175

tests/uitests/src/test/snapshots/images/libraries.textcomposer_ComposerModeView_Day_2_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3455702ce77e03aaa36b3da997a06bc52b626203a094779f8baa96357bab1d08
+size 18565

tests/uitests/src/test/snapshots/images/libraries.textcomposer_ComposerModeView_Day_3_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cfa41df7bd57609c97d68d0883fb9a747082e1e1dc69a3659b1efc5a37b92a9b
+size 7818

tests/uitests/src/test/snapshots/images/libraries.textcomposer_ComposerModeView_Night_0_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2a7f8b640efe8ff0fb996883593ec89fe65c34a12ee500475633e58c344d5668
+size 5307

tests/uitests/src/test/snapshots/images/libraries.textcomposer_ComposerModeView_Night_1_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f68b17150dce91f4ac010d12e3380fb664addcac0410f5ab1cbcdec24ce3776f
+size 10936

tests/uitests/src/test/snapshots/images/libraries.textcomposer_ComposerModeView_Night_2_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:437b3abdf98913c571c288ef4fdc5623d327b1b8d20ef27f8551f109e1dacab7
+size 18151

tests/uitests/src/test/snapshots/images/libraries.textcomposer_ComposerModeView_Night_3_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4193cdc78f243d5eb4bf25a1bc7dbc8aaf4996e7f900bdb4741b175a26632b2d
+size 7645

tests/uitests/src/test/snapshots/images/libraries.textcomposer_TextComposerFormatting_Day_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b2665294be484f65721617ca1bfb4fb412adafcdacd3bbdaceee842f5f080cf9
-size 41165
+oid sha256:9c1096dd5654c5c6bcd274812f51fd7a278084f63cc2879c4217c3f1bd8fbaaa
+size 41102

tests/uitests/src/test/snapshots/images/libraries.textcomposer_TextComposerFormatting_Night_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9f00398a7bce27b1fd2c639a1340b551ac0ec1c161230688470233d4be9f5b9f
-size 38568
+oid sha256:afc6b93d2e4ce6bcb02c38eccb115e61f0ebd682a7c0b8037e74c20952d8ae2b
+size 38429

tests/uitests/src/test/snapshots/images/libraries.textcomposer_TextComposerReply_Day_11_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:727d84a024a40ea3524d26e528deb8deaa1b7a91c6d44a040eac724312c7ee5b
-size 19358
+oid sha256:0fe4485cd7a3194f9805e8ca3f83146ca4ef84bc8fe7b7d314908c27fc1f55e9
+size 19341

tests/uitests/src/test/snapshots/images/libraries.textcomposer_TextComposerReply_Day_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f896d0fac1c193a37f18ccf8b1a218364a5c493657fc46ffb8c9d851d1cf7361
-size 22239
+oid sha256:40061abbccaf9416b767383eb7c31aa213490dddae7d5ebf0a43e160fcfaa0d4
+size 22480

tests/uitests/src/test/snapshots/images/libraries.textcomposer_TextComposerReply_Night_11_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c4bb1269080c567c03210191e8486f79382a70f14a96133578957f48701a5de0
-size 18439
+oid sha256:2dfd6f04f64d1a6a750c67b10f55f74fa423c884b8788b5e5de520bdaa7b6564
+size 18446

tests/uitests/src/test/snapshots/images/libraries.textcomposer_TextComposerReply_Night_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ae50ed7f1afa9d323d54756388a808353d9cf4981cb324099ffdb6129006294c
-size 21103
+oid sha256:4af010eaab0dedba3220446203abd237c7f9817df08e8458896e5e6edcef7f87
+size 21295

tests/uitests/src/test/snapshots/images/libraries.textcomposer_TextComposerSimple_Day_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:20f60dd84cc313d34e4cd37279cd2abadefa8aa7e99319f0e73b24f4f6490a0a
-size 45599
+oid sha256:6c9d3fca9aaaa854d0fe1242a9ff043f17258827e1197c92ae251e251670e65b
+size 44970

tests/uitests/src/test/snapshots/images/libraries.textcomposer_TextComposerSimple_Night_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0daa64d76ad618f694b8778d86aeda96eb56dbb0ec7117063d6423ef488429b4
-size 43580
+oid sha256:79d62f9d342571992714742ec7db4ca98e4631dc33305ea7d1306c39258328d0
+size 42990