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
|
@Composable
|
||||||
private fun StatefulContentLoadingErrorState() {
|
private fun StatefulContentLoadingErrorState() {
|
||||||
val state = remember {
|
val state = remember {
|
||||||
mutableStateOf<ContentLoadingErrorState>(ContentLoadingErrorState.Loading)
|
mutableStateOf(ContentLoadingErrorState.Loading)
|
||||||
}
|
}
|
||||||
|
|
||||||
ContentLoadingErrorView(
|
ContentLoadingErrorView(
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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),
|
||||||
|
|
Loading…
Reference in a new issue