[#789] Fixed Timetable grid item UI

DroidKaigi · Aug 30, 2023 · b641996 · b641996
1 parent 385a82b
commit b641996
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 41 deletions.
diff --git a/feature/sessions/build.gradle.kts b/feature/sessions/build.gradle.kts
@@ -13,4 +13,5 @@ dependencies {
     implementation(libs.composeHiltNavigtation)
     implementation(libs.composeMaterialIcon)
     implementation(libs.composeShimmer)
+    implementation(libs.composeConstraintlayout)
 }
diff --git a/.../src/main/java/io/github/droidkaigi/confsched2023/sessions/component/TimetableGridItem.kt b/.../src/main/java/io/github/droidkaigi/confsched2023/sessions/component/TimetableGridItem.kt
@@ -6,11 +6,9 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 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.defaultMinSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -32,11 +30,14 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.Dimension
 import io.github.droidkaigi.confsched2023.designsystem.preview.MultiLanguagePreviews
 import io.github.droidkaigi.confsched2023.designsystem.preview.MultiThemePreviews
 import io.github.droidkaigi.confsched2023.designsystem.theme.KaigiTheme
@@ -94,7 +95,7 @@ fun TimetableGridItem(
         it.copy(fontSize = titleFontSize, lineHeight = titleLineHeight, color = textColor)
     }
 
-    Box(
+    ConstraintLayout(
         modifier = modifier
             .background(
                 color = if (speakers.isEmpty()) {
@@ -111,14 +112,30 @@ fun TimetableGridItem(
             }
             .padding(TimetableGridItemSizes.padding),
     ) {
-        Column {
+        val (sessionRef, speakerRef, errorRef) = createRefs()
+        Column(
+            modifier = Modifier.constrainAs(sessionRef) {
+                top.linkTo(parent.top)
+                start.linkTo(parent.start)
+                bottom.linkTo(speakerRef.top)
+                this.height = Dimension.fillToConstraints
+            },
+            verticalArrangement = Arrangement.Top,
+        ) {
             Text(
+                modifier = Modifier.weight(2f, fill = false),
                 text = timetableItem.title.currentLangTitle,
                 style = titleTextStyle,
+                overflow = TextOverflow.Ellipsis,
             )
-            Spacer(modifier = Modifier.height(TimetableGridItemSizes.titleToScheduleSpaceHeight))
-            Row(modifier = Modifier.height(TimetableGridItemSizes.scheduleHeight)) {
+
+            Row(
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(top = TimetableGridItemSizes.titleToSchedulePadding),
+            ) {
                 Icon(
+                    modifier = Modifier.height(TimetableGridItemSizes.scheduleHeight),
                     imageVector = Icons.Default.Schedule,
                     tint = if (speaker != null) {
                         hallColor.hallText
@@ -134,38 +151,52 @@ fun TimetableGridItem(
                     color = textColor,
                 )
             }
+        }
 
-            if (timetableItem is Session) {
-                timetableItem.message?.let {
-                    Spacer(modifier = Modifier.height(TimetableGridItemSizes.titleToScheduleSpaceHeight))
-                    Row(verticalAlignment = Alignment.CenterVertically) {
-                        Icon(
-                            imageVector = Icons.Default.Error,
-                            contentDescription = SessionsStrings.ErrorIcon.asString(),
-                            tint = MaterialTheme.colorScheme.errorContainer,
-                            modifier = Modifier.size(TimetableGridItemSizes.scheduleHeight),
-                        )
-                        Spacer(modifier = Modifier.width(4.dp))
-                        Text(
-                            text = it.currentLangTitle,
-                            color = MaterialTheme.colorScheme.errorContainer,
-                            fontSize = TimetableGridItemSizes.minTitleFontSize,
-                            lineHeight = TimetableGridItemSizes.minTitleLineHeight,
-                        )
-                    }
-                }
-            }
-
-            Spacer(
+        val shouldShowError = timetableItem is Session && timetableItem.message != null
+        if (shouldShowError) {
+            Icon(
                 modifier = Modifier
-                    .weight(1f)
-                    .defaultMinSize(minHeight = 8.dp),
+                    .padding(
+                        start = TimetableGridItemSizes.errorPadding,
+                        bottom = TimetableGridItemSizes.errorPadding,
+                    )
+                    .size(TimetableGridItemSizes.errorHeight)
+                    .constrainAs(errorRef) {
+                        bottom.linkTo(parent.bottom)
+                        end.linkTo(parent.end)
+                    },
+                imageVector = Icons.Default.Error,
+                contentDescription = SessionsStrings.ErrorIcon.asString(),
+                tint = MaterialTheme.colorScheme.errorContainer,
             )
+        }
 
-            when (speakers.size) {
-                0 -> Unit
-                1 -> SingleSpeaker(speaker = speakers.first(), textColor = textColor)
-                else -> MultiSpeakers(speakers = speakers)
+        if (speakers.isNotEmpty()) {
+            val speakerModifier = Modifier
+                .constrainAs(speakerRef) {
+                    top.linkTo(sessionRef.bottom)
+                    bottom.linkTo(parent.bottom)
+                    start.linkTo(parent.start)
+                    this.width = Dimension.fillToConstraints
+                    if (shouldShowError) {
+                        end.linkTo(errorRef.start)
+                    } else {
+                        end.linkTo(parent.end)
+                    }
+                }
+
+            if (speakers.size == 1) {
+                SingleSpeaker(
+                    speaker = speakers.first(),
+                    textColor = textColor,
+                    modifier = speakerModifier,
+                )
+            } else {
+                MultiSpeakers(
+                    speakers = speakers,
+                    modifier = speakerModifier,
+                )
             }
         }
     }
@@ -248,19 +279,16 @@ private fun calculateFontSizeAndLineHeight(
 ): Pair<TextUnit, TextUnit> {
     // The height of the title that should be displayed.
     val titleToScheduleSpaceHeightPx = with(localDensity) {
-        TimetableGridItemSizes.titleToScheduleSpaceHeight.toPx()
+        TimetableGridItemSizes.titleToSchedulePadding.toPx()
     }
     val scheduleHeightPx = with(localDensity) {
         TimetableGridItemSizes.scheduleHeight.toPx()
     }
-    val scheduleToSpeakerSpaceHeightPx = with(localDensity) {
-        TimetableGridItemSizes.scheduleToSpeakerSpaceMinHeight.toPx()
-    }
     val horizontalPaddingPx = with(localDensity) {
         (TimetableGridItemSizes.padding * 2).toPx()
     }
     var displayTitleHeight =
-        gridItemHeightPx - titleToScheduleSpaceHeightPx - scheduleHeightPx - scheduleToSpeakerSpaceHeightPx - horizontalPaddingPx
+        gridItemHeightPx - titleToScheduleSpaceHeightPx - scheduleHeightPx - horizontalPaddingPx
     displayTitleHeight -= if (speaker != null) {
         with(localDensity) { TimetableGridItemSizes.speakerHeight.toPx() }
     } else {
@@ -357,9 +385,10 @@ private fun calculateTitleHeight(
 object TimetableGridItemSizes {
     val width = 192.dp
     val padding = 12.dp
-    val titleToScheduleSpaceHeight = 4.dp
+    val titleToSchedulePadding = 4.dp
     val scheduleHeight = 16.dp
-    val scheduleToSpeakerSpaceMinHeight = 8.dp
+    val errorHeight = 16.dp
+    val errorPadding = 8.dp
     val speakerHeight = 32.dp
     val minTitleFontSize = 10.sp
     val middleTitleLineHeight = 16.sp // base on MaterialTheme.typography.labelSmall.lineHeight

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -83,6 +83,7 @@ composeRuntime = { module = "androidx.compose.runtime:runtime", version.ref = "c
 composeMaterial = { module = "androidx.compose.material3:material3", version = "1.1.1" }
 composeMaterialWindowSize = { module = "androidx.compose.material3:material3-window-size-class", version = "1.1.1" }
 composeMaterialIcon = { module = "androidx.compose.material:material-icons-extended", version = "1.5.0" }
+composeConstraintlayout = { module = "androidx.constraintlayout:constraintlayout-compose", version = "1.0.1" }
 composeUiToolingPreview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "compose" }
 composeUiTestJunit4 = { module = "androidx.compose.ui:ui-test-junit4", version.ref = "compose" }
 composeUiTooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "compose" }