diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt index 6a436adabc..1cc84eee78 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt @@ -87,6 +87,7 @@ import io.element.android.libraries.designsystem.components.ExpandableBottomShee import io.element.android.libraries.designsystem.components.ExpandableBottomSheetLayoutState import io.element.android.libraries.designsystem.components.avatar.Avatar import io.element.android.libraries.designsystem.components.avatar.AvatarData +import io.element.android.libraries.designsystem.components.avatar.AvatarSize import io.element.android.libraries.designsystem.components.avatar.AvatarType import io.element.android.libraries.designsystem.components.button.BackButton import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog @@ -95,6 +96,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.text.toAnnotatedString import io.element.android.libraries.designsystem.theme.components.BottomSheetDragHandle +import io.element.android.libraries.designsystem.theme.components.HorizontalDivider import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Scaffold import io.element.android.libraries.designsystem.theme.components.Text @@ -111,10 +113,14 @@ import io.element.android.libraries.matrix.api.encryption.identity.IdentityState import io.element.android.libraries.matrix.api.room.tombstone.SuccessorRoom import io.element.android.libraries.matrix.api.timeline.Timeline import io.element.android.libraries.matrix.api.user.MatrixUser +import io.element.android.libraries.matrix.ui.components.aMatrixUserList +import io.element.android.libraries.matrix.ui.model.getAvatarData import io.element.android.libraries.textcomposer.model.TextEditorState import io.element.android.libraries.ui.strings.CommonStrings import io.element.android.wysiwyg.link.Link import kotlinx.collections.immutable.ImmutableList +import kotlinx.collections.immutable.persistentListOf +import kotlinx.collections.immutable.toImmutableList import timber.log.Timber import kotlin.time.Duration.Companion.milliseconds @@ -202,7 +208,13 @@ fun MessagesView( Column { ConnectivityIndicatorView(isOnline = state.hasNetworkConnection) if (state.timelineState.timelineMode is Timeline.Mode.Thread) { - ThreadTopBar(onBackClick = onBackClick) + ThreadTopBar( + roomName = state.roomName, + roomAvatarData = state.roomAvatar, + heroes = state.heroes, + isTombstoned = state.isTombstoned, + onBackClick = onBackClick, + ) } else { MessagesViewTopBar( roomName = state.roomName, @@ -573,14 +585,48 @@ private fun MessagesViewTopBar( @OptIn(ExperimentalMaterial3Api::class) @Composable private fun ThreadTopBar( + roomName: String?, + roomAvatarData: AvatarData, + heroes: ImmutableList, + isTombstoned: Boolean, onBackClick: () -> Unit, + modifier: Modifier = Modifier, ) { TopAppBar( + modifier = modifier, navigationIcon = { BackButton(onClick = onBackClick) }, title = { - Text(stringResource(CommonStrings.common_thread)) + Row(verticalAlignment = Alignment.CenterVertically) { + Avatar( + avatarData = roomAvatarData, + avatarType = AvatarType.Room( + heroes = heroes, + isTombstoned = isTombstoned, + ), + ) + Column( + modifier = Modifier.fillMaxWidth() + .padding(horizontal = 8.dp) + .semantics { + heading() + }, + ) { + Text( + text = stringResource(CommonStrings.common_thread), + style = ElementTheme.typography.fontBodyLgMedium, + ) + Text( + text = roomName ?: stringResource(CommonStrings.common_no_room_name), + style = ElementTheme.typography.fontBodySmRegular, + fontStyle = FontStyle.Italic.takeIf { roomName == null }, + color = ElementTheme.colors.textSecondary, + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + } + } } ) } @@ -673,3 +719,58 @@ internal fun MessagesViewPreview(@PreviewParameter(MessagesStateProvider::class) knockRequestsBannerView = {}, ) } + +@PreviewsDayNight +@Composable +internal fun ThreadTopBarPreview() { + ElementPreview { + val name = "Room name" + val initialsAvatarData = AvatarData( + id = "id", + name = name, + url = null, + size = AvatarSize.TimelineRoom, + ) + Column { + ThreadTopBar( + roomName = name, + roomAvatarData = initialsAvatarData, + heroes = persistentListOf(), + isTombstoned = false, + onBackClick = {}, + ) + HorizontalDivider() + ThreadTopBar( + roomName = name, + roomAvatarData = initialsAvatarData, + heroes = aMatrixUserList().map { it.getAvatarData(AvatarSize.TimelineRoom) }.toImmutableList(), + isTombstoned = false, + onBackClick = {}, + ) + HorizontalDivider() + ThreadTopBar( + roomName = null, + roomAvatarData = initialsAvatarData, + heroes = persistentListOf(), + isTombstoned = false, + onBackClick = {}, + ) + HorizontalDivider() + ThreadTopBar( + roomName = name, + roomAvatarData = initialsAvatarData.copy(url = "https://some-avatar.jpg"), + heroes = persistentListOf(), + isTombstoned = false, + onBackClick = {}, + ) + HorizontalDivider() + ThreadTopBar( + roomName = name, + roomAvatarData = initialsAvatarData, + heroes = persistentListOf(), + isTombstoned = true, + onBackClick = {}, + ) + } + } +} diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Day_15_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Day_15_en.png index ff317ac8ad..11b3313094 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Day_15_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Day_15_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:045e0d9605be905e4bbc5d88fc5cfa3bd4a109164709ce5276dedc3dbcf2da80 -size 51119 +oid sha256:9571176fb73b9871b6db3c30679a46c776badb56d4e1919ea882b391d893b8c4 +size 53144 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Night_15_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Night_15_en.png index 7fb660b0fb..7d33111f68 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Night_15_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Night_15_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fdb2ca59f48d38d8fa7ebeb9d5768b44f216266a27f6cec9d518b729ecece253 -size 50253 +oid sha256:d6ea6d7eb98c546dbee109d160e2adbbbd4d22d4844835667bfbab1de2060115 +size 52351 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl_ThreadTopBar_Day_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl_ThreadTopBar_Day_0_en.png new file mode 100644 index 0000000000..29d2a7fee4 --- /dev/null +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl_ThreadTopBar_Day_0_en.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:10ef1d5b008da94cdf48525d98bdb1e10f6013124c499f67c9fcd39bee85b7aa +size 33773 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl_ThreadTopBar_Night_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl_ThreadTopBar_Night_0_en.png new file mode 100644 index 0000000000..6a5b231305 --- /dev/null +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl_ThreadTopBar_Night_0_en.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d98bfa7c506d089ae16b2f35ffa4e189ae1a31ca114333d755fd837b13128759 +size 32921