Apply common loading and error UIs (#481)

This commit is contained in:
David Perez 2024-01-03 09:50:11 -06:00 committed by Álison Fernandes
parent d4bab9ed7f
commit 8476e55b5a
12 changed files with 30 additions and 265 deletions

View file

@ -5,6 +5,8 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -36,14 +38,18 @@ fun BitwardenErrorContent(
color = MaterialTheme.colorScheme.onSurface,
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth(),
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
)
onTryAgainClick?.let {
Spacer(modifier = Modifier.height(16.dp))
BitwardenTextButton(
label = stringResource(id = R.string.try_again),
onClick = it,
modifier = Modifier.padding(horizontal = 16.dp),
)
}
Spacer(modifier = Modifier.navigationBarsPadding())
}
}

View file

@ -1,40 +0,0 @@
package com.x8bit.bitwarden.ui.vault.feature.addedit
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
/**
* The top level error UI state for the [VaultAddEditScreen].
*/
@Composable
fun VaultAddEditError(
viewState: VaultAddEditState.ViewState.Error,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = viewState.message(),
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.navigationBarsPadding())
}
}

View file

@ -1,27 +0,0 @@
package com.x8bit.bitwarden.ui.vault.feature.addedit
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
/**
* The top level loading UI state for the [VaultAddEditScreen].
*/
@Composable
fun VaultAddEditLoading(
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
CircularProgressIndicator()
Spacer(modifier = Modifier.navigationBarsPadding())
}
}

View file

@ -28,6 +28,8 @@ import com.x8bit.bitwarden.ui.platform.base.util.asText
import com.x8bit.bitwarden.ui.platform.base.util.toAnnotatedString
import com.x8bit.bitwarden.ui.platform.components.BasicDialogState
import com.x8bit.bitwarden.ui.platform.components.BitwardenBasicDialog
import com.x8bit.bitwarden.ui.platform.components.BitwardenErrorContent
import com.x8bit.bitwarden.ui.platform.components.BitwardenLoadingContent
import com.x8bit.bitwarden.ui.platform.components.BitwardenLoadingDialog
import com.x8bit.bitwarden.ui.platform.components.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.components.BitwardenTextButton
@ -137,8 +139,8 @@ fun VaultAddEditScreen(
}
is VaultAddEditState.ViewState.Error -> {
VaultAddEditError(
viewState = viewState,
BitwardenErrorContent(
message = viewState.message(),
modifier = Modifier
.padding(innerPadding)
.fillMaxSize(),
@ -146,7 +148,7 @@ fun VaultAddEditScreen(
}
VaultAddEditState.ViewState.Loading -> {
VaultAddEditLoading(
BitwardenLoadingContent(
modifier = Modifier
.padding(innerPadding)
.fillMaxSize(),

View file

@ -1,52 +0,0 @@
package com.x8bit.bitwarden.ui.vault.feature.item
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.BitwardenTextButton
/**
* The top level error UI state for the [VaultItemScreen].
*/
@Composable
fun VaultItemError(
errorState: VaultItemState.ViewState.Error,
onRefreshClick: () -> Unit,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = errorState.message(),
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.height(16.dp))
BitwardenTextButton(
label = stringResource(id = R.string.try_again),
onClick = onRefreshClick,
modifier = Modifier.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.height(88.dp))
Spacer(modifier = Modifier.navigationBarsPadding())
}
}

View file

@ -1,30 +0,0 @@
package com.x8bit.bitwarden.ui.vault.feature.item
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
/**
* The top level loading UI state for the [VaultItemScreen].
*/
@Composable
fun VaultItemLoading(
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
CircularProgressIndicator()
Spacer(modifier = Modifier.height(88.dp))
Spacer(modifier = Modifier.navigationBarsPadding())
}
}

View file

@ -34,6 +34,8 @@ import com.x8bit.bitwarden.ui.platform.base.util.asText
import com.x8bit.bitwarden.ui.platform.base.util.toAnnotatedString
import com.x8bit.bitwarden.ui.platform.components.BasicDialogState
import com.x8bit.bitwarden.ui.platform.components.BitwardenBasicDialog
import com.x8bit.bitwarden.ui.platform.components.BitwardenErrorContent
import com.x8bit.bitwarden.ui.platform.components.BitwardenLoadingContent
import com.x8bit.bitwarden.ui.platform.components.BitwardenLoadingDialog
import com.x8bit.bitwarden.ui.platform.components.BitwardenMasterPasswordDialog
import com.x8bit.bitwarden.ui.platform.components.BitwardenOverflowActionItem
@ -185,9 +187,9 @@ private fun VaultItemContent(
modifier: Modifier = Modifier,
) {
when (viewState) {
is VaultItemState.ViewState.Error -> VaultItemError(
errorState = viewState,
onRefreshClick = vaultCommonItemTypeHandlers.onRefreshClick,
is VaultItemState.ViewState.Error -> BitwardenErrorContent(
message = viewState.message(),
onTryAgainClick = vaultCommonItemTypeHandlers.onRefreshClick,
modifier = modifier,
)
@ -226,7 +228,7 @@ private fun VaultItemContent(
}
}
VaultItemState.ViewState.Loading -> VaultItemLoading(
VaultItemState.ViewState.Loading -> BitwardenLoadingContent(
modifier = modifier,
)
}

View file

@ -1,52 +0,0 @@
package com.x8bit.bitwarden.ui.vault.feature.itemlisting
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.BitwardenTextButton
/**
* The top level error UI state for the [VaultItemListingScreen].
*/
@Composable
fun VaultItemListingError(
state: VaultItemListingState.ViewState.Error,
onRefreshClick: () -> Unit,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = state.message(),
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.height(16.dp))
BitwardenTextButton(
label = stringResource(id = R.string.try_again),
onClick = onRefreshClick,
modifier = Modifier.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.height(88.dp))
Spacer(modifier = Modifier.navigationBarsPadding())
}
}

View file

@ -1,27 +0,0 @@
package com.x8bit.bitwarden.ui.vault.feature.itemlisting
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
/**
* Loading view for the [VaultItemListingScreen].
*/
@Composable
fun VaultItemListingLoading(
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
CircularProgressIndicator()
Spacer(modifier = Modifier.navigationBarsPadding())
}
}

View file

@ -20,6 +20,8 @@ import androidx.compose.ui.res.stringResource
import androidx.hilt.navigation.compose.hiltViewModel
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect
import com.x8bit.bitwarden.ui.platform.components.BitwardenErrorContent
import com.x8bit.bitwarden.ui.platform.components.BitwardenLoadingContent
import com.x8bit.bitwarden.ui.platform.components.BitwardenOverflowActionItem
import com.x8bit.bitwarden.ui.platform.components.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.components.BitwardenSearchActionItem
@ -149,15 +151,15 @@ private fun VaultItemListingScaffold(
}
is VaultItemListingState.ViewState.Error -> {
VaultItemListingError(
state = state.viewState,
onRefreshClick = refreshClick,
BitwardenErrorContent(
message = state.viewState.message(),
onTryAgainClick = refreshClick,
modifier = modifier,
)
}
is VaultItemListingState.ViewState.Loading -> {
VaultItemListingLoading(modifier = modifier)
BitwardenLoadingContent(modifier = modifier)
}
}
}

View file

@ -1,22 +0,0 @@
package com.x8bit.bitwarden.ui.vault.feature.vault
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
/**
* Loading view for the [VaultScreen].
*/
@Composable
fun VaultLoading(modifier: Modifier = Modifier) {
Column(
modifier = modifier,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
CircularProgressIndicator()
}
}

View file

@ -39,6 +39,7 @@ import com.x8bit.bitwarden.ui.platform.components.BitwardenAccountActionItem
import com.x8bit.bitwarden.ui.platform.components.BitwardenAccountSwitcher
import com.x8bit.bitwarden.ui.platform.components.BitwardenBasicDialog
import com.x8bit.bitwarden.ui.platform.components.BitwardenErrorContent
import com.x8bit.bitwarden.ui.platform.components.BitwardenLoadingContent
import com.x8bit.bitwarden.ui.platform.components.BitwardenLoadingDialog
import com.x8bit.bitwarden.ui.platform.components.BitwardenMediumTopAppBar
import com.x8bit.bitwarden.ui.platform.components.BitwardenOverflowActionItem
@ -343,7 +344,10 @@ private fun VaultScreenScaffold(
modifier = innerModifier,
)
is VaultState.ViewState.Loading -> VaultLoading(modifier = innerModifier)
is VaultState.ViewState.Loading -> BitwardenLoadingContent(
modifier = innerModifier,
)
is VaultState.ViewState.NoItems -> VaultNoItems(
modifier = innerModifier,
addItemClickAction = addItemClickAction,
@ -352,8 +356,7 @@ private fun VaultScreenScaffold(
is VaultState.ViewState.Error -> BitwardenErrorContent(
message = viewState.message(),
onTryAgainClick = tryAgainClick,
modifier = innerModifier
.padding(horizontal = 16.dp),
modifier = innerModifier,
)
}
}