diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/App.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/App.kt index 487e1e5..42348a0 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/App.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/App.kt @@ -40,6 +40,10 @@ fun App() { // we want to place the FAB half size into the BottomBar so we have to add some top padding to it val fabPositionAdjustment = 44.dp // FabSpacing = 16.dp + FAB height (= 56.dp) / 2 + val uiState = DI.uiState + + val uiSettings = DI.uiSettings + val coroutineScope = rememberCoroutineScope() coroutineScope.launch { @@ -56,13 +60,13 @@ fun App() { FloatingActionButton( shape = CircleShape, modifier = Modifier.offset(x = 4.dp, y = fabPositionAdjustment), - onClick = { DI.uiState.showAddAccountDialog.value = true } + onClick = { uiState.showAddAccountDialog.value = true } ) { Icon(Icons.Filled.Add, contentDescription = "Add a bank account") } }, snackbarHost = { snackbarHostState -> - StateHandler(DI.uiState, snackbarHostState) + StateHandler(uiState, snackbarHostState) SnackbarHost( hostState = snackbarHostState @@ -83,7 +87,7 @@ fun App() { } ) { scaffoldPadding -> Column(Modifier.fillMaxSize().padding(scaffoldPadding), horizontalAlignment = Alignment.CenterHorizontally) { - TransactionsList(DI.uiState) + TransactionsList(uiState, uiSettings) } } } diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/SideMenu.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/SideMenu.kt index 1842704..86f9df4 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/SideMenu.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/SideMenu.kt @@ -1,10 +1,7 @@ package net.codinux.banking.ui.appskeleton -import androidx.compose.foundation.Image -import androidx.compose.foundation.ScrollState -import androidx.compose.foundation.background +import androidx.compose.foundation.* import androidx.compose.foundation.layout.* -import androidx.compose.foundation.verticalScroll import androidx.compose.material.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.Send @@ -21,9 +18,9 @@ import bankmeister.composeapp.generated.resources.Res import kotlinx.coroutines.launch import net.codinux.banking.ui.composables.BanksList import net.codinux.banking.ui.composables.NavigationMenuItem +import net.codinux.banking.ui.composables.settings.UiSettings import net.codinux.banking.ui.config.Colors import net.codinux.banking.ui.config.DI -import net.codinux.banking.ui.model.BankAccountFilter import org.jetbrains.compose.resources.imageResource private val uiState = DI.uiState @@ -48,7 +45,7 @@ private val itemModifier = Modifier.height(ItemHeight).widthIn(min = 350.dp) private val iconSize = 24.dp -private val VerticalSpacing = 12.dp +private val VerticalSpacing = 8.dp @Composable @@ -118,14 +115,16 @@ fun SideMenu(appContent: @Composable () -> Unit) { if (accounts.isNotEmpty()) { Divider(color = Colors.DrawerDivider) - Spacer(Modifier.height(VerticalSpacing)) + Column(Modifier.padding(16.dp)) { + UiSettings(Modifier.fillMaxWidth().padding(bottom = VerticalSpacing)) - NavigationMenuItem(itemModifier, "Daten exportieren", textColor, horizontalPadding = ItemHorizontalPadding, icon = { Icon(Icons.AutoMirrored.Filled.Send, "Konto hinzufügen", Modifier.size(iconSize)) }) { - coroutineScope.launch { - drawerState.close() + NavigationMenuItem(itemModifier, "Daten exportieren", textColor, horizontalPadding = ItemHorizontalPadding, icon = { Icon(Icons.AutoMirrored.Filled.Send, "Konto hinzufügen", Modifier.size(iconSize)) }) { + coroutineScope.launch { + drawerState.close() + } + + uiState.showExportScreen.value = true } - - uiState.showExportScreen.value = true } } } diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/settings/UiSettings.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/settings/UiSettings.kt new file mode 100644 index 0000000..c349043 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/settings/UiSettings.kt @@ -0,0 +1,22 @@ +package net.codinux.banking.ui.composables.settings + +import androidx.compose.foundation.layout.Column +import androidx.compose.runtime.Composable +import androidx.compose.runtime.collectAsState +import androidx.compose.runtime.getValue +import androidx.compose.ui.Modifier +import net.codinux.banking.ui.config.DI +import net.codinux.banking.ui.forms.BooleanOption + +@Composable +fun UiSettings(modifier: Modifier) { + val uiSettings = DI.uiSettings + + val zebraStripes by uiSettings.zebraStripes.collectAsState() + + + Column(modifier) { + BooleanOption("Zebra Stripes", zebraStripes) { uiSettings.zebraStripes.value = it } + } + +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/GroupedTransactionsListItems.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/GroupedTransactionsListItems.kt index 64cb989..74eb00a 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/GroupedTransactionsListItems.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/GroupedTransactionsListItems.kt @@ -20,6 +20,7 @@ import net.codinux.banking.ui.config.Colors import net.codinux.banking.ui.config.DI import net.codinux.banking.ui.forms.RoundedCornersCard import net.codinux.banking.ui.model.AccountTransactionViewModel +import net.codinux.banking.ui.settings.UiSettings private val calculator = DI.calculator @@ -29,13 +30,17 @@ private val formatUtil = DI.formatUtil fun GroupedTransactionsListItems( modifier: Modifier, transactionsToDisplay: List, - userAccountsId: Map + userAccountsId: Map, + uiSettings: UiSettings ) { val groupedByMonth by remember(transactionsToDisplay) { derivedStateOf { transactionsToDisplay.groupBy { LocalDate(it.valueDate.year, it.valueDate.monthNumber, 1) } } } + val zebraStripes by uiSettings.zebraStripes.collectAsState() + + LazyColumn(modifier) { items(groupedByMonth.keys.sortedDescending()) { month -> Column(Modifier.fillMaxWidth()) { @@ -54,7 +59,7 @@ fun GroupedTransactionsListItems( RoundedCornersCard { Column(Modifier.background(Color.White)) { // LazyColumn inside LazyColumn is not allowed monthTransactions.forEachIndexed { index, transaction -> - val backgroundColor = if (index % 2 == 1) Colors.Zinc100_50 else Color.Transparent + val backgroundColor = if (zebraStripes && index % 2 == 1) Colors.Zinc100_50 else Color.Transparent TransactionListItem(userAccountsId[transaction.userAccountId], transaction, backgroundColor) if (index < monthTransactions.size - 1) { diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/TransactionsList.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/TransactionsList.kt index e5c8e36..ff6e14c 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/TransactionsList.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/TransactionsList.kt @@ -10,6 +10,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import net.codinux.banking.ui.config.Colors import net.codinux.banking.ui.config.DI +import net.codinux.banking.ui.settings.UiSettings import net.codinux.banking.ui.state.UiState import org.jetbrains.compose.ui.tooling.preview.Preview @@ -20,7 +21,7 @@ private val calculator = DI.calculator private val formatUtil = DI.formatUtil @Composable -fun TransactionsList(uiState: UiState) { +fun TransactionsList(uiState: UiState, uiSettings: UiSettings) { val userAccounts by uiState.userAccounts.collectAsState() val userAccountsId by remember(userAccounts) { derivedStateOf { userAccounts.associateBy { it.id } } @@ -46,7 +47,7 @@ fun TransactionsList(uiState: UiState) { Text(formatUtil.formatAmount(balance, "EUR"), color = formatUtil.getColorForAmount(balance)) } - GroupedTransactionsListItems(transactionsListModifier, transactionsToDisplay, userAccountsId) + GroupedTransactionsListItems(transactionsListModifier, transactionsToDisplay, userAccountsId, uiSettings) } } @@ -54,6 +55,6 @@ fun TransactionsList(uiState: UiState) { @Composable fun TransactionsListPreview() { MaterialTheme { - TransactionsList(UiState()) + TransactionsList(UiState(), UiSettings()) } } \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/config/DI.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/config/DI.kt index 8e4b898..d33974b 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/config/DI.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/config/DI.kt @@ -7,12 +7,15 @@ import net.codinux.banking.dataaccess.SqliteBankingRepository import net.codinux.banking.ui.Platform import net.codinux.banking.ui.getPlatform import net.codinux.banking.ui.service.* +import net.codinux.banking.ui.settings.UiSettings import net.codinux.banking.ui.state.UiState object DI { val uiState = UiState() + val uiSettings = UiSettings() + val platform: Platform = getPlatform() diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/forms/BooleanOption.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/forms/BooleanOption.kt new file mode 100644 index 0000000..03dbc2c --- /dev/null +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/forms/BooleanOption.kt @@ -0,0 +1,25 @@ +package net.codinux.banking.ui.forms + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material.Switch +import androidx.compose.material.SwitchDefaults +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import net.codinux.banking.ui.config.Colors + +@Composable +fun BooleanOption(label: String, isChecked: Boolean, enabled: Boolean = true, checkChanged: (Boolean) -> Unit) { + + Row(verticalAlignment = Alignment.CenterVertically) { + Switch(checked = isChecked, onCheckedChange = checkChanged, enabled = enabled, colors = SwitchDefaults.colors(checkedThumbColor = Colors.CodinuxSecondaryColor)) + + Text(label, Modifier.fillMaxWidth().clickable { checkChanged(!!!isChecked) }.padding(start = 6.dp)) + } + +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/settings/UiSettings.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/settings/UiSettings.kt new file mode 100644 index 0000000..2a1f3c6 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/settings/UiSettings.kt @@ -0,0 +1,10 @@ +package net.codinux.banking.ui.settings + +import androidx.lifecycle.ViewModel +import kotlinx.coroutines.flow.MutableStateFlow + +class UiSettings : ViewModel() { + + val zebraStripes = MutableStateFlow(true) + +} \ No newline at end of file