fix: progress bar style changed (openedx#235)

touchapp · Feb 26, 2024 · fc5c648 · fc5c648
1 parent 8f6aaf4
commit fc5c648
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 10 deletions.
diff --git a/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt b/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt
@@ -46,6 +46,7 @@ data class AppColors(
     val authFacebookButtonBackground: Color,
     val authMicrosoftButtonBackground: Color,
 
+    val componentHorizontalProgressCompletedAndSelected: Color,
     val componentHorizontalProgressCompleted: Color,
     val componentHorizontalProgressSelected: Color,
     val componentHorizontalProgressDefault: Color,
@@ -63,4 +64,4 @@ data class AppColors(
     val onSurface: Color get() = material.onSurface
     val onError: Color get() = material.onError
     val isLight: Boolean get() = material.isLight
-}
+}
diff --git a/core/src/main/java/org/openedx/core/ui/theme/Theme.kt b/core/src/main/java/org/openedx/core/ui/theme/Theme.kt
@@ -66,6 +66,7 @@ private val DarkColorPalette = AppColors(
     authFacebookButtonBackground = dark_auth_facebook_button_background,
     authMicrosoftButtonBackground = dark_auth_microsoft_button_background,
 
+    componentHorizontalProgressCompletedAndSelected = dark_component_horizontal_progress_completed_and_selected,
     componentHorizontalProgressCompleted = dark_component_horizontal_progress_completed,
     componentHorizontalProgressSelected = dark_component_horizontal_progress_selected,
     componentHorizontalProgressDefault = dark_component_horizontal_progress_default,
@@ -127,6 +128,7 @@ private val LightColorPalette = AppColors(
     authFacebookButtonBackground = light_auth_facebook_button_background,
     authMicrosoftButtonBackground = light_auth_microsoft_button_background,
 
+    componentHorizontalProgressCompletedAndSelected = light_component_horizontal_progress_completed_and_selected,
     componentHorizontalProgressCompleted = light_component_horizontal_progress_completed,
     componentHorizontalProgressSelected = light_component_horizontal_progress_selected,
     componentHorizontalProgressDefault = light_component_horizontal_progress_default,

diff --git a/core/src/openedx/org/openedx/core/ui/theme/Colors.kt b/core/src/openedx/org/openedx/core/ui/theme/Colors.kt
@@ -45,7 +45,8 @@ val light_dates_section_bar_next_week = light_text_field_border
 val light_dates_section_bar_upcoming = Color(0xFFCCD4E0)
 val light_auth_facebook_button_background = Color(0xFF0866FF)
 val light_auth_microsoft_button_background = Color(0xFA000000)
-val light_component_horizontal_progress_completed = Color(0xFF2EA171)
+val light_component_horizontal_progress_completed_and_selected = Color(0xFF30a171)
+val light_component_horizontal_progress_completed = Color(0xFFbbe6d7)
 val light_component_horizontal_progress_selected = Color(0xFFF0CB00)
 val light_component_horizontal_progress_default = Color(0xFFD6D3D1)
 
@@ -93,6 +94,7 @@ val dark_dates_section_bar_next_week = dark_text_field_border
 val dark_dates_section_bar_upcoming = Color(0xFFCCD4E0)
 val dark_auth_facebook_button_background = Color(0xFF0866FF)
 val dark_auth_microsoft_button_background = Color(0xFA000000)
-val dark_component_horizontal_progress_completed = Color(0xFF2EA171)
+val dark_component_horizontal_progress_completed_and_selected = Color(0xFF30a171)
+val dark_component_horizontal_progress_completed = Color(0xFFbbe6d7)
 val dark_component_horizontal_progress_selected = Color(0xFFF0CB00)
 val dark_component_horizontal_progress_default = Color(0xFFD6D3D1)
diff --git a/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt b/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt
@@ -540,6 +540,7 @@ fun HorizontalPageIndicator(
     modifier: Modifier = Modifier,
     blocks: List<Block>,
     selectedPage: Int = 0,
+    completedAndSelectedColor: Color = Color.Green,
     completedColor: Color = Color.Green,
     selectedColor: Color = Color.White,
     defaultColor: Color = Color.Gray
@@ -550,17 +551,23 @@ fun HorizontalPageIndicator(
     ) {
         blocks.forEachIndexed { index, block ->
             val backgroundColor = when {
-                index == selectedPage -> selectedColor
+                block.isCompleted() && index == selectedPage -> completedAndSelectedColor
                 block.isCompleted() -> completedColor
+                index == selectedPage -> selectedColor
                 else -> defaultColor
             }
 
-            Box(
+            Surface(
                 modifier = Modifier
-                    .background(backgroundColor)
-                    .fillMaxHeight()
+                    .padding(vertical = if (index == selectedPage) 0.dp else 1.dp)
                     .weight(1f)
-            )
+            ) {
+                Box(
+                    modifier = Modifier
+                        .background(backgroundColor)
+                        .fillMaxHeight()
+                )
+            }
         }
     }
 }

diff --git a/...c/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerFragment.kt b/...c/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerFragment.kt
@@ -133,6 +133,7 @@ class CourseUnitContainerFragment : Fragment(R.layout.fragment_course_unit_conta
                     HorizontalPageIndicator(
                         blocks = descendantsBlocks,
                         selectedPage = index,
+                        completedAndSelectedColor = MaterialTheme.appColors.componentHorizontalProgressCompletedAndSelected,
                         completedColor = MaterialTheme.appColors.componentHorizontalProgressCompleted,
                         selectedColor = MaterialTheme.appColors.componentHorizontalProgressSelected,
                         defaultColor = MaterialTheme.appColors.componentHorizontalProgressDefault

diff --git a/course/src/main/res/layout/fragment_course_unit_container.xml b/course/src/main/res/layout/fragment_course_unit_container.xml
@@ -32,7 +32,7 @@
     <androidx.compose.ui.platform.ComposeView
         android:id="@+id/horizontalProgress"
         android:layout_width="match_parent"
-        android:layout_height="4dp"
+        android:layout_height="6dp"
         android:layout_marginTop="4dp"
         android:visibility="gone"
         app:layout_constraintStart_toStartOf="parent"
@@ -95,4 +95,4 @@
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/subSectionUnitsTitle" />
-</androidx.constraintlayout.widget.ConstraintLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>