From 936809ddc2ce5abe5e81014eddda0282447caa81 Mon Sep 17 00:00:00 2001 From: Saptak Manna Date: Sat, 13 Jul 2024 11:32:41 +0530 Subject: [PATCH] Add collapsible functionality to classroom cards --- .../ClassroomListFragmentPresenter.kt | 11 ++++-- .../classroom/classroomlist/ClassroomList.kt | 34 +++++++++++++------ app/src/main/res/values-land/dimens.xml | 2 -- .../main/res/values-sw600dp-land/dimens.xml | 2 -- .../main/res/values-sw600dp-port/dimens.xml | 2 -- app/src/main/res/values/dimens.xml | 1 + 6 files changed, 33 insertions(+), 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 index 7bc81fd5bdf..42e73f64fa7 100644 --- 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 index 5c35b3383b1..3c3a7ca0344 100644 --- 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, - 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 index 49afd330bdf..0fce9e8ccc0 100644 --- a/app/src/main/res/values-land/dimens.xml +++ b/app/src/main/res/values-land/dimens.xml @@ -552,6 +552,4 @@ 20dp 72dp 12dp - 150dp - 60dp diff --git a/app/src/main/res/values-sw600dp-land/dimens.xml b/app/src/main/res/values-sw600dp-land/dimens.xml index 47caee25f05..f90b9fb9cfe 100644 --- a/app/src/main/res/values-sw600dp-land/dimens.xml +++ b/app/src/main/res/values-sw600dp-land/dimens.xml @@ -517,6 +517,4 @@ 20dp 72dp 12dp - 150dp - 182dp diff --git a/app/src/main/res/values-sw600dp-port/dimens.xml b/app/src/main/res/values-sw600dp-port/dimens.xml index d2c15feccbc..3a9e6ad20dc 100644 --- a/app/src/main/res/values-sw600dp-port/dimens.xml +++ b/app/src/main/res/values-sw600dp-port/dimens.xml @@ -534,6 +534,4 @@ 20dp 60dp 12dp - 150dp - 182dp diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml index 0b06f5569ba..77232adb674 100644 --- a/app/src/main/res/values/dimens.xml +++ b/app/src/main/res/values/dimens.xml @@ -835,6 +835,7 @@ 18sp 150dp 182dp + 60dp 18sp 20dp 20dp