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 afb4ecc..23c74fb 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/App.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/App.kt @@ -1,20 +1,15 @@ package net.codinux.banking.ui -import androidx.compose.foundation.layout.* -import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material.* -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Add +import androidx.compose.material.MaterialTheme +import androidx.compose.material.Typography import androidx.compose.runtime.* -import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import kotlinx.coroutines.launch -import net.codinux.banking.ui.appskeleton.* import net.codinux.banking.ui.config.Colors import net.codinux.banking.ui.config.DI +import net.codinux.banking.ui.screens.MainScreen import net.codinux.log.LoggerFactory import org.jetbrains.compose.ui.tooling.preview.Preview @@ -30,80 +25,13 @@ fun App() { val colors = MaterialTheme.colors.copy(primary = Colors.Primary, primaryVariant = Colors.PrimaryDark, onPrimary = Color.White, secondary = Colors.Accent, secondaryVariant = Colors.Accent, onSecondary = Color.White) - // the same values as in BottomBar, but LocalContentColor.current and LocalContentAlpha.current have a different value there - val snackbarTextColor = MaterialTheme.colors.onPrimary.copy(alpha = 0.74f) // 0.74f = ContentAlpha.HighContrastContentAlpha.medium - - val screenSizeInfo = rememberScreenSizeInfo() - - val isMobile = derivedStateOf { screenSizeInfo.getUiType() == UiType.COMPACT }.value - - // we want to place the FAB half size into the BottomBar so we have to add some top padding to it - val fabPositionAdjustment = if (isMobile) 44.dp // FabSpacing = 16.dp + FAB height (= 56.dp) / 2 - else (-10).dp - - val desktopDrawerWidth = 350.dp - - val uiState = DI.uiState - - val uiSettings = DI.uiSettings - - val drawerState = DI.uiState.drawerState.collectAsState().value - - val snackbarHostState = remember { SnackbarHostState() } - - val showFilterBar = uiState.showFilterBar.collectAsState() - var isInitialized by remember { mutableStateOf(false) } val coroutineScope = rememberCoroutineScope() MaterialTheme(colors = colors, typography = typography) { - Scaffold( - scaffoldState = rememberScaffoldState(drawerState, snackbarHostState), - bottomBar = { if (isMobile) BottomBar() else null }, - backgroundColor = Colors.Zinc100, - floatingActionButton = { - FloatingActionButton( - shape = CircleShape, - modifier = Modifier.offset(x = 4.dp, y = fabPositionAdjustment), - onClick = { uiState.showAddAccountDialog.value = true } - ) { - Icon(Icons.Filled.Add, contentDescription = "Add a bank account") - } - }, - drawerContent = { if (isMobile) SideMenuContent() else null }, - drawerBackgroundColor = Colors.DrawerContentBackground, - snackbarHost = { snackbarHostState -> - SnackbarHost( - hostState = snackbarHostState - ) { data -> - Snackbar( - modifier = Modifier.offset(y = fabPositionAdjustment - 4.dp) - .let { if (isMobile) it.padding(horizontal = 12.dp) else it.padding(start = desktopDrawerWidth + 6.dp, end = 2.dp) }, - action = { if (data.actionLabel == null) null else { - TextButton( - onClick = { data.performAction() }, - content = { Text(data.actionLabel!!, color = Colors.CodinuxSecondaryColor) } - ) - } - }, - content = { Text(data.message, color = snackbarTextColor) }, - backgroundColor = Colors.Primary - ) - } - } - ) { scaffoldPadding -> - if (isMobile) { - ContentPane(scaffoldPadding, uiState, uiSettings, snackbarHostState, isMobile) - } else { - DesktopLayout(scaffoldPadding, uiState, uiSettings, snackbarHostState, desktopDrawerWidth) - } - } - - if (showFilterBar.value) { - FilterBar() - } + MainScreen() } diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/MainScreen.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/MainScreen.kt new file mode 100644 index 0000000..1abfd69 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/MainScreen.kt @@ -0,0 +1,91 @@ +package net.codinux.banking.ui.screens + +import androidx.compose.foundation.layout.offset +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.* +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Add +import androidx.compose.runtime.* +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import net.codinux.banking.ui.UiType +import net.codinux.banking.ui.appskeleton.* +import net.codinux.banking.ui.config.Colors +import net.codinux.banking.ui.config.DI +import net.codinux.banking.ui.getUiType +import net.codinux.banking.ui.rememberScreenSizeInfo + +@Composable +fun MainScreen() { + + // the same values as in BottomBar, but LocalContentColor.current and LocalContentAlpha.current have a different value there + val snackbarTextColor = MaterialTheme.colors.onPrimary.copy(alpha = 0.74f) // 0.74f = ContentAlpha.HighContrastContentAlpha.medium + + val screenSizeInfo = rememberScreenSizeInfo() + + val isMobile = derivedStateOf { screenSizeInfo.getUiType() == UiType.COMPACT }.value + + // we want to place the FAB half size into the BottomBar so we have to add some top padding to it + val fabPositionAdjustment = if (isMobile) 44.dp // FabSpacing = 16.dp + FAB height (= 56.dp) / 2 + else (-10).dp + + val desktopDrawerWidth = 350.dp + + val uiState = DI.uiState + + val uiSettings = DI.uiSettings + + val drawerState = DI.uiState.drawerState.collectAsState().value + + val snackbarHostState = remember { SnackbarHostState() } + + val showFilterBar = uiState.showFilterBar.collectAsState() + + + Scaffold( + scaffoldState = rememberScaffoldState(drawerState, snackbarHostState), + bottomBar = { if (isMobile) BottomBar() else null }, + backgroundColor = Colors.Zinc100, + floatingActionButton = { + FloatingActionButton( + shape = CircleShape, + modifier = Modifier.offset(x = 4.dp, y = fabPositionAdjustment), + onClick = { uiState.showAddAccountDialog.value = true } + ) { + Icon(Icons.Filled.Add, contentDescription = "Add a bank account") + } + }, + drawerContent = { if (isMobile) SideMenuContent() else null }, + drawerBackgroundColor = Colors.DrawerContentBackground, + snackbarHost = { snackbarHostState -> + SnackbarHost( + hostState = snackbarHostState + ) { data -> + Snackbar( + modifier = Modifier.offset(y = fabPositionAdjustment - 4.dp) + .let { if (isMobile) it.padding(horizontal = 12.dp) else it.padding(start = desktopDrawerWidth + 6.dp, end = 2.dp) }, + action = { if (data.actionLabel == null) null else { + TextButton( + onClick = { data.performAction() }, + content = { Text(data.actionLabel!!, color = Colors.CodinuxSecondaryColor) } + ) + } + }, + content = { Text(data.message, color = snackbarTextColor) }, + backgroundColor = Colors.Primary + ) + } + } + ) { scaffoldPadding -> + if (isMobile) { + ContentPane(scaffoldPadding, uiState, uiSettings, snackbarHostState, isMobile) + } else { + DesktopLayout(scaffoldPadding, uiState, uiSettings, snackbarHostState, desktopDrawerWidth) + } + } + + if (showFilterBar.value) { + FilterBar() + } +} \ No newline at end of file