From 18d8108779ae62c9f921e92337e5b52eff5a61ea Mon Sep 17 00:00:00 2001 From: tdpeuter Date: Tue, 11 Apr 2023 22:39:51 +0200 Subject: [PATCH] Add basic sidemenu --- .../java/be/ugent/sel/studeez/StudeezApp.kt | 50 +++++++++------- .../be/ugent/sel/studeez/StudeezAppstate.kt | 8 +++ .../common/composable/DrawerComposable.kt | 60 +++++++++++++++++++ .../common/composable/ToolbarComposable.kt | 15 ++--- .../sel/studeez/screens/home/HomeScreen.kt | 8 ++- 5 files changed, 111 insertions(+), 30 deletions(-) create mode 100644 app/src/main/java/be/ugent/sel/studeez/common/composable/DrawerComposable.kt diff --git a/app/src/main/java/be/ugent/sel/studeez/StudeezApp.kt b/app/src/main/java/be/ugent/sel/studeez/StudeezApp.kt index 506acef..b90c99e 100644 --- a/app/src/main/java/be/ugent/sel/studeez/StudeezApp.kt +++ b/app/src/main/java/be/ugent/sel/studeez/StudeezApp.kt @@ -16,6 +16,7 @@ import androidx.navigation.NavHostController import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController +import be.ugent.sel.studeez.common.composable.Drawer import be.ugent.sel.studeez.common.snackbar.SnackbarManager import be.ugent.sel.studeez.navigation.StudeezDestinations import be.ugent.sel.studeez.screens.home.HomeScreen @@ -31,24 +32,29 @@ fun StudeezApp() { Surface(color = MaterialTheme.colors.background) { val appState = rememberAppState() - Scaffold( - snackbarHost = { - SnackbarHost( - hostState = it, - modifier = Modifier.padding(8.dp), - snackbar = { snackbarData -> - Snackbar(snackbarData, contentColor = MaterialTheme.colors.onPrimary) - } - ) - }, - scaffoldState = appState.scaffoldState - ) { innerPaddingModifier -> - NavHost( - navController = appState.navController, - startDestination = StudeezDestinations.SPLASH_SCREEN, - modifier = Modifier.padding(innerPaddingModifier) - ) { - studeezGraph(appState) + ModalDrawer( + drawerContent = { Drawer() }, + drawerState = appState.drawerState + ) { + Scaffold( + snackbarHost = { + SnackbarHost( + hostState = it, + modifier = Modifier.padding(8.dp), + snackbar = { snackbarData -> + Snackbar(snackbarData, contentColor = MaterialTheme.colors.onPrimary) + } + ) + }, + scaffoldState = appState.scaffoldState + ) { innerPaddingModifier -> + NavHost( + navController = appState.navController, + startDestination = StudeezDestinations.SPLASH_SCREEN, + modifier = Modifier.padding(innerPaddingModifier) + ) { + studeezGraph(appState) + } } } } @@ -58,13 +64,14 @@ fun StudeezApp() { @Composable fun rememberAppState( scaffoldState: ScaffoldState = rememberScaffoldState(), + drawerState: DrawerState = rememberDrawerState(initialValue = DrawerValue.Closed), navController: NavHostController = rememberNavController(), snackbarManager: SnackbarManager = SnackbarManager, resources: Resources = resources(), coroutineScope: CoroutineScope = rememberCoroutineScope() ) = remember(scaffoldState, navController, snackbarManager, resources, coroutineScope) { - StudeezAppstate(scaffoldState, navController, snackbarManager, resources, coroutineScope) + StudeezAppstate(scaffoldState, drawerState, navController, snackbarManager, resources, coroutineScope) } @Composable @@ -89,6 +96,9 @@ fun NavGraphBuilder.studeezGraph(appState: StudeezAppstate) { } composable(StudeezDestinations.HOME_SCREEN) { - HomeScreen(openAndPopUp = { route, popUp -> appState.navigateAndPopUp(route, popUp) }) + HomeScreen( + openAndPopUp = { route, popUp -> appState.navigateAndPopUp(route, popUp) }, + openDrawer = { appState.openDrawer() } + ) } } \ No newline at end of file diff --git a/app/src/main/java/be/ugent/sel/studeez/StudeezAppstate.kt b/app/src/main/java/be/ugent/sel/studeez/StudeezAppstate.kt index cc28cd3..fc8465c 100644 --- a/app/src/main/java/be/ugent/sel/studeez/StudeezAppstate.kt +++ b/app/src/main/java/be/ugent/sel/studeez/StudeezAppstate.kt @@ -1,6 +1,7 @@ package be.ugent.sel.studeez import android.content.res.Resources +import androidx.compose.material.DrawerState import androidx.compose.material.ScaffoldState import androidx.compose.runtime.Stable import androidx.navigation.NavHostController @@ -13,11 +14,14 @@ import kotlinx.coroutines.launch @Stable class StudeezAppstate( val scaffoldState: ScaffoldState, + val drawerState: DrawerState, val navController: NavHostController, private val snackbarManager: SnackbarManager, private val resources: Resources, coroutineScope: CoroutineScope ) { + val coroutineScope: CoroutineScope = coroutineScope + init { coroutineScope.launch { snackbarManager.snackbarMessages.filterNotNull().collect { snackbarMessage -> @@ -48,4 +52,8 @@ class StudeezAppstate( popUpTo(0) { inclusive = true } } } + + fun openDrawer() { + coroutineScope.launch { drawerState.open() } + } } \ No newline at end of file diff --git a/app/src/main/java/be/ugent/sel/studeez/common/composable/DrawerComposable.kt b/app/src/main/java/be/ugent/sel/studeez/common/composable/DrawerComposable.kt new file mode 100644 index 0000000..3ecb13c --- /dev/null +++ b/app/src/main/java/be/ugent/sel/studeez/common/composable/DrawerComposable.kt @@ -0,0 +1,60 @@ +package be.ugent.sel.studeez.common.composable + +import android.graphics.drawable.Icon +import androidx.compose.foundation.layout.* +import androidx.compose.material.Button +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.filled.Home +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp + +@Composable +fun Drawer() { + Column(modifier = Modifier.fillMaxSize()) { + Text(text = "Studeez") + Divider() + Text(text = "Logout") + IconTextButton(icon = Icons.Default.Home, text = "Home") { + + } + } +} + +@Composable +fun IconTextButton(icon: ImageVector, text: String, onClick: () -> Unit) { + Button( + onClick = onClick + ) { + Row( + horizontalArrangement = Arrangement.Center + ) { + Icon(imageVector = icon, contentDescription = text) + Spacer(modifier = Modifier.width(8.dp)) + Text(text = text) + } + } +} + +@Preview +@Composable +fun DrawerPreview() { + Drawer() +} + +@Preview +@Composable +fun DrawerEntryPreview() { + IconTextButton( + icon = Icons.Default.Home, + text = "Home", + onClick = { + // Do something when the button is clicked + } + ) +} \ No newline at end of file diff --git a/app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt b/app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt index 2ed16c6..8929860 100644 --- a/app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt +++ b/app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt @@ -3,6 +3,7 @@ package be.ugent.sel.studeez.common.composable import androidx.compose.foundation.layout.PaddingValues import androidx.compose.material.* import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.material.icons.filled.Menu import androidx.compose.runtime.Composable import androidx.compose.ui.tooling.preview.Preview @@ -14,6 +15,7 @@ import be.ugent.sel.studeez.ui.theme.StudeezTheme // Contains floatingActionButton and bottom bar, used in the main four screens. fun PrimaryScreenToolbar( title: String, + openDrawer: () -> Unit, content: @Composable (PaddingValues) -> Unit ) { Scaffold( @@ -21,7 +23,7 @@ fun PrimaryScreenToolbar( topBar = { TopAppBar( title = { Text(text = title) }, navigationIcon = { - IconButton(onClick = { /* TODO open sidemenu */ }) { + IconButton(onClick = { openDrawer() }) { Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu") } } @@ -48,8 +50,8 @@ fun SecondaryScreenToolbar( topBar = { TopAppBar( title = { Text(text = title) }, navigationIcon = { - IconButton(onClick = { /* TODO open sidemenu */ }) { - Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu") + IconButton(onClick = { /* TODO Go back */ }) { + Icon(imageVector = Icons.Default.ArrowBack, contentDescription = "Go back") } } ) }, @@ -64,14 +66,13 @@ fun PrimaryScreenToolbarPreview() { StudeezTheme { PrimaryScreenToolbar( "Preview screen", {} - ) } + ) {} } } @Preview @Composable fun SecondaryScreenToolbarPreview() { StudeezTheme { SecondaryScreenToolbar( - "Preview screen", - {} - )} + "Preview screen" + ) {} } } \ No newline at end of file diff --git a/app/src/main/java/be/ugent/sel/studeez/screens/home/HomeScreen.kt b/app/src/main/java/be/ugent/sel/studeez/screens/home/HomeScreen.kt index 56d1b4d..45562d1 100644 --- a/app/src/main/java/be/ugent/sel/studeez/screens/home/HomeScreen.kt +++ b/app/src/main/java/be/ugent/sel/studeez/screens/home/HomeScreen.kt @@ -6,18 +6,20 @@ import androidx.hilt.navigation.compose.hiltViewModel import be.ugent.sel.studeez.R import be.ugent.sel.studeez.common.composable.BasicButton import be.ugent.sel.studeez.common.composable.PrimaryScreenToolbar -import be.ugent.sel.studeez.common.composable.SecondaryScreenToolbar import be.ugent.sel.studeez.common.ext.basicButton import be.ugent.sel.studeez.resources @Composable fun HomeScreen( openAndPopUp: (String, String) -> Unit, + openDrawer: () -> Unit, viewModel: HomeViewModel = hiltViewModel() ) { - PrimaryScreenToolbar(title = resources().getString(R.string.home)) { - // "Start session" button + PrimaryScreenToolbar( + title = resources().getString(R.string.home), + openDrawer = { openDrawer() } + ) { BasicButton(R.string.start_session, Modifier.basicButton()) { viewModel.onStartSessionClick(openAndPopUp) }