Display TransportModeChip row

ksharma-xyz · Feb 11, 2025 · 0924d54 · 0924d54
1 parent 30ebb23
commit 0924d54
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 14 deletions.
diff --git a/...i/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TransportModeChip.kt b/...i/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TransportModeChip.kt
@@ -36,23 +36,18 @@ fun TransportModeChip(
         animationSpec = tween(200),
     )
 
-    val textColor by animateColorAsState(
-        targetValue = if (selected) Color.White else Color.Gray, // gray needs to come from token
-        animationSpec = tween(200),
-    )
-
     val borderColor by animateColorAsState(
         targetValue = if (selected) Color.Transparent else transportMode.colorCode.hexToComposeColor(),
         animationSpec = tween(200),
     )
 
-    val modeIconBorderColor by animateColorAsState(
-        targetValue = if (selected) Color.White else KrailTheme.colors.surface,
+    val textColor by animateColorAsState(
+        targetValue = if (selected) Color.White else Color.Gray,
         animationSpec = tween(200),
     )
 
     CompositionLocalProvider(
-        LocalTextColor provides textColor,
+        LocalTextColor provides Color.White,
         LocalTextStyle provides KrailTheme.typography.titleMedium,
     ) {
         Row(
@@ -70,19 +65,25 @@ fun TransportModeChip(
                     indication = null,
                     interactionSource = null,
                 ) { onClick() }
-                .padding(horizontal = 4.dp, vertical = 4.dp) // 4.dp is token
+                // horizontal padding value should be same as border width of
+                // TransportModeIcon
+                .padding(horizontal = 3.dp, vertical = 4.dp) // 4.dp is token
                 .padding(end = 8.dp),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
             // Make this a separate component - TransportModeIcon
             TransportModeIcon(
                 transportMode = transportMode,
-                borderColor = modeIconBorderColor,
                 displayBorder = true,
+                adaptiveSize = true,
             )
 
-            Text(text = transportMode.name)
+            CompositionLocalProvider(
+                LocalTextColor provides textColor,
+            ) {
+                Text(text = transportMode.name)
+            }
         }
     }
 }
diff --git a/...i/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TransportModeIcon.kt b/...i/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TransportModeIcon.kt
@@ -5,15 +5,18 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import xyz.ksharma.krail.taj.LocalTextColor
 import xyz.ksharma.krail.taj.LocalTextStyle
 import xyz.ksharma.krail.taj.components.Text
@@ -28,6 +31,7 @@ fun TransportModeIcon(
     transportMode: TransportMode,
     modifier: Modifier = Modifier,
     borderColor: Color = Color.White,
+    adaptiveSize: Boolean = false,
     displayBorder: Boolean = false,
     size: TransportModeIconSize = TransportModeIconSize.Medium,
 ) {
@@ -38,7 +42,10 @@ fun TransportModeIcon(
     ) {
         Box(
             modifier = modifier
-                .size(size.dpSize.toAdaptiveSize())
+                .size(
+                    if (adaptiveSize) size.dpSize.toAdaptiveSize()
+                    else size.dpSize.toAdaptiveDecorativeIconSize()
+                )
                 .clip(CircleShape)
                 .background(
                     color = transportMode.colorCode.hexToComposeColor(),
@@ -64,7 +71,7 @@ private fun Modifier.borderIfEnabled(enabled: Boolean, color: Color): Modifier =
     if (enabled) {
         this.then(
             border(
-                width = 3.dp.toAdaptiveDecorativeIconSize(),
+                width = 3.dp,
                 color = color,
                 shape = CircleShape,
             )

diff --git a/...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt b/...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt
@@ -18,13 +18,16 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -56,6 +59,7 @@ import xyz.ksharma.krail.trip.planner.ui.components.ErrorMessage
 import xyz.ksharma.krail.trip.planner.ui.components.JourneyCard
 import xyz.ksharma.krail.trip.planner.ui.components.JourneyCardState
 import xyz.ksharma.krail.trip.planner.ui.components.OriginDestination
+import xyz.ksharma.krail.trip.planner.ui.components.TransportModeChip
 import xyz.ksharma.krail.trip.planner.ui.components.loading.AnimatedDots
 import xyz.ksharma.krail.trip.planner.ui.components.loading.LoadingEmojiAnim
 import xyz.ksharma.krail.trip.planner.ui.state.TransportMode
@@ -79,6 +83,7 @@ fun TimeTableScreen(
 ) {
     val themeColorHex by LocalThemeColor.current
     val themeColor = themeColorHex.hexToComposeColor()
+    var displayModeSelectionRow by rememberSaveable { mutableStateOf(false) }
 
     Column(
         modifier = modifier.fillMaxSize().background(color = KrailTheme.colors.surface),
@@ -160,6 +165,7 @@ fun TimeTableScreen(
             }
 
             item {
+
                 Row(
                     modifier = Modifier.fillParentMaxWidth().padding(horizontal = 10.dp),
                     horizontalArrangement = Arrangement.spacedBy(16.dp)
@@ -175,7 +181,7 @@ fun TimeTableScreen(
 
                     SubtleButton(
                         onClick = {
-
+                            displayModeSelectionRow = !displayModeSelectionRow
                         },
                         dimensions = ButtonDefaults.mediumButtonSize(),
                     ) {
@@ -195,6 +201,31 @@ fun TimeTableScreen(
                 }
             }
 
+            if (displayModeSelectionRow) {
+                item {
+                    var selected by remember { mutableStateOf(false) }
+                    LazyRow(
+                        horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        contentPadding = PaddingValues(horizontal = 12.dp),
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(top = 12.dp, bottom = 4.dp),
+                    ) {
+                        TransportMode.values().forEach {
+                            item {
+                                TransportModeChip(
+                                    transportMode = it,
+                                    selected = selected,
+                                    onClick = {
+                                        selected = !selected
+                                    },
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+
             item {
                 Spacer(modifier = Modifier.height(8.dp))
             }