Merge pull request #61 from SELab1/drawer_navbar_refactor

Drawer navbar refactor
This commit is contained in:
lbarraga 2023-04-14 13:50:21 +02:00 committed by GitHub Enterprise
commit 66e68493e4
8 changed files with 215 additions and 124 deletions

View file

@ -76,21 +76,23 @@ fun resources(): Resources {
fun NavGraphBuilder.studeezGraph(appState: StudeezAppstate) { fun NavGraphBuilder.studeezGraph(appState: StudeezAppstate) {
val openAndPopUp: (String, String) -> Unit = {
route, popUp -> appState.navigateAndPopUp(route, popUp)
}
composable(StudeezDestinations.SPLASH_SCREEN) { composable(StudeezDestinations.SPLASH_SCREEN) {
SplashScreen(openAndPopUp = { route, popUp -> appState.navigateAndPopUp(route, popUp) }) SplashScreen(openAndPopUp)
} }
composable(StudeezDestinations.LOGIN_SCREEN) { composable(StudeezDestinations.LOGIN_SCREEN) {
LoginScreen(openAndPopUp = { route, popUp -> appState.navigateAndPopUp(route, popUp) }) LoginScreen(openAndPopUp)
} }
composable(StudeezDestinations.SIGN_UP_SCREEN) { composable(StudeezDestinations.SIGN_UP_SCREEN) {
SignUpScreen(openAndPopUp = { route, popUp -> appState.navigateAndPopUp(route, popUp) }) SignUpScreen(openAndPopUp)
} }
composable(StudeezDestinations.HOME_SCREEN) { composable(StudeezDestinations.HOME_SCREEN) {
HomeScreen( HomeScreen(openAndPopUp)
openAndPopUp = { route, popUp -> appState.navigateAndPopUp(route, popUp) }
)
} }
} }

View file

@ -1,89 +0,0 @@
package be.ugent.sel.studeez.common.composable
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
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.material.icons.filled.Settings
import androidx.compose.material.icons.outlined.Info
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import be.ugent.sel.studeez.R
import be.ugent.sel.studeez.resources
import be.ugent.sel.studeez.ui.theme.StudeezTheme
@Composable
fun Drawer(
onLogoutClick: () -> Unit
) {
Column(modifier = Modifier.fillMaxSize()) {
DrawerEntry(
icon = Icons.Default.Home,
text = resources().getString(R.string.home)
) {
// TODO Go to home
}
DrawerEntry(
icon = ImageVector.vectorResource(id = R.drawable.ic_timer),
text = resources().getString(R.string.timers)
) {
// TODO Go to timers
}
DrawerEntry(
icon = Icons.Default.Settings,
text = resources().getString(R.string.settings)
) {
// TODO Go to settings
}
DrawerEntry(
icon = ImageVector.vectorResource(id = R.drawable.ic_logout),
text = resources().getString(R.string.log_out)
) {
onLogoutClick()
}
DrawerEntry(
icon = Icons.Outlined.Info,
text = resources().getString(R.string.about)
) {
// TODO Go to about
}
}
}
@Composable
fun DrawerEntry(
icon: ImageVector,
text: String,
onClick: () -> Unit
) {
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier
.clickable(onClick = { onClick() })
.fillMaxWidth()
) {
Box(modifier = Modifier.fillMaxWidth(0.25f)) {
Icon(imageVector = icon, contentDescription = text)
}
Box(modifier = Modifier.fillMaxWidth(0.75f)) {
Text(text = text)
}
}
}
@Preview
@Composable
fun DrawerPreview() {
StudeezTheme {
Drawer(
{}
)
}
}

View file

@ -6,17 +6,17 @@ import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.tooling.preview.Preview
import be.ugent.sel.studeez.R import be.ugent.sel.studeez.R
import be.ugent.sel.studeez.resources import be.ugent.sel.studeez.resources
import be.ugent.sel.studeez.ui.theme.StudeezTheme import be.ugent.sel.studeez.screens.drawer.Drawer
import be.ugent.sel.studeez.screens.navbar.NavigationBar
import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
@Composable @Composable
fun PrimaryScreenTemplate( fun PrimaryScreenTemplate(
title: String, title: String,
onLogoutClick: () -> Unit, openAndPopUp: (String, String) -> Unit,
content: @Composable (PaddingValues) -> Unit content: @Composable (PaddingValues) -> Unit
) { ) {
val scaffoldState: ScaffoldState = rememberScaffoldState() val scaffoldState: ScaffoldState = rememberScaffoldState()
@ -40,12 +40,10 @@ fun PrimaryScreenTemplate(
) }, ) },
drawerContent = { drawerContent = {
Drawer( Drawer(openAndPopUp)
onLogoutClick = { onLogoutClick() }
)
}, },
bottomBar = { NavigationBar() }, // TODO Pass arguments so that the current tab etc can be shown bottomBar = { NavigationBar(openAndPopUp) },
floatingActionButtonPosition = FabPosition.Center, floatingActionButtonPosition = FabPosition.Center,
isFloatingActionButtonDocked = true, isFloatingActionButtonDocked = true,
floatingActionButton = { CollapsedAddButton() } floatingActionButton = { CollapsedAddButton() }
@ -54,13 +52,13 @@ fun PrimaryScreenTemplate(
} }
} }
@Preview //@Preview
@Composable //@Composable
fun PrimaryScreenPreview() { //fun PrimaryScreenPreview() {
StudeezTheme { // StudeezTheme {
PrimaryScreenTemplate( // PrimaryScreenTemplate(
"Preview screen", // "Preview screen",
{} // {}
) {} // ) {}
} // }
} //}

View file

@ -0,0 +1,107 @@
package be.ugent.sel.studeez.screens.drawer
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
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.material.icons.filled.Settings
import androidx.compose.material.icons.outlined.Info
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.viewmodel.compose.viewModel
import be.ugent.sel.studeez.R
import be.ugent.sel.studeez.resources
import be.ugent.sel.studeez.ui.theme.StudeezTheme
@Composable
fun Drawer(
openAndPopUp: (String, String) -> Unit,
viewModel: DrawerViewModel = hiltViewModel()
) {
Column (
modifier = Modifier.fillMaxWidth()
) {
Column (
modifier = Modifier.fillMaxWidth().weight(1f)
) {
DrawerEntry(
icon = Icons.Default.Home,
text = resources().getString(R.string.home)
) {
// TODO Go to home
}
DrawerEntry(
icon = ImageVector.vectorResource(id = R.drawable.ic_timer),
text = resources().getString(R.string.timers)
) {
viewModel.onTimersClick(openAndPopUp)
}
DrawerEntry(
icon = Icons.Default.Settings,
text = resources().getString(R.string.settings)
) {
viewModel.onSettingsClick(openAndPopUp)
}
DrawerEntry(
icon = ImageVector.vectorResource(id = R.drawable.ic_logout),
text = resources().getString(R.string.log_out)
) {
viewModel.onLogoutClick(openAndPopUp)
}
}
DrawerEntry(
icon = Icons.Outlined.Info,
text = resources().getString(R.string.about)
) {
viewModel.onAboutClick(openAndPopUp)
}
}
}
@Composable
fun DrawerEntry(
icon: ImageVector,
text: String,
onClick: () -> Unit
) {
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier
.clickable(onClick = { onClick() })
.fillMaxWidth()
) {
Box(
modifier = Modifier
.padding(vertical = 12.dp)
.fillMaxWidth(0.15f)
) {
Icon(imageVector = icon, contentDescription = text)
}
Box(
modifier = Modifier
.padding(vertical = 12.dp)
.fillMaxWidth(0.85f)
) {
Text(text = text)
}
}
}
@Preview
@Composable
fun DrawerPreview() {
StudeezTheme {
Drawer(
{a, b -> {}}, hiltViewModel()
)
}
}

View file

@ -0,0 +1,38 @@
package be.ugent.sel.studeez.screens.drawer
import be.ugent.sel.studeez.domain.AccountDAO
import be.ugent.sel.studeez.domain.LogService
import be.ugent.sel.studeez.navigation.StudeezDestinations
import be.ugent.sel.studeez.screens.StudeezViewModel
import dagger.hilt.android.lifecycle.HiltViewModel
import javax.inject.Inject
@HiltViewModel
class DrawerViewModel @Inject constructor(
private val accountDAO: AccountDAO,
logService: LogService
) : StudeezViewModel(logService) {
fun onLogoutClick(openAndPopup: (String, String) -> Unit) {
launchCatching {
accountDAO.signOut()
openAndPopup(StudeezDestinations.LOGIN_SCREEN, StudeezDestinations.HOME_SCREEN)
}
}
fun onHomeButtonClick(openAndPopup: (String, String) -> Unit) {
// TODO
}
fun onTimersClick(openAndPopup: (String, String) -> Unit) {
// TODO
}
fun onSettingsClick(openAndPopup: (String, String) -> Unit) {
// TODO
}
fun onAboutClick(openAndPopup: (String, String) -> Unit) {
// TODO
}
}

View file

@ -16,7 +16,7 @@ fun HomeScreen(
) { ) {
PrimaryScreenTemplate( PrimaryScreenTemplate(
title = resources().getString(R.string.home), title = resources().getString(R.string.home),
onLogoutClick = { viewModel.onLogoutClick(openAndPopUp) } openAndPopUp = openAndPopUp
) { ) {
BasicButton(R.string.start_session, Modifier.basicButton()) { BasicButton(R.string.start_session, Modifier.basicButton()) {
viewModel.onStartSessionClick(openAndPopUp) viewModel.onStartSessionClick(openAndPopUp)

View file

@ -1,4 +1,4 @@
package be.ugent.sel.studeez.common.composable package be.ugent.sel.studeez.screens.navbar
import androidx.compose.material.BottomNavigation import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem import androidx.compose.material.BottomNavigationItem
@ -12,10 +12,14 @@ import androidx.compose.material.icons.outlined.DateRange
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import be.ugent.sel.studeez.ui.theme.StudeezTheme import be.ugent.sel.studeez.ui.theme.StudeezTheme
@Composable @Composable
fun NavigationBar() { fun NavigationBar(
popUpAndOpen: (String, String) -> Unit,
viewModel: NavigationBarViewModel = hiltViewModel()
) {
// TODO Pass functions and new screens. // TODO Pass functions and new screens.
// TODO Pass which screen is selected. // TODO Pass which screen is selected.
// TODO Disabled -> HIGH/MEDIUM_EMPHASIS if the page is implemented // TODO Disabled -> HIGH/MEDIUM_EMPHASIS if the page is implemented
@ -26,14 +30,14 @@ fun NavigationBar() {
icon = { Icon(imageVector = Icons.Default.List, "Home") }, icon = { Icon(imageVector = Icons.Default.List, "Home") },
label = { Text(text = "Home") }, label = { Text(text = "Home") },
selected = false, // TODO selected = false, // TODO
onClick = { /* TODO */ } onClick = { viewModel.onHomeClick(popUpAndOpen) }
) )
BottomNavigationItem( BottomNavigationItem(
icon = { Icon(imageVector = Icons.Default.Check, "Tasks") }, icon = { Icon(imageVector = Icons.Default.Check, "Tasks") },
label = { Text(text = "Tasks") }, label = { Text(text = "Tasks") },
selected = false, // TODO selected = false, // TODO
onClick = { /* TODO */ } onClick = { viewModel.onTasksClick(popUpAndOpen) }
) )
// Hack to space the entries in the navigation bar, make space for fab // Hack to space the entries in the navigation bar, make space for fab
@ -43,21 +47,21 @@ fun NavigationBar() {
icon = { Icon(imageVector = Icons.Outlined.DateRange, "Sessions") }, icon = { Icon(imageVector = Icons.Outlined.DateRange, "Sessions") },
label = { Text(text = "Sessions") }, label = { Text(text = "Sessions") },
selected = false, // TODO selected = false, // TODO
onClick = { /* TODO */ } onClick = { viewModel.onSessionsClick(popUpAndOpen) }
) )
BottomNavigationItem( BottomNavigationItem(
icon = { Icon(imageVector = Icons.Default.Person, "Profile") }, icon = { Icon(imageVector = Icons.Default.Person, "Profile") },
label = { Text(text = "Profile") }, label = { Text(text = "Profile") },
selected = false, // TODO selected = false, // TODO
onClick = { /* TODO */ } onClick = { viewModel.onProfileClick(popUpAndOpen) }
) )
} }
} }
@Preview(showBackground = true) //@Preview(showBackground = true)
@Composable //@Composable
fun NavigationBarPreview() { //fun NavigationBarPreview() {
StudeezTheme { NavigationBar() } // StudeezTheme { NavigationBar() }
} //}

View file

@ -0,0 +1,31 @@
package be.ugent.sel.studeez.screens.navbar
import be.ugent.sel.studeez.domain.AccountDAO
import be.ugent.sel.studeez.domain.LogService
import be.ugent.sel.studeez.navigation.StudeezDestinations
import be.ugent.sel.studeez.screens.StudeezViewModel
import dagger.hilt.android.lifecycle.HiltViewModel
import javax.inject.Inject
@HiltViewModel
class NavigationBarViewModel @Inject constructor(
private val accountDAO: AccountDAO,
logService: LogService
) : StudeezViewModel(logService) {
fun onHomeClick(openAndPopup: (String, String) -> Unit) {
// TODO
}
fun onTasksClick(openAndPopup: (String, String) -> Unit) {
// TODO
}
fun onSessionsClick(openAndPopup: (String, String) -> Unit) {
// TODO
}
fun onProfileClick(openAndPopup: (String, String) -> Unit) {
// TODO
}
}