App bar status updated

This commit is contained in:
Milan Cerovsky 2024-12-18 19:20:32 +01:00 committed by Honza Rychnovský
parent 60cac68e24
commit 796fd7de64
5 changed files with 85 additions and 19 deletions

View File

@ -3,6 +3,7 @@ package co.electriccoin.zcash.ui.design.component
import androidx.compose.animation.Crossfade
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
@ -14,18 +15,24 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import co.electriccoin.zcash.ui.design.R
import co.electriccoin.zcash.ui.design.component.ZashiMainTopAppBarState.AccountType
import co.electriccoin.zcash.ui.design.newcomponent.PreviewScreens
import co.electriccoin.zcash.ui.design.theme.ZcashTheme
import co.electriccoin.zcash.ui.design.theme.colors.ZashiColors
import co.electriccoin.zcash.ui.design.theme.typography.ZashiTypography
import co.electriccoin.zcash.ui.design.util.StringResource
import co.electriccoin.zcash.ui.design.util.getValue
import co.electriccoin.zcash.ui.design.util.stringRes
@Composable
fun ZashiMainTopAppBar(
@ -34,22 +41,34 @@ fun ZashiMainTopAppBar(
) {
if (state == null) return
ZashiSmallTopAppBar(
windowInsets = WindowInsets.systemBars.only(WindowInsetsSides.Top),
hamburgerMenuActions = {
if (showHideBalances) {
Crossfade(state.balanceVisibilityButton, label = "") {
ZashiIconButton(it)
Box {
ZashiSmallTopAppBar(
windowInsets = WindowInsets.systemBars.only(WindowInsetsSides.Top),
hamburgerMenuActions = {
if (showHideBalances) {
Crossfade(state.balanceVisibilityButton, label = "") {
ZashiIconButton(it)
}
Spacer(Modifier.width(4.dp))
}
Spacer(Modifier.width(4.dp))
}
ZashiIconButton(state.settingsButton)
Spacer(Modifier.width(20.dp))
},
navigationAction = {
AccountSwitch(state.accountSwitchState)
},
)
ZashiIconButton(state.settingsButton)
Spacer(Modifier.width(20.dp))
},
navigationAction = {
AccountSwitch(state.accountSwitchState)
},
)
if (state.subtitle != null) {
Text(
modifier = Modifier.align(Alignment.BottomCenter),
text = state.subtitle.getValue().uppercase(),
style = ZashiTypography.textXs,
fontWeight = FontWeight.Normal,
color = ZashiColors.Text.textQuaternary
)
}
}
}
@Composable
@ -108,6 +127,7 @@ data class ZashiMainTopAppBarState(
val accountSwitchState: AccountSwitchState,
val balanceVisibilityButton: IconButtonState,
val settingsButton: IconButtonState,
val subtitle: StringResource?
) {
enum class AccountType {
ZASHI,
@ -134,6 +154,7 @@ private fun ZashiMainTopAppBarPreview() =
),
balanceVisibilityButton = IconButtonState(R.drawable.ic_app_bar_balances_hide) {},
settingsButton = IconButtonState(R.drawable.ic_app_bar_settings) {},
subtitle = null
)
)
}
@ -152,6 +173,26 @@ private fun KeystoneMainTopAppBarPreview() =
),
balanceVisibilityButton = IconButtonState(R.drawable.ic_app_bar_balances_hide) {},
settingsButton = IconButtonState(R.drawable.ic_app_bar_settings) {},
subtitle = null
)
)
}
@PreviewScreens
@Composable
private fun MainTopAppBarWithSubtitlePreview() =
ZcashTheme {
ZashiMainTopAppBar(
state =
ZashiMainTopAppBarState(
accountSwitchState =
AccountSwitchState(
accountType = AccountType.KEYSTONE,
onAccountTypeClick = {},
),
balanceVisibilityButton = IconButtonState(R.drawable.ic_app_bar_balances_hide) {},
settingsButton = IconButtonState(R.drawable.ic_app_bar_settings) {},
subtitle = stringRes("Subtitle")
)
)
}

View File

@ -8,9 +8,11 @@ import co.electriccoin.zcash.preference.model.entry.BooleanPreferenceDefault
import co.electriccoin.zcash.ui.NavigationRouter
import co.electriccoin.zcash.ui.NavigationTargets.SETTINGS
import co.electriccoin.zcash.ui.common.model.KeystoneAccount
import co.electriccoin.zcash.ui.common.model.TopAppBarSubTitleState
import co.electriccoin.zcash.ui.common.model.WalletAccount
import co.electriccoin.zcash.ui.common.model.ZashiAccount
import co.electriccoin.zcash.ui.common.usecase.ObserveSelectedWalletAccountUseCase
import co.electriccoin.zcash.ui.common.usecase.ObserveWalletStateUseCase
import co.electriccoin.zcash.ui.design.R
import co.electriccoin.zcash.ui.design.component.AccountSwitchState
import co.electriccoin.zcash.ui.design.component.IconButtonState
@ -31,14 +33,19 @@ import kotlinx.coroutines.launch
class ZashiMainTopAppBarViewModel(
observeSelectedWalletAccount: ObserveSelectedWalletAccountUseCase,
observeWalletState: ObserveWalletStateUseCase,
private val standardPreferenceProvider: StandardPreferenceProvider,
private val navigationRouter: NavigationRouter,
) : ViewModel() {
private val isHideBalances: StateFlow<Boolean?> = booleanStateFlow(StandardPreferenceKeys.IS_HIDE_BALANCES)
val state =
combine(observeSelectedWalletAccount.require(), isHideBalances) { currentAccount, isHideBalances ->
createState(currentAccount, isHideBalances)
combine(
observeSelectedWalletAccount.require(),
isHideBalances,
observeWalletState()
) { currentAccount, isHideBalances, walletState ->
createState(currentAccount, isHideBalances, walletState)
}.stateIn(
scope = viewModelScope,
started = SharingStarted.WhileSubscribed(ANDROID_STATE_FLOW_TIMEOUT),
@ -47,7 +54,8 @@ class ZashiMainTopAppBarViewModel(
private fun createState(
currentAccount: WalletAccount,
isHideBalances: Boolean?
isHideBalances: Boolean?,
topAppBarSubTitleState: TopAppBarSubTitleState
) = ZashiMainTopAppBarState(
accountSwitchState =
AccountSwitchState(
@ -74,7 +82,19 @@ class ZashiMainTopAppBarViewModel(
icon = R.drawable.ic_app_bar_settings,
onClick = ::onSettingsClicked,
contentDescription = stringRes(co.electriccoin.zcash.ui.R.string.settings_menu_content_description)
)
),
subtitle =
when (topAppBarSubTitleState) {
TopAppBarSubTitleState.Disconnected ->
stringRes(
co.electriccoin.zcash.ui.R.string.disconnected_label_new,
)
TopAppBarSubTitleState.Restoring ->
stringRes(
co.electriccoin.zcash.ui.R.string.restoring_wallet_label_new,
)
TopAppBarSubTitleState.None -> null
}
)
private fun onAccountTypeClicked() = navigationRouter.forward(AccountList)

View File

@ -27,5 +27,6 @@ object ZashiMainTopAppBarStateFixture {
accountSwitchState = accountSwitchState,
balanceVisibilityButton = balanceVisibilityButton,
settingsButton = settingsButton,
subtitle = null
)
}

View File

@ -15,7 +15,9 @@
<string name="unable_to_open_email">No se pudo iniciar la aplicación de correo electrónico.</string>
<string name="restoring_wallet_label">[Restaurando tu billetera…]</string>
<string name="restoring_wallet_label_new">Restaurando tu billetera…</string>
<string name="disconnected_label">[Desconectado…]</string>
<string name="disconnected_label_new">Desconectado…</string>
<string name="unable_to_open_play_store">No se pudo iniciar la aplicación de Google Play Store…</string>
<string name="server_disconnected_dialog_title">Aviso</string>

View File

@ -15,7 +15,9 @@
<string name="unable_to_open_email">Unable to launch email app.</string>
<string name="restoring_wallet_label">[Restoring Your Wallet…]</string>
<string name="restoring_wallet_label_new">Restoring Your Wallet…</string>
<string name="disconnected_label">[Disconnected…]</string>
<string name="disconnected_label_new">Disconnected…</string>
<string name="unable_to_open_play_store">Unable to launch Google Play Store app…</string>
<string name="server_disconnected_dialog_title">Heads up</string>