diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineStateProvider.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineStateProvider.kt index d807115db6..8e29f3d25c 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineStateProvider.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineStateProvider.kt @@ -117,7 +117,7 @@ internal fun aTimelineItemEvent( ), sentTime = "12:34", isMine = isMine, - senderDisplayName = "sender", + senderDisplayName = "Sender", groupPosition = groupPosition, sendState = sendState, inReplyTo = inReplyTo, 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 707d7b8de6..bad0cc43f5 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 @@ -16,6 +16,7 @@ package io.element.android.features.messages.impl.timeline.components +import androidx.compose.foundation.Canvas import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource @@ -40,12 +41,14 @@ 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.layout.LastBaseline +import androidx.compose.ui.draw.clipToBounds +import androidx.compose.ui.geometry.Offset import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import androidx.compose.ui.zIndex import io.element.android.features.messages.impl.timeline.aTimelineItemEvent import io.element.android.features.messages.impl.timeline.components.event.TimelineItemEventContentView @@ -115,7 +118,7 @@ fun TimelineItemEventRow( event.senderAvatar, Modifier .zIndex(1f) - .offset(y = 12.dp) + .offset(y = 8.dp) .clickable(onClick = ::onUserDataClicked) ) } @@ -163,20 +166,38 @@ fun TimelineItemEventRow( @Composable private fun MessageSenderInformation( sender: String, - senderAvatar: AvatarData?, + senderAvatar: AvatarData, modifier: Modifier = Modifier ) { - Row(modifier = modifier) { - if (senderAvatar != null) { + val avatarStrokeSize = 3.dp + val avatarStrokeColor = MaterialTheme.colorScheme.background + val avatarSize = senderAvatar.size.dp + Box( + modifier = modifier.offset(y = avatarStrokeSize) + ) { + // Background of Avatar, to erase the corner of the message content + Canvas( + modifier = Modifier + .size(size = avatarSize + avatarStrokeSize) + .clipToBounds() + ) { + drawCircle( + color = avatarStrokeColor, + center = Offset(x = (avatarSize / 2).toPx(), y = (avatarSize / 2).toPx()), + radius = (avatarSize / 2 + avatarStrokeSize).toPx() + ) + } + // Content + Row { Avatar(senderAvatar) Spacer(modifier = Modifier.width(4.dp)) + Text( + text = sender, + fontSize = 14.sp, + color = MaterialTheme.colorScheme.primary, + style = MaterialTheme.typography.titleMedium, + ) } - Text( - text = sender, - style = MaterialTheme.typography.titleMedium, - modifier = Modifier - .alignBy(LastBaseline) - ) } }