From 6330a797aa48184629ab2d98a2599b4975dc3b94 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Mon, 26 Jun 2023 11:04:09 +0200 Subject: [PATCH] Ensure message bubble is .75f width screen ratio. Remove padding from LazyList and apply padding to content to ensure width is correctly computed. Avoid using LocalConfiguration, its not working well with screenshot test. --- .../messages/impl/timeline/TimelineView.kt | 2 +- .../timeline/components/MessageEventBubble.kt | 49 ++++++++++--------- .../components/TimelineItemEventRow.kt | 3 +- 3 files changed, 29 insertions(+), 25 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt index c73cce50f4..a0c1bfa4aa 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt @@ -89,7 +89,7 @@ fun TimelineView( modifier = Modifier.fillMaxSize(), state = lazyListState, reverseLayout = true, - contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp), + contentPadding = PaddingValues(vertical = 8.dp), ) { itemsIndexed( items = state.timelineItems, 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 9ae1a07050..bf1ca9d5ca 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 @@ -20,6 +20,7 @@ import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -31,10 +32,8 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Shape -import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter -import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import io.element.android.features.messages.impl.timeline.model.TimelineItemGroupPosition @@ -50,6 +49,9 @@ import io.element.android.libraries.designsystem.theme.components.Text private val BUBBLE_RADIUS = 12.dp private val BUBBLE_INCOMING_OFFSET = 16.dp +// Design says: The maximum width of a bubble is still 3/4 of the screen width +private const val BUBBLE_WIDTH_RATIO = 0.75f + @OptIn(ExperimentalFoundationApi::class) @Composable fun MessageEventBubble( @@ -105,28 +107,29 @@ fun MessageEventBubble( } } val bubbleShape = bubbleShape() - Surface( + Box( modifier = modifier - .widthIn(min = 80.dp, max = bubbleMaxSize()) - .offsetForItem() - .clip(bubbleShape) - .combinedClickable( - onClick = onClick, - onLongClick = onLongClick, - indication = rememberRipple(), - interactionSource = interactionSource - ), - color = backgroundBubbleColor, - shape = bubbleShape, - content = content - ) -} - -@Composable -fun bubbleMaxSize(): Dp { - // Design says: The maximum width of a bubble is still 3/4 of the screen width even with the new - // timestamps - return LocalConfiguration.current.screenWidthDp.dp * 0.75f + .fillMaxWidth(BUBBLE_WIDTH_RATIO) + .padding(horizontal = 16.dp) + .offsetForItem(), + // Need to repeat this if content width is low. + contentAlignment = if (state.isMine) Alignment.CenterEnd else Alignment.CenterStart + ) { + Surface( + modifier = Modifier + .widthIn(min = 80.dp) + .clip(bubbleShape) + .combinedClickable( + onClick = onClick, + onLongClick = onLongClick, + indication = rememberRipple(), + interactionSource = interactionSource + ), + color = backgroundBubbleColor, + shape = bubbleShape, + content = content + ) + } } @Preview 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 973586bee3..7a5d448e30 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 @@ -148,6 +148,7 @@ fun TimelineItemEventRow( event.safeSenderName, event.senderAvatar, Modifier + .padding(horizontal = 16.dp) .align(Alignment.TopStart) .clickable(onClick = ::onUserDataClicked) ) @@ -158,7 +159,7 @@ fun TimelineItemEventRow( reactionsState = event.reactionsState, modifier = Modifier .align(if (event.isMine) Alignment.BottomEnd else Alignment.BottomStart) - .padding(start = if (event.isMine) 0.dp else 20.dp) + .padding(start = if (event.isMine) 16.dp else 36.dp, end = 16.dp) ) } }