Update EmptySpaceView design to match figma

This commit is contained in:
ganfra 2026-02-05 16:17:36 +01:00
parent 523e0ff41b
commit af4b2c3aa7
2 changed files with 45 additions and 10 deletions

View file

@ -50,6 +50,7 @@ import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.features.space.impl.R import io.element.android.features.space.impl.R
import io.element.android.libraries.architecture.AsyncAction import io.element.android.libraries.architecture.AsyncAction
import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
import io.element.android.libraries.designsystem.atomic.molecules.InviteButtonsRowMolecule import io.element.android.libraries.designsystem.atomic.molecules.InviteButtonsRowMolecule
import io.element.android.libraries.designsystem.components.BigIcon import io.element.android.libraries.designsystem.components.BigIcon
@ -76,6 +77,7 @@ import io.element.android.libraries.designsystem.theme.components.HorizontalDivi
import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.IconButton import io.element.android.libraries.designsystem.theme.components.IconButton
import io.element.android.libraries.designsystem.theme.components.IconSource import io.element.android.libraries.designsystem.theme.components.IconSource
import io.element.android.libraries.designsystem.theme.components.OutlinedButton
import io.element.android.libraries.designsystem.theme.components.Scaffold import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TextButton import io.element.android.libraries.designsystem.theme.components.TextButton
@ -170,6 +172,7 @@ fun SpaceView(
state.eventSink(SpaceEvents.ShowTopicViewer(topic)) state.eventSink(SpaceEvents.ShowTopicViewer(topic))
}, },
onCreateRoomClick = onCreateRoomClick, onCreateRoomClick = onCreateRoomClick,
onAddRoomClick = onAddRoomClick,
) )
JoinFailuresEffect( JoinFailuresEffect(
hasAnyFailure = state.hasAnyJoinFailures, hasAnyFailure = state.hasAnyJoinFailures,
@ -243,6 +246,7 @@ private fun SpaceViewContent(
onRoomClick: (spaceRoom: SpaceRoom) -> Unit, onRoomClick: (spaceRoom: SpaceRoom) -> Unit,
onTopicClick: (String) -> Unit, onTopicClick: (String) -> Unit,
onCreateRoomClick: () -> Unit, onCreateRoomClick: () -> Unit,
onAddRoomClick: ()->Unit,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
LazyColumn(modifier.fillMaxSize()) { LazyColumn(modifier.fillMaxSize()) {
@ -271,7 +275,10 @@ private fun SpaceViewContent(
if (state.children.isEmpty() && state.canEditSpaceGraph && !state.hasMoreToLoad) { if (state.children.isEmpty() && state.canEditSpaceGraph && !state.hasMoreToLoad) {
item { item {
EmptySpaceView(onCreateRoomClick = onCreateRoomClick) EmptySpaceView(
onCreateRoomClick = onCreateRoomClick,
onAddRoomClick =onAddRoomClick,
)
} }
} else { } else {
itemsIndexed( itemsIndexed(
@ -332,7 +339,10 @@ private fun SpaceViewContent(
} }
@Composable @Composable
private fun EmptySpaceView(onCreateRoomClick: () -> Unit) { private fun EmptySpaceView(
onCreateRoomClick: () -> Unit,
onAddRoomClick: ()->Unit,
) {
Column( Column(
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.padding(bottom = 24.dp), modifier = Modifier.padding(bottom = 24.dp),
@ -340,15 +350,25 @@ private fun EmptySpaceView(onCreateRoomClick: () -> Unit) {
IconTitleSubtitleMolecule( IconTitleSubtitleMolecule(
title = stringResource(R.string.screen_space_empty_state_title), title = stringResource(R.string.screen_space_empty_state_title),
subTitle = null, subTitle = null,
iconStyle = BigIcon.Style.Default(CompoundIcons.Room()), iconStyle = BigIcon.Style.Default(vectorIcon = CompoundIcons.Room(), usePrimaryTint = true),
modifier = Modifier.fillMaxWidth() modifier = Modifier.fillMaxWidth()
.padding(top = 40.dp, start = 24.dp, end = 24.dp, bottom = 24.dp), .padding(top = 40.dp, start = 24.dp, end = 24.dp, bottom = 24.dp),
) )
Button( ButtonColumnMolecule(
text = stringResource(R.string.screen_space_add_room_action), modifier = Modifier.padding(horizontal = 16.dp)
leadingIcon = IconSource.Vector(CompoundIcons.Plus()), ) {
onClick = onCreateRoomClick, Button(
) text = stringResource(CommonStrings.action_add_existing_rooms),
leadingIcon = IconSource.Vector(CompoundIcons.Plus()),
onClick = onAddRoomClick,
modifier = Modifier.fillMaxWidth()
)
OutlinedButton(
text = stringResource(CommonStrings.action_create_room),
onClick = onCreateRoomClick,
modifier = Modifier.fillMaxWidth()
)
}
} }
} }

View file

@ -15,7 +15,6 @@ import androidx.compose.ui.test.junit4.createAndroidComposeRule
import androidx.compose.ui.test.onNodeWithText import androidx.compose.ui.test.onNodeWithText
import androidx.compose.ui.test.performClick import androidx.compose.ui.test.performClick
import androidx.test.ext.junit.runners.AndroidJUnit4 import androidx.test.ext.junit.runners.AndroidJUnit4
import io.element.android.features.space.impl.R
import io.element.android.libraries.architecture.AsyncAction import io.element.android.libraries.architecture.AsyncAction
import io.element.android.libraries.matrix.api.room.CurrentUserMembership import io.element.android.libraries.matrix.api.room.CurrentUserMembership
import io.element.android.libraries.matrix.api.spaces.SpaceRoom import io.element.android.libraries.matrix.api.spaces.SpaceRoom
@ -215,9 +214,25 @@ class SpaceViewTest {
), ),
onCreateRoomClick = onCreateRoomClick, onCreateRoomClick = onCreateRoomClick,
) )
rule.clickOn(R.string.screen_space_add_room_action) rule.clickOn(CommonStrings.action_create_room)
onCreateRoomClick.assertions().isCalledOnce() onCreateRoomClick.assertions().isCalledOnce()
} }
@Test
fun `clicking add existing room button calls the expected callback`() {
val onAddRoomClick = lambdaRecorder<Unit> { }
rule.setSpaceView(
aSpaceState(
children = emptyList(),
hasMoreToLoad = false,
isManageMode = true,
canManageRooms = true,
),
onAddRoomClick = onAddRoomClick,
)
rule.clickOn(CommonStrings.action_add_existing_rooms)
onAddRoomClick.assertions().isCalledOnce()
}
} }
private fun <R : TestRule> AndroidComposeTestRule<R, ComponentActivity>.setSpaceView( private fun <R : TestRule> AndroidComposeTestRule<R, ComponentActivity>.setSpaceView(