Center images in the message bubble.

Always display a white background for them.
element-hq · Dec 15, 2023 · 2b76aeb · 2b76aeb
1 parent b4ce316
commit 2b76aeb
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 6 deletions.
diff --git a/...otlin/io/element/android/features/messages/impl/timeline/components/MessageEventBubble.kt b/...otlin/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/...lin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt b/...lin/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/...element/android/features/messages/impl/timeline/components/event/TimelineItemImageView.kt b/...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/...ain/kotlin/io/element/android/features/messages/impl/timeline/model/bubble/BubbleState.kt b/...ain/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/...in/io/element/android/features/messages/impl/timeline/model/bubble/BubbleStateProvider.kt b/...in/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/...o/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContent.kt b/...o/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
+    }