UI: Refine DateTime selector layout and formatting (#407)

### TL;DR Updated the date/time selector UI with improved layout and styling ### What changed? - Removed colons from "Leave" and "Arrive" text labels - Added "Select Date" and "Select Time" headers to their respective sections - Adjusted spacing and padding throughout the date/time selector components - Improved the journey time options layout with consistent spacing - Enhanced the time picker vertical layout and density - Added system bar padding to the main screen - Removed dividers between sections for a cleaner look - Fixed time picker state updates to properly handle reset conditions ### How to test? 1. Open the trip planner 2. Navigate to the date/time selector screen 3. Verify the new headers are visible 4. Check that the spacing between components looks consistent 5. Confirm the time picker is properly sized and usable 6. Test that "Leave Now" resets correctly when modifying time/date values 7. Verify the system bars don't overlap with content ### Why make this change? The updates improve the visual hierarchy and usability of the date/time selector screen by adding clear section headers, consistent spacing, and better component organization. The changes also fix issues with the time picker state management and system bar handling.
ksharma-xyz · Dec 2, 2024 · 8e18ca5 · 8e18ca5
1 parent 7ead212
commit 8e18ca5
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 39 deletions.
diff --git a/.../kotlin/xyz/ksharma/krail/trip/planner/ui/state/datetimeselector/DateTimeSelectionItem.kt b/.../kotlin/xyz/ksharma/krail/trip/planner/ui/state/datetimeselector/DateTimeSelectionItem.kt
@@ -15,11 +15,11 @@ data class DateTimeSelectionItem(
 ) {
     fun toDateTimeText(): String = when (option) {
         JourneyTimeOptions.LEAVE -> {
-            "Leave: ${toReadableDate(date)} ${to12HourTimeString(hour, minute)}"
+            "Leave ${toReadableDate(date)} ${to12HourTimeString(hour, minute)}"
         }
 
         JourneyTimeOptions.ARRIVE -> {
-            "Arrive: ${toReadableDate(date)} ${to12HourTimeString(hour, minute)}"
+            "Arrive ${toReadableDate(date)} ${to12HourTimeString(hour, minute)}"
         }
     }
 

diff --git a/...ner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/PlanTripCard.kt b/...ner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/PlanTripCard.kt
@@ -0,0 +1,9 @@
+package xyz.ksharma.krail.trip.planner.ui.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+fun PlanTripCard(modifier: Modifier = Modifier) {
+
+}
diff --git a/...src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateSelection.kt b/...src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateSelection.kt
@@ -1,13 +1,17 @@
 package xyz.ksharma.krail.trip.planner.ui.datetimeselector
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
 import krail.feature.trip_planner.ui.generated.resources.Res
 import krail.feature.trip_planner.ui.generated.resources.ic_chevron_left
 import krail.feature.trip_planner.ui.generated.resources.ic_chevron_right
@@ -24,25 +28,39 @@ fun DateSelection(
     onNextClicked: () -> Unit = {},
     onPreviousClicked: () -> Unit = {},
 ) {
-    Row(modifier = modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
-        IconButton(
-            painter = painterResource(Res.drawable.ic_chevron_left),
-            color = themeColor,
-            modifier = Modifier.align(Alignment.CenterVertically),
-            onClick = onPreviousClicked,
-        )
+    Column(
+        modifier = modifier.fillMaxWidth().padding(top = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
         Text(
-            text = date,
-            style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal),
+            text = "Select Date",
+            style = KrailTheme.typography.title,
             color = KrailTheme.colors.onSurface,
-            modifier = Modifier.weight(1f),
-            textAlign = TextAlign.Center,
-        )
-        IconButton(
-            painter = painterResource(Res.drawable.ic_chevron_right),
-            color = themeColor,
-            modifier = Modifier.align(Alignment.CenterVertically),
-            onClick = onNextClicked,
         )
+
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            IconButton(
+                painter = painterResource(Res.drawable.ic_chevron_left),
+                color = themeColor,
+                modifier = Modifier.align(Alignment.CenterVertically),
+                onClick = onPreviousClicked,
+            )
+            Text(
+                text = date,
+                style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal),
+                color = KrailTheme.colors.onSurface,
+                modifier = Modifier.weight(1f),
+                textAlign = TextAlign.Center,
+            )
+            IconButton(
+                painter = painterResource(Res.drawable.ic_chevron_right),
+                color = themeColor,
+                modifier = Modifier.align(Alignment.CenterVertically),
+                onClick = onNextClicked,
+            )
+        }
     }
 }
diff --git a/...nMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt b/...nMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt
@@ -43,7 +43,6 @@ import xyz.ksharma.krail.core.datetime.incrementDateByOneDay
 import xyz.ksharma.krail.core.datetime.rememberCurrentDateTime
 import xyz.ksharma.krail.core.datetime.toReadableDate
 import xyz.ksharma.krail.taj.LocalThemeColor
-import xyz.ksharma.krail.taj.components.Divider
 import xyz.ksharma.krail.taj.components.Text
 import xyz.ksharma.krail.taj.components.TitleBar
 import xyz.ksharma.krail.taj.theme.KrailTheme
@@ -88,19 +87,23 @@ fun DateTimeSelectorScreen(
     // Reset
     // when dateTimeSelection is null then coming to this screen for first time, so reset should be true.
     var reset by remember { mutableStateOf(dateTimeSelection == null) }
-    LaunchedEffect(timePickerState, journeyTimeOption, selectedDate) {
+    LaunchedEffect(timePickerState.hour, timePickerState.minute, journeyTimeOption, selectedDate) {
         val now: LocalDateTime =
             Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
         // If any of the date / time value changes, then reset is invalid.
         // Should be true - when time and date is same even after updates, coz reset click
         // triggered this change.
         reset = now.hour == timePickerState.hour &&
                 now.minute == timePickerState.minute &&
-                selectedDate == now.date
+                selectedDate == now.date &&
+                journeyTimeOption == JourneyTimeOptions.LEAVE
     }
 
     Column(
-        modifier = modifier.fillMaxSize().background(color = KrailTheme.colors.surface),
+        modifier = modifier
+            .fillMaxSize()
+            .background(color = KrailTheme.colors.surface)
+            .systemBarsPadding(),
     ) {
         TitleBar(title = { Text(text = "Plan your trip") }, navAction = {
             ActionButton(
@@ -137,7 +140,6 @@ fun DateTimeSelectorScreen(
 
         LazyColumn(
             contentPadding = PaddingValues(vertical = 16.dp),
-            modifier = Modifier.systemBarsPadding(),
         ) {
             item {
                 JourneyTimeOptionsGroup(
@@ -146,13 +148,11 @@ fun DateTimeSelectorScreen(
                     onOptionSelected = {
                         journeyTimeOption = it
                     },
-                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)
+                    modifier = Modifier.padding(horizontal = 16.dp),
                 )
             }
 
             item {
-                Divider(modifier = Modifier.padding(horizontal = 16.dp))
-
                 DateSelection(
                     themeColor = themeColor,
                     date = toReadableDate(selectedDate),
@@ -166,10 +166,10 @@ fun DateTimeSelectorScreen(
                             selectedDate = decrementDateByOneDay(selectedDate)
                         }
                     },
-                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp),
+                    modifier = Modifier
+                        .padding(horizontal = 16.dp)
+                        .padding(top = 12.dp),
                 )
-
-                Divider(modifier = Modifier.padding(horizontal = 16.dp))
             }
 
             item {
@@ -183,7 +183,7 @@ fun DateTimeSelectorScreen(
             item {
                 Text(
                     text = if (reset) {
-                        "Leave: Now"
+                        "Leave Now"
                     } else {
                         DateTimeSelectionItem(
                             option = journeyTimeOption,

diff --git a/...Main/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/JourneyTimeOptionsGroup.kt b/...Main/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/JourneyTimeOptionsGroup.kt
@@ -20,15 +20,14 @@ fun JourneyTimeOptionsGroup(
 ) {
     Row(
         modifier = modifier.fillMaxWidth(),
-        horizontalArrangement = Arrangement.Center,
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         JourneyTimeOptions.entries.forEach { option ->
             RadioButton(
                 text = option.text,
                 selected = option == selectedOption,
                 themeColor = themeColor,
                 onClick = { onOptionSelected(option) },
-                modifier = Modifier.padding(horizontal = 8.dp),
             )
         }
     }

diff --git a/...src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/TimeSelection.kt b/...src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/TimeSelection.kt
@@ -3,6 +3,7 @@ package xyz.ksharma.krail.trip.planner.ui.datetimeselector
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.TimePicker
 import androidx.compose.material3.TimePickerColors
@@ -17,12 +18,12 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
 import xyz.ksharma.krail.taj.LocalThemeColor
+import xyz.ksharma.krail.taj.components.Text
 import xyz.ksharma.krail.taj.theme.KrailTheme
 import xyz.ksharma.krail.taj.theme.getForegroundColor
 import xyz.ksharma.krail.trip.planner.ui.components.hexToComposeColor
 import xyz.ksharma.krail.trip.planner.ui.components.themeBackgroundColor
 
-
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TimeSelection(
@@ -33,11 +34,17 @@ fun TimeSelection(
     val themeColor = themeColorHex.hexToComposeColor()
     val themeContentColor = getForegroundColor(themeColor)
 
-    Column(modifier = modifier, verticalArrangement = Arrangement.spacedBy(8.dp)) {
+    Column(
+        modifier = modifier.padding(top = 12.dp),
+        verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
         val density = LocalDensity.current
-        LaunchedEffect(density) {
-            println("Density: $density")
-        }
+        Text(
+            text = "Select Time",
+            style = KrailTheme.typography.title,
+            color = KrailTheme.colors.onSurface,
+        )
+
         CompositionLocalProvider(
             LocalDensity provides Density(
                 (density.density - 0.6f).coerceIn(1.5f, 3f),
@@ -63,7 +70,7 @@ fun TimeSelection(
                     timeSelectorUnselectedContentColor = KrailTheme.colors.onSurface.copy(alpha = 0.8f)
                 ),
                 layoutType = TimePickerLayoutType.Vertical,
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier.fillMaxWidth().padding(top = 12.dp),
             )
         }
     }