From 560d2a329140679e79b7514fb55440078d9cf322 Mon Sep 17 00:00:00 2001 From: ganfra Date: Tue, 8 Nov 2022 12:04:21 +0100 Subject: [PATCH] Timeline: start refine bubbles --- .../x/features/messages/MessagesScreen.kt | 50 +++++++++++++++---- .../element/android/x/designsystem/Color.kt | 5 +- .../element/android/x/designsystem/Theme.kt | 8 ++- 3 files changed, 51 insertions(+), 12 deletions(-) diff --git a/features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt b/features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt index 71c544b17d..4c8fdae58d 100644 --- a/features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt +++ b/features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt @@ -3,6 +3,7 @@ package io.element.android.x.features.messages import Avatar +import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.* @@ -21,6 +22,8 @@ import androidx.compose.runtime.getValue import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Shape import androidx.compose.ui.layout.LastBaseline import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextOverflow @@ -34,6 +37,8 @@ import io.element.android.x.features.messages.model.MessagesItemGroupPosition import io.element.android.x.features.messages.model.MessagesTimelineItemState import io.element.android.x.features.messages.model.MessagesViewState +private val BUBBLE_RADIUS = 16.dp + @Composable fun MessagesScreen( roomId: String, @@ -124,6 +129,9 @@ fun TimelineItems( verticalArrangement = Arrangement.Bottom, reverseLayout = true ) { + item { + Spacer(modifier = Modifier.height(8.dp)) + } itemsIndexed(timelineItems) { index, timelineItem -> TimelineItemRow(timelineItem = timelineItem) } @@ -184,9 +192,9 @@ fun MessageEventRow( } } if (messageEvent.groupPosition is MessagesItemGroupPosition.First) { - Spacer(modifier = Modifier.height(8.dp)) + Spacer(modifier = Modifier.height(16.dp)) } else { - Spacer(modifier = Modifier.height(4.dp)) + Spacer(modifier = Modifier.height(2.dp)) } } @@ -211,17 +219,42 @@ private fun MessageSenderInformation(sender: String, senderAvatar: AvatarData?) fun MessageEventBubble( messageEvent: MessagesTimelineItemState.MessageEvent, ) { - val backgroundBubbleColor = if (messageEvent.isMine) { - MaterialTheme.colorScheme.surfaceVariant + + fun MessagesTimelineItemState.MessageEvent.bubbleShape(): Shape { + return when (groupPosition) { + MessagesItemGroupPosition.First -> if (isMine) { + RoundedCornerShape(BUBBLE_RADIUS, BUBBLE_RADIUS, 0.dp, BUBBLE_RADIUS) + } else { + RoundedCornerShape(BUBBLE_RADIUS, BUBBLE_RADIUS, BUBBLE_RADIUS, 0.dp) + } + MessagesItemGroupPosition.Middle -> if (isMine) { + RoundedCornerShape(BUBBLE_RADIUS, 0.dp, 0.dp, BUBBLE_RADIUS) + } else { + RoundedCornerShape(0.dp, BUBBLE_RADIUS, BUBBLE_RADIUS, 0.dp) + } + MessagesItemGroupPosition.Last -> if (isMine) { + RoundedCornerShape(BUBBLE_RADIUS, 0.dp, BUBBLE_RADIUS, BUBBLE_RADIUS) + } else { + RoundedCornerShape(0.dp, BUBBLE_RADIUS, BUBBLE_RADIUS, BUBBLE_RADIUS) + } + MessagesItemGroupPosition.None -> + RoundedCornerShape(BUBBLE_RADIUS, BUBBLE_RADIUS, BUBBLE_RADIUS, BUBBLE_RADIUS) + } + } + + val (backgroundBubbleColor, border) = if (messageEvent.isMine) { + Pair(MaterialTheme.colorScheme.surfaceVariant, null) } else { - MaterialTheme.colorScheme.primary + Pair(Color.Transparent, BorderStroke(1.dp, MaterialTheme.colorScheme.surfaceVariant)) } Surface( + modifier = Modifier.widthIn(min = 80.dp), color = backgroundBubbleColor, - shape = RoundedCornerShape(20.dp, 20.dp, 20.dp, 20.dp), + shape = messageEvent.bubbleShape(), + border = border ) { Text( - modifier = Modifier.padding(16.dp), + modifier = Modifier.padding(horizontal = 12.dp, vertical = 6.dp), text = messageEvent.content ?: "", ) } @@ -242,5 +275,4 @@ internal fun MessagesLoadingMoreIndicator(onReachedLoadMore: () -> Unit) { } } -} - +} \ No newline at end of file diff --git a/libraries/designsystem/src/main/java/io/element/android/x/designsystem/Color.kt b/libraries/designsystem/src/main/java/io/element/android/x/designsystem/Color.kt index 6d1e92c5df..cee52b821e 100644 --- a/libraries/designsystem/src/main/java/io/element/android/x/designsystem/Color.kt +++ b/libraries/designsystem/src/main/java/io/element/android/x/designsystem/Color.kt @@ -6,4 +6,7 @@ val LightGrey = Color(0x993C3C43) val DarkGrey = Color(0x99EBEBF5) val AvatarGradientStart = Color(0xFF4CA1AF) -val AvatarGradientEnd = Color(0xFFC4E0E5) \ No newline at end of file +val AvatarGradientEnd = Color(0xFFC4E0E5) + +val SystemGreyLight = Color(0xFFE5E5EA) +val SystemGreyDark = Color(0xFF1C1C1E) \ No newline at end of file diff --git a/libraries/designsystem/src/main/java/io/element/android/x/designsystem/Theme.kt b/libraries/designsystem/src/main/java/io/element/android/x/designsystem/Theme.kt index ca6e3c1f82..7e520806fe 100644 --- a/libraries/designsystem/src/main/java/io/element/android/x/designsystem/Theme.kt +++ b/libraries/designsystem/src/main/java/io/element/android/x/designsystem/Theme.kt @@ -16,7 +16,9 @@ private val DarkColorScheme = darkColorScheme( background = Color.Black, onBackground = Color.White, surface = Color.Black, - onSurface = Color.White + surfaceVariant = SystemGreyDark, + onSurface = Color.White, + onSurfaceVariant = Color.White, ) private val LightColorScheme = lightColorScheme( @@ -26,7 +28,9 @@ private val LightColorScheme = lightColorScheme( background = Color.White, onBackground = Color.Black, surface = Color.White, - onSurface = Color.Black + surfaceVariant = SystemGreyLight, + onSurface = Color.Black, + onSurfaceVariant = Color.Black, /* Other default colors to override background = Color(0xFFFFFBFE),