From 710e06309e66c3f4292b6e0e2be42899f67900fe Mon Sep 17 00:00:00 2001 From: dankito Date: Wed, 28 Aug 2024 23:47:59 +0200 Subject: [PATCH] Extracted NavigationMenuItem --- .../banking/ui/appskeleton/SideMenu.kt | 9 ++++- .../banking/ui/composables/BanksList.kt | 39 +++++-------------- .../ui/composables/NavigationMenuItem.kt | 36 +++++++++++++++++ 3 files changed, 52 insertions(+), 32 deletions(-) create mode 100644 composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/NavigationMenuItem.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 952a415..49765e8 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 @@ -32,6 +32,11 @@ private val HeaderBackground = Brush.linearGradient( ) ) +private val ItemHeight = 48.dp + +private val itemModifier = Modifier.height(ItemHeight).widthIn(min = 300.dp).padding(start = 8.dp) + + @Composable fun SideMenu(appContent: @Composable () -> Unit) { val drawerState = uiState.drawerState.collectAsState().value @@ -59,11 +64,11 @@ fun SideMenu(appContent: @Composable () -> Unit) { Divider(color = Colors.DrawerDivider) Column(Modifier.padding(horizontal = 16.dp, vertical = 24.dp)) { - Column(Modifier.height(40.dp), verticalArrangement = Arrangement.Center) { + Column(Modifier.height(ItemHeight), verticalArrangement = Arrangement.Center) { Text("Konten", color = Colors.DrawerPrimaryText) } - BanksList(textColor = Colors.DrawerPrimaryText) { userAccount, bankAccount -> + BanksList(textColor = Colors.DrawerPrimaryText, itemModifier = itemModifier) { userAccount, bankAccount -> uiState.accountFilter.value = if (userAccount == null) { emptyList() } else { diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/BanksList.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/BanksList.kt index 7dd8b83..ceec201 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/BanksList.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/BanksList.kt @@ -1,11 +1,8 @@ package net.codinux.banking.ui.composables -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* -import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.Dp @@ -18,7 +15,7 @@ import net.codinux.banking.ui.config.DI private val uiState = DI.uiState -private val IconTextSpacing = 36.dp +private val IconTextSpacing = 24.dp @Composable fun BanksList( @@ -30,40 +27,22 @@ fun BanksList( ) { val userAccounts = uiState.userAccounts.collectAsState() - Column(modifier) { - Row( - itemModifier.clickable { - accountSelected?.invoke(null, null) - }, - verticalAlignment = Alignment.CenterVertically - ) { - BankIcon(null as? String?, Modifier.padding(end = IconTextSpacing), Modifier.size(iconSize), fallbackIcon = Res.drawable.account) - Text("Alle Konten", color = textColor) + Column(modifier) { + NavigationMenuItem(itemModifier, "Alle Konten", textColor, iconSize, IconTextSpacing, fallbackIcon = Res.drawable.account) { + accountSelected?.invoke(null, null) } - userAccounts.value.forEach { userAccount -> + userAccounts.value.sortedBy { it.displayIndex }.forEach { userAccount -> Spacer(Modifier.fillMaxWidth().height(12.dp)) - Row( - itemModifier.clickable { - accountSelected?.invoke(userAccount, null) - }, - verticalAlignment = Alignment.CenterVertically - ) { - BankIcon(userAccount, Modifier.padding(end = IconTextSpacing), Modifier.size(iconSize), fallbackIcon = Res.drawable.account) - - Text(userAccount.bankName, color = textColor) + NavigationMenuItem(itemModifier, userAccount.bankName, textColor, iconSize, IconTextSpacing, userAccount, fallbackIcon = Res.drawable.account) { + accountSelected?.invoke(userAccount, null) } userAccount.accounts.sortedBy { it.displayIndex }.forEach { account -> - Column( - itemModifier.clickable { - accountSelected?.invoke(userAccount, account) - }.padding(start = iconSize + IconTextSpacing), - verticalArrangement = Arrangement.Center - ) { - Text(account.productName ?: account.identifier, color = textColor) + NavigationMenuItem(itemModifier, account.productName ?: account.identifier, textColor, iconSize, IconTextSpacing) { + accountSelected?.invoke(userAccount, account) } } } diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/NavigationMenuItem.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/NavigationMenuItem.kt new file mode 100644 index 0000000..af743ea --- /dev/null +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/NavigationMenuItem.kt @@ -0,0 +1,36 @@ +package net.codinux.banking.ui.composables + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import net.codinux.banking.client.model.UserAccount +import org.jetbrains.compose.resources.DrawableResource + +@Composable +fun NavigationMenuItem( + modifier: Modifier = Modifier, + text: String, + textColor: Color = Color.White, + iconSize: Dp = 24.dp, + iconTextSpacing: Dp = 24.dp, + userAccount: UserAccount? = null, + fallbackIcon: DrawableResource? = null, + onClick: (() -> Unit)? = null +) { + Row( + modifier.clickable { onClick?.invoke() }, + verticalAlignment = Alignment.CenterVertically + ) { + BankIcon(userAccount, Modifier.padding(end = iconTextSpacing), Modifier.size(iconSize), fallbackIcon = fallbackIcon) + + Text(text, color = textColor) + } +} \ No newline at end of file