From 9d3935ad1871869b2f3e405529842334025c9a35 Mon Sep 17 00:00:00 2001
From: Karan Sharma <55722391+ksharma-xyz@users.noreply.github.com>
Date: Wed, 23 Oct 2024 21:44:40 +1100
Subject: [PATCH] UI: Display non prominent stops if present

---
 .../trip/planner/ui/components/LegView.kt     | 42 ++++++++++++++-----
 .../ui/components/TimelineModifiers.kt        | 17 ++++++++
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt b/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt
index bfe0308f..036bbe25 100644
--- a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt
+++ b/feature/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,13 +115,12 @@ 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(
@@ -128,41 +128,62 @@ fun LegView(
                         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/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TimelineModifiers.kt b/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TimelineModifiers.kt
index 5b6ddf65..271f1ff4 100644
--- a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TimelineModifiers.kt
+++ b/feature/trip-planner/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.