Extracted SideMenuContent
This commit is contained in:
parent
ec245f96d5
commit
1bb23c816f
|
|
@ -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() }
|
||||
)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue