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:
parent
16768c8e8d
commit
5b00628fe6
5 changed files with 72 additions and 55 deletions
|
@ -61,7 +61,7 @@ fun LazyGridScope.stateItems() {
|
|||
@Composable
|
||||
private fun StatefulContentLoadingErrorState() {
|
||||
val state = remember {
|
||||
mutableStateOf<ContentLoadingErrorState>(ContentLoadingErrorState.Loading)
|
||||
mutableStateOf(ContentLoadingErrorState.Loading)
|
||||
}
|
||||
|
||||
ContentLoadingErrorView(
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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),
|
||||
|
|
Loading…
Reference in a new issue