From 0aa1084fb3c59948361c1de3ae29db74e9bf60c5 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Wed, 25 Mar 2026 15:27:36 +0100 Subject: [PATCH] Update UI of replies. --- .../components/TimelineItemEventRow.kt | 61 +++++++++++-------- .../matrix/ui/messages/reply/InReplyToView.kt | 13 ++-- .../textcomposer/ComposerModeView.kt | 9 ++- 3 files changed, 49 insertions(+), 34 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt index b253f45937..a814d8da42 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt @@ -10,6 +10,7 @@ package io.element.android.features.messages.impl.timeline.components import android.annotation.SuppressLint import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.gestures.draggable @@ -269,7 +270,9 @@ fun TimelineItemEventRow( if (displayThreadSummaries && timelineMode !is Timeline.Mode.Thread && event.threadInfo is TimelineItemThreadInfo.ThreadRoot) { ThreadSummaryView( modifier = if (event.isMine) { - Modifier.align(Alignment.End).padding(end = 16.dp) + Modifier + .align(Alignment.End) + .padding(end = 16.dp) } else { if (timelineRoomInfo.isDm) Modifier else Modifier.padding(start = 16.dp) }.padding(top = 2.dp), @@ -742,11 +745,17 @@ private fun MessageEventBubbleContent( } else { inReplyToModifier.clickable(onClick = inReplyToClick) } - InReplyToView( - inReplyTo = inReplyTo, - hideImage = timelineProtectionState.hideMediaContent(inReplyTo.eventId()), - modifier = talkbackCompatModifier, - ) + Row( + talkbackCompatModifier + .border(1.dp, ElementTheme.colors.borderInteractiveSecondary, RoundedCornerShape(6.dp)) + .background(ElementTheme.colors.bgCanvasDefault, RoundedCornerShape(6.dp)) + .padding(4.dp) + ) { + InReplyToView( + inReplyTo = inReplyTo, + hideImage = timelineProtectionState.hideMediaContent(inReplyTo.eventId()), + ) + } } if (inReplyToDetails != null) { // Use SubComposeLayout only if necessary as it can have consequences on the performance. @@ -833,25 +842,27 @@ internal fun TimelineItemEventRowWithThreadSummaryPreview() = ElementPreview { groupPosition = TimelineItemGroupPosition.First, threadInfo = TimelineItemThreadInfo.ThreadRoot( latestEventText = "This is the latest message in the thread", - summary = ThreadSummary(AsyncData.Success( - EmbeddedEventInfo( - eventOrTransactionId = EventOrTransactionId.Event(EventId("\$event-id")), - content = MessageContent( - body = "This is the latest message in the thread", - inReplyTo = null, - isEdited = false, - threadInfo = null, - type = TextMessageType("This is the latest message in the thread", null) - ), - senderId = UserId("@user:id"), - senderProfile = ProfileDetails.Ready( - displayName = "Alice", - avatarUrl = null, - displayNameAmbiguous = false, - ), - timestamp = 0L, - ) - ), numberOfReplies = 20L) + summary = ThreadSummary( + AsyncData.Success( + EmbeddedEventInfo( + eventOrTransactionId = EventOrTransactionId.Event(EventId("\$event-id")), + content = MessageContent( + body = "This is the latest message in the thread", + inReplyTo = null, + isEdited = false, + threadInfo = null, + type = TextMessageType("This is the latest message in the thread", null) + ), + senderId = UserId("@user:id"), + senderProfile = ProfileDetails.Ready( + displayName = "Alice", + avatarUrl = null, + displayNameAmbiguous = false, + ), + timestamp = 0L, + ) + ), numberOfReplies = 20L + ) ) ), displayThreadSummaries = true, diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToView.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToView.kt index dcf12f1953..0dc8aac09e 100644 --- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToView.kt +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToView.kt @@ -18,7 +18,6 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -82,19 +81,19 @@ private fun ReplyToReadyContent( modifier: Modifier = Modifier, ) { val paddings = if (metadata is InReplyToMetadata.Thumbnail) { - PaddingValues(start = 4.dp, end = 12.dp, top = 4.dp, bottom = 4.dp) + PaddingValues(end = 8.dp) } else { - PaddingValues(horizontal = 12.dp, vertical = 4.dp) + PaddingValues(start = 8.dp, end = 8.dp) } Row( modifier - .background(MaterialTheme.colorScheme.surface) + .background(ElementTheme.colors.bgCanvasDefault) .padding(paddings) ) { if (metadata is InReplyToMetadata.Thumbnail) { AttachmentThumbnail( info = metadata.attachmentThumbnailInfo, - backgroundColor = MaterialTheme.colorScheme.surfaceVariant, + backgroundColor = ElementTheme.colors.bgSubtlePrimary, modifier = Modifier .size(36.dp) .clip(RoundedCornerShape(4.dp)) @@ -128,7 +127,7 @@ private fun ReplyToLoadingContent( val paddings = PaddingValues(horizontal = 12.dp, vertical = 4.dp) Row( modifier - .background(MaterialTheme.colorScheme.surface) + .background(ElementTheme.colors.bgCanvasDefault) .padding(paddings) ) { Column(verticalArrangement = Arrangement.spacedBy(4.dp)) { @@ -146,7 +145,7 @@ private fun ReplyToErrorContent( val paddings = PaddingValues(horizontal = 12.dp, vertical = 4.dp) Row( modifier - .background(MaterialTheme.colorScheme.surface) + .background(ElementTheme.colors.bgCanvasDefault) .padding(paddings) ) { Text( diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt index ac64245668..3d7c4f810c 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt @@ -9,6 +9,7 @@ package io.element.android.libraries.textcomposer import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement @@ -120,6 +121,9 @@ private fun EditingModeView( } } +/** + * https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=2019-6286 + */ @Composable private fun ReplyToModeView( replyToDetails: InReplyToDetails, @@ -129,8 +133,9 @@ private fun ReplyToModeView( ) { Row( modifier - .clip(RoundedCornerShape(13.dp)) - .background(MaterialTheme.colorScheme.surface) + .clip(RoundedCornerShape(6.dp)) + .background(ElementTheme.colors.bgCanvasDefault) + .border(1.dp, ElementTheme.colors.borderInteractiveSecondary, RoundedCornerShape(6.dp)) .padding(4.dp) ) { InReplyToView(