Merge pull request #124 from Stack-Knowledge/feature/123-modifybottom-navigation-design

🔀  :: (#123) - modifybottom navigation design

Author: minStone-dev

core/ui/src/main/java/com/minstone/ui/navigation/StackKnowledgeBottomNavigation.kt

@@ -3,17 +3,21 @@ package com.minstone.ui.navigation
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.material3.Divider
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -33,42 +37,51 @@ enum class NavigateType(val value: String) {
 fun StackKnowledgeBottomNavigation(
     modifier: Modifier,
     role: Authority,
+    locate: NavigateType,
     onNavigate: (String) -> Unit,
 ) {
     StackKnowledgeAndroidTheme { colors, typography ->
         Box(
             modifier = modifier.background(color = colors.WHITE),
             contentAlignment = Alignment.BottomCenter
         ) {
-            Row(
-                modifier = modifier
-                    .fillMaxWidth()
-                    .height(56.dp),
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                val navItems = listOf(
-                    Triple(R.drawable.home_icon, NavigateType.HOME.value, R.string.home),
-                    Triple(R.drawable.mission_icon, NavigateType.MISSION.value, if(role == Authority.ROLE_STUDENT) R.string.mission else R.string.solved_mission),
-                    Triple(R.drawable.create_mission_icon, NavigateType.CREATE_MISSION.value, R.string.create_mission),
-                    Triple(R.drawable.shop_icon, NavigateType.SHOP.value, R.string.shop),
-                    Triple(R.drawable.ranking_icon, NavigateType.RANKING.value, R.string.ranking)
+            Column {
+                Divider(
+                    modifier = Modifier.fillMaxWidth(),
+                    color = Color(0xFFF1F1F1)
                 )
+                Row(
+                    modifier = modifier
+                        .fillMaxWidth()
+                        .height(56.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    val navItems = listOf(
+                        Triple(R.drawable.home_icon, NavigateType.HOME.value, R.string.home),
+                        Triple(R.drawable.mission_icon, NavigateType.MISSION.value, if(role == Authority.ROLE_STUDENT) R.string.mission else R.string.solved_mission),
+                        Triple(R.drawable.create_mission_icon, NavigateType.CREATE_MISSION.value, R.string.create_mission),
+                        Triple(R.drawable.shop_icon, NavigateType.SHOP.value, R.string.shop),
+                        Triple(R.drawable.ranking_icon, NavigateType.RANKING.value, R.string.ranking)
+                    )
 
-                navItems.forEachIndexed { index, (iconRes, navigateType, stringResId) ->
-                    if (index != 2 || role == Authority.ROLE_TEACHER) {
-                        BottomNavigationComponent(
-                            modifier = modifier
-                                .weight(1f)
-                                .height(56.dp),
-                            buttonText = stringResId,
-                            buttonImage = {
-                                Image(
-                                    painter = painterResource(iconRes),
-                                    contentDescription = null
-                                )
+                    navItems.forEachIndexed { index, (iconRes, navigateType, stringResId) ->
+                        if (index != 2 || role == Authority.ROLE_TEACHER) {
+                            BottomNavigationComponent(
+                                modifier = modifier
+                                    .weight(1f)
+                                    .height(56.dp),
+                                buttonText = stringResId,
+                                isLocate = locate.value == navigateType,
+                                buttonImage = {
+                                    Image(
+                                        painter = painterResource(iconRes),
+                                        colorFilter = if(locate.value == navigateType) ColorFilter.tint(colors.P1) else null,
+                                        contentDescription = null
+                                    )
+                                }
+                            ) {
+                                onNavigate(navigateType)
                             }
-                        ) {
-                            onNavigate(navigateType)
                         }
                     }
                 }
@@ -81,20 +94,22 @@ fun StackKnowledgeBottomNavigation(
 private fun BottomNavigationComponent(
     modifier: Modifier,
     buttonText: Int,
+    isLocate: Boolean,
     buttonImage: @Composable () -> Unit,
     onClick: () -> Unit
 ) {
     StackKnowledgeAndroidTheme { colors, typography ->
         Column(
             modifier = modifier.clickable(onClick = onClick),
-            horizontalAlignment = Alignment.CenterHorizontally
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
         ) {
             buttonImage()
             Spacer(modifier = Modifier.height(5.dp))
             Text(
                 text = stringResource(id = buttonText),
                 style = typography.bodySmall,
-                color = colors.BLACK
+                color = if (isLocate) colors.P1 else colors.BLACK
             )
         }
     }

feature/main/src/main/java/com/stackknowledge/main/MainPageScreen.kt

@@ -113,6 +113,7 @@ private fun MainPageScreen(
             ) {
                 StackKnowledgeBottomNavigation(
                     modifier = Modifier,
+                    locate = NavigateType.HOME,
                     role = role
                 ) {
                     onNavigate(it, null)

feature/mission/src/main/java/com/stackkowledge/mission/CreateMissionScreen.kt

@@ -21,6 +21,7 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.example.common.toast.makeToast
 import com.example.common.util.Event
+import com.minstone.ui.navigation.NavigateType
 import com.minstone.ui.navigation.StackKnowledgeBottomNavigation
 import com.stackknowledge.design_system.R
 import com.stackknowledge.design_system.component.dialog.StackKnowledgeDialog
@@ -205,6 +206,7 @@ private fun CreateMissionScreen(
             ) {
                 StackKnowledgeBottomNavigation(
                     modifier = Modifier,
+                    locate = NavigateType.CREATE_MISSION,
                     role = role
                 ) {
                     onNavigate(it)

feature/mission/src/main/java/com/stackkowledge/mission/EntireMissionScreen.kt

@@ -16,6 +16,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.minstone.ui.navigation.NavigateType
 import com.minstone.ui.navigation.StackKnowledgeBottomNavigation
 import com.stackknowledge.design_system.component.topbar.StackKnowledgeTopBar
 import com.stackknowledge.design_system.theme.StackKnowledgeAndroidTheme
@@ -77,6 +78,7 @@ private fun EntireMissionScreen(
             ) {
                 StackKnowledgeBottomNavigation(
                     modifier = Modifier,
+                    locate = NavigateType.MISSION,
                     role = role
                 ) {
                     onNavigate(it)

feature/mission/src/main/java/com/stackkowledge/mission/ResolveMissionScreen.kt

@@ -26,6 +26,7 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.example.common.toast.makeToast
 import com.example.common.util.Event
+import com.minstone.ui.navigation.NavigateType
 import com.minstone.ui.navigation.StackKnowledgeBottomNavigation
 import com.stackknowledge.design_system.component.dialog.StackKnowledgeDialog
 import com.stackknowledge.design_system.component.topbar.StackKnowledgeTopBar
@@ -232,6 +233,7 @@ private fun ResolveMissionScreen(
             ) {
                 StackKnowledgeBottomNavigation(
                     modifier = Modifier,
+                    locate = NavigateType.MISSION,
                     role = role
                 ) {
                     onNavigateState = it

feature/ranking/src/main/java/com/stackknowledge/ranking/RankingScreen.kt

@@ -17,6 +17,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.minstone.ui.navigation.NavigateType
 import com.minstone.ui.navigation.StackKnowledgeBottomNavigation
 import com.stackknowledge.design_system.component.topbar.StackKnowledgeTopBar
 import com.stackknowledge.design_system.theme.StackKnowledgeAndroidTheme
@@ -85,6 +86,7 @@ private fun RankingScreen(
             ) {
                 StackKnowledgeBottomNavigation(
                     modifier = Modifier,
+                    locate = NavigateType.RANKING,
                     role = role
                 ) {
                     onNavigate(it)

feature/ranking/src/main/java/com/stackknowledge/ranking/TeacherRankingScreen.kt

@@ -17,6 +17,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.minstone.ui.navigation.NavigateType
 import com.minstone.ui.navigation.StackKnowledgeBottomNavigation
 import com.stackknowledge.design_system.component.topbar.StackKnowledgeTopBar
 import com.stackknowledge.design_system.theme.StackKnowledgeAndroidTheme
@@ -73,6 +74,7 @@ private fun TeacherRankingScreen(
             ) {
                 StackKnowledgeBottomNavigation(
                     modifier = Modifier,
+                    locate = NavigateType.RANKING,
                     role = role
                 ) {
                     onNavigate(it)

feature/score-mission/src/main/java/com/stackknowledge/score_mission/GradingAnswerScreen.kt

@@ -22,6 +22,7 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.example.common.util.Event
+import com.minstone.ui.navigation.NavigateType
 import com.minstone.ui.navigation.StackKnowledgeBottomNavigation
 import com.stackknowledge.design_system.R
 import com.stackknowledge.design_system.component.dialog.StackKnowledgeDialog
@@ -152,6 +153,7 @@ private fun GradingAnswerScreen(
             ) {
                 StackKnowledgeBottomNavigation(
                     modifier = Modifier,
+                    locate = NavigateType.MISSION,
                     role = role
                 ) {
                     onNavigate(it)

feature/score-mission/src/main/java/com/stackknowledge/score_mission/SolvedMissionScreen.kt

@@ -16,6 +16,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.minstone.ui.navigation.NavigateType
 import com.minstone.ui.navigation.StackKnowledgeBottomNavigation
 import com.stackknowledge.design_system.component.topbar.StackKnowledgeTopBar
 import com.stackknowledge.design_system.theme.StackKnowledgeAndroidTheme
@@ -76,6 +77,7 @@ private fun SolvedMissionScreen(
             ) {
                 StackKnowledgeBottomNavigation(
                     modifier = Modifier,
+                    locate = NavigateType.MISSION,
                     role = role
                 ) {
                     onNavigate(it)

feature/shop/src/main/java/com/stackknowledge/shop/ShopScreen.kt

@@ -20,6 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.minstone.ui.navigation.NavigateType
 import com.minstone.ui.navigation.StackKnowledgeBottomNavigation
 import com.stackknowledge.design_system.R
 import com.stackknowledge.design_system.component.dialog.StackKnowledgeDialog
@@ -117,6 +118,7 @@ private fun ShopScreen(
             ) {
                 StackKnowledgeBottomNavigation(
                     modifier = Modifier,
+                    locate = NavigateType.SHOP,
                     role = role
                 ) {
                     onNavigate(it)