Merge pull request #47 from SELab1/NavigationBar
Basic components & colours
This commit is contained in:
lbarraga
GitHub Enterprise
commit
9a43e45cec
7 changed files with 224 additions and 17 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",
|
||||
{}
|
||||
)}
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@ package be.ugent.sel.studeez.ui.theme
|
|||
|
||||
import androidx.compose.ui.graphics.Color
|
||||
|
||||
val Purple200 = Color(0xFFBB86FC)
|
||||
val Purple500 = Color(0xFF6200EE)
|
||||
val Purple700 = Color(0xFF3700B3)
|
||||
val Teal200 = Color(0xFF03DAC5)
|
||||
val Blue100 = Color( 30, 100, 200, 255)
|
||||
val Blue120 = Color( 27, 90, 180, 255)
|
||||
val Yellow100 = Color(255, 210, 0, 255)
|
||||
|
|
@ -5,17 +5,20 @@ import androidx.compose.material.MaterialTheme
|
|||
import androidx.compose.material.darkColors
|
||||
import androidx.compose.material.lightColors
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.graphics.Color
|
||||
|
||||
// Reference colour palette: https://xd.adobe.com/view/3cb1e6ff-eb42-4a74-886e-7739c2ccc5ed-69e2/
|
||||
|
||||
private val DarkColorPalette = darkColors(
|
||||
primary = Purple200,
|
||||
primaryVariant = Purple700,
|
||||
secondary = Teal200
|
||||
primary = Blue100,
|
||||
primaryVariant = Blue120,
|
||||
secondary = Yellow100
|
||||
)
|
||||
|
||||
private val LightColorPalette = lightColors(
|
||||
primary = Purple500,
|
||||
primaryVariant = Purple700,
|
||||
secondary = Teal200
|
||||
primary = Blue100,
|
||||
primaryVariant = Blue120,
|
||||
secondary = Yellow100
|
||||
|
||||
/* Other default colors to override
|
||||
background = Color.White,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Keep these colors here for the sake of safety, so Android can fall back on them -->
|
||||
<!-- All coloring of Jetpack Compose components should be done through using the StudeezTheme. -->
|
||||
<resources>
|
||||
<color name="purple_200">#FFBB86FC</color>
|
||||
<color name="purple_500">#FF6200EE</color>
|
||||
<color name="purple_700">#FF3700B3</color>
|
||||
<color name="teal_200">#FF03DAC5</color>
|
||||
<color name="teal_700">#FF018786</color>
|
||||
<color name="blue_100">#FF1E64C8</color>
|
||||
<color name="blue_110">#FF1B5AB4</color>
|
||||
<color name="blue_120">#FF1850A0</color>
|
||||
<color name="yellow_100">#FFFFD200</color>
|
||||
<color name="yellow_080">#FFFDD931</color>
|
||||
<color name="black">#FF000000</color>
|
||||
<color name="white">#FFFFFFFF</color>
|
||||
</resources>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
|
||||
<!-- This is the color of the statusBar (the bar with the clock and the notifications),
|
||||
which we cannot set using Jetpack Compose -->
|
||||
<style name="Theme.Studeez" parent="android:Theme.Material.Light.NoActionBar">
|
||||
<item name="android:statusBarColor">@color/purple_700</item>
|
||||
<item name="android:statusBarColor">@color/blue_120</item>
|
||||
</style>
|
||||
</resources>
|
||||
Reference in a new issue