Update dialog content

This commit is contained in:
Thomas Andres Gomez 2022-04-21 11:08:20 +02:00
parent af5521f6bb
commit 5a1ff33a46
8 changed files with 83 additions and 91 deletions

View file

@ -13,8 +13,8 @@ import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.Dialog
import com.pixelized.biblib.ui.old.composable.dialog.ErrorCard import com.pixelized.biblib.ui.composable.dialog.ErrorCard
import com.pixelized.biblib.ui.old.composable.dialog.LoadingCard import com.pixelized.biblib.ui.composable.dialog.LoadingCard
sealed class StateUio<T> { sealed class StateUio<T> {
class Progress<T>(val progress: Float? = null) : StateUio<T>() class Progress<T>(val progress: Float? = null) : StateUio<T>()

View file

@ -1,9 +1,8 @@
package com.pixelized.biblib.ui.old.composable.dialog package com.pixelized.biblib.ui.composable.dialog
import androidx.compose.foundation.layout.Column import android.content.res.Configuration.UI_MODE_NIGHT_NO
import androidx.compose.foundation.layout.height import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.width
import androidx.compose.material.Card import androidx.compose.material.Card
import androidx.compose.material.Icon import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme import androidx.compose.material.MaterialTheme
@ -16,10 +15,10 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.pixelized.biblib.R import com.pixelized.biblib.R
import com.pixelized.biblib.ui.theme.BibLibTheme import com.pixelized.biblib.ui.theme.BibLibTheme
import com.pixelized.biblib.utils.exception.NoBearerException import com.pixelized.biblib.utils.exception.NoBearerException
import com.pixelized.biblib.utils.extention.bibLib
@Composable @Composable
@ -28,25 +27,29 @@ fun ErrorCard(
message: String = stringResource(id = R.string.error_generic), message: String = stringResource(id = R.string.error_generic),
exception: Exception? = null, exception: Exception? = null,
) { ) {
Card(elevation = 8.dp, modifier = modifier) { Card(
modifier = modifier,
elevation = MaterialTheme.bibLib.dimen.dialog.elevation,
) {
Column( Column(
modifier = Modifier modifier = Modifier
.width(250.dp) .padding(MaterialTheme.bibLib.dimen.medium)
.padding(32.dp) .sizeIn(
minWidth = MaterialTheme.bibLib.dimen.dialog.minWidth,
minHeight = MaterialTheme.bibLib.dimen.dialog.minHeight,
),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) { ) {
Icon( Icon(
modifier = Modifier modifier = Modifier.size(MaterialTheme.bibLib.dimen.dialog.iconSize),
.width(64.dp)
.height(64.dp)
.align(Alignment.CenterHorizontally)
.padding(bottom = 16.dp),
tint = MaterialTheme.colors.error, tint = MaterialTheme.colors.error,
imageVector = Icons.Sharp.ErrorOutline, imageVector = Icons.Sharp.ErrorOutline,
contentDescription = "error" contentDescription = null
) )
if (message.isNotEmpty()) { if (message.isNotEmpty()) {
Text( Text(
modifier = Modifier.align(Alignment.CenterHorizontally), modifier = Modifier.padding(top = MaterialTheme.bibLib.dimen.medium),
style = MaterialTheme.typography.body1, style = MaterialTheme.typography.body1,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
text = message text = message
@ -54,9 +57,7 @@ fun ErrorCard(
} }
if (exception != null) { if (exception != null) {
Text( Text(
modifier = Modifier modifier = Modifier.padding(top = MaterialTheme.bibLib.dimen.small),
.padding(top = 8.dp)
.align(Alignment.CenterHorizontally),
style = MaterialTheme.typography.caption, style = MaterialTheme.typography.caption,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
text = exception.message ?: exception::class.java.simpleName text = exception.message ?: exception::class.java.simpleName
@ -66,18 +67,11 @@ fun ErrorCard(
} }
} }
@Preview
@Composable @Composable
@Preview(uiMode = UI_MODE_NIGHT_NO)
@Preview(uiMode = UI_MODE_NIGHT_YES)
private fun ErrorCardLightPreview() { private fun ErrorCardLightPreview() {
BibLibTheme(darkTheme = false) { BibLibTheme {
ErrorCard(exception = NoBearerException())
}
}
@Preview
@Composable
private fun ErrorCardDarkPreview() {
BibLibTheme(darkTheme = true) {
ErrorCard(exception = NoBearerException()) ErrorCard(exception = NoBearerException())
} }
} }

View file

@ -1,8 +1,7 @@
package com.pixelized.biblib.ui.old.composable.dialog package com.pixelized.biblib.ui.composable.dialog
import androidx.compose.foundation.layout.Column import android.content.res.Configuration
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.width
import androidx.compose.material.Card import androidx.compose.material.Card
import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.MaterialTheme import androidx.compose.material.MaterialTheme
@ -13,7 +12,6 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.pixelized.biblib.R import com.pixelized.biblib.R
import com.pixelized.biblib.ui.theme.BibLibTheme import com.pixelized.biblib.ui.theme.BibLibTheme
import com.pixelized.biblib.utils.extention.bibLib import com.pixelized.biblib.utils.extention.bibLib
@ -25,30 +23,34 @@ fun LoadingCard(
progress: Float? = null, progress: Float? = null,
message: String? = null, message: String? = null,
) { ) {
Card(elevation = 8.dp, modifier = modifier) { Card(
modifier = modifier,
elevation = MaterialTheme.bibLib.dimen.dialog.elevation,
) {
Column( Column(
modifier = Modifier modifier = Modifier
.width(250.dp) .padding(MaterialTheme.bibLib.dimen.medium)
.padding(32.dp) .sizeIn(
minWidth = MaterialTheme.bibLib.dimen.dialog.minWidth,
minHeight = MaterialTheme.bibLib.dimen.dialog.minHeight,
),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) { ) {
if (progress == null) { if (progress == null) {
CircularProgressIndicator( CircularProgressIndicator(
modifier = Modifier modifier = Modifier.size(MaterialTheme.bibLib.dimen.dialog.iconSize)
.align(Alignment.CenterHorizontally)
.padding(bottom = MaterialTheme.bibLib.dimen.medium)
) )
} else { } else {
CircularProgressIndicator( CircularProgressIndicator(
modifier = Modifier modifier = Modifier.size(MaterialTheme.bibLib.dimen.dialog.iconSize),
.align(Alignment.CenterHorizontally)
.padding(bottom = MaterialTheme.bibLib.dimen.medium),
progress = progress, progress = progress,
) )
} }
if (message?.isNotEmpty() == true) { if (message?.isNotEmpty() == true) {
val typography = MaterialTheme.typography val typography = MaterialTheme.typography
Text( Text(
modifier = Modifier.align(Alignment.CenterHorizontally), modifier = Modifier.padding(top = MaterialTheme.bibLib.dimen.medium),
style = typography.body1, style = typography.body1,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
text = message text = message
@ -58,22 +60,13 @@ fun LoadingCard(
} }
} }
@Preview
@Composable @Composable
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
private fun LoadingCardLightPreview() { private fun LoadingCardLightPreview() {
BibLibTheme(darkTheme = false) { BibLibTheme {
LoadingCard( LoadingCard(
message = stringResource(id = R.string.loading_authentication) message = stringResource(id = R.string.loading_authentication)
) )
} }
}
@Preview
@Composable
private fun LoadingCardDarkPreview() {
BibLibTheme(darkTheme = true) {
LoadingCard(
message = stringResource(id = R.string.loading_book)
)
}
} }

View file

@ -1,9 +1,7 @@
package com.pixelized.biblib.ui.old.composable.dialog package com.pixelized.biblib.ui.composable.dialog
import androidx.compose.foundation.layout.Column import android.content.res.Configuration
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.Card import androidx.compose.material.Card
import androidx.compose.material.Icon import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme import androidx.compose.material.MaterialTheme
@ -16,9 +14,9 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.pixelized.biblib.R import com.pixelized.biblib.R
import com.pixelized.biblib.ui.theme.BibLibTheme import com.pixelized.biblib.ui.theme.BibLibTheme
import com.pixelized.biblib.utils.extention.bibLib
@Composable @Composable
@ -26,28 +24,32 @@ fun SuccessCard(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
message: String? = null, message: String? = null,
) { ) {
Card(elevation = 8.dp, modifier = modifier) { Card(
modifier = modifier,
elevation = MaterialTheme.bibLib.dimen.dialog.elevation,
) {
Column( Column(
modifier = Modifier modifier = Modifier
.width(250.dp) .padding(MaterialTheme.bibLib.dimen.medium)
.padding(32.dp) .sizeIn(
minWidth = MaterialTheme.bibLib.dimen.dialog.minWidth,
minHeight = MaterialTheme.bibLib.dimen.dialog.minHeight,
),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) { ) {
Icon( Icon(
modifier = Modifier modifier = Modifier.size(MaterialTheme.bibLib.dimen.dialog.iconSize),
.width(64.dp)
.height(64.dp)
.align(Alignment.CenterHorizontally),
tint = MaterialTheme.colors.primary, tint = MaterialTheme.colors.primary,
imageVector = Icons.Sharp.Done, imageVector = Icons.Sharp.Done,
contentDescription = "error" contentDescription = null,
) )
val typography = MaterialTheme.typography
if (message != null) { if (message != null) {
Text( Text(
modifier = Modifier modifier = Modifier
.align(Alignment.CenterHorizontally) .align(Alignment.CenterHorizontally)
.padding(top = 16.dp), .padding(top = MaterialTheme.bibLib.dimen.medium),
style = typography.body1, style = MaterialTheme.typography.body1,
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
text = message text = message
) )
@ -56,18 +58,11 @@ fun SuccessCard(
} }
} }
@Preview
@Composable @Composable
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
private fun SuccessLightPreview() { private fun SuccessLightPreview() {
BibLibTheme(darkTheme = false) { BibLibTheme {
SuccessCard(message = stringResource(id = R.string.success_authentication))
}
}
@Preview
@Composable
private fun SuccessDarkPreview() {
BibLibTheme(darkTheme = true) {
SuccessCard(message = stringResource(id = R.string.success_authentication)) SuccessCard(message = stringResource(id = R.string.success_authentication))
} }
} }

View file

@ -18,7 +18,7 @@ class LauncherViewModel @Inject constructor() : ViewModel() {
init { init {
viewModelScope.launch(Dispatchers.IO) { viewModelScope.launch(Dispatchers.IO) {
delay(3000) delay(1500)
_isLoading.value = false _isLoading.value = false
} }
} }

View file

@ -37,9 +37,9 @@ import androidx.compose.ui.window.DialogProperties
import androidx.lifecycle.viewmodel.compose.viewModel import androidx.lifecycle.viewmodel.compose.viewModel
import com.pixelized.biblib.R import com.pixelized.biblib.R
import com.pixelized.biblib.network.client.IBibLibClient.Companion.REGISTER_URL import com.pixelized.biblib.network.client.IBibLibClient.Companion.REGISTER_URL
import com.pixelized.biblib.ui.old.composable.dialog.ErrorCard import com.pixelized.biblib.ui.composable.dialog.ErrorCard
import com.pixelized.biblib.ui.old.composable.dialog.LoadingCard import com.pixelized.biblib.ui.composable.dialog.LoadingCard
import com.pixelized.biblib.ui.old.composable.dialog.SuccessCard import com.pixelized.biblib.ui.composable.dialog.SuccessCard
import com.pixelized.biblib.ui.theme.BibLibTheme import com.pixelized.biblib.ui.theme.BibLibTheme
import com.pixelized.biblib.ui.old.viewmodel.authentication.AuthenticationViewModel import com.pixelized.biblib.ui.old.viewmodel.authentication.AuthenticationViewModel
import com.pixelized.biblib.ui.old.viewmodel.authentication.IAuthenticationViewModel import com.pixelized.biblib.ui.old.viewmodel.authentication.IAuthenticationViewModel

View file

@ -18,7 +18,7 @@ import androidx.lifecycle.viewmodel.compose.viewModel
import com.pixelized.biblib.BuildConfig import com.pixelized.biblib.BuildConfig
import com.pixelized.biblib.R import com.pixelized.biblib.R
import com.pixelized.biblib.ui.old.composable.dialog.CrossFadeOverlay import com.pixelized.biblib.ui.old.composable.dialog.CrossFadeOverlay
import com.pixelized.biblib.ui.old.composable.dialog.ErrorCard import com.pixelized.biblib.ui.composable.dialog.ErrorCard
import com.pixelized.biblib.ui.theme.animation.Animation import com.pixelized.biblib.ui.theme.animation.Animation
import com.pixelized.biblib.ui.theme.BibLibTheme import com.pixelized.biblib.ui.theme.BibLibTheme
import com.pixelized.biblib.ui.old.viewmodel.authentication.AuthenticationViewModel import com.pixelized.biblib.ui.old.viewmodel.authentication.AuthenticationViewModel

View file

@ -14,4 +14,14 @@ data class BibLibDimen(
val medium: Dp = 16.dp, val medium: Dp = 16.dp,
val large: Dp = 32.dp, val large: Dp = 32.dp,
val extraLarge: Dp = 64.dp, val extraLarge: Dp = 64.dp,
) val dialog: Dialog = Dialog()
) {
@Stable
@Immutable
data class Dialog(
val elevation: Dp = 4.dp,
val minWidth: Dp = 240.dp,
val minHeight: Dp = 120.dp,
val iconSize: Dp = 52.dp,
)
}