Skip to content
This repository has been archived by the owner on Nov 5, 2024. It is now read-only.

Commit

Permalink
[FEATURE] Dense account design (#3428)
Browse files Browse the repository at this point in the history 
* Dense account design

* Dense account design

* Dense account design

* Dense account design

* Dense account design

* Dense account design

* Dense account design

* Dense account design

* Dense account design

* Dense account design

* Dense account design
  • Loading branch information
@shamim-emon
shamim-emon authored Aug 26, 2024
1 parent b974a1e commit a116fff
Show file tree
Hide file tree
Showing 11 changed files with 148 additions and 202 deletions.
3 changes: 2 additions & 1 deletion screen/accounts/src/main/java/com/ivy/accounts/AccountsState.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@ data class AccountsState(
val totalBalanceWithExcludedText: String,
val totalBalanceWithoutExcluded: String,
val totalBalanceWithoutExcludedText: String,
val reorderVisible: Boolean
val reorderVisible: Boolean,
val compactAccountsModeEnabled: Boolean
)
136 changes: 119 additions & 17 deletions screen/accounts/src/main/java/com/ivy/accounts/AccountsTab.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.ivy.base.legacy.Theme
import com.ivy.data.model.Account
import com.ivy.data.model.AccountId
import com.ivy.data.model.primitive.AssetCode
import com.ivy.data.model.primitive.ColorInt
Expand Down Expand Up @@ -151,6 +152,7 @@ private fun BoxWithConstraintsScope.UI(
AccountCard(
baseCurrency = state.baseCurrency,
accountData = it,
compactModeEnabled = state.compactAccountsModeEnabled,
onBalanceClick = {
nav.navigateTo(
TransactionsScreen(
Expand Down Expand Up @@ -202,6 +204,7 @@ private fun BoxWithConstraintsScope.UI(
private fun AccountCard(
baseCurrency: String,
accountData: AccountData,
compactModeEnabled: Boolean,
onBalanceClick: () -> Unit,
onClick: () -> Unit
) {
Expand All @@ -227,17 +230,19 @@ private fun AccountCard(
onBalanceClick = onBalanceClick
)

Spacer(Modifier.height(12.dp))
if (!compactModeEnabled) {
Spacer(Modifier.height(12.dp))

IncomeExpensesRow(
currency = currency,
incomeLabel = stringResource(R.string.month_income),
income = accountData.monthlyIncome,
expensesLabel = stringResource(R.string.month_expenses),
expenses = accountData.monthlyExpenses
)
IncomeExpensesRow(
currency = currency,
incomeLabel = stringResource(R.string.month_income),
income = accountData.monthlyIncome,
expensesLabel = stringResource(R.string.month_expenses),
expenses = accountData.monthlyExpenses
)

Spacer(Modifier.height(12.dp))
Spacer(Modifier.height(12.dp))
}
}
}

Expand Down Expand Up @@ -330,9 +335,9 @@ private fun AccountHeader(

@Preview
@Composable
private fun PreviewAccountsTab(theme: Theme = Theme.LIGHT) {
private fun PreviewAccountsTabCompactModeDisabled(theme: Theme = Theme.LIGHT) {
IvyWalletPreview(theme = theme) {
val acc1 = com.ivy.data.model.Account(
val acc1 = Account(
id = AccountId(UUID.randomUUID()),
name = NotBlankTrimmedString.unsafe("Phyre"),
color = ColorInt(Green.toArgb()),
Expand All @@ -342,7 +347,7 @@ private fun PreviewAccountsTab(theme: Theme = Theme.LIGHT) {
orderNum = 0.0,
)

val acc2 = com.ivy.data.model.Account(
val acc2 = Account(
id = AccountId(UUID.randomUUID()),
name = NotBlankTrimmedString.unsafe("DSK"),
color = ColorInt(GreenLight.toArgb()),
Expand All @@ -352,7 +357,7 @@ private fun PreviewAccountsTab(theme: Theme = Theme.LIGHT) {
orderNum = 0.0,
)

val acc3 = com.ivy.data.model.Account(
val acc3 = Account(
id = AccountId(UUID.randomUUID()),
name = NotBlankTrimmedString.unsafe("Revolut"),
color = ColorInt(Green.toArgb()),
Expand All @@ -362,7 +367,7 @@ private fun PreviewAccountsTab(theme: Theme = Theme.LIGHT) {
orderNum = 0.0,
)

val acc4 = com.ivy.data.model.Account(
val acc4 = Account(
id = AccountId(UUID.randomUUID()),
name = NotBlankTrimmedString.unsafe("Cash"),
color = ColorInt(Green.toArgb()),
Expand Down Expand Up @@ -407,18 +412,115 @@ private fun PreviewAccountsTab(theme: Theme = Theme.LIGHT) {
totalBalanceWithExcludedText = "BGN 25.54",
totalBalanceWithoutExcluded = "25.54",
totalBalanceWithoutExcludedText = "BGN 25.54",
reorderVisible = false
reorderVisible = false,
compactAccountsModeEnabled = false
)
UI(state = state)
}
}

@Preview
@Composable
private fun PreviewAccountsTabCompactModeEnabled(theme: Theme = Theme.LIGHT) {
IvyWalletPreview(theme = theme) {
val acc1 = Account(
id = AccountId(UUID.randomUUID()),
name = NotBlankTrimmedString.unsafe("Phyre"),
color = ColorInt(Green.toArgb()),
asset = AssetCode.unsafe("USD"),
icon = null,
includeInBalance = true,
orderNum = 0.0,
)

val acc2 = Account(
id = AccountId(UUID.randomUUID()),
name = NotBlankTrimmedString.unsafe("DSK"),
color = ColorInt(GreenLight.toArgb()),
asset = AssetCode.unsafe("USD"),
icon = null,
includeInBalance = true,
orderNum = 0.0,
)

val acc3 = Account(
id = AccountId(UUID.randomUUID()),
name = NotBlankTrimmedString.unsafe("Revolut"),
color = ColorInt(Green.toArgb()),
asset = AssetCode.unsafe("USD"),
icon = IconAsset.unsafe("revolut"),
includeInBalance = true,
orderNum = 0.0,
)

val acc4 = Account(
id = AccountId(UUID.randomUUID()),
name = NotBlankTrimmedString.unsafe("Cash"),
color = ColorInt(Green.toArgb()),
asset = AssetCode.unsafe("USD"),
icon = IconAsset.unsafe("cash"),
includeInBalance = true,
orderNum = 0.0,
)
val state = AccountsState(
baseCurrency = "BGN",
accountsData = persistentListOf(
AccountData(
account = acc1,
balance = 2125.0,
balanceBaseCurrency = null,
monthlyExpenses = 920.0,
monthlyIncome = 3045.0
),
AccountData(
account = acc2,
balance = 12125.21,
balanceBaseCurrency = null,
monthlyExpenses = 1350.50,
monthlyIncome = 8000.48
),
AccountData(
account = acc3,
balance = 1200.0,
balanceBaseCurrency = 1979.64,
monthlyExpenses = 750.0,
monthlyIncome = 1000.30
),
AccountData(
account = acc4,
balance = 820.0,
balanceBaseCurrency = null,
monthlyExpenses = 340.0,
monthlyIncome = 400.0
),
),
totalBalanceWithExcluded = "25.54",
totalBalanceWithExcludedText = "BGN 25.54",
totalBalanceWithoutExcluded = "25.54",
totalBalanceWithoutExcludedText = "BGN 25.54",
reorderVisible = false,
compactAccountsModeEnabled = true
)
UI(state = state)
}
}

/** For screen shot testing **/
@Composable
fun AccountsTabNonCompactUITest(dark: Boolean) {
val theme = when (dark) {
true -> Theme.DARK
false -> Theme.LIGHT
}
PreviewAccountsTabCompactModeDisabled(theme)
}

/** For screen shot testing **/
@Composable
fun AccountsTabUITest(dark: Boolean) {
fun AccountsTabCompactUITest(dark: Boolean) {
val theme = when (dark) {
true -> Theme.DARK
false -> Theme.LIGHT
}
PreviewAccountsTab(theme)
PreviewAccountsTabCompactModeEnabled(theme)
}
10 changes: 9 additions & 1 deletion screen/accounts/src/main/java/com/ivy/accounts/AccountsViewModel.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import com.ivy.base.legacy.SharedPrefs
import com.ivy.data.DataObserver
import com.ivy.data.DataWriteEvent
import com.ivy.data.repository.AccountRepository
import com.ivy.domain.features.Features
import com.ivy.legacy.IvyWalletCtx
import com.ivy.legacy.data.model.AccountData
import com.ivy.legacy.data.model.toCloseTimeRange
Expand Down Expand Up @@ -43,6 +44,7 @@ class AccountsViewModel @Inject constructor(
private val accountDataAct: AccountDataAct,
private val accountRepository: AccountRepository,
private val dataObserver: DataObserver,
private val features: Features,
) : ComposeViewModel<AccountsState, AccountsEvent>() {
private val baseCurrency = mutableStateOf("")
private val accountsData = mutableStateOf(listOf<AccountData>())
Expand Down Expand Up @@ -81,7 +83,8 @@ class AccountsViewModel @Inject constructor(
totalBalanceWithExcludedText = getTotalBalanceWithExcludedText(),
totalBalanceWithoutExcluded = getTotalBalanceWithoutExcluded(),
totalBalanceWithoutExcludedText = getTotalBalanceWithoutExcludedText(),
reorderVisible = getReorderVisible()
reorderVisible = getReorderVisible(),
compactAccountsModeEnabled = getCompactAccountsMode()
)
}

Expand Down Expand Up @@ -120,6 +123,11 @@ class AccountsViewModel @Inject constructor(
return reorderVisible.value
}

@Composable
private fun getCompactAccountsMode(): Boolean {
return features.compactAccountsMode.asEnabledState()
}

override fun onEvent(event: AccountsEvent) {
viewModelScope.launch(Dispatchers.Default) {
when (event) {
Expand Down
11 changes: 9 additions & 2 deletions screen/accounts/src/test/java/com/ivy/accounts/AccountsTabPaparazziTest.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,16 @@ class AccountsTabPaparazziTest(
private val theme: PaparazziTheme,
) : PaparazziScreenshotTest() {
@Test
fun `snapshot accountTab composable`() {
fun `snapshot accountTab nonCompact composable`() {
snapshot(theme) {
AccountsTabUITest(theme == PaparazziTheme.Dark)
AccountsTabNonCompactUITest(theme == PaparazziTheme.Dark)
}
}

@Test
fun `snapshot accountTab compact composable`() {
snapshot(theme) {
AccountsTabCompactUITest(theme == PaparazziTheme.Dark)
}
}
}
Binary file added ...ounts_AccountsTabPaparazziTest_snapshot accountTab compact composable[Dark].png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...unts_AccountsTabPaparazziTest_snapshot accountTab compact composable[Light].png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ts_AccountsTabPaparazziTest_snapshot accountTab nonCompact composable[Dark].png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...s_AccountsTabPaparazziTest_snapshot accountTab nonCompact composable[Light].png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit a116fff

Please sign in to comment.