Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[AND-199] Implement ComposerActionsTheme for customizing the message composer action icons. #5535

Draft
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

VelikovPetar
Copy link
Contributor

🎯 Goal

Linear: https://linear.app/stream/issue/AND-199/implement-icon-customisation-options-for-messagecomposer-in-compose
Exposes a way to customise the default message composer icons (attachments / commands / send) without overriding each component separately.

🛠 Implementation details

  • Define new ComposerActionsTheme which holds an IconContainerStyle for each default action in the composer (attachments / commands / send)
  • Expose the actionsTheme : ComposerActionsTheme via the MessageComposerTheme
  • The composer action icons styling is now taken from ChatTheme.messageComposerTheme.actionsTheme

Example (overriding the default attachments button):

val actionsTheme = ComposerActionsTheme.defaultTheme(colors)
val messageComposerTheme = MessageComposerTheme
      .defaultTheme(isInDarkMode, typography, shapes, colors)
      .copy(
          actionsTheme = actionsTheme.copy(
              attachmentsButton = IconContainerStyle(
                  size = ComponentSize.square(48.dp),
                  padding = ComponentPadding.all(8.dp),
                  icon = IconStyle(
                     painter = painterResource(id = R.drawable.stream_compose_ic_image_picker),
                     tint = colors.textLowEmphasis,
                     size = ComponentSize.square(32.dp),
                  )
              ),
            )
        )
ChatTheme(
  // ...
  messageComposerTheme = messageComposerTheme
) { }

Will produce the following message composer (sample app):

Example
example

🧪 Testing

  1. Apply the provided patch
  2. Open the compose sample app
  3. Open a channel
  4. The message composer should have an updated "Attachments" icon
Provide the patch summary here
Index: stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/MessagesActivity.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/MessagesActivity.kt b/stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/MessagesActivity.kt
--- a/stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/MessagesActivity.kt	(revision 803974da8bc950749488d85adfade6ccdb394d6b)
+++ b/stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/MessagesActivity.kt	(date 1735059477925)
@@ -80,6 +80,11 @@
 import io.getstream.chat.android.compose.ui.messages.list.MessageList
 import io.getstream.chat.android.compose.ui.theme.AttachmentPickerTheme
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
+import io.getstream.chat.android.compose.ui.theme.ComponentPadding
+import io.getstream.chat.android.compose.ui.theme.ComponentSize
+import io.getstream.chat.android.compose.ui.theme.ComposerActionsTheme
+import io.getstream.chat.android.compose.ui.theme.IconContainerStyle
+import io.getstream.chat.android.compose.ui.theme.IconStyle
 import io.getstream.chat.android.compose.ui.theme.MessageComposerTheme
 import io.getstream.chat.android.compose.ui.theme.MessageOptionsTheme
 import io.getstream.chat.android.compose.ui.theme.MessageTheme
@@ -151,7 +156,22 @@
         val colors = if (isInDarkMode) StreamColors.defaultDarkColors() else StreamColors.defaultColors()
         val typography = StreamTypography.defaultTypography()
         val shapes = StreamShapes.defaultShapes()
-        val messageComposerTheme = MessageComposerTheme.defaultTheme(isInDarkMode, typography, shapes, colors)
+        val actionsTheme = ComposerActionsTheme.defaultTheme(colors)
+        val messageComposerTheme = MessageComposerTheme
+            .defaultTheme(isInDarkMode, typography, shapes, colors)
+            .copy(
+                actionsTheme = actionsTheme.copy(
+                    attachmentsButton = IconContainerStyle(
+                        size = ComponentSize.square(48.dp),
+                        padding = ComponentPadding.all(8.dp),
+                        icon = IconStyle(
+                            painter = painterResource(id = R.drawable.stream_compose_ic_image_picker),
+                            tint = colors.textLowEmphasis,
+                            size = ComponentSize.square(32.dp),
+                        )
+                    ),
+                )
+            )
         val ownMessageTheme = MessageTheme.defaultOwnTheme(isInDarkMode, typography, shapes, colors)
         ChatTheme(
             isInDarkMode = isInDarkMode,
@@ -162,19 +182,7 @@
             autoTranslationEnabled = ChatApp.autoTranslationEnabled,
             isComposerLinkPreviewEnabled = ChatApp.isComposerLinkPreviewEnabled,
             allowUIAutomationTest = true,
-            messageComposerTheme = messageComposerTheme.let {
-                it.copy(
-                    attachmentCancelIcon = it.attachmentCancelIcon.copy(
-                        painter = painterResource(id = R.drawable.stream_compose_ic_clear),
-                        tint = colors.overlayDark,
-                        backgroundColor = colors.appBackground,
-                    ),
-                    audioRecording = it.audioRecording.copy(
-                        enabled = true,
-                        showRecordButtonOverSend = false,
-                    ),
-                )
-            },
+            messageComposerTheme = messageComposerTheme,
             attachmentPickerTheme = AttachmentPickerTheme.defaultTheme(colors).copy(
                 backgroundOverlay = colors.overlayDark,
                 backgroundSecondary = colors.inputBackground,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant