From 8b03203cc1928d1bf92a1455b29c03e5a27304ce Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Wed, 21 Jun 2023 17:31:05 +0200 Subject: [PATCH] Design: iterate on Room List item --- .../impl/components/RoomSummaryRow.kt | 180 +++++++++--------- .../impl/model/RoomListRoomSummaryProvider.kt | 10 +- 2 files changed, 102 insertions(+), 88 deletions(-) diff --git a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt index 248d064bf1..ce08311e33 100644 --- a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt +++ b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt @@ -24,8 +24,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.defaultMinSize +import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.heightIn @@ -37,7 +36,6 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment -import androidx.compose.ui.Alignment.Companion.CenterVertically import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.geometry.Rect @@ -70,7 +68,7 @@ import io.element.android.libraries.designsystem.theme.roomListRoomMessageDate import io.element.android.libraries.designsystem.theme.roomListRoomName import io.element.android.libraries.designsystem.theme.roomListUnreadIndicator -private val minHeight = 72.dp +private val minHeight = 84.dp @OptIn(ExperimentalFoundationApi::class) @Composable @@ -81,108 +79,116 @@ internal fun RoomSummaryRow( modifier: Modifier = Modifier, ) { val clickModifier = if (room.isPlaceholder) { - modifier + Modifier } else { - modifier.combinedClickable( + Modifier.combinedClickable( onClick = { onClick(room) }, onLongClick = { onLongClick(room) }, indication = rememberRipple(), interactionSource = remember { MutableInteractionSource() } ) } - Box( + + Row( modifier = modifier .fillMaxWidth() .heightIn(min = minHeight) .then(clickModifier) + .fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 11.dp) + .height(IntrinsicSize.Min), ) { - DefaultRoomSummaryRow(room = room) + Avatar( + room + .avatarData, + modifier = Modifier + .align(Alignment.CenterVertically) + .placeholder( + visible = room.isPlaceholder, + shape = CircleShape, + color = ElementTheme.colors.roomListPlaceHolder(), + ) + ) + Column( + modifier = Modifier + .fillMaxWidth() + .padding(start = 16.dp) + ) { + Row(modifier = Modifier.fillMaxWidth()) { + NameAndTimestampRow(room = room) + } + Row(modifier = Modifier.fillMaxWidth()) { + LastMessageAndIndicatorRow(room = room) + } + } } } @Composable -internal fun DefaultRoomSummaryRow( - room: RoomListRoomSummary, -) { - Row( +private fun RowScope.NameAndTimestampRow(room: RoomListRoomSummary) { + // Name + Text( modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp) - .defaultMinSize(minHeight = 84.dp) - .height(IntrinsicSize.Min), - verticalAlignment = CenterVertically - ) { - Avatar( - room.avatarData, - modifier = Modifier.placeholder( + .weight(1f) + .padding(end = 16.dp) + .placeholder( visible = room.isPlaceholder, - shape = CircleShape, + shape = TextPlaceholderShape, color = ElementTheme.colors.roomListPlaceHolder(), - ) - ) - Column( - modifier = Modifier - .padding(start = 12.dp, end = 4.dp, top = 12.dp, bottom = 12.dp) - .alignByBaseline() - .weight(1f) - ) { - // Name - Text( - modifier = Modifier.placeholder( - visible = room.isPlaceholder, - shape = TextPlaceholderShape, - color = ElementTheme.colors.roomListPlaceHolder(), - ), - fontSize = 16.sp, - fontWeight = FontWeight.SemiBold, - text = room.name, - color = MaterialTheme.roomListRoomName(), - maxLines = 1, - overflow = TextOverflow.Ellipsis - ) - // Last Message - val attributedLastMessage = (room.lastMessage as? AnnotatedString) - ?: AnnotatedString(room.lastMessage.orEmpty().toString()) - Text( - modifier = Modifier.placeholder( - visible = room.isPlaceholder, - shape = TextPlaceholderShape, - color = ElementTheme.colors.roomListPlaceHolder(), - ), - text = attributedLastMessage, - color = MaterialTheme.roomListRoomMessage(), - fontSize = 14.sp, - maxLines = 1, - overflow = TextOverflow.Ellipsis - ) - } - // Timestamp and Unread - Column( - modifier = Modifier - .alignByBaseline(), - ) { - Text( - modifier = Modifier.placeholder( - visible = room.isPlaceholder, - shape = TextPlaceholderShape, - color = ElementTheme.colors.roomListPlaceHolder(), - ), - fontSize = 12.sp, - text = room.timestamp ?: "", - color = MaterialTheme.roomListRoomMessageDate(), - ) - Spacer(Modifier.size(4.dp)) - val unreadIndicatorColor = - if (room.hasUnread) MaterialTheme.roomListUnreadIndicator() else Color.Transparent - Box( - modifier = Modifier - .size(12.dp) - .clip(CircleShape) - .background(unreadIndicatorColor) - .align(Alignment.End), - ) - } - } + ), + fontSize = 16.sp, + fontWeight = FontWeight.SemiBold, + style = MaterialTheme.typography.bodyMedium, + text = room.name, + color = MaterialTheme.roomListRoomName(), + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + // Timestamp + Text( + modifier = Modifier + .placeholder( + visible = room.isPlaceholder, + shape = TextPlaceholderShape, + color = ElementTheme.colors.roomListPlaceHolder(), + ), + fontSize = 12.sp, + text = room.timestamp ?: "", + color = MaterialTheme.roomListRoomMessageDate(), + ) +} + +@Composable +private fun RowScope.LastMessageAndIndicatorRow(room: RoomListRoomSummary) { + // Last Message + val attributedLastMessage = (room.lastMessage as? AnnotatedString) + ?: AnnotatedString(room.lastMessage.orEmpty().toString()) + Text( + modifier = Modifier + .weight(1f) + .padding(end = 28.dp) + .placeholder( + visible = room.isPlaceholder, + shape = TextPlaceholderShape, + color = ElementTheme.colors.roomListPlaceHolder(), + ), + text = attributedLastMessage, + color = MaterialTheme.roomListRoomMessage(), + fontSize = 14.sp, + style = MaterialTheme.typography.bodySmall, + maxLines = 2, + overflow = TextOverflow.Ellipsis + ) + // Unread + val unreadIndicatorColor = + if (room.hasUnread) MaterialTheme.roomListUnreadIndicator() else Color.Transparent + Box( + modifier = Modifier + .padding(top = 3.dp) + .size(12.dp) + .clip(CircleShape) + .background(unreadIndicatorColor), + ) } val TextPlaceholderShape = PercentRectangleSizeShape(0.5f) diff --git a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/model/RoomListRoomSummaryProvider.kt b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/model/RoomListRoomSummaryProvider.kt index 357de89d0f..cd6ca21106 100644 --- a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/model/RoomListRoomSummaryProvider.kt +++ b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/model/RoomListRoomSummaryProvider.kt @@ -29,7 +29,15 @@ open class RoomListRoomSummaryProvider : PreviewParameterProvider