Merge pull request #7759 from element-hq/feature/bma/startChatIconUpdate

Update Chat icon and text font for Empty room list.
This commit is contained in:
Benoit Marty
2026-10-05 17:12:47 +02:00
committed by GitHub
9 changed files with 49 additions and 37 deletions
@@ -8,7 +8,6 @@
package io.element.android.features.home.impl.components package io.element.android.features.home.impl.components
import androidx.annotation.StringRes
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
@@ -23,7 +22,6 @@ import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
@@ -129,6 +127,9 @@ private fun SkeletonView(
} }
} }
/**
* Ref: https://www.figma.com/design/pDlJZGBsri47FNTXMnEdXB/Compound-Android-Templates?node-id=8-4656
*/
@Composable @Composable
private fun EmptyView( private fun EmptyView(
state: RoomListContentState.Empty, state: RoomListContentState.Empty,
@@ -139,13 +140,19 @@ private fun EmptyView(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
Box(modifier.fillMaxSize()) { Box(modifier.fillMaxSize()) {
val text = buildString {
append(stringResource(R.string.screen_roomlist_empty_title))
append("\n")
append(stringResource(R.string.screen_roomlist_empty_message))
}
EmptyScaffold( EmptyScaffold(
title = R.string.screen_roomlist_empty_title, title = null,
subtitle = R.string.screen_roomlist_empty_message, subtitle = text,
action = { bottomPart = {
Spacer(modifier = Modifier.height(16.dp))
Button( Button(
text = stringResource(CommonStrings.action_start_chat), text = stringResource(CommonStrings.action_start_chat),
leadingIcon = IconSource.Vector(CompoundIcons.Compose()), leadingIcon = IconSource.Vector(CompoundIcons.Chat()),
onClick = onCreateRoomClick, onClick = onCreateRoomClick,
) )
}, },
@@ -299,39 +306,44 @@ private fun EmptyViewForFilterStates(
) { ) {
val emptyStateResources = RoomListFiltersEmptyStateResources.fromSelectedFilters(selectedFilters, isSpaceFilterSelected) ?: return val emptyStateResources = RoomListFiltersEmptyStateResources.fromSelectedFilters(selectedFilters, isSpaceFilterSelected) ?: return
EmptyScaffold( EmptyScaffold(
title = emptyStateResources.title, title = stringResource(emptyStateResources.title),
subtitle = emptyStateResources.subtitle, subtitle = stringResource(emptyStateResources.subtitle),
modifier = modifier, modifier = modifier,
bottomPart = {
// Keep a spacer so that the content is not too low on the screen
Spacer(modifier = Modifier.height(32.dp))
}
) )
} }
@Composable @Composable
private fun EmptyScaffold( private fun EmptyScaffold(
@StringRes title: Int, title: String?,
@StringRes subtitle: Int, subtitle: String,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
action: @Composable (ColumnScope.() -> Unit)? = null, bottomPart: @Composable ColumnScope.() -> Unit,
) { ) {
Column( Column(
modifier = modifier.padding(horizontal = 60.dp), modifier = modifier.padding(horizontal = 60.dp),
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center verticalArrangement = Arrangement.Center
) { ) {
title?.let {
Text(
text = title,
style = ElementTheme.typography.fontHeadingMdBold,
color = ElementTheme.colors.textPrimary,
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(16.dp))
}
Text( Text(
text = stringResource(title), text = subtitle,
style = ElementTheme.typography.fontHeadingMdBold,
color = ElementTheme.colors.textPrimary,
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = stringResource(subtitle),
style = ElementTheme.typography.fontBodyLgRegular, style = ElementTheme.typography.fontBodyLgRegular,
color = ElementTheme.colors.textSecondary, color = ElementTheme.colors.textSecondary,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
) )
Spacer(modifier = Modifier.height(32.dp)) bottomPart()
action?.invoke(this)
} }
} }