Skip to content

Commit 420cf9c

Browse files
GarzasGarzas
authored
fix: bubble feedback improvements [WPB-21718] (#4408)
1 parent 9baf147 commit 420cf9c

File tree

17 files changed

+178
-120
lines changed

17 files changed

+178
-120
lines changed

‎app/src/main/kotlin/com/wire/android/ui/home/conversations/ConversationScreen.kt‎

Lines changed: 48 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
4747
import androidx.compose.material.icons.Icons
4848
import androidx.compose.material.icons.filled.KeyboardArrowDown
4949
import androidx.compose.material3.FloatingActionButtonDefaults
50+
import androidx.compose.material3.HorizontalDivider
5051
import androidx.compose.material3.Icon
5152
import androidx.compose.material3.MaterialTheme
5253
import androidx.compose.material3.Scaffold
@@ -125,6 +126,7 @@ import com.wire.android.ui.common.error.CoreFailureErrorDialog
125126
import com.wire.android.ui.common.progress.WireCircularProgressIndicator
126127
import com.wire.android.ui.common.snackbar.LocalSnackbarHostState
127128
import com.wire.android.ui.common.snackbar.SwipeableSnackbar
129+
import com.wire.android.ui.common.spacers.HorizontalSpace
128130
import com.wire.android.ui.common.visbility.rememberVisibilityState
129131
import com.wire.android.ui.destinations.ConversationScreenDestination
130132
import com.wire.android.ui.destinations.GroupConversationDetailsScreenDestination
@@ -940,6 +942,9 @@ private fun ConversationScreen(
940942
},
941943
isInteractionEnabled = messageComposerViewState.interactionAvailability == InteractionAvailability.ENABLED
942944
)
945+
946+
HorizontalDivider(color = colorsScheme().outline)
947+
943948
ConversationBanner(
944949
bannerMessage = bannerMessage,
945950
spannedTexts = listOf(
@@ -1319,7 +1324,8 @@ fun MessageList(
13191324
MessageGroupDateTime(
13201325
messageDateTime = serverDate,
13211326
messageDateTimeGroup = previousGroup,
1322-
now = currentTime
1327+
now = currentTime,
1328+
isBubbleUiEnabled = isBubbleUiEnabled
13231329
)
13241330
}
13251331
}
@@ -1358,7 +1364,8 @@ fun MessageList(
13581364
MessageGroupDateTime(
13591365
messageDateTime = serverDate,
13601366
messageDateTimeGroup = currentGroup,
1361-
now = currentTime
1367+
now = currentTime,
1368+
isBubbleUiEnabled = isBubbleUiEnabled
13621369
)
13631370
}
13641371
}
@@ -1413,7 +1420,8 @@ fun MessageList(
14131420
private fun MessageGroupDateTime(
14141421
now: Long,
14151422
messageDateTime: Date,
1416-
messageDateTimeGroup: MessageDateTimeGroup?
1423+
messageDateTimeGroup: MessageDateTimeGroup?,
1424+
isBubbleUiEnabled: Boolean
14171425
) {
14181426
val context = LocalContext.current
14191427

@@ -1459,25 +1467,45 @@ private fun MessageGroupDateTime(
14591467
null -> ""
14601468
}
14611469

1462-
Row(
1463-
Modifier
1464-
.fillMaxWidth()
1465-
.padding(
1466-
top = dimensions().spacing4x,
1467-
bottom = dimensions().spacing8x
1470+
if (isBubbleUiEnabled) {
1471+
Row(
1472+
Modifier
1473+
.fillMaxWidth()
1474+
.padding(dimensions().spacing16x),
1475+
verticalAlignment = Alignment.CenterVertically
1476+
) {
1477+
HorizontalDivider(modifier = Modifier.weight(1F), color = colorsScheme().outline)
1478+
HorizontalSpace.x4()
1479+
Text(
1480+
text = timeString.uppercase(Locale.getDefault()),
1481+
maxLines = 1,
1482+
color = colorsScheme().onBackground,
1483+
style = MaterialTheme.wireTypography.label02,
14681484
)
1469-
.background(color = colorsScheme().divider)
1470-
.padding(
1471-
top = dimensions().spacing6x,
1472-
bottom = dimensions().spacing6x,
1473-
start = dimensions().spacing56x
1485+
HorizontalSpace.x4()
1486+
HorizontalDivider(modifier = Modifier.weight(1F), color = colorsScheme().outline)
1487+
}
1488+
} else {
1489+
Row(
1490+
Modifier
1491+
.fillMaxWidth()
1492+
.padding(
1493+
top = dimensions().spacing4x,
1494+
bottom = dimensions().spacing8x
1495+
)
1496+
.background(color = colorsScheme().divider)
1497+
.padding(
1498+
top = dimensions().spacing6x,
1499+
bottom = dimensions().spacing6x,
1500+
start = dimensions().spacing56x
1501+
)
1502+
) {
1503+
Text(
1504+
text = timeString.uppercase(Locale.getDefault()),
1505+
color = colorsScheme().secondaryText,
1506+
style = MaterialTheme.wireTypography.title03,
14741507
)
1475-
) {
1476-
Text(
1477-
text = timeString.uppercase(Locale.getDefault()),
1478-
color = colorsScheme().secondaryText,
1479-
style = MaterialTheme.wireTypography.title03,
1480-
)
1508+
}
14811509
}
14821510
}
14831511

‎app/src/main/kotlin/com/wire/android/ui/home/conversations/messages/QuotedMessage.kt‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,14 @@ import com.wire.android.R
5757
import com.wire.android.model.Clickable
5858
import com.wire.android.model.ImageAsset
5959
import com.wire.android.ui.common.StatusBox
60+
import com.wire.android.ui.common.applyIf
6061
import com.wire.android.ui.common.clickable
6162
import com.wire.android.ui.common.colorsScheme
6263
import com.wire.android.ui.common.dimensions
6364
import com.wire.android.ui.common.typography
6465
import com.wire.android.ui.home.conversations.messages.item.MessageStyle
6566
import com.wire.android.ui.home.conversations.messages.item.highlighted
67+
import com.wire.android.ui.home.conversations.messages.item.isBubble
6668
import com.wire.android.ui.home.conversations.model.UIQuotedMessage
6769
import com.wire.android.ui.markdown.MarkdownInline
6870
import com.wire.android.ui.markdown.MessageColors
@@ -80,7 +82,8 @@ private const val TEXT_QUOTE_MAX_LINES = 7
8082
data class QuotedMessageStyle(
8183
val quotedStyle: QuotedStyle,
8284
val messageStyle: MessageStyle,
83-
val selfAccent: Accent
85+
val selfAccent: Accent,
86+
val senderAccent: Accent
8487
)
8588

8689
/**
@@ -201,7 +204,7 @@ fun QuotedMessagePreview(
201204
modifier = modifier,
202205
messageData = quotedMessageData,
203206
clickable = null,
204-
style = QuotedMessageStyle(QuotedStyle.PREVIEW, MessageStyle.NORMAL, Accent.Unknown)
207+
style = QuotedMessageStyle(QuotedStyle.PREVIEW, MessageStyle.NORMAL, Accent.Unknown, quotedMessageData.senderAccent)
205208
) {
206209
Box(
207210
modifier = Modifier
@@ -244,11 +247,6 @@ internal fun QuotedMessageContent(
244247
MessageStyle.BUBBLE_OTHER -> colorsScheme().otherBubble.secondary
245248
MessageStyle.NORMAL -> MaterialTheme.wireColorScheme.surfaceVariant
246249
}
247-
val quoteOutlineColor = when (style.messageStyle) {
248-
MessageStyle.BUBBLE_SELF -> colorsScheme().selfBubble.secondary
249-
MessageStyle.BUBBLE_OTHER -> colorsScheme().otherBubble.secondary
250-
MessageStyle.NORMAL -> colorsScheme().outline
251-
}
252250

253251
Row(
254252
horizontalArrangement = Arrangement.spacedBy(dimensions().spacing4x),
@@ -257,11 +255,13 @@ internal fun QuotedMessageContent(
257255
color = background,
258256
shape = quoteOutlineShape
259257
)
260-
.border(
261-
width = 1.dp,
262-
color = quoteOutlineColor,
263-
shape = quoteOutlineShape
264-
)
258+
.applyIf(!style.messageStyle.isBubble()) {
259+
border(
260+
width = 1.dp,
261+
color = MaterialTheme.wireColorScheme.outline,
262+
shape = quoteOutlineShape
263+
)
264+
}
265265
.padding(dimensions().spacing4x)
266266
.fillMaxWidth()
267267
.height(IntrinsicSize.Min)
@@ -286,7 +286,7 @@ internal fun QuotedMessageContent(
286286
QuotedMessageTopRow(
287287
senderName,
288288
displayReplyArrow = style.quotedStyle == QuotedStyle.COMPLETE,
289-
messageStyle = style.messageStyle
289+
quotedMessageStyle = style
290290
)
291291
Row(horizontalArrangement = Arrangement.spacedBy(dimensions().spacing4x)) {
292292
Column(
@@ -319,12 +319,16 @@ internal fun QuotedMessageContent(
319319
private fun QuotedMessageTopRow(
320320
senderName: String?,
321321
displayReplyArrow: Boolean,
322-
messageStyle: MessageStyle
322+
quotedMessageStyle: QuotedMessageStyle
323323
) {
324324

325+
val messageStyle = quotedMessageStyle.messageStyle
326+
327+
val accentScheme = colorsScheme(quotedMessageStyle.senderAccent)
328+
325329
val authorColor = when (messageStyle) {
326-
MessageStyle.BUBBLE_SELF -> colorsScheme().selfBubble.primaryOnSecondary
327-
MessageStyle.BUBBLE_OTHER -> colorsScheme().otherBubble.primaryOnSecondary
330+
MessageStyle.BUBBLE_SELF -> accentScheme.selfBubble.primaryOnSecondary
331+
MessageStyle.BUBBLE_OTHER -> accentScheme.primary
328332
MessageStyle.NORMAL -> colorsScheme().onSurfaceVariant
329333
}
330334

@@ -521,7 +525,7 @@ private fun QuotedImage(
521525
QuotedMessageTopRow(
522526
senderName = senderName.asString(),
523527
displayReplyArrow = true,
524-
messageStyle = style.messageStyle
528+
quotedMessageStyle = style
525529
)
526530
MainContentText(stringResource(R.string.notification_shared_picture))
527531
QuotedMessageOriginalDate(originalDateTimeText, style)

‎app/src/main/kotlin/com/wire/android/ui/home/conversations/messages/item/MessageAuthorRow.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import com.wire.android.ui.common.LegalHoldIndicator
3030
import com.wire.android.ui.common.UserBadge
3131
import com.wire.android.ui.common.applyIf
3232
import com.wire.android.ui.common.dimensions
33+
import com.wire.android.ui.common.typography
3334
import com.wire.android.ui.home.conversations.model.MessageHeader
3435
import com.wire.android.ui.theme.Accent
3536
import com.wire.android.ui.theme.wireColorScheme
@@ -106,7 +107,7 @@ fun MessageSmallLabel(
106107
) {
107108
Text(
108109
text = text,
109-
style = MaterialTheme.typography.labelSmall.copy(color = messageStyle.textColor()),
110+
style = typography().subline01.copy(color = messageStyle.textColor()),
110111
maxLines = 1,
111112
modifier = modifier.alpha(messageStyle.alpha())
112113
)

0 commit comments

Comments
 (0)