Extracted MainScreen
This commit is contained in:
parent
0525d4ea77
commit
76487f201b
|
|
@ -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()
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue