From 1bb23c816f38f0a4628f147f2fc57fbb56810a3d Mon Sep 17 00:00:00 2001 From: dankito Date: Thu, 5 Sep 2024 04:32:35 +0200 Subject: [PATCH] Extracted SideMenuContent --- .../banking/ui/appskeleton/SideMenu.kt | 119 +--------------- .../banking/ui/appskeleton/SideMenuContent.kt | 128 ++++++++++++++++++ 2 files changed, 132 insertions(+), 115 deletions(-) create mode 100644 composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/SideMenuContent.kt 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 ff01842..491f3ec 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,133 +1,22 @@ package net.codinux.banking.ui.appskeleton -import androidx.compose.foundation.* -import androidx.compose.foundation.layout.* -import androidx.compose.material.* -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.automirrored.filled.Send -import androidx.compose.material.icons.filled.Add +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.material.ModalDrawer import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState -import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Brush -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.unit.dp -import bankmeister.composeapp.generated.resources.AppIcon -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 org.jetbrains.compose.resources.imageResource - -private val uiState = DI.uiState - -private val HeaderHeight = 160f - -private val HeaderBackground = Brush.linearGradient( - colors = listOf( - Color(0xFF00695C), // endColor: #00695C - Color(0xFF009688), // centerColor: #009688 - Color(0xFF4DB6AC), // startColor: #4DB6AC - ) -) - -private val textColor = Colors.DrawerPrimaryText - -private val ItemHeight = 48.dp - -private val ItemHorizontalPadding = 8.dp - -private val itemModifier = Modifier.height(ItemHeight).widthIn(min = 350.dp) - -private val iconSize = 24.dp - -private val VerticalSpacing = 8.dp - @Composable fun SideMenu(appContent: @Composable () -> Unit) { - val drawerState = uiState.drawerState.collectAsState().value - - val accounts = uiState.userAccounts.collectAsState().value - - val coroutineScope = rememberCoroutineScope() + val drawerState = DI.uiState.drawerState.collectAsState().value ModalDrawer( modifier = Modifier.fillMaxHeight(), drawerState = drawerState, content = appContent, drawerBackgroundColor = Colors.DrawerContentBackground, - drawerContentColor = textColor, // seems to have no effect - drawerContent = { - Column(Modifier.verticalScroll(ScrollState(0), enabled = true)) { - Column(Modifier.fillMaxWidth().height(HeaderHeight.dp).background(HeaderBackground).padding(16.dp)) { - Spacer(Modifier.weight(1f)) - - Image(imageResource(Res.drawable.AppIcon), "Bankmeister's app icon", Modifier.size(48.dp)) - - Text("Bankmeister", color = Color.White, modifier = Modifier.padding(top = 16.dp, bottom = 8.dp)) - - Text("Version 1.0.0 Alpha 12", color = Color.LightGray) - } - - Divider(color = Colors.DrawerDivider) - - Column(Modifier.padding(horizontal = 16.dp, vertical = 24.dp)) { - Column(Modifier.height(ItemHeight), verticalArrangement = Arrangement.Center) { - Text("Konten", color = textColor) - } - - BanksList(iconSize = iconSize, textColor = textColor, itemModifier = itemModifier, itemHorizontalPadding = ItemHorizontalPadding) { userAccount, bankAccount -> - uiState.transactionsFilter.value.selectedAccountChanged(userAccount, bankAccount) - - coroutineScope.launch { - drawerState.close() - } - } - - Spacer(Modifier.height(VerticalSpacing)) - - NavigationMenuItem(itemModifier, "Konto hinzufügen", textColor, horizontalPadding = ItemHorizontalPadding, icon = { Icon(Icons.Filled.Add, "Konto hinzufügen", Modifier.size(iconSize)) }) { - uiState.showAddAccountDialog.value = true - - coroutineScope.launch { - drawerState.close() - } - } - - if (accounts.isNotEmpty()) { - Spacer(Modifier.height(VerticalSpacing)) - - NavigationMenuItem(itemModifier, "Neue Überweisung", textColor, horizontalPadding = ItemHorizontalPadding, icon = { Icon(Icons.Filled.Add, "Konto hinzufügen", Modifier.size(iconSize)) }) { - uiState.showTransferMoneyDialog.value = true - - coroutineScope.launch { - drawerState.close() - } - } - } - } - - if (accounts.isNotEmpty()) { - Divider(color = Colors.DrawerDivider) - - Column(Modifier.padding(16.dp)) { - UiSettings(Modifier.fillMaxWidth().padding(bottom = VerticalSpacing), textColor) - - 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 - } - } - } - } - } + drawerContent = { SideMenuContent() } ) } \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/SideMenuContent.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/SideMenuContent.kt new file mode 100644 index 0000000..6987917 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/SideMenuContent.kt @@ -0,0 +1,128 @@ +package net.codinux.banking.ui.appskeleton + +import androidx.compose.foundation.* +import androidx.compose.foundation.layout.* +import androidx.compose.material.Divider +import androidx.compose.material.Icon +import androidx.compose.material.Text +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.automirrored.filled.Send +import androidx.compose.material.icons.filled.Add +import androidx.compose.runtime.Composable +import androidx.compose.runtime.collectAsState +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import bankmeister.composeapp.generated.resources.AppIcon +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 org.jetbrains.compose.resources.imageResource + +private val uiState = DI.uiState + +private val HeaderHeight = 160f + +private val HeaderBackground = Brush.linearGradient( + colors = listOf( + Color(0xFF00695C), // endColor: #00695C + Color(0xFF009688), // centerColor: #009688 + Color(0xFF4DB6AC), // startColor: #4DB6AC + ) +) + +private val textColor = Colors.DrawerPrimaryText + +private val ItemHeight = 48.dp + +private val ItemHorizontalPadding = 8.dp + +private val itemModifier = Modifier.height(ItemHeight).widthIn(min = 350.dp) + +private val iconSize = 24.dp + +private val VerticalSpacing = 8.dp + +@Composable +fun SideMenuContent() { + val drawerState = uiState.drawerState.collectAsState().value + + val accounts = uiState.userAccounts.collectAsState().value + + val coroutineScope = rememberCoroutineScope() + + Column(Modifier.verticalScroll(ScrollState(0), enabled = true)) { + Column(Modifier.fillMaxWidth().height(HeaderHeight.dp).background(HeaderBackground).padding(16.dp)) { + Spacer(Modifier.weight(1f)) + + Image(imageResource(Res.drawable.AppIcon), "Bankmeister's app icon", Modifier.size(48.dp)) + + Text("Bankmeister", color = Color.White, modifier = Modifier.padding(top = 16.dp, bottom = 8.dp)) + + Text("Version 1.0.0 Alpha 12", color = Color.LightGray) + } + + Divider(color = Colors.DrawerDivider) + + Column(Modifier.padding(horizontal = 16.dp, vertical = 24.dp)) { + Column(Modifier.height(ItemHeight), verticalArrangement = Arrangement.Center) { + Text("Konten", color = textColor) + } + + BanksList(iconSize = iconSize, textColor = textColor, itemModifier = itemModifier, itemHorizontalPadding = ItemHorizontalPadding) { userAccount, bankAccount -> + uiState.transactionsFilter.value.selectedAccountChanged(userAccount, bankAccount) + + coroutineScope.launch { + drawerState.close() + } + } + + Spacer(Modifier.height(VerticalSpacing)) + + NavigationMenuItem(itemModifier, "Konto hinzufügen", textColor, horizontalPadding = ItemHorizontalPadding, + icon = { Icon(Icons.Filled.Add, "Konto hinzufügen", Modifier.size(iconSize), tint = textColor) }) { + uiState.showAddAccountDialog.value = true + + coroutineScope.launch { + drawerState.close() + } + } + + if (accounts.isNotEmpty()) { + Spacer(Modifier.height(VerticalSpacing)) + + NavigationMenuItem(itemModifier, "Neue Überweisung", textColor, horizontalPadding = ItemHorizontalPadding, + icon = { Icon(Icons.Filled.Add, "Konto hinzufügen", Modifier.size(iconSize), tint = textColor) }) { + uiState.showTransferMoneyDialog.value = true + + coroutineScope.launch { + drawerState.close() + } + } + } + } + + if (accounts.isNotEmpty()) { + Divider(color = Colors.DrawerDivider) + + Column(Modifier.padding(16.dp)) { + UiSettings(Modifier.fillMaxWidth().padding(bottom = VerticalSpacing), textColor) + + NavigationMenuItem(itemModifier, "Daten exportieren", textColor, horizontalPadding = ItemHorizontalPadding, + icon = { Icon(Icons.AutoMirrored.Filled.Send, "Konto hinzufügen", Modifier.size(iconSize), tint = textColor) }) { + coroutineScope.launch { + drawerState.close() + } + + uiState.showExportScreen.value = true + } + } + } + } +} \ No newline at end of file