Add collapsible functionality to classroom cards

oppia · Jul 13, 2024 · 936809d · 936809d
1 parent 1c4b17a
commit 936809d
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 19 deletions.
diff --git a/app/src/main/java/org/oppia/android/app/classroom/ClassroomListFragmentPresenter.kt b/app/src/main/java/org/oppia/android/app/classroom/ClassroomListFragmentPresenter.kt
@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -182,8 +183,11 @@ class ClassroomListFragmentPresenter @Inject constructor(
       ?.plus(classroomListViewModel.topicList)
       ?.groupBy { it::class }
     val topicListSpanCount = integerResource(id = R.integer.home_span_count)
+    val listState = rememberLazyListState()
+
     LazyColumn(
-      modifier = Modifier.testTag(CLASSROOM_LIST_SCREEN_TEST_TAG)
+      modifier = Modifier.testTag(CLASSROOM_LIST_SCREEN_TEST_TAG),
+      state = listState
     ) {
       groupedItems?.forEach { (type, items) ->
         when (type) {
@@ -200,10 +204,11 @@ class ClassroomListFragmentPresenter @Inject constructor(
               )
             }
           }
-          ClassroomSummaryViewModel::class -> stickyHeader {
+          ClassroomSummaryViewModel::class -> stickyHeader(key = "classroom_carousel") {
             ClassroomList(
               classroomSummaryList = items.map { it as ClassroomSummaryViewModel },
-              classroomListViewModel.selectedClassroomId.get() ?: ""
+              selectedClassroomId = classroomListViewModel.selectedClassroomId.get() ?: "",
+              isSticky = listState.firstVisibleItemIndex >= 2
             )
           }
           AllTopicsViewModel::class -> items.forEach { _ ->

diff --git a/app/src/main/java/org/oppia/android/app/classroom/classroomlist/ClassroomList.kt b/app/src/main/java/org/oppia/android/app/classroom/classroomlist/ClassroomList.kt
@@ -1,6 +1,9 @@
 package org.oppia.android.app.classroom.classroomlist
 
-import android.content.res.Configuration
+import androidx.compose.animation.core.MutableTransitionState
+import androidx.compose.animation.core.animateDp
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.updateTransition
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
@@ -18,9 +21,10 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.material.Card
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
@@ -44,7 +48,8 @@ const val CLASSROOM_LIST_TEST_TAG = "TEST_TAG.classroom_list"
 @Composable
 fun ClassroomList(
   classroomSummaryList: List<ClassroomSummaryViewModel>,
-  selectedClassroomId: String
+  selectedClassroomId: String,
+  isSticky: Boolean,
 ) {
   Column(
     modifier = Modifier
@@ -76,7 +81,7 @@ fun ClassroomList(
       ),
     ) {
       items(classroomSummaryList) {
-        ClassroomCard(classroomSummaryViewModel = it, selectedClassroomId)
+        ClassroomCard(classroomSummaryViewModel = it, selectedClassroomId, isSticky)
       }
     }
   }
@@ -86,15 +91,24 @@ fun ClassroomList(
 @Composable
 fun ClassroomCard(
   classroomSummaryViewModel: ClassroomSummaryViewModel,
-  selectedClassroomId: String
+  selectedClassroomId: String,
+  isSticky: Boolean,
 ) {
-  val screenWidth = LocalConfiguration.current.screenWidthDp
-  val isPortrait = LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT
-  val isTablet = if (isPortrait) screenWidth > 600 else screenWidth > 840
   val isCardSelected = classroomSummaryViewModel.classroomSummary.classroomId == selectedClassroomId
+  val transitionState = remember { MutableTransitionState(isSticky) }
+  val transition = updateTransition(transitionState, label = "transition")
+  val cardHeight by transition.animateDp(
+    { tween(durationMillis = 300) },
+    label = "cardHeightTransition"
+  ) { isSticky ->
+    if (isSticky)
+      dimensionResource(id = R.dimen.classrooms_card_collapsed_height)
+    else
+      dimensionResource(id = R.dimen.classrooms_card_height)
+  }
   Card(
     modifier = Modifier
-      .height(dimensionResource(id = R.dimen.classrooms_card_height))
+      .height(cardHeight)
       .width(dimensionResource(id = R.dimen.classrooms_card_width))
       .padding(
         start = dimensionResource(R.dimen.promoted_story_card_layout_margin_start),
@@ -116,7 +130,7 @@ fun ClassroomCard(
       verticalArrangement = Arrangement.Center,
       horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-      if (isPortrait || isTablet) { // Hides the classroom icon for landscape phone layouts.
+      if (!isSticky) {
         Image(
           painter = painterResource(
             id = classroomSummaryViewModel

diff --git a/app/src/main/res/values-land/dimens.xml b/app/src/main/res/values-land/dimens.xml
@@ -552,6 +552,4 @@
   <dimen name="classrooms_text_margin_top">20dp</dimen>
   <dimen name="classrooms_text_margin_end">72dp</dimen>
   <dimen name="classrooms_text_margin_bottom">12dp</dimen>
-  <dimen name="classrooms_card_width">150dp</dimen>
-  <dimen name="classrooms_card_height">60dp</dimen>
 </resources>
diff --git a/app/src/main/res/values-sw600dp-land/dimens.xml b/app/src/main/res/values-sw600dp-land/dimens.xml
@@ -517,6 +517,4 @@
   <dimen name="classrooms_text_margin_top">20dp</dimen>
   <dimen name="classrooms_text_margin_end">72dp</dimen>
   <dimen name="classrooms_text_margin_bottom">12dp</dimen>
-  <dimen name="classrooms_card_width">150dp</dimen>
-  <dimen name="classrooms_card_height">182dp</dimen>
 </resources>
diff --git a/app/src/main/res/values-sw600dp-port/dimens.xml b/app/src/main/res/values-sw600dp-port/dimens.xml
@@ -534,6 +534,4 @@
   <dimen name="classrooms_text_margin_top">20dp</dimen>
   <dimen name="classrooms_text_margin_end">60dp</dimen>
   <dimen name="classrooms_text_margin_bottom">12dp</dimen>
-  <dimen name="classrooms_card_width">150dp</dimen>
-  <dimen name="classrooms_card_height">182dp</dimen>
 </resources>
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
@@ -835,6 +835,7 @@
   <dimen name="classrooms_list_header_text_size">18sp</dimen>
   <dimen name="classrooms_card_width">150dp</dimen>
   <dimen name="classrooms_card_height">182dp</dimen>
+  <dimen name="classrooms_card_collapsed_height">60dp</dimen>
   <dimen name="classrooms_card_label_text_size">18sp</dimen>
   <dimen name="classrooms_card_padding">20dp</dimen>
   <dimen name="classrooms_card_icon_padding_bottom">20dp</dimen>