From 2b76aeb14163965f582f3365339df86d8bdf2c72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jorge=20Mart=C3=ADn?= Date: Fri, 15 Dec 2023 08:51:14 +0100 Subject: [PATCH] Center images in the message bubble. Always display a white background for them. --- .../impl/timeline/components/MessageEventBubble.kt | 9 +++++---- .../impl/timeline/components/TimelineItemEventRow.kt | 6 +++++- .../timeline/components/event/TimelineItemImageView.kt | 2 +- .../messages/impl/timeline/model/bubble/BubbleState.kt | 1 + .../impl/timeline/model/bubble/BubbleStateProvider.kt | 2 ++ .../timeline/model/event/TimelineItemEventContent.kt | 7 +++++++ 6 files changed, 21 insertions(+), 6 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessageEventBubble.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessageEventBubble.kt index 5132aa56215..ad45f636fc3 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessageEventBubble.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessageEventBubble.kt @@ -32,6 +32,7 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp @@ -99,10 +100,10 @@ fun MessageEventBubble( } // Ignore state.isHighlighted for now, we need a design decision on it. - val backgroundBubbleColor = if (state.isMine) { - ElementTheme.colors.messageFromMeBackground - } else { - ElementTheme.colors.messageFromOtherBackground + val backgroundBubbleColor = when { + !state.displayBackground -> Color.White + state.isMine -> ElementTheme.colors.messageFromMeBackground + else -> ElementTheme.colors.messageFromOtherBackground } val bubbleShape = bubbleShape() Box( 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 cb8ebcbd2cb..f97b8998859 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 @@ -80,6 +80,7 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContent import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemImageContent import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemTextContent +import io.element.android.features.messages.impl.timeline.model.event.hasMediaThumbnail import io.element.android.features.messages.impl.timeline.model.metadata import io.element.android.libraries.androidutils.system.openUrlInExternalApp import io.element.android.libraries.designsystem.colors.AvatarColorsProvider @@ -301,12 +302,15 @@ private fun TimelineItemEventRowContent( ) } + val displayBubbleBackground = !event.content.hasMediaThumbnail() || event.inReplyTo != null + // Message bubble val bubbleState = BubbleState( groupPosition = event.groupPosition, isMine = event.isMine, isHighlighted = isHighlighted, timelineRoomInfo = timelineRoomInfo, + displayBackground = displayBubbleBackground, ) MessageEventBubble( modifier = Modifier @@ -439,7 +443,7 @@ private fun MessageEventBubbleContent( ) { when (timestampPosition) { TimestampPosition.Overlay -> - Box(modifier) { + Box(modifier, contentAlignment = Alignment.Center) { content() TimelineEventTimestampView( event = event, diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemImageView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemImageView.kt index a537db56d5a..7bebd9e6d7d 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemImageView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemImageView.kt @@ -33,7 +33,7 @@ fun TimelineItemImageView( ) { TimelineItemAspectRatioBox( aspectRatio = content.aspectRatio, - modifier = modifier + modifier = modifier, ) { BlurHashAsyncImage( model = MediaRequestData(content.preferredMediaSource, MediaRequestData.Kind.File(content.body, content.mimeType)), diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/bubble/BubbleState.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/bubble/BubbleState.kt index 4f1fc3c5462..50a88665714 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/bubble/BubbleState.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/bubble/BubbleState.kt @@ -24,4 +24,5 @@ data class BubbleState( val isMine: Boolean, val isHighlighted: Boolean, val timelineRoomInfo: TimelineRoomInfo, + val displayBackground: Boolean, ) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/bubble/BubbleStateProvider.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/bubble/BubbleStateProvider.kt index 9c50a73a6bf..38dff28dfe5 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/bubble/BubbleStateProvider.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/bubble/BubbleStateProvider.kt @@ -48,9 +48,11 @@ internal fun aBubbleState( isMine: Boolean = false, isHighlighted: Boolean = false, timelineRoomInfo: TimelineRoomInfo = aTimelineRoomInfo(), + displayBackground: Boolean = true, ) = BubbleState( groupPosition = groupPosition, isMine = isMine, isHighlighted = isHighlighted, timelineRoomInfo = timelineRoomInfo, + displayBackground = displayBackground, ) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContent.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContent.kt index feb3246e54a..7b269bf135c 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContent.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContent.kt @@ -73,3 +73,10 @@ fun TimelineItemEventContent.isEdited(): Boolean = is TimelineItemPollContent -> isEdited else -> false } + +fun TimelineItemEventContent.hasMediaThumbnail(): Boolean = + when (this) { + is TimelineItemImageContent -> true + is TimelineItemVideoContent -> true + else -> false + }