From b8ca143b60fd0ccf499d04e8ea2b1932ed5f70ac Mon Sep 17 00:00:00 2001 From: tdpeuter Date: Tue, 4 Apr 2023 13:43:30 +0200 Subject: [PATCH 1/4] Add ColorPalette --- .../ugent/sel/studeez/common/ColorPalette.kt | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt diff --git a/app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt b/app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt new file mode 100644 index 0000000..9d58627 --- /dev/null +++ b/app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt @@ -0,0 +1,77 @@ +package be.ugent.sel.studeez.common + +import androidx.compose.material.Colors +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.toArgb +import androidx.core.graphics.ColorUtils + +// Contains all colours that are used in the app. Currenlty, only light-theme colours are available. +// Reference colour palette: https://xd.adobe.com/view/3cb1e6ff-eb42-4a74-886e-7739c2ccc5ed-69e2/ +// Use colours by calling (for example) +// ColorPalette.HIGH_EMPHASIS.onPrimary + +class ColorPalette { + companion object { + // Use High emphasis colours if the thing is important. + val HIGH_EMPHASIS: Colors = Colors( + isLight = true, + primary = Color( 30, 100, 200, 255), + primaryVariant = Color( 27, 90, 180, 255), + secondary = Color(255, 210, 0, 255), + secondaryVariant = Color(253, 217, 49, 255), + background = Color.White, + surface = Color.White, + error = Color(176, 0, 32, 255), + onPrimary = Color.White, + onSecondary = Color.Black, + onBackground = Color.Black, + onSurface = Color.Black, + onError = Color.White + ) + + // Use medium emphasis colours if the thing is less important + // or when another thing is selected while this one is not. + val MEDIUM_EMPHASIS: Colors = Colors( + isLight = true, + primary = Color( 30, 100, 200, 188), + primaryVariant = Color( 27, 90, 180, 188), + secondary = Color(255, 210, 0, 188), + secondaryVariant = Color(253, 217, 49, 188), + background = Color(255, 255, 255, 188), + surface = Color(255, 255, 255, 188), + error = Color(176, 0, 32, 188), + onPrimary = Color(255, 255, 255, 188), + onSecondary = Color( 0, 0, 0, 188), + onBackground = Color( 0, 0, 0, 188), + onSurface = Color( 0, 0, 0, 188), + onError = Color(255, 255, 255, 188) + ) + + // Use disabled colours if the thing is disabled, probably a button. + val DISABLED: Colors = Colors( + isLight = true, + primary = Color( 30, 100, 200, 97), + primaryVariant = Color( 27, 90, 180, 97), + secondary = Color(255, 210, 0, 97), + secondaryVariant = Color(253, 217, 49, 97), + background = Color(255, 255, 255, 97), + surface = Color(255, 255, 255, 97), + error = Color(176, 0, 32, 97), + onPrimary = Color(255, 255, 255, 97), + onSecondary = Color( 0, 0, 0, 97), + onBackground = Color( 0, 0, 0, 97), + onSurface = Color( 0, 0, 0, 97), + onError = Color(255, 255, 255, 97) + ) + + // Experimental function to darken colours if needed. + fun darken(color: Color, amount: Float): Color { + return Color(ColorUtils.blendARGB(color.toArgb(), Color.Black.toArgb(), amount)) + } + + // Experimental function to lighten colours if needed. + fun lighten(color: Color, amount: Float): Color { + return Color(ColorUtils.blendARGB(color.toArgb(), Color.White.toArgb(), amount)) + } + } +} \ No newline at end of file From b33a4787048ad8128a6b41238d9feea720e03d2c Mon Sep 17 00:00:00 2001 From: tdpeuter Date: Tue, 4 Apr 2023 17:59:52 +0200 Subject: [PATCH 2/4] Update colors, switch to native method --- .../be/ugent/sel/studeez/common/ColorPalette.kt | 3 +++ .../java/be/ugent/sel/studeez/ui/theme/Color.kt | 7 +++---- .../java/be/ugent/sel/studeez/ui/theme/Theme.kt | 15 +++++++++------ 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt b/app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt index 9d58627..9917bd7 100644 --- a/app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt +++ b/app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt @@ -1,6 +1,8 @@ package be.ugent.sel.studeez.common import androidx.compose.material.Colors +import androidx.compose.material.MaterialTheme +import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.toArgb import androidx.core.graphics.ColorUtils @@ -10,6 +12,7 @@ import androidx.core.graphics.ColorUtils // Use colours by calling (for example) // ColorPalette.HIGH_EMPHASIS.onPrimary +// TODO Delete this class as we are now using ui.theme.Theme class ColorPalette { companion object { // Use High emphasis colours if the thing is important. diff --git a/app/src/main/java/be/ugent/sel/studeez/ui/theme/Color.kt b/app/src/main/java/be/ugent/sel/studeez/ui/theme/Color.kt index d432429..3639b8d 100644 --- a/app/src/main/java/be/ugent/sel/studeez/ui/theme/Color.kt +++ b/app/src/main/java/be/ugent/sel/studeez/ui/theme/Color.kt @@ -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) \ No newline at end of file +val Blue100 = Color( 30, 100, 200, 255) +val Blue120 = Color( 27, 90, 180, 255) +val Yellow100 = Color(255, 210, 0, 255) \ No newline at end of file diff --git a/app/src/main/java/be/ugent/sel/studeez/ui/theme/Theme.kt b/app/src/main/java/be/ugent/sel/studeez/ui/theme/Theme.kt index bb1884d..bc2c315 100644 --- a/app/src/main/java/be/ugent/sel/studeez/ui/theme/Theme.kt +++ b/app/src/main/java/be/ugent/sel/studeez/ui/theme/Theme.kt @@ -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, From 3d3a263855c588708e4d4d9c9881d03e0dfd81cb Mon Sep 17 00:00:00 2001 From: tdpeuter Date: Tue, 4 Apr 2023 18:00:36 +0200 Subject: [PATCH 3/4] Add UI basics --- .../FloatingActionButtonComposable.kt | 62 +++++++++++++++ .../composable/NavigationBarComposable.kt | 63 +++++++++++++++ .../common/composable/ToolbarComposable.kt | 77 +++++++++++++++++++ 3 files changed, 202 insertions(+) create mode 100644 app/src/main/java/be/ugent/sel/studeez/common/composable/FloatingActionButtonComposable.kt create mode 100644 app/src/main/java/be/ugent/sel/studeez/common/composable/NavigationBarComposable.kt create mode 100644 app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt diff --git a/app/src/main/java/be/ugent/sel/studeez/common/composable/FloatingActionButtonComposable.kt b/app/src/main/java/be/ugent/sel/studeez/common/composable/FloatingActionButtonComposable.kt new file mode 100644 index 0000000..15005fa --- /dev/null +++ b/app/src/main/java/be/ugent/sel/studeez/common/composable/FloatingActionButtonComposable.kt @@ -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() } +} \ No newline at end of file diff --git a/app/src/main/java/be/ugent/sel/studeez/common/composable/NavigationBarComposable.kt b/app/src/main/java/be/ugent/sel/studeez/common/composable/NavigationBarComposable.kt new file mode 100644 index 0000000..61964eb --- /dev/null +++ b/app/src/main/java/be/ugent/sel/studeez/common/composable/NavigationBarComposable.kt @@ -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() } +} \ 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 new file mode 100644 index 0000000..2e3d635 --- /dev/null +++ b/app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt @@ -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", + {} + )} +} \ No newline at end of file From b8510d89c55c1e102a06cf21c61b476ae5afb810 Mon Sep 17 00:00:00 2001 From: tdpeuter Date: Fri, 7 Apr 2023 10:19:52 +0200 Subject: [PATCH 4/4] #42 Good colors --- .../ugent/sel/studeez/common/ColorPalette.kt | 80 ------------------- app/src/main/res/values/colors.xml | 12 +-- app/src/main/res/values/themes.xml | 5 +- 3 files changed, 10 insertions(+), 87 deletions(-) delete mode 100644 app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt diff --git a/app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt b/app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt deleted file mode 100644 index 9917bd7..0000000 --- a/app/src/main/java/be/ugent/sel/studeez/common/ColorPalette.kt +++ /dev/null @@ -1,80 +0,0 @@ -package be.ugent.sel.studeez.common - -import androidx.compose.material.Colors -import androidx.compose.material.MaterialTheme -import androidx.compose.runtime.Composable -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.toArgb -import androidx.core.graphics.ColorUtils - -// Contains all colours that are used in the app. Currenlty, only light-theme colours are available. -// Reference colour palette: https://xd.adobe.com/view/3cb1e6ff-eb42-4a74-886e-7739c2ccc5ed-69e2/ -// Use colours by calling (for example) -// ColorPalette.HIGH_EMPHASIS.onPrimary - -// TODO Delete this class as we are now using ui.theme.Theme -class ColorPalette { - companion object { - // Use High emphasis colours if the thing is important. - val HIGH_EMPHASIS: Colors = Colors( - isLight = true, - primary = Color( 30, 100, 200, 255), - primaryVariant = Color( 27, 90, 180, 255), - secondary = Color(255, 210, 0, 255), - secondaryVariant = Color(253, 217, 49, 255), - background = Color.White, - surface = Color.White, - error = Color(176, 0, 32, 255), - onPrimary = Color.White, - onSecondary = Color.Black, - onBackground = Color.Black, - onSurface = Color.Black, - onError = Color.White - ) - - // Use medium emphasis colours if the thing is less important - // or when another thing is selected while this one is not. - val MEDIUM_EMPHASIS: Colors = Colors( - isLight = true, - primary = Color( 30, 100, 200, 188), - primaryVariant = Color( 27, 90, 180, 188), - secondary = Color(255, 210, 0, 188), - secondaryVariant = Color(253, 217, 49, 188), - background = Color(255, 255, 255, 188), - surface = Color(255, 255, 255, 188), - error = Color(176, 0, 32, 188), - onPrimary = Color(255, 255, 255, 188), - onSecondary = Color( 0, 0, 0, 188), - onBackground = Color( 0, 0, 0, 188), - onSurface = Color( 0, 0, 0, 188), - onError = Color(255, 255, 255, 188) - ) - - // Use disabled colours if the thing is disabled, probably a button. - val DISABLED: Colors = Colors( - isLight = true, - primary = Color( 30, 100, 200, 97), - primaryVariant = Color( 27, 90, 180, 97), - secondary = Color(255, 210, 0, 97), - secondaryVariant = Color(253, 217, 49, 97), - background = Color(255, 255, 255, 97), - surface = Color(255, 255, 255, 97), - error = Color(176, 0, 32, 97), - onPrimary = Color(255, 255, 255, 97), - onSecondary = Color( 0, 0, 0, 97), - onBackground = Color( 0, 0, 0, 97), - onSurface = Color( 0, 0, 0, 97), - onError = Color(255, 255, 255, 97) - ) - - // Experimental function to darken colours if needed. - fun darken(color: Color, amount: Float): Color { - return Color(ColorUtils.blendARGB(color.toArgb(), Color.Black.toArgb(), amount)) - } - - // Experimental function to lighten colours if needed. - fun lighten(color: Color, amount: Float): Color { - return Color(ColorUtils.blendARGB(color.toArgb(), Color.White.toArgb(), amount)) - } - } -} \ No newline at end of file diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml index f8c6127..485bbf6 100644 --- a/app/src/main/res/values/colors.xml +++ b/app/src/main/res/values/colors.xml @@ -1,10 +1,12 @@ + + - #FFBB86FC - #FF6200EE - #FF3700B3 - #FF03DAC5 - #FF018786 + #FF1E64C8 + #FF1B5AB4 + #FF1850A0 + #FFFFD200 + #FFFDD931 #FF000000 #FFFFFFFF \ No newline at end of file diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml index a7dd890..b847a88 100644 --- a/app/src/main/res/values/themes.xml +++ b/app/src/main/res/values/themes.xml @@ -1,7 +1,8 @@ - + \ No newline at end of file