Skip to content

Commit 4aa8b61

Browse files
gpuntogpunto
authored
Update base message styling (#6109)
* Update base message styling * Update message footer style * Remove text styling from MessageTheme * Remove content padding from MessageTheme * Remove background colors from MessageTheme * Remove background border from MessageTheme * Remove link background color from MessageTheme * Remove mention color from MessageTheme * Remove shapes from MessageTheme * Remove redundant prefix * API dump * Remove deprecated example * Separate incoming and outgoing message text color * Move timestamp style to MessageStyling * Add missing kdoc * Extract quoted message styling logic
1 parent e2cd01e commit 4aa8b61

File tree

43 files changed

+270
-673
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+270
-673
lines changed

‎stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/component/SharedLocationItem.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,9 +133,9 @@ private fun LiveLocationSharing(
133133
.clip(ChatTheme.shapes.attachment)
134134
.background(
135135
color = if (isOwnMessage) {
136-
ChatTheme.ownMessageTheme.backgroundColor
136+
ChatTheme.colors.chatBgOutgoing
137137
} else {
138-
ChatTheme.otherMessageTheme.backgroundColor
138+
ChatTheme.colors.chatBgIncoming
139139
},
140140
),
141141
) {

‎stream-chat-android-compose/api/stream-chat-android-compose.api‎

Lines changed: 26 additions & 85 deletions
Large diffs are not rendered by default.

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/attachments/content/LinkAttachmentContent.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -291,9 +291,9 @@ private fun LinkAttachmentDescription(description: String, linkDescriptionMaxLin
291291
@Composable
292292
private fun getLinkBackgroundColor(isMine: Boolean): Color {
293293
return if (isMine) {
294-
ChatTheme.ownMessageTheme.linkBackgroundColor
294+
ChatTheme.colors.chatBgAttachmentOutgoing
295295
} else {
296-
ChatTheme.otherMessageTheme.linkBackgroundColor
296+
ChatTheme.colors.chatBgAttachmentIncoming
297297
}
298298
}
299299

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/Timestamp.kt‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import androidx.compose.runtime.Composable
2121
import androidx.compose.ui.Modifier
2222
import androidx.compose.ui.platform.LocalInspectionMode
2323
import androidx.compose.ui.platform.testTag
24+
import androidx.compose.ui.text.TextStyle
2425
import io.getstream.chat.android.compose.state.DateFormatType
2526
import io.getstream.chat.android.compose.state.DateFormatType.DATE
2627
import io.getstream.chat.android.compose.state.DateFormatType.RELATIVE
@@ -44,6 +45,7 @@ public fun Timestamp(
4445
modifier: Modifier = Modifier,
4546
formatter: DateFormatter = ChatTheme.dateFormatter,
4647
formatType: DateFormatType = DATE,
48+
textStyle: TextStyle = ChatTheme.typography.footnote.copy(ChatTheme.colors.textLowEmphasis),
4749
) {
4850
val timestamp = if (LocalInspectionMode.current) {
4951
"13:49"
@@ -58,7 +60,6 @@ public fun Timestamp(
5860
Text(
5961
modifier = modifier.testTag("Stream_Timestamp"),
6062
text = timestamp,
61-
style = ChatTheme.typography.footnote,
62-
color = ChatTheme.colors.textLowEmphasis,
63+
style = textStyle,
6364
)
6465
}

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/channels/MessageReadStatusIcon.kt‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -132,14 +132,14 @@ private fun IsReadCount(
132132
text = readCount.toString(),
133133
modifier = Modifier.testTag("Stream_MessageReadCount"),
134134
style = ChatTheme.typography.footnote,
135-
color = ChatTheme.colors.textLowEmphasis,
135+
color = ChatTheme.colors.chatTextTimestamp,
136136
)
137137
}
138138
Icon(
139139
modifier = Modifier.testTag("Stream_MessageReadStatus_isRead"),
140140
painter = painterResource(id = R.drawable.stream_compose_message_seen),
141141
contentDescription = null,
142-
tint = ChatTheme.colors.primaryAccent,
142+
tint = ChatTheme.colors.accentPrimary,
143143
)
144144
}
145145
}
@@ -150,7 +150,7 @@ private fun IsPendingIcon(modifier: Modifier) {
150150
modifier = modifier.testTag("Stream_MessageReadStatus_isPending"),
151151
painter = painterResource(id = R.drawable.stream_compose_ic_clock),
152152
contentDescription = stringResource(R.string.stream_ui_message_list_semantics_message_status_pending),
153-
tint = ChatTheme.colors.textLowEmphasis,
153+
tint = ChatTheme.colors.chatTextTimestamp,
154154
)
155155
}
156156

@@ -160,7 +160,7 @@ private fun IsSentIcon(modifier: Modifier) {
160160
modifier = modifier.testTag("Stream_MessageReadStatus_isSent"),
161161
painter = painterResource(id = R.drawable.stream_compose_message_sent),
162162
contentDescription = stringResource(R.string.stream_ui_message_list_semantics_message_status_sent),
163-
tint = ChatTheme.colors.textLowEmphasis,
163+
tint = ChatTheme.colors.chatTextTimestamp,
164164
)
165165
}
166166

@@ -172,7 +172,7 @@ private fun IsDeliveredIcon(modifier: Modifier) {
172172
contentDescription = stringResource(
173173
R.string.stream_ui_message_list_semantics_message_status_delivered,
174174
),
175-
tint = ChatTheme.colors.textLowEmphasis,
175+
tint = ChatTheme.colors.chatTextTimestamp,
176176
)
177177
}
178178

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageBubble.kt‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import io.getstream.chat.android.client.utils.message.isDeleted
3030
import io.getstream.chat.android.client.utils.message.isErrorOrFailed
3131
import io.getstream.chat.android.client.utils.message.isGiphyEphemeral
3232
import io.getstream.chat.android.compose.ui.theme.ChatTheme
33-
import io.getstream.chat.android.compose.ui.theme.MessageTheme
33+
import io.getstream.chat.android.compose.ui.theme.MessageStyling
3434
import io.getstream.chat.android.models.Message
3535

3636
/**
@@ -67,16 +67,16 @@ public fun MessageBubble(
6767
/**
6868
* Determines the background color of the message bubble based on the message content and ownership.
6969
*
70-
* @param theme The message theme to use.
70+
* @param outgoing Whether the message is by the current user
7171
* @param message The message data.
7272
* @return A color for the message bubble.
7373
*/
7474
@Composable
75-
internal fun getMessageBubbleColor(theme: MessageTheme, message: Message): Color {
75+
internal fun getMessageBubbleColor(outgoing: Boolean, message: Message): Color {
7676
return when {
7777
message.isGiphyEphemeral() -> ChatTheme.colors.giphyMessageBackground
78-
message.isDeleted() -> theme.deletedBackgroundColor
79-
message.isErrorOrFailed() -> theme.errorBackgroundColor
80-
else -> theme.backgroundColor
78+
message.isDeleted() -> MessageStyling.backgroundColor(outgoing)
79+
message.isErrorOrFailed() -> MessageStyling.backgroundColor(outgoing)
80+
else -> MessageStyling.backgroundColor(outgoing)
8181
}
8282
}

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageFooter.kt‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ import io.getstream.chat.android.compose.state.DateFormatType
4040
import io.getstream.chat.android.compose.ui.components.Timestamp
4141
import io.getstream.chat.android.compose.ui.theme.ChatTheme
4242
import io.getstream.chat.android.compose.ui.theme.MessageFooterStatusIndicatorParams
43+
import io.getstream.chat.android.compose.ui.theme.MessageStyling
44+
import io.getstream.chat.android.compose.ui.theme.StreamTokens
4345
import io.getstream.chat.android.compose.ui.util.clickable
4446
import io.getstream.chat.android.core.utils.date.truncateFuture
4547
import io.getstream.chat.android.models.Message
@@ -84,6 +86,7 @@ public fun MessageFooter(
8486
if (messageItem.showMessageFooter) {
8587
val showEditLabel = message.messageTextUpdatedAt != null
8688
var showEditInfo by remember { mutableStateOf(false) }
89+
val textStyle = MessageStyling.timestampStyle()
8790
Row(
8891
modifier = Modifier
8992
.padding(top = 4.dp, bottom = 4.dp),
@@ -98,10 +101,9 @@ public fun MessageFooter(
98101
.padding(end = 8.dp)
99102
.weight(1f, fill = false),
100103
text = message.user.name,
101-
style = ChatTheme.typography.footnote,
104+
style = textStyle,
102105
overflow = TextOverflow.Ellipsis,
103106
maxLines = 1,
104-
color = ChatTheme.colors.textLowEmphasis,
105107
)
106108
} else if (message.shouldShowMessageStatusIndicator()) {
107109
ChatTheme.componentFactory.MessageFooterStatusIndicator(
@@ -114,22 +116,20 @@ public fun MessageFooter(
114116

115117
val date = message.getCreatedAtOrNull()
116118
if (date != null) {
117-
Timestamp(date = date, formatType = DateFormatType.TIME)
119+
Timestamp(
120+
date = date,
121+
formatType = DateFormatType.TIME,
122+
textStyle = textStyle,
123+
)
118124
}
119125
if (showEditLabel && !showEditInfo) {
120-
Text(
121-
modifier = Modifier.padding(start = 4.dp, end = 4.dp),
122-
text = "·",
123-
style = ChatTheme.typography.footnote,
124-
color = ChatTheme.colors.textLowEmphasis,
125-
)
126126
Text(
127127
modifier = Modifier
128+
.padding(start = StreamTokens.spacingXs)
128129
.clickable { showEditInfo = !showEditInfo }
129130
.testTag("Stream_MessageEditedLabel"),
130131
text = LocalContext.current.getString(R.string.stream_compose_message_list_footnote_edited),
131-
style = ChatTheme.typography.footnote,
132-
color = ChatTheme.colors.textLowEmphasis,
132+
style = textStyle,
133133
)
134134
}
135135
}
@@ -145,10 +145,9 @@ public fun MessageFooter(
145145
.padding(end = 4.dp)
146146
.weight(1f, fill = false),
147147
text = LocalContext.current.getString(R.string.stream_compose_message_list_footnote_edited),
148-
style = ChatTheme.typography.footnote,
148+
style = textStyle,
149149
overflow = TextOverflow.Ellipsis,
150150
maxLines = 1,
151-
color = ChatTheme.colors.textLowEmphasis,
152151
)
153152
MessageEditedTimestamp(message = message)
154153
}
@@ -174,5 +173,10 @@ internal fun MessageEditedTimestamp(
174173
formatType: DateFormatType = DateFormatType.RELATIVE,
175174
) {
176175
val editedAt = message.messageTextUpdatedAt?.truncateFuture()
177-
Timestamp(date = editedAt, modifier = modifier, formatType = formatType)
176+
Timestamp(
177+
date = editedAt,
178+
modifier = modifier,
179+
formatType = formatType,
180+
textStyle = MessageStyling.timestampStyle(),
181+
)
178182
}

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/MessageText.kt‎

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
package io.getstream.chat.android.compose.ui.components.messages
1818

1919
import android.content.Intent
20-
import android.net.Uri
2120
import androidx.compose.foundation.gestures.detectTapGestures
2221
import androidx.compose.foundation.layout.padding
2322
import androidx.compose.foundation.text.BasicText
@@ -36,13 +35,14 @@ import androidx.compose.ui.text.TextLayoutResult
3635
import androidx.compose.ui.text.TextStyle
3736
import androidx.compose.ui.text.style.TextOverflow
3837
import androidx.compose.ui.tooling.preview.Preview
39-
import androidx.compose.ui.unit.dp
4038
import androidx.compose.ui.util.fastAny
39+
import androidx.core.net.toUri
4140
import io.getstream.chat.android.compose.ui.theme.ChatTheme
41+
import io.getstream.chat.android.compose.ui.theme.MessageStyling
42+
import io.getstream.chat.android.compose.ui.theme.StreamTokens
4243
import io.getstream.chat.android.compose.ui.util.AnnotationTagEmail
4344
import io.getstream.chat.android.compose.ui.util.AnnotationTagMention
4445
import io.getstream.chat.android.compose.ui.util.AnnotationTagUrl
45-
import io.getstream.chat.android.compose.ui.util.isEmojiOnlyWithoutBubble
4646
import io.getstream.chat.android.compose.ui.util.isFewEmoji
4747
import io.getstream.chat.android.compose.ui.util.isSingleEmoji
4848
import io.getstream.chat.android.compose.ui.util.showOriginalTextAsState
@@ -89,30 +89,21 @@ public fun MessageText(
8989
}
9090
}
9191

92-
val annotations = styledText.getStringAnnotations(0, styledText.lastIndex)
93-
9492
// TODO: Fix emoji font padding once this is resolved and exposed: https://issuetracker.google.com/issues/171394808
9593
val style = when {
9694
message.isSingleEmoji() -> ChatTheme.typography.singleEmoji
9795
message.isFewEmoji() -> ChatTheme.typography.emojiOnly
98-
else -> if (message.isMine(currentUser)) {
99-
ChatTheme.ownMessageTheme.textStyle
100-
} else {
101-
ChatTheme.otherMessageTheme.textStyle
102-
}
96+
else -> MessageStyling.textStyle(outgoing = message.isMine(currentUser))
10397
}
98+
99+
val annotations = styledText.getStringAnnotations(0, styledText.lastIndex)
104100
if (annotations.fastAny {
105101
it.tag == AnnotationTagUrl || it.tag == AnnotationTagEmail || it.tag == AnnotationTagMention
106102
}
107103
) {
108104
ClickableText(
109105
modifier = modifier
110-
.padding(
111-
start = 12.dp,
112-
end = 12.dp,
113-
top = 8.dp,
114-
bottom = 8.dp,
115-
)
106+
.padding(horizontal = StreamTokens.spacingSm, vertical = StreamTokens.spacingXs)
116107
.testTag("Stream_MessageClickableText"),
117108
text = styledText,
118109
style = style,
@@ -124,23 +115,16 @@ public fun MessageText(
124115
} else {
125116
val targetUrl = annotation?.item
126117
if (!targetUrl.isNullOrEmpty()) {
127-
onLinkClick?.invoke(message, targetUrl) ?: run {
128-
context.startActivity(
129-
Intent(Intent.ACTION_VIEW, Uri.parse(targetUrl)),
130-
)
131-
}
118+
onLinkClick?.invoke(message, targetUrl) ?: context.startActivity(
119+
Intent(Intent.ACTION_VIEW, targetUrl.toUri()),
120+
)
132121
}
133122
}
134123
}
135124
} else {
136-
val horizontalPadding = if (message.isEmojiOnlyWithoutBubble()) 0.dp else 12.dp
137-
val verticalPadding = if (message.isEmojiOnlyWithoutBubble()) 0.dp else 8.dp
138125
Text(
139126
modifier = modifier
140-
.padding(
141-
horizontal = horizontalPadding,
142-
vertical = verticalPadding,
143-
)
127+
.padding(horizontal = StreamTokens.spacingSm, vertical = StreamTokens.spacingXs)
144128
.clipToBounds()
145129
.testTag("Stream_MessageText"),
146130
text = styledText,

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messages/PollMessageContent.kt‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import androidx.compose.foundation.BorderStroke
2121
import androidx.compose.foundation.background
2222
import androidx.compose.foundation.layout.Box
2323
import androidx.compose.foundation.layout.Column
24-
import androidx.compose.foundation.layout.PaddingValues
2524
import androidx.compose.foundation.layout.Row
2625
import androidx.compose.foundation.layout.fillMaxWidth
2726
import androidx.compose.foundation.layout.height
@@ -61,13 +60,13 @@ import androidx.compose.ui.text.style.TextOverflow
6160
import androidx.compose.ui.tooling.preview.Preview
6261
import androidx.compose.ui.unit.dp
6362
import androidx.compose.ui.unit.sp
64-
import io.getstream.chat.android.client.utils.message.isDeleted
6563
import io.getstream.chat.android.compose.R
6664
import io.getstream.chat.android.compose.ui.components.avatar.AvatarSize
6765
import io.getstream.chat.android.compose.ui.components.avatar.UserAvatarStack
6866
import io.getstream.chat.android.compose.ui.components.composer.InputField
6967
import io.getstream.chat.android.compose.ui.components.poll.AddAnswerDialog
7068
import io.getstream.chat.android.compose.ui.theme.ChatTheme
69+
import io.getstream.chat.android.compose.ui.theme.MessageStyling
7170
import io.getstream.chat.android.compose.ui.theme.StreamTokens
7271
import io.getstream.chat.android.compose.ui.util.clickable
7372
import io.getstream.chat.android.compose.ui.util.isErrorOrFailed
@@ -80,7 +79,6 @@ import io.getstream.chat.android.models.User
8079
import io.getstream.chat.android.models.Vote
8180
import io.getstream.chat.android.models.VotingVisibility
8281
import io.getstream.chat.android.ui.common.state.messages.list.MessageItemState
83-
import io.getstream.chat.android.ui.common.state.messages.list.MessagePosition
8482
import io.getstream.chat.android.ui.common.state.messages.poll.PollSelectionType
8583
import io.getstream.chat.android.ui.common.utils.PollsConstants
8684
import io.getstream.chat.android.ui.common.utils.extensions.getSubtitle
@@ -112,21 +110,10 @@ public fun PollMessageContent(
112110
onLongItemClick: (Message) -> Unit = {},
113111
) {
114112
val message = messageItem.message
115-
val position = messageItem.groupPosition
116113
val ownsMessage = messageItem.isMine
117114

118-
val messageTheme = if (ownsMessage) ChatTheme.ownMessageTheme else ChatTheme.otherMessageTheme
119-
val messageBubbleShape = when (position) {
120-
MessagePosition.TOP -> messageTheme.backgroundShapes.top
121-
MessagePosition.MIDDLE -> messageTheme.backgroundShapes.middle
122-
MessagePosition.BOTTOM -> messageTheme.backgroundShapes.bottom
123-
else -> messageTheme.backgroundShapes.none
124-
}
125-
126-
val messageBubbleColor = when {
127-
message.isDeleted() -> messageTheme.deletedBackgroundColor
128-
else -> messageTheme.poll.backgroundColor
129-
}
115+
val messageBubbleShape = MessageStyling.shape(messageItem.groupPosition, outgoing = ownsMessage)
116+
val messageBubbleColor = MessageStyling.backgroundColor(messageItem.isMine)
130117

131118
val poll = message.poll
132119
if (!messageItem.isErrorOrFailed() && poll != null) {
@@ -136,7 +123,6 @@ public fun PollMessageContent(
136123
shape = messageBubbleShape,
137124
color = messageBubbleColor,
138125
border = if (messageItem.isMine) null else BorderStroke(1.dp, ChatTheme.colors.borders),
139-
contentPadding = PaddingValues(),
140126
content = {
141127
PollMessageContent(
142128
message = message,
@@ -165,7 +151,6 @@ public fun PollMessageContent(
165151
shape = messageBubbleShape,
166152
color = messageBubbleColor,
167153
border = BorderStroke(1.dp, ChatTheme.colors.borders),
168-
contentPadding = PaddingValues(),
169154
content = {
170155
MessageContent(
171156
message = message,

0 commit comments

Comments
 (0)