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
private fun StatefulContentLoadingErrorState() {
val state = remember {
mutableStateOf<ContentLoadingErrorState>(ContentLoadingErrorState.Loading)
mutableStateOf(ContentLoadingErrorState.Loading)
}
ContentLoadingErrorView(

View file

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

View file

@ -1,6 +1,7 @@
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.Row
import androidx.compose.foundation.layout.fillMaxWidth
@ -26,49 +27,56 @@ fun ErrorView(
modifier: Modifier = Modifier,
message: String? = null,
onRetry: () -> Unit = { },
contentAlignment: Alignment = Alignment.Center,
) {
Column(
Box(
modifier = Modifier
.fillMaxWidth()
.padding(
vertical = MainTheme.spacings.default,
horizontal = MainTheme.spacings.double,
)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
contentAlignment = contentAlignment,
) {
Icon(
imageVector = Icons.Filled.error,
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,
Column(
modifier = Modifier
.fillMaxWidth()
.padding(
vertical = MainTheme.spacings.default,
horizontal = MainTheme.spacings.double,
),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
) {
Icon(
imageVector = Icons.Filled.error,
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
.fillMaxWidth(),
)
}
Row(
modifier = Modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.End,
) {
ButtonText(
text = stringResource(id = R.string.designsystem_molecule_error_view_button_retry),
onClick = onRetry,
contentPadding = buttonContentPadding(
start = MainTheme.spacings.double,
end = MainTheme.spacings.double,
),
)
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.End,
) {
ButtonText(
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
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
@ -18,22 +20,31 @@ import app.k9mail.core.ui.compose.theme.PreviewWithThemes
fun LoadingView(
modifier: Modifier = Modifier,
message: String? = null,
contentAlignment: Alignment = Alignment.Center,
) {
Column(
Box(
modifier = Modifier
.fillMaxWidth()
.padding(MainTheme.spacings.default)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally,
contentAlignment = contentAlignment,
) {
if (message != null) {
TextSubtitle1(text = message)
}
Row(
modifier = Modifier.height(MainTheme.sizes.larger),
verticalAlignment = Alignment.CenterVertically,
Column(
modifier = Modifier
.fillMaxWidth()
.padding(MainTheme.spacings.default)
.then(modifier),
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),
) {
val resources = LocalContext.current.resources
val cleState = remember(key1 = state.isLoading, key2 = state.error) {
val viewState = remember(key1 = state.isLoading, key2 = state.error) {
when {
state.isLoading -> ContentLoadingErrorState.Loading
state.error != null -> ContentLoadingErrorState.Error
@ -55,7 +55,7 @@ internal fun AccountAutoDiscoveryContent(
}
ContentLoadingErrorView(
state = cleState,
state = viewState,
loading = {
LoadingView(
message = stringResource(id = R.string.account_setup_auto_discovery_loading_message),