UI: Display non prominent stops if present

ksharma-xyz · Oct 23, 2024 · 9d3935a · 9d3935a
1 parent 8bc7099
commit 9d3935a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 10 deletions.
diff --git a/...e/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt b/...e/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt
@@ -96,9 +96,10 @@ fun LegView(
         }
         Spacer(modifier = Modifier.height(12.dp))
         Column(modifier = Modifier.fillMaxWidth()) {
-            ProminentStopInfo(
+            StopInfo(
                 time = stops.first().time,
                 name = stops.first().name,
+                isProminent = true,
                 modifier = Modifier
                     .timeLineTop(
                         color = transportModeLine.transportMode.colorCode.hexToComposeColor(),
@@ -114,55 +115,75 @@ fun LegView(
                         color = transportModeLine.transportMode.colorCode.hexToComposeColor(),
                         strokeWidth = strokeWidth,
                     )
-                    .padding(start = 16.dp),
+                    .padding(start = 16.dp, top = 12.dp),
             ) {
                 if (stops.size > 2) {
                     StopsRow(
                         stops = "${stops.size - 2} stops",
                         line = transportModeLine,
-                        modifier = Modifier.padding(vertical = 8.dp),
                     )
                 } else {
                     TransportModeInfo(
                         letter = transportModeLine.transportMode.name.first(),
                         backgroundColor = transportModeLine.transportMode.colorCode.hexToComposeColor(),
                         badgeText = transportModeLine.lineName,
                         badgeColor = transportModeLine.lineColorCode.hexToComposeColor(),
-                        modifier = Modifier.padding(vertical = 8.dp),
                     )
                 }
             }
 
-            ProminentStopInfo(
+            stops.drop(1).dropLast(1).forEach { stop ->
+                StopInfo(
+                    time = stop.time,
+                    name = stop.name,
+                    isProminent = false,
+                    modifier = Modifier
+                        .timeLineCenterWithStop(
+                            color = transportModeLine.transportMode.colorCode.hexToComposeColor(),
+                            strokeWidth = strokeWidth,
+                            circleRadius = circleRadius,
+                        )
+                        .timeLineTop(
+                            color = transportModeLine.transportMode.colorCode.hexToComposeColor(),
+                            strokeWidth = strokeWidth,
+                            circleRadius = circleRadius,
+                        )
+                        .padding(start = 16.dp, top = 12.dp),
+                )
+            }
+
+            StopInfo(
                 time = stops.last().time,
                 name = stops.last().name,
+                isProminent = true,
                 modifier = Modifier
                     .timeLineBottom(
                         color = transportModeLine.transportMode.colorCode.hexToComposeColor(),
                         strokeWidth = strokeWidth,
                         circleRadius = circleRadius,
                     )
-                    .padding(start = 16.dp),
+                    .padding(start = 16.dp, top = 12.dp),
             )
         }
     }
 }
 
 @Composable
-fun ProminentStopInfo(
+fun StopInfo(
     time: String,
     name: String,
+    isProminent: Boolean,
     modifier: Modifier = Modifier,
 ) {
     Column(modifier = modifier) {
         Text(
             text = time,
-            style = KrailTheme.typography.bodyMedium,
+            style = if (isProminent) KrailTheme.typography.bodyMedium else KrailTheme.typography.bodySmall,
             color = KrailTheme.colors.onSurface,
         )
         Text(
             text = name,
-            style = KrailTheme.typography.titleSmall,
+            style = if (isProminent) KrailTheme.typography.titleSmall else KrailTheme.typography.bodySmall,
             color = KrailTheme.colors.onSurface,
         )
     }
@@ -279,9 +300,10 @@ private fun PreviewStopsRow() {
 @Composable
 private fun PreviewProminentStopInfo() {
     KrailTheme {
-        ProminentStopInfo(
+        StopInfo(
             time = "12:00",
             name = "XYZ Station, Platform 1",
+            isProminent = true,
             modifier = Modifier.background(KrailTheme.colors.background),
         )
     }

diff --git a/...nner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TimelineModifiers.kt b/...nner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TimelineModifiers.kt
@@ -53,6 +53,23 @@ internal fun Modifier.timeLineCenter(color: Color, strokeWidth: Dp): Modifier {
     }
 }
 
+internal fun Modifier.timeLineCenterWithStop(color: Color, strokeWidth: Dp, circleRadius: Dp): Modifier {
+    return this.drawBehind {
+        drawLine(
+            color = color,
+            start = Offset(x = 0f, y = 0f),
+            end = Offset(x = 0f, y = this.size.height),
+            strokeWidth = strokeWidth.toPx(),
+            cap = StrokeCap.Round,
+        )
+        drawCircle(
+            color = color,
+            radius = circleRadius.toPx(),
+            center = Offset(0f, this.size.height / 2),
+        )
+    }
+}
+
 /**
  * Draws a vertical line and a circle at the bottom start of the composable,
  * representing the bottom end of a timeline element.