From 2ec6900bd89ea8ab127a38cb55f0d45fbe69fb02 Mon Sep 17 00:00:00 2001 From: Karan Sharma <55722391+ksharma-xyz@users.noreply.github.com> Date: Thu, 24 Oct 2024 22:29:34 +1100 Subject: [PATCH] [TEMP] - UX braintorming with Adi --- .../trip/planner/ui/components/JourneyCard.kt | 321 +++++++++--------- .../trip/planner/ui/components/LegView.kt | 15 +- .../ui/src/main/res/values/strings.xml | 4 +- 3 files changed, 176 insertions(+), 164 deletions(-) diff --git a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt b/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt index 9c2c75db..1f21aeda 100644 --- a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt +++ b/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt @@ -117,12 +117,6 @@ fun JourneyCard( ) else Modifier ) - .clickable( - role = Role.Button, - onClick = onClick, - interactionSource = remember { MutableInteractionSource() }, - indication = null, - ) .padding( vertical = 8.dp, horizontal = if (cardState == JourneyCardState.DEFAULT) 12.dp else 0.dp @@ -139,6 +133,12 @@ fun JourneyCard( themeColor = themeColor, transportModeList = transportModeList, platformNumber = platformNumber, + modifier = Modifier.clickable( + role = Role.Button, + onClick = onClick, + interactionSource = remember { MutableInteractionSource() }, + indication = null, + ) ) else -> JourneyCardContent( @@ -148,6 +148,12 @@ fun JourneyCard( iconSize = iconSize, totalTravelTime = totalTravelTime, legList = legList, + modifier = Modifier.clickable( + role = Role.Button, + onClick = onClick, + interactionSource = remember { MutableInteractionSource() }, + indication = null, + ) ) } } @@ -162,86 +168,87 @@ fun ColumnScope.JourneyCardContent( iconSize: Dp, totalTravelTime: String, legList: ImmutableList, + modifier: Modifier = Modifier, ) { val firstTransportLeg = remember(legList) { legList.filterIsInstance().firstOrNull() } - - FlowRow( - modifier = Modifier - .fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceBetween, - verticalArrangement = Arrangement.spacedBy(4.dp), - ) { - Text( - text = timeToDeparture, - style = KrailTheme.typography.titleLarge, - color = themeColor, - ) - - platformNumber?.let { platform -> - firstTransportLeg?.transportModeLine?.transportMode?.buildPlatformText(platform) - ?.let { platformText -> - Text( - text = platformText, - style = KrailTheme.typography.titleLarge, - color = themeColor, - ) - } - } - } - - FlowRow( - modifier = Modifier - .fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceBetween, - verticalArrangement = Arrangement.spacedBy(4.dp), - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier.align(Alignment.CenterVertically), + Column(modifier = modifier) { + FlowRow( + modifier = Modifier + .fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + verticalArrangement = Arrangement.spacedBy(4.dp), ) { - Image( - painter = painterResource(id = R.drawable.ic_alert), - contentDescription = "Wheelchair accessible", - colorFilter = ColorFilter.tint(Color(0xFFF4B400)), - modifier = Modifier - .size(iconSize), - ) Text( - text = "Info", - style = KrailTheme.typography.bodyLarge, - modifier = Modifier.padding(start = 4.dp), + text = timeToDeparture, + style = KrailTheme.typography.titleLarge, + color = themeColor, ) + + platformNumber?.let { platform -> + firstTransportLeg?.transportModeLine?.transportMode?.buildPlatformText(platform) + ?.let { platformText -> + Text( + text = platformText, + style = KrailTheme.typography.titleLarge, + color = themeColor, + ) + } + } } - Row( - verticalAlignment = Alignment.CenterVertically, + + FlowRow( modifier = Modifier - .align(Alignment.CenterVertically) - .padding(top = 8.dp), + .fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + verticalArrangement = Arrangement.spacedBy(4.dp), ) { - Image( - painter = painterResource(R.drawable.ic_clock), - contentDescription = null, - colorFilter = ColorFilter.tint(color = KrailTheme.colors.onBackground), + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.align(Alignment.CenterVertically), + ) { + Image( + painter = painterResource(id = R.drawable.ic_alert), + contentDescription = "Wheelchair accessible", + colorFilter = ColorFilter.tint(Color(0xFFF4B400)), + modifier = Modifier + .size(iconSize), + ) + Text( + text = "Info", + style = KrailTheme.typography.bodyLarge, + modifier = Modifier.padding(start = 4.dp), + ) + } + Row( + verticalAlignment = Alignment.CenterVertically, modifier = Modifier - .padding(horizontal = 4.dp) .align(Alignment.CenterVertically) - .size(iconSize), - ) - Text( - text = totalTravelTime, - style = KrailTheme.typography.bodyLarge, - ) + .padding(top = 8.dp), + ) { + Image( + painter = painterResource(R.drawable.ic_clock), + contentDescription = null, + colorFilter = ColorFilter.tint(color = KrailTheme.colors.onBackground), + modifier = Modifier + .padding(horizontal = 4.dp) + .align(Alignment.CenterVertically) + .size(iconSize), + ) + Text( + text = totalTravelTime, + style = KrailTheme.typography.bodyLarge, + ) + } } - } - - Spacer( - modifier = Modifier - .fillMaxWidth() - .height(8.dp), - ) + Spacer( + modifier = Modifier + .fillMaxWidth() + .height(8.dp), + ) + } legList.forEachIndexed { _, leg -> when (leg) { is TimeTableState.JourneyCardInfo.Leg.WalkingLeg -> { @@ -319,104 +326,108 @@ fun ColumnScope.DefaultJourneyCardContent( themeColor: Color, transportModeList: ImmutableList, platformNumber: Char?, + modifier: Modifier, ) { - FlowRow( - horizontalArrangement = Arrangement.SpaceBetween, - verticalArrangement = Arrangement.Center, - modifier = Modifier.fillMaxWidth(), - ) { - Text( - text = timeToDeparture, - style = KrailTheme.typography.titleMedium, - color = themeColor, - modifier = Modifier - .padding(end = 8.dp) - .align(Alignment.CenterVertically), - ) - Row( - modifier = Modifier - .align(Alignment.CenterVertically) - .weight(1f), - horizontalArrangement = Arrangement.spacedBy(6.dp), - ) { - transportModeList.forEachIndexed { index, mode -> - TransportModeIcon( - letter = mode.name.first(), - backgroundColor = mode.colorCode.hexToComposeColor(), - ) - if (index != transportModeList.lastIndex) { - SeparatorIcon(modifier = Modifier.align(Alignment.CenterVertically)) - } - } - } + Column(modifier = modifier) { - platformNumber?.let { platform -> // todo - extract - Box( + FlowRow( + horizontalArrangement = Arrangement.SpaceBetween, + verticalArrangement = Arrangement.Center, + modifier = Modifier.fillMaxWidth(), + ) { + Text( + text = timeToDeparture, + style = KrailTheme.typography.titleMedium, + color = themeColor, + modifier = Modifier + .padding(end = 8.dp) + .align(Alignment.CenterVertically), + ) + Row( modifier = Modifier .align(Alignment.CenterVertically) - .size(28.dp.toAdaptiveDecorativeIconSize()) - .border( - width = 3.dp, - color = themeColor, - shape = CircleShape, - ), - contentAlignment = Alignment.Center, + .weight(1f), + horizontalArrangement = Arrangement.spacedBy(6.dp), ) { - Text( - text = platform.toString(), - textAlign = TextAlign.Center, - style = KrailTheme.typography.labelLarge, - ) + transportModeList.forEachIndexed { index, mode -> + TransportModeIcon( + letter = mode.name.first(), + backgroundColor = mode.colorCode.hexToComposeColor(), + ) + if (index != transportModeList.lastIndex) { + SeparatorIcon(modifier = Modifier.align(Alignment.CenterVertically)) + } + } } - } - } - Text( - text = originTime, - style = KrailTheme.typography.titleMedium, - color = KrailTheme.colors.onSurface, - ) + platformNumber?.let { platform -> // todo - extract + Box( + modifier = Modifier + .align(Alignment.CenterVertically) + .size(28.dp.toAdaptiveDecorativeIconSize()) + .border( + width = 3.dp, + color = themeColor, + shape = CircleShape, + ), + contentAlignment = Alignment.Center, + ) { + Text( + text = platform.toString(), + textAlign = TextAlign.Center, + style = KrailTheme.typography.labelLarge, + ) + } + } + } - FlowRow( - horizontalArrangement = Arrangement.Start, - verticalArrangement = Arrangement.Center, - modifier = Modifier - .fillMaxWidth() - .align(Alignment.CenterHorizontally), - ) { Text( - text = destinationTime, + text = originTime, style = KrailTheme.typography.titleMedium, color = KrailTheme.colors.onSurface, ) - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier.align(Alignment.CenterVertically), + + FlowRow( + horizontalArrangement = Arrangement.Start, + verticalArrangement = Arrangement.Center, + modifier = Modifier + .fillMaxWidth() + .align(Alignment.CenterHorizontally), ) { - Image( - painter = painterResource(R.drawable.ic_clock), - contentDescription = null, - colorFilter = ColorFilter.tint(color = KrailTheme.colors.onBackground), - modifier = Modifier - .padding(horizontal = 4.dp) - .align(Alignment.CenterVertically) - .size(14.dp.toAdaptiveSize()), - ) Text( - text = totalTravelTime, - style = KrailTheme.typography.bodyMedium, - ) - } - Spacer(modifier = Modifier.weight(1f)) - if (isWheelchairAccessible) { - Image( - painter = painterResource(R.drawable.ic_a11y), - contentDescription = null, - colorFilter = ColorFilter.tint(color = KrailTheme.colors.onBackground), - modifier = Modifier - .size(14.dp.toAdaptiveSize()) - .align(Alignment.CenterVertically), + text = destinationTime, + style = KrailTheme.typography.titleMedium, + color = KrailTheme.colors.onSurface, ) + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.align(Alignment.CenterVertically), + ) { + Image( + painter = painterResource(R.drawable.ic_clock), + contentDescription = null, + colorFilter = ColorFilter.tint(color = KrailTheme.colors.onBackground), + modifier = Modifier + .padding(horizontal = 4.dp) + .align(Alignment.CenterVertically) + .size(14.dp.toAdaptiveSize()), + ) + Text( + text = totalTravelTime, + style = KrailTheme.typography.bodyMedium, + ) + } + Spacer(modifier = Modifier.weight(1f)) + if (isWheelchairAccessible) { + Image( + painter = painterResource(R.drawable.ic_a11y), + contentDescription = null, + colorFilter = ColorFilter.tint(color = KrailTheme.colors.onBackground), + modifier = Modifier + .size(14.dp.toAdaptiveSize()) + .align(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 c9895f80..35b7f9ea 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 @@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowRow +import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth @@ -72,6 +73,12 @@ fun LegView( .copy(alpha = 0.1f), shape = RoundedCornerShape(12.dp), ) + .clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = null, + onClick = { displayNonProminentStops = !displayNonProminentStops }, + role = Role.Button, + ) .padding(vertical = 12.dp, horizontal = 12.dp), ) { FlowRow( @@ -128,19 +135,13 @@ fun LegView( color = timelineColor, strokeWidth = strokeWidth, ) - .clickable( - interactionSource = remember { MutableInteractionSource() }, - indication = null, - onClick = { displayNonProminentStops = !displayNonProminentStops }, - role = Role.Button, - ) .padding(start = 16.dp, top = 12.dp), ) { if (stops.size > 2) { val context = LocalContext.current StopsRow( // Need to pass count twice - https://developer.android.com/guide/topics/resources/string-resource#Plurals - stops = if (displayNonProminentStops) "Hide stops" else context.resources.getQuantityString( + stops = context.resources.getQuantityString( R.plurals.stops, stops.size - 2, stops.size - 2 ), line = transportModeLine, diff --git a/feature/trip-planner/ui/src/main/res/values/strings.xml b/feature/trip-planner/ui/src/main/res/values/strings.xml index fee50701..c54e4dc7 100644 --- a/feature/trip-planner/ui/src/main/res/values/strings.xml +++ b/feature/trip-planner/ui/src/main/res/values/strings.xml @@ -5,7 +5,7 @@ To Time Table - Show %d stop - Show %d stops + %d stop + %d stops