From d1aa1a8541f38abd4fbe13ffebff098a380b8161 Mon Sep 17 00:00:00 2001 From: Karan Sharma <55722391+ksharma-xyz@users.noreply.github.com> Date: Fri, 1 Nov 2024 02:04:28 +1100 Subject: [PATCH] UI fixes --- .../krail/core/datetime/DateTimeHelper.kt | 2 +- .../system/components/TextFieldButton.kt | 2 +- .../design/system/components/TitleBar.kt | 4 +- .../trip/planner/ui/components/LegView.kt | 2 + .../ui/components/StopSearchListItem.kt | 2 +- .../planner/ui/timetable/TimeTableScreen.kt | 70 ++++++++++++++----- 6 files changed, 62 insertions(+), 20 deletions(-) diff --git a/core/date-time/src/main/kotlin/xyz/ksharma/krail/core/datetime/DateTimeHelper.kt b/core/date-time/src/main/kotlin/xyz/ksharma/krail/core/datetime/DateTimeHelper.kt index 054385d4..08cf3382 100644 --- a/core/date-time/src/main/kotlin/xyz/ksharma/krail/core/datetime/DateTimeHelper.kt +++ b/core/date-time/src/main/kotlin/xyz/ksharma/krail/core/datetime/DateTimeHelper.kt @@ -75,7 +75,7 @@ object DateTimeHelper { totalMinutes < 0 -> "${totalMinutes.absoluteValue} mins ago" totalMinutes == 0L -> "Now" hours == 1L -> "In ${hours.absoluteValue}h ${partialMinutes.absoluteValue}m" - hours >= 2 -> "In ${hours.absoluteValue} h" + hours >= 2 -> "In ${hours.absoluteValue}h" else -> "In ${totalMinutes.absoluteValue} ${if (totalMinutes.absoluteValue == 1L) "min" else "mins"}" } Timber.d("\t minutes: $partialMinutes, hours: $hours, formattedDifference: $formattedDifference -> originTime") diff --git a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TextFieldButton.kt b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TextFieldButton.kt index bffec20c..38e1790a 100644 --- a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TextFieldButton.kt +++ b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TextFieldButton.kt @@ -50,7 +50,7 @@ fun TextFieldButton( .fillMaxWidth() .height(TextFieldHeight) .clip(RoundedCornerShape(TextFieldHeight.div(2))) - .background(color = KrailTheme.colors.surface) + .background(color = KrailTheme.colors.background) .clickable(role = Role.Button, onClick = onClick) .padding(horizontal = 16.dp, vertical = 4.dp), contentAlignment = Alignment.CenterStart, diff --git a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TitleBar.kt b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TitleBar.kt index d7bbd1a8..13e0bbe6 100644 --- a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TitleBar.kt +++ b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TitleBar.kt @@ -5,6 +5,7 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.statusBarsPadding @@ -32,7 +33,8 @@ fun TitleBar( modifier = modifier .statusBarsPadding() .fillMaxWidth() - .padding(vertical = 16.dp, horizontal = 16.dp), + .padding(horizontal = 16.dp) + .heightIn(min = 56.dp), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically, ) { 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 fc18d652..24921e87 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 @@ -1,5 +1,6 @@ package xyz.ksharma.krail.trip.planner.ui.components +import androidx.compose.animation.animateContentSize import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable @@ -66,6 +67,7 @@ fun LegView( Column( modifier = modifier .fillMaxWidth() + .animateContentSize() .background( color = transportModeBackgroundColor(transportMode = transportModeLine.transportMode), shape = RoundedCornerShape(12.dp), diff --git a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/StopSearchListItem.kt b/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/StopSearchListItem.kt index 11a2daba..b2eb3149 100644 --- a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/StopSearchListItem.kt +++ b/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/StopSearchListItem.kt @@ -44,7 +44,7 @@ fun StopSearchListItem( ) { Text( text = stopName, - style = KrailTheme.typography.bodyLarge, + style = KrailTheme.typography.titleSmall, ) Row( horizontalArrangement = Arrangement.spacedBy(8.dp), diff --git a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt b/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt index a48b2d29..dbd0fc5f 100644 --- a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt +++ b/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt @@ -18,7 +18,6 @@ import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.CircleShape -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -28,10 +27,12 @@ import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp import kotlinx.collections.immutable.ImmutableList +import kotlinx.collections.immutable.persistentListOf import kotlinx.collections.immutable.toImmutableList import xyz.ksharma.krail.design.system.components.Text import xyz.ksharma.krail.design.system.components.TitleBar @@ -104,14 +105,15 @@ fun TimeTableScreen( trip, modifier = Modifier .fillMaxWidth() - .clip( - shape = RoundedCornerShape(bottomStart = 16.dp, bottomEnd = 16.dp), - ) .background(color = themeColor), ) } } + item { + Spacer(modifier = Modifier.height(16.dp)) + } + if (timeTableState.isLoading) { item { Column(horizontalAlignment = Alignment.CenterHorizontally) { @@ -156,7 +158,7 @@ fun TimeTableScreen( onEvent(TimeTableUiEvent.JourneyCardClicked(journey.journeyId)) }, modifier = Modifier - .padding(horizontal = 16.dp, vertical = 8.dp), + .padding(horizontal = 12.dp, vertical = 8.dp), ) } } else { @@ -185,7 +187,7 @@ private fun OriginDestination( modifier = modifier .fillMaxWidth() .padding(horizontal = 16.dp) - .padding(bottom = 12.dp), + .padding(bottom = 16.dp), ) { Row( horizontalArrangement = Arrangement.spacedBy(8.dp), @@ -193,14 +195,14 @@ private fun OriginDestination( modifier = Modifier .timeLineTop( color = KrailTheme.colors.onSurface, - strokeWidth = 2.dp, - circleRadius = 4.dp, + strokeWidth = 3.dp, + circleRadius = 5.dp, ) - .padding(start = 12.dp, bottom = 4.dp), + .padding(start = 12.dp, bottom = 8.dp), ) { Text( text = trip.fromStopName, - style = KrailTheme.typography.bodyLarge, + style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal), ) } @@ -210,14 +212,14 @@ private fun OriginDestination( modifier = Modifier .timeLineBottom( color = KrailTheme.colors.onSurface, - strokeWidth = 2.dp, - circleRadius = 4.dp, + strokeWidth = 3.dp, + circleRadius = 5.dp, ) - .padding(start = 12.dp, top = 4.dp), + .padding(start = 12.dp, top = 8.dp), ) { Text( text = trip.toStopName, - style = KrailTheme.typography.bodyLarge, + style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal), ) } } @@ -254,7 +256,7 @@ fun JourneyCardItem( } } -@Preview +@PreviewLightDark @Composable private fun PreviewOriginDestination() { KrailTheme { @@ -269,3 +271,39 @@ private fun PreviewOriginDestination() { ) } } + +@PreviewLightDark +@Composable +private fun PreviewTimeTableScreen() { + KrailTheme { + TimeTableScreen( + timeTableState = TimeTableState( + trip = Trip( + fromStopName = "From Stop", + toStopName = "To Stop", + fromStopId = "123", + toStopId = "456", + ), + journeyList = listOf( + TimeTableState.JourneyCardInfo( + timeText = "12:00", + platformText = 'A', + originTime = "12:00", + destinationTime = "12:30", + travelTime = "30 mins", + transportModeLines = persistentListOf( + TransportModeLine( + transportMode = TransportMode.Bus(), + lineName = "123", + ), + ), + legs = persistentListOf(), + originUtcDateTime = "2024-11-01T12:00:00Z", + ), + ).toImmutableList(), + ), + expandedJourneyId = null, + onEvent = {}, + ) + } +}