Extracted SideMenuContent
This commit is contained in:
parent
ec245f96d5
commit
1bb23c816f
|
|
@ -1,133 +1,22 @@
|
||||||
package net.codinux.banking.ui.appskeleton
|
package net.codinux.banking.ui.appskeleton
|
||||||
|
|
||||||
import androidx.compose.foundation.*
|
import androidx.compose.foundation.layout.fillMaxHeight
|
||||||
import androidx.compose.foundation.layout.*
|
import androidx.compose.material.ModalDrawer
|
||||||
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.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.runtime.collectAsState
|
import androidx.compose.runtime.collectAsState
|
||||||
import androidx.compose.runtime.rememberCoroutineScope
|
|
||||||
import androidx.compose.ui.Modifier
|
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.Colors
|
||||||
import net.codinux.banking.ui.config.DI
|
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
|
@Composable
|
||||||
fun SideMenu(appContent: @Composable () -> Unit) {
|
fun SideMenu(appContent: @Composable () -> Unit) {
|
||||||
val drawerState = uiState.drawerState.collectAsState().value
|
val drawerState = DI.uiState.drawerState.collectAsState().value
|
||||||
|
|
||||||
val accounts = uiState.userAccounts.collectAsState().value
|
|
||||||
|
|
||||||
val coroutineScope = rememberCoroutineScope()
|
|
||||||
|
|
||||||
ModalDrawer(
|
ModalDrawer(
|
||||||
modifier = Modifier.fillMaxHeight(),
|
modifier = Modifier.fillMaxHeight(),
|
||||||
drawerState = drawerState,
|
drawerState = drawerState,
|
||||||
content = appContent,
|
content = appContent,
|
||||||
drawerBackgroundColor = Colors.DrawerContentBackground,
|
drawerBackgroundColor = Colors.DrawerContentBackground,
|
||||||
drawerContentColor = textColor, // seems to have no effect
|
drawerContent = { SideMenuContent() }
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -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