Add UI basics
This commit is contained in:
parent
b33a478704
commit
3d3a263855
3 changed files with 202 additions and 0 deletions
|
|
@ -0,0 +1,62 @@
|
|||
package be.ugent.sel.studeez.common.composable
|
||||
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.material.FloatingActionButton
|
||||
import androidx.compose.material.Icon
|
||||
import androidx.compose.material.IconButton
|
||||
import androidx.compose.material.Text
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Add
|
||||
import androidx.compose.material.icons.filled.Check
|
||||
import androidx.compose.material.icons.filled.DateRange
|
||||
import androidx.compose.material.icons.filled.Person
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import be.ugent.sel.studeez.ui.theme.StudeezTheme
|
||||
|
||||
@Composable
|
||||
fun CollapsedAddButton() {
|
||||
FloatingActionButton(
|
||||
onClick = { /* TODO popup add options */ }
|
||||
) {
|
||||
Icon(imageVector = Icons.Default.Add, contentDescription = "fab")
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun ExpandedAddButton() {
|
||||
Row() {
|
||||
IconButton(onClick = { /* TODO Go to next step */ }) {
|
||||
Column (horizontalAlignment = Alignment.CenterHorizontally) {
|
||||
Icon(imageVector = Icons.Default.Check, contentDescription = "Task")
|
||||
Text(text = "Task")
|
||||
}
|
||||
}
|
||||
IconButton(onClick = { /* TODO Go to next step */ }) {
|
||||
Column (horizontalAlignment = Alignment.CenterHorizontally) {
|
||||
Icon(imageVector = Icons.Default.Person, contentDescription = "Friend")
|
||||
Text(text = "Friend")
|
||||
}
|
||||
}
|
||||
IconButton(onClick = { /* TODO Go to next step */ }) {
|
||||
Column (horizontalAlignment = Alignment.CenterHorizontally) {
|
||||
Icon(imageVector = Icons.Default.DateRange, contentDescription = "Session")
|
||||
Text(text = "Session")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
fun CollapsedAddButtonPreview() {
|
||||
StudeezTheme { CollapsedAddButton() }
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
fun ExpandedAddButtonPreview() {
|
||||
StudeezTheme { ExpandedAddButton() }
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
package be.ugent.sel.studeez.common.composable
|
||||
|
||||
import androidx.compose.material.BottomNavigation
|
||||
import androidx.compose.material.BottomNavigationItem
|
||||
import androidx.compose.material.Icon
|
||||
import androidx.compose.material.Text
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Check
|
||||
import androidx.compose.material.icons.filled.List
|
||||
import androidx.compose.material.icons.filled.Person
|
||||
import androidx.compose.material.icons.outlined.DateRange
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import be.ugent.sel.studeez.ui.theme.StudeezTheme
|
||||
|
||||
@Composable
|
||||
fun NavigationBar() {
|
||||
// TODO Pass functions and new screens.
|
||||
// TODO Pass which screen is selected.
|
||||
// TODO Disabled -> HIGH/MEDIUM_EMPHASIS if the page is implemented
|
||||
BottomNavigation(
|
||||
elevation = 10.dp
|
||||
) {
|
||||
BottomNavigationItem(
|
||||
icon = { Icon(imageVector = Icons.Default.List, "Home") },
|
||||
label = { Text(text = "Home") },
|
||||
selected = false, // TODO
|
||||
onClick = { /* TODO */ }
|
||||
)
|
||||
|
||||
BottomNavigationItem(
|
||||
icon = { Icon(imageVector = Icons.Default.Check, "Tasks") },
|
||||
label = { Text(text = "Tasks") },
|
||||
selected = false, // TODO
|
||||
onClick = { /* TODO */ }
|
||||
)
|
||||
|
||||
// Hack to space the entries in the navigation bar, make space for fab
|
||||
BottomNavigationItem(icon = {}, onClick = {}, selected = false)
|
||||
|
||||
BottomNavigationItem(
|
||||
icon = { Icon(imageVector = Icons.Outlined.DateRange, "Sessions") },
|
||||
label = { Text(text = "Sessions") },
|
||||
selected = false, // TODO
|
||||
onClick = { /* TODO */ }
|
||||
)
|
||||
|
||||
BottomNavigationItem(
|
||||
icon = { Icon(imageVector = Icons.Default.Person, "Profile") },
|
||||
label = { Text(text = "Profile") },
|
||||
selected = false, // TODO
|
||||
onClick = { /* TODO */ }
|
||||
)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(showBackground = true)
|
||||
@Composable
|
||||
fun NavigationBarPreview() {
|
||||
StudeezTheme { NavigationBar() }
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
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.Menu
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import be.ugent.sel.studeez.ui.theme.StudeezTheme
|
||||
|
||||
// TODO Add option for button in top right corner as extra button
|
||||
|
||||
@Composable
|
||||
// Contains floatingActionButton and bottom bar, used in the main four screens.
|
||||
fun PrimaryScreenToolbar(
|
||||
title: String,
|
||||
content: (PaddingValues) -> Unit
|
||||
) {
|
||||
Scaffold(
|
||||
// Everything at the top of the screen
|
||||
topBar = { TopAppBar(
|
||||
title = { Text(text = title) },
|
||||
navigationIcon = {
|
||||
IconButton(onClick = { /* TODO open sidemenu */ }) {
|
||||
Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
|
||||
}
|
||||
}
|
||||
) },
|
||||
|
||||
// Everything at the bottom of the screen
|
||||
bottomBar = { NavigationBar() }, // TODO Pass arguments so that the current tab etc can be shown
|
||||
floatingActionButtonPosition = FabPosition.Center,
|
||||
isFloatingActionButtonDocked = true,
|
||||
floatingActionButton = { CollapsedAddButton() }
|
||||
) { paddingValues ->
|
||||
content(paddingValues)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
// Does not contain floatingActionButton and bottom bar, used in all the other screens
|
||||
fun SecondaryScreenToolbar(
|
||||
title: String,
|
||||
content: (PaddingValues) -> Unit
|
||||
) {
|
||||
Scaffold(
|
||||
// Everything at the top of the screen
|
||||
topBar = { TopAppBar(
|
||||
title = { Text(text = title) },
|
||||
navigationIcon = {
|
||||
IconButton(onClick = { /* TODO open sidemenu */ }) {
|
||||
Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
|
||||
}
|
||||
}
|
||||
) },
|
||||
) { paddingValues ->
|
||||
content(paddingValues)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
fun PrimaryScreenToolbarPreview() {
|
||||
StudeezTheme { PrimaryScreenToolbar(
|
||||
"Preview screen",
|
||||
{}
|
||||
) }
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
fun SecondaryScreenToolbarPreview() {
|
||||
StudeezTheme { SecondaryScreenToolbar(
|
||||
"Preview screen",
|
||||
{}
|
||||
)}
|
||||
}
|
||||
Reference in a new issue