[#1499] StyledBalance configuration defaults added

* [#1499] StyledBalance configuration defaults added

Closes #1499

* [#1499] Code cleanup

Closes #1499

* Rename model paramaters

As the floating point is not the diving point for the different styles

* Changelog update

---------

Co-authored-by: Honza <rychnovsky.honza@gmail.com>
This commit is contained in:
Milan 2024-07-18 14:07:15 +02:00 committed by GitHub
parent 23e1bb7e75
commit 1a0b634ab6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 84 additions and 70 deletions

View File

@ -13,6 +13,7 @@ and this application adheres to [Semantic Versioning](https://semver.org/spec/v2
### Changed ### Changed
- The About screen has been redesigned to align with the new design guidelines - The About screen has been redesigned to align with the new design guidelines
- `StyledBalance` text styles have been refactored from `Pair` into `BalanceTextStyle`
## [1.1.3 (682)] - 2024-07-03 ## [1.1.3 (682)] - 2024-07-03

View File

@ -8,6 +8,8 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.Stable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
@ -31,11 +33,6 @@ private fun StyledBalanceComposablePreview() {
StyledBalance( StyledBalance(
balanceParts = ZecAmountTriple(main = "1,234.56789012"), balanceParts = ZecAmountTriple(main = "1,234.56789012"),
isHideBalances = false, isHideBalances = false,
textStyles =
Pair(
ZcashTheme.extendedTypography.balanceWidgetStyles.first,
ZcashTheme.extendedTypography.balanceWidgetStyles.second
),
modifier = Modifier modifier = Modifier
) )
@ -44,11 +41,6 @@ private fun StyledBalanceComposablePreview() {
StyledBalance( StyledBalance(
balanceParts = ZecAmountTriple(main = "1,234.56789012"), balanceParts = ZecAmountTriple(main = "1,234.56789012"),
isHideBalances = true, isHideBalances = true,
textStyles =
Pair(
ZcashTheme.extendedTypography.balanceWidgetStyles.first,
ZcashTheme.extendedTypography.balanceWidgetStyles.second
),
modifier = Modifier modifier = Modifier
) )
} }
@ -63,8 +55,8 @@ private fun StyledBalanceComposablePreview() {
* @param balanceParts [ZecAmountTriple] class that holds balance parts * @param balanceParts [ZecAmountTriple] class that holds balance parts
* @param isHideBalances Flag referring about the balance being hidden or not * @param isHideBalances Flag referring about the balance being hidden or not
* @param hiddenBalancePlaceholder String holding the placeholder for the hidden balance * @param hiddenBalancePlaceholder String holding the placeholder for the hidden balance
* @param textStyles Styles for the first and second part of the balance * @param textStyle Styles for the integer and floating part of the balance
* @param textColor Optional color to modify the default font color from [textStyles] * @param textColor Optional color to modify the default font color from [textStyle]
* @param modifier Modifier to modify the Text UI element as needed * @param modifier Modifier to modify the Text UI element as needed
*/ */
@OptIn(ExperimentalFoundationApi::class) @OptIn(ExperimentalFoundationApi::class)
@ -72,17 +64,17 @@ private fun StyledBalanceComposablePreview() {
@Composable @Composable
fun StyledBalance( fun StyledBalance(
balanceParts: ZecAmountTriple, balanceParts: ZecAmountTriple,
textStyles: Pair<TextStyle, TextStyle>,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
isHideBalances: Boolean = false, isHideBalances: Boolean = false,
hiddenBalancePlaceholder: String = stringResource(id = R.string.hide_balance_placeholder), hiddenBalancePlaceholder: String = stringResource(id = R.string.hide_balance_placeholder),
textColor: Color? = null, textColor: Color = Color.Unspecified,
textStyle: BalanceTextStyle = StyledBalanceDefaults.textStyles(),
) { ) {
val content = val content =
if (isHideBalances) { if (isHideBalances) {
buildAnnotatedString { buildAnnotatedString {
withStyle( withStyle(
style = textStyles.first.toSpanStyle() style = textStyle.mostSignificantPart.toSpanStyle()
) { ) {
append(hiddenBalancePlaceholder) append(hiddenBalancePlaceholder)
} }
@ -92,12 +84,12 @@ fun StyledBalance(
buildAnnotatedString { buildAnnotatedString {
withStyle( withStyle(
style = textStyles.first.toSpanStyle() style = textStyle.mostSignificantPart.toSpanStyle()
) { ) {
append(balanceSplit.first) append(balanceSplit.first)
} }
withStyle( withStyle(
style = textStyles.second.toSpanStyle() style = textStyle.leastSignificantPart.toSpanStyle()
) { ) {
append(balanceSplit.second) append(balanceSplit.second)
} }
@ -110,20 +102,12 @@ fun StyledBalance(
.animateContentSize() .animateContentSize()
.then(modifier) .then(modifier)
if (textColor != null) { Text(
Text( text = content,
text = content, color = textColor,
color = textColor, maxLines = 1,
maxLines = 1, modifier = resultModifier
modifier = resultModifier )
)
} else {
Text(
text = content,
maxLines = 1,
modifier = resultModifier
)
}
} }
private const val CUT_POSITION_OFFSET = 4 private const val CUT_POSITION_OFFSET = 4
@ -171,3 +155,18 @@ data class ZecAmountTriple(
val prefix: String? = null, val prefix: String? = null,
val suffix: String? = null val suffix: String? = null
) )
@Immutable
data class BalanceTextStyle(val mostSignificantPart: TextStyle, val leastSignificantPart: TextStyle)
object StyledBalanceDefaults {
@Stable
@Composable
fun textStyles(
mostSignificantPart: TextStyle = ZcashTheme.extendedTypography.balanceWidgetStyles.first,
leastSignificantPart: TextStyle = ZcashTheme.extendedTypography.balanceWidgetStyles.second,
) = BalanceTextStyle(
mostSignificantPart = mostSignificantPart,
leastSignificantPart = leastSignificantPart
)
}

View File

@ -27,6 +27,7 @@ import co.electriccoin.zcash.ui.design.component.Body
import co.electriccoin.zcash.ui.design.component.CircularSmallProgressIndicator import co.electriccoin.zcash.ui.design.component.CircularSmallProgressIndicator
import co.electriccoin.zcash.ui.design.component.Reference import co.electriccoin.zcash.ui.design.component.Reference
import co.electriccoin.zcash.ui.design.component.StyledBalance import co.electriccoin.zcash.ui.design.component.StyledBalance
import co.electriccoin.zcash.ui.design.component.StyledBalanceDefaults
import co.electriccoin.zcash.ui.design.component.ZecAmountTriple import co.electriccoin.zcash.ui.design.component.ZecAmountTriple
import co.electriccoin.zcash.ui.design.theme.ZcashTheme import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@ -153,14 +154,15 @@ fun BalanceWidget(
BalanceState.None, is BalanceState.Loading -> { BalanceState.None, is BalanceState.Loading -> {
CircularSmallProgressIndicator(color = ZcashTheme.colors.circularProgressBarSmallDark) CircularSmallProgressIndicator(color = ZcashTheme.colors.circularProgressBarSmallDark)
} }
is BalanceState.Available -> { is BalanceState.Available -> {
StyledBalance( StyledBalance(
balanceParts = balanceState.spendableBalance.toZecStringFull().asZecAmountTriple(), balanceParts = balanceState.spendableBalance.toZecStringFull().asZecAmountTriple(),
isHideBalances = isHideBalances, isHideBalances = isHideBalances,
textStyles = textStyle =
Pair( StyledBalanceDefaults.textStyles(
ZcashTheme.extendedTypography.balanceWidgetStyles.third, mostSignificantPart = ZcashTheme.extendedTypography.balanceWidgetStyles.third,
ZcashTheme.extendedTypography.balanceWidgetStyles.fourth leastSignificantPart = ZcashTheme.extendedTypography.balanceWidgetStyles.fourth
) )
) )
} }
@ -189,10 +191,10 @@ fun BalanceWidgetBigLineOnly(
StyledBalance( StyledBalance(
balanceParts = parts, balanceParts = parts,
isHideBalances = isHideBalances, isHideBalances = isHideBalances,
textStyles = textStyle =
Pair( StyledBalanceDefaults.textStyles(
ZcashTheme.extendedTypography.balanceWidgetStyles.first, mostSignificantPart = ZcashTheme.extendedTypography.balanceWidgetStyles.first,
ZcashTheme.extendedTypography.balanceWidgetStyles.second leastSignificantPart = ZcashTheme.extendedTypography.balanceWidgetStyles.second
) )
) )

View File

@ -59,6 +59,7 @@ import co.electriccoin.zcash.ui.design.component.BubbleArrowAlignment
import co.electriccoin.zcash.ui.design.component.BubbleMessage import co.electriccoin.zcash.ui.design.component.BubbleMessage
import co.electriccoin.zcash.ui.design.component.CircularMidProgressIndicator import co.electriccoin.zcash.ui.design.component.CircularMidProgressIndicator
import co.electriccoin.zcash.ui.design.component.StyledBalance import co.electriccoin.zcash.ui.design.component.StyledBalance
import co.electriccoin.zcash.ui.design.component.StyledBalanceDefaults
import co.electriccoin.zcash.ui.design.component.TextWithIcon import co.electriccoin.zcash.ui.design.component.TextWithIcon
import co.electriccoin.zcash.ui.design.theme.ZcashTheme import co.electriccoin.zcash.ui.design.theme.ZcashTheme
import co.electriccoin.zcash.ui.fixture.WalletSnapshotFixture import co.electriccoin.zcash.ui.fixture.WalletSnapshotFixture
@ -159,6 +160,7 @@ internal fun HistoryContainer(
TransactionUiState.Loading -> { TransactionUiState.Loading -> {
LoadingTransactionHistory() LoadingTransactionHistory()
} }
TransactionUiState.SyncingEmpty -> { TransactionUiState.SyncingEmpty -> {
if (walletRestoringState == WalletRestoringState.INITIATING) { if (walletRestoringState == WalletRestoringState.INITIATING) {
// In case we are syncing a new wallet, it's empty // In case we are syncing a new wallet, it's empty
@ -167,6 +169,7 @@ internal fun HistoryContainer(
// Intentionally leaving the UI empty otherwise // Intentionally leaving the UI empty otherwise
} }
} }
is TransactionUiState.Prepared -> { is TransactionUiState.Prepared -> {
HistoryList( HistoryList(
transactions = transactionState.transactions, transactions = transactionState.transactions,
@ -174,6 +177,7 @@ internal fun HistoryContainer(
onAction = onTransactionItemAction, onAction = onTransactionItemAction,
) )
} }
is TransactionUiState.DoneEmpty -> { is TransactionUiState.DoneEmpty -> {
EmptyTransactionHistory() EmptyTransactionHistory()
} }
@ -320,12 +324,14 @@ private fun HistoryItem(
textColor = MaterialTheme.colorScheme.onBackground textColor = MaterialTheme.colorScheme.onBackground
textStyle = ZcashTheme.extendedTypography.transactionItemStyles.titleRegular textStyle = ZcashTheme.extendedTypography.transactionItemStyles.titleRegular
} }
TransactionExtendedState.SENDING -> { TransactionExtendedState.SENDING -> {
typeText = stringResource(id = R.string.account_history_item_sending) typeText = stringResource(id = R.string.account_history_item_sending)
typeIcon = ImageVector.vectorResource(R.drawable.ic_trx_send_icon) typeIcon = ImageVector.vectorResource(R.drawable.ic_trx_send_icon)
textColor = ZcashTheme.colors.textDescription textColor = ZcashTheme.colors.textDescription
textStyle = ZcashTheme.extendedTypography.transactionItemStyles.titleRunning textStyle = ZcashTheme.extendedTypography.transactionItemStyles.titleRunning
} }
TransactionExtendedState.SEND_FAILED -> { TransactionExtendedState.SEND_FAILED -> {
typeText = stringResource(id = R.string.account_history_item_send_failed) typeText = stringResource(id = R.string.account_history_item_send_failed)
typeIcon = ImageVector.vectorResource(R.drawable.ic_trx_send_icon) typeIcon = ImageVector.vectorResource(R.drawable.ic_trx_send_icon)
@ -339,12 +345,14 @@ private fun HistoryItem(
textColor = MaterialTheme.colorScheme.onBackground textColor = MaterialTheme.colorScheme.onBackground
textStyle = ZcashTheme.extendedTypography.transactionItemStyles.titleRegular textStyle = ZcashTheme.extendedTypography.transactionItemStyles.titleRegular
} }
TransactionExtendedState.RECEIVING -> { TransactionExtendedState.RECEIVING -> {
typeText = stringResource(id = R.string.account_history_item_receiving) typeText = stringResource(id = R.string.account_history_item_receiving)
typeIcon = ImageVector.vectorResource(R.drawable.ic_trx_receive_icon) typeIcon = ImageVector.vectorResource(R.drawable.ic_trx_receive_icon)
textColor = ZcashTheme.colors.textDescription textColor = ZcashTheme.colors.textDescription
textStyle = ZcashTheme.extendedTypography.transactionItemStyles.titleRunning textStyle = ZcashTheme.extendedTypography.transactionItemStyles.titleRunning
} }
TransactionExtendedState.RECEIVE_FAILED -> { TransactionExtendedState.RECEIVE_FAILED -> {
typeText = stringResource(id = R.string.account_history_item_receive_failed) typeText = stringResource(id = R.string.account_history_item_receive_failed)
typeIcon = ImageVector.vectorResource(R.drawable.ic_trx_receive_icon) typeIcon = ImageVector.vectorResource(R.drawable.ic_trx_receive_icon)
@ -489,10 +497,10 @@ private fun HistoryItemCollapsedMainPart(
).asZecAmountTriple(prefix) ).asZecAmountTriple(prefix)
}, },
isHideBalances = isHideBalances, isHideBalances = isHideBalances,
textStyles = textStyle =
Pair( StyledBalanceDefaults.textStyles(
first = valueTextStyle, mostSignificantPart = valueTextStyle,
second = ZcashTheme.extendedTypography.transactionItemStyles.valueSecondPart leastSignificantPart = ZcashTheme.extendedTypography.transactionItemStyles.valueSecondPart
), ),
textColor = valueTextColor, textColor = valueTextColor,
) )
@ -510,6 +518,7 @@ private fun HistoryItemCollapsedAddressPart(
TrxItemState.EXPANDED_ADDRESS, TrxItemState.EXPANDED_ALL -> { TrxItemState.EXPANDED_ADDRESS, TrxItemState.EXPANDED_ALL -> {
// No address displayed in the top row // No address displayed in the top row
} }
else -> { else -> {
val clickModifier = val clickModifier =
modifier.then( modifier.then(
@ -828,10 +837,10 @@ private fun HistoryItemTransactionFeePart(
balanceParts = fee.toZecStringFull().asZecAmountTriple(), balanceParts = fee.toZecStringFull().asZecAmountTriple(),
// Fees are always visible // Fees are always visible
isHideBalances = false, isHideBalances = false,
textStyles = textStyle =
Pair( StyledBalanceDefaults.textStyles(
first = ZcashTheme.extendedTypography.transactionItemStyles.feeFirstPart, mostSignificantPart = ZcashTheme.extendedTypography.transactionItemStyles.feeFirstPart,
second = ZcashTheme.extendedTypography.transactionItemStyles.feeSecondPart leastSignificantPart = ZcashTheme.extendedTypography.transactionItemStyles.feeSecondPart
), ),
textColor = ZcashTheme.colors.textDescription textColor = ZcashTheme.colors.textDescription
) )
@ -936,6 +945,7 @@ private fun TransactionOverview.getExtendedState(): TransactionExtendedState {
TransactionExtendedState.RECEIVE_FAILED TransactionExtendedState.RECEIVE_FAILED
} }
} }
TransactionState.Confirmed -> { TransactionState.Confirmed -> {
if (isSentTransaction) { if (isSentTransaction) {
TransactionExtendedState.SENT TransactionExtendedState.SENT
@ -943,6 +953,7 @@ private fun TransactionOverview.getExtendedState(): TransactionExtendedState {
TransactionExtendedState.RECEIVED TransactionExtendedState.RECEIVED
} }
} }
TransactionState.Pending -> { TransactionState.Pending -> {
if (isSentTransaction) { if (isSentTransaction) {
TransactionExtendedState.SENDING TransactionExtendedState.SENDING
@ -950,6 +961,7 @@ private fun TransactionOverview.getExtendedState(): TransactionExtendedState {
TransactionExtendedState.RECEIVING TransactionExtendedState.RECEIVING
} }
} }
else -> { else -> {
error("Unexpected transaction state found while calculating its extended state.") error("Unexpected transaction state found while calculating its extended state.")
} }

View File

@ -79,6 +79,7 @@ import co.electriccoin.zcash.ui.design.component.Reference
import co.electriccoin.zcash.ui.design.component.Small import co.electriccoin.zcash.ui.design.component.Small
import co.electriccoin.zcash.ui.design.component.SmallTopAppBar import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
import co.electriccoin.zcash.ui.design.component.StyledBalance import co.electriccoin.zcash.ui.design.component.StyledBalance
import co.electriccoin.zcash.ui.design.component.StyledBalanceDefaults
import co.electriccoin.zcash.ui.design.component.TopAppBarHideBalancesNavigation import co.electriccoin.zcash.ui.design.component.TopAppBarHideBalancesNavigation
import co.electriccoin.zcash.ui.design.theme.ZcashTheme import co.electriccoin.zcash.ui.design.theme.ZcashTheme
import co.electriccoin.zcash.ui.fixture.BalanceStateFixture import co.electriccoin.zcash.ui.fixture.BalanceStateFixture
@ -393,8 +394,6 @@ private fun BalancesMainContent(
} }
} }
const val DEFAULT_LESS_THAN_FEE = 100_000L
@Composable @Composable
fun TransparentBalancePanel( fun TransparentBalancePanel(
isHideBalances: Boolean, isHideBalances: Boolean,
@ -501,10 +500,10 @@ fun TransparentBalanceRow(
StyledBalance( StyledBalance(
balanceParts = walletSnapshot.transparentBalance.toZecStringFull().asZecAmountTriple(), balanceParts = walletSnapshot.transparentBalance.toZecStringFull().asZecAmountTriple(),
isHideBalances = isHideBalances, isHideBalances = isHideBalances,
textStyles = textStyle =
Pair( StyledBalanceDefaults.textStyles(
ZcashTheme.extendedTypography.balanceSingleStyles.first, mostSignificantPart = ZcashTheme.extendedTypography.balanceSingleStyles.first,
ZcashTheme.extendedTypography.balanceSingleStyles.second leastSignificantPart = ZcashTheme.extendedTypography.balanceSingleStyles.second
), ),
textColor = ZcashTheme.colors.textDescriptionDark textColor = ZcashTheme.colors.textDescriptionDark
) )
@ -628,10 +627,10 @@ fun SpendableBalanceRow(
StyledBalance( StyledBalance(
balanceParts = walletSnapshot.spendableBalance().toZecStringFull().asZecAmountTriple(), balanceParts = walletSnapshot.spendableBalance().toZecStringFull().asZecAmountTriple(),
isHideBalances = isHideBalances, isHideBalances = isHideBalances,
textStyles = textStyle =
Pair( StyledBalanceDefaults.textStyles(
ZcashTheme.extendedTypography.balanceSingleStyles.first, mostSignificantPart = ZcashTheme.extendedTypography.balanceSingleStyles.first,
ZcashTheme.extendedTypography.balanceSingleStyles.second leastSignificantPart = ZcashTheme.extendedTypography.balanceSingleStyles.second
), ),
textColor = ZcashTheme.colors.textPrimary textColor = ZcashTheme.colors.textPrimary
) )
@ -667,10 +666,10 @@ fun ChangePendingRow(
StyledBalance( StyledBalance(
balanceParts = walletSnapshot.changePendingBalance().toZecStringFull().asZecAmountTriple(), balanceParts = walletSnapshot.changePendingBalance().toZecStringFull().asZecAmountTriple(),
isHideBalances = isHideBalances, isHideBalances = isHideBalances,
textStyles = textStyle =
Pair( StyledBalanceDefaults.textStyles(
ZcashTheme.extendedTypography.balanceSingleStyles.first, mostSignificantPart = ZcashTheme.extendedTypography.balanceSingleStyles.first,
ZcashTheme.extendedTypography.balanceSingleStyles.second leastSignificantPart = ZcashTheme.extendedTypography.balanceSingleStyles.second
), ),
textColor = ZcashTheme.colors.textDescriptionDark textColor = ZcashTheme.colors.textDescriptionDark
) )
@ -705,10 +704,10 @@ fun PendingTransactionsRow(
StyledBalance( StyledBalance(
balanceParts = walletSnapshot.valuePendingBalance().toZecStringFull().asZecAmountTriple(), balanceParts = walletSnapshot.valuePendingBalance().toZecStringFull().asZecAmountTriple(),
isHideBalances = isHideBalances, isHideBalances = isHideBalances,
textStyles = textStyle =
Pair( StyledBalanceDefaults.textStyles(
ZcashTheme.extendedTypography.balanceSingleStyles.first, mostSignificantPart = ZcashTheme.extendedTypography.balanceSingleStyles.first,
ZcashTheme.extendedTypography.balanceSingleStyles.second leastSignificantPart = ZcashTheme.extendedTypography.balanceSingleStyles.second
), ),
textColor = ZcashTheme.colors.textDescriptionDark textColor = ZcashTheme.colors.textDescriptionDark
) )

View File

@ -54,6 +54,7 @@ import co.electriccoin.zcash.ui.design.component.SecondaryButton
import co.electriccoin.zcash.ui.design.component.Small import co.electriccoin.zcash.ui.design.component.Small
import co.electriccoin.zcash.ui.design.component.SmallTopAppBar import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
import co.electriccoin.zcash.ui.design.component.StyledBalance import co.electriccoin.zcash.ui.design.component.StyledBalance
import co.electriccoin.zcash.ui.design.component.StyledBalanceDefaults
import co.electriccoin.zcash.ui.design.component.Tiny import co.electriccoin.zcash.ui.design.component.Tiny
import co.electriccoin.zcash.ui.design.component.TopAppBarBackNavigation import co.electriccoin.zcash.ui.design.component.TopAppBarBackNavigation
import co.electriccoin.zcash.ui.design.theme.ZcashTheme import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@ -400,11 +401,11 @@ private fun SendConfirmationContent(
balanceParts = zecSend.proposal!!.totalFeeRequired().toZecStringFull().asZecAmountTriple(), balanceParts = zecSend.proposal!!.totalFeeRequired().toZecStringFull().asZecAmountTriple(),
// We don't hide any balance in confirmation screen // We don't hide any balance in confirmation screen
isHideBalances = false, isHideBalances = false,
textStyles = textStyle =
Pair( StyledBalanceDefaults.textStyles(
ZcashTheme.extendedTypography.balanceSingleStyles.first, mostSignificantPart = ZcashTheme.extendedTypography.balanceSingleStyles.first,
ZcashTheme.extendedTypography.balanceSingleStyles.second leastSignificantPart = ZcashTheme.extendedTypography.balanceSingleStyles.second
) ),
) )
Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingUpLarge)) Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingUpLarge))