Wrap ErrorView and LoadingView in a box to be able to scale them to fillSize without changing their content size

This commit is contained in:
Wolf-Martell Montwé 2023-09-19 11:41:18 +02:00
parent 16768c8e8d
commit 5b00628fe6
No known key found for this signature in database
GPG key ID: 6D45B21512ACBF72
5 changed files with 72 additions and 55 deletions

View file

@ -61,7 +61,7 @@ fun LazyGridScope.stateItems() {
@Composable @Composable
private fun StatefulContentLoadingErrorState() { private fun StatefulContentLoadingErrorState() {
val state = remember { val state = remember {
mutableStateOf<ContentLoadingErrorState>(ContentLoadingErrorState.Loading) mutableStateOf(ContentLoadingErrorState.Loading)
} }
ContentLoadingErrorView( ContentLoadingErrorView(

View file

@ -30,7 +30,7 @@ fun ContentLoadingErrorView(
) { ) {
AnimatedContent( AnimatedContent(
targetState = state, targetState = state,
label = "CleView", label = "ContentLoadingErrorView",
) { targetState -> ) { targetState ->
when (targetState) { when (targetState) {
ContentLoadingErrorState.Loading -> loading() ContentLoadingErrorState.Loading -> loading()
@ -41,10 +41,8 @@ fun ContentLoadingErrorView(
} }
} }
sealed interface ContentLoadingErrorState { enum class ContentLoadingErrorState {
object Loading : ContentLoadingErrorState Loading, Content, Error
object Content : ContentLoadingErrorState
object Error : ContentLoadingErrorState
} }
@Composable @Composable
@ -52,7 +50,7 @@ sealed interface ContentLoadingErrorState {
internal fun ContentLoadingErrorViewPreview() { internal fun ContentLoadingErrorViewPreview() {
PreviewWithThemes { PreviewWithThemes {
val state = remember { val state = remember {
mutableStateOf<ContentLoadingErrorState>(ContentLoadingErrorState.Loading) mutableStateOf(ContentLoadingErrorState.Loading)
} }
ContentLoadingErrorView( ContentLoadingErrorView(

View file

@ -1,6 +1,7 @@
package app.k9mail.core.ui.compose.designsystem.molecule package app.k9mail.core.ui.compose.designsystem.molecule
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
@ -26,49 +27,56 @@ fun ErrorView(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
message: String? = null, message: String? = null,
onRetry: () -> Unit = { }, onRetry: () -> Unit = { },
contentAlignment: Alignment = Alignment.Center,
) { ) {
Column( Box(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(
vertical = MainTheme.spacings.default,
horizontal = MainTheme.spacings.double,
)
.then(modifier), .then(modifier),
horizontalAlignment = Alignment.CenterHorizontally, contentAlignment = contentAlignment,
verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
) { ) {
Icon( Column(
imageVector = Icons.Filled.error, modifier = Modifier
contentDescription = null, .fillMaxWidth()
tint = MainTheme.colors.error, .padding(
modifier = Modifier.padding(top = MainTheme.spacings.default), vertical = MainTheme.spacings.default,
) horizontal = MainTheme.spacings.double,
TextSubtitle1( ),
text = title, horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.padding(bottom = MainTheme.spacings.default), verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
) ) {
if (message != null) { Icon(
TextBody2( imageVector = Icons.Filled.error,
text = message, contentDescription = null,
tint = MainTheme.colors.error,
modifier = Modifier.padding(top = MainTheme.spacings.default),
)
TextSubtitle1(
text = title,
modifier = Modifier.padding(bottom = MainTheme.spacings.default),
)
if (message != null) {
TextBody2(
text = message,
modifier = Modifier
.fillMaxWidth(),
)
}
Row(
modifier = Modifier modifier = Modifier
.fillMaxWidth(), .fillMaxWidth(),
) verticalAlignment = Alignment.CenterVertically,
} horizontalArrangement = Arrangement.End,
Row( ) {
modifier = Modifier ButtonText(
.fillMaxWidth(), text = stringResource(id = R.string.designsystem_molecule_error_view_button_retry),
verticalAlignment = Alignment.CenterVertically, onClick = onRetry,
horizontalArrangement = Arrangement.End, contentPadding = buttonContentPadding(
) { start = MainTheme.spacings.double,
ButtonText( end = MainTheme.spacings.double,
text = stringResource(id = R.string.designsystem_molecule_error_view_button_retry), ),
onClick = onRetry, )
contentPadding = buttonContentPadding( }
start = MainTheme.spacings.double,
end = MainTheme.spacings.double,
),
)
} }
} }
} }

View file

@ -1,5 +1,7 @@
package app.k9mail.core.ui.compose.designsystem.molecule package app.k9mail.core.ui.compose.designsystem.molecule
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
@ -18,22 +20,31 @@ import app.k9mail.core.ui.compose.theme.PreviewWithThemes
fun LoadingView( fun LoadingView(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
message: String? = null, message: String? = null,
contentAlignment: Alignment = Alignment.Center,
) { ) {
Column( Box(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(MainTheme.spacings.default)
.then(modifier), .then(modifier),
horizontalAlignment = Alignment.CenterHorizontally, contentAlignment = contentAlignment,
) { ) {
if (message != null) { Column(
TextSubtitle1(text = message) modifier = Modifier
} .fillMaxWidth()
Row( .padding(MainTheme.spacings.default)
modifier = Modifier.height(MainTheme.sizes.larger), .then(modifier),
verticalAlignment = Alignment.CenterVertically, horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) { ) {
CircularProgressIndicator() if (message != null) {
TextSubtitle1(text = message)
}
Row(
modifier = Modifier.height(MainTheme.sizes.larger),
verticalAlignment = Alignment.CenterVertically,
) {
CircularProgressIndicator()
}
} }
} }
} }

View file

@ -46,7 +46,7 @@ internal fun AccountAutoDiscoveryContent(
.then(modifier), .then(modifier),
) { ) {
val resources = LocalContext.current.resources val resources = LocalContext.current.resources
val cleState = remember(key1 = state.isLoading, key2 = state.error) { val viewState = remember(key1 = state.isLoading, key2 = state.error) {
when { when {
state.isLoading -> ContentLoadingErrorState.Loading state.isLoading -> ContentLoadingErrorState.Loading
state.error != null -> ContentLoadingErrorState.Error state.error != null -> ContentLoadingErrorState.Error
@ -55,7 +55,7 @@ internal fun AccountAutoDiscoveryContent(
} }
ContentLoadingErrorView( ContentLoadingErrorView(
state = cleState, state = viewState,
loading = { loading = {
LoadingView( LoadingView(
message = stringResource(id = R.string.account_setup_auto_discovery_loading_message), message = stringResource(id = R.string.account_setup_auto_discovery_loading_message),