Skip to content

Commit

Permalink
UI: Refactor timeline colors and layout in TimeTableScreen (#382)
Browse files Browse the repository at this point in the history 
The focus should be on JourneyCard colors therefore, removing colors form the TimeTable screen top section.


|Dark | Light |
|--------|--------|
| ![Screenshot_20241126_194539](https://github.com/user-attachments/assets/a9aadd6e-e478-419d-8edb-8a4764895cae) | ![Screenshot_20241126_194543](https://github.com/user-attachments/assets/a17b2bf3-e665-448e-9d97-3ca14b203ad9) |
  • Loading branch information
@ksharma-xyz
ksharma-xyz authored Nov 26, 2024
2 parents 0fb7d57 + 1b329d0 commit 0192764
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 40 deletions.
10 changes: 5 additions & 5 deletions ...i/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/OriginDestination.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import xyz.ksharma.krail.trip.planner.ui.state.timetable.Trip
@Composable
internal fun OriginDestination(
trip: Trip,
themeContentColor: Color,
timeLineColor: Color,
modifier: Modifier = Modifier,
) {
Column(
Expand All @@ -40,7 +40,7 @@ internal fun OriginDestination(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.timeLineTop(
color = themeContentColor,
color = timeLineColor,
strokeWidth = 3.dp,
circleRadius = 5.dp,
)
Expand Down Expand Up @@ -70,7 +70,7 @@ internal fun OriginDestination(
) { targetText ->
Text(
text = targetText,
color = themeContentColor,
color = timeLineColor,
style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal),
)
}
Expand All @@ -81,7 +81,7 @@ internal fun OriginDestination(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.timeLineBottom(
color = themeContentColor,
color = timeLineColor,
strokeWidth = 3.dp,
circleRadius = 5.dp,
)
Expand Down Expand Up @@ -111,7 +111,7 @@ internal fun OriginDestination(
) { targetText ->
Text(
text = targetText,
color = themeContentColor,
color = timeLineColor,
style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal),
)
}
Expand Down
43 changes: 8 additions & 35 deletions ...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,8 @@ import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.Star
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
Expand All @@ -43,17 +40,14 @@ import krail.feature.trip_planner.ui.generated.resources.ic_star
import krail.feature.trip_planner.ui.generated.resources.ic_star_filled
import org.jetbrains.compose.resources.painterResource
import xyz.ksharma.krail.taj.LocalThemeColor
import xyz.ksharma.krail.taj.LocalThemeContentColor
import xyz.ksharma.krail.taj.components.Text
import xyz.ksharma.krail.taj.components.TitleBar
import xyz.ksharma.krail.taj.theme.KrailTheme
import xyz.ksharma.krail.taj.theme.shouldUseDarkIcons
import xyz.ksharma.krail.trip.planner.ui.components.ActionData
import xyz.ksharma.krail.trip.planner.ui.components.ErrorMessage
import xyz.ksharma.krail.trip.planner.ui.components.JourneyCard
import xyz.ksharma.krail.trip.planner.ui.components.JourneyCardState
import xyz.ksharma.krail.trip.planner.ui.components.OriginDestination
import xyz.ksharma.krail.trip.planner.ui.components.hexToComposeColor
import xyz.ksharma.krail.trip.planner.ui.components.loading.LoadingEmojiAnim
import xyz.ksharma.krail.trip.planner.ui.state.TransportMode
import xyz.ksharma.krail.trip.planner.ui.state.TransportModeLine
Expand All @@ -70,36 +64,14 @@ fun TimeTableScreen(
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
) {
val themeColorHex by LocalThemeColor.current
val themeContentColorHex by LocalThemeContentColor.current
val themeColor by remember { mutableStateOf(themeColorHex.hexToComposeColor()) }
val themeContentColor by remember { mutableStateOf(themeContentColorHex.hexToComposeColor()) }
val darkIcons = shouldUseDarkIcons(themeColor)
/*DisposableEffect(darkIcons) {
context.getActivityOrNull()?.let { activity ->
(activity as ComponentActivity).enableEdgeToEdge(
statusBarStyle = SystemBarStyle.auto(
android.graphics.Color.TRANSPARENT,
android.graphics.Color.TRANSPARENT,
) { darkIcons },
navigationBarStyle = SystemBarStyle.auto(
lightScrim = themeContentColor.toArgb(),
darkScrim = themeContentColor.toArgb(),
),
)
}
onDispose {}
}*///TODO - Fix status bar colors

Column(
modifier = modifier
.fillMaxSize()
.background(color = KrailTheme.colors.surface),
) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(color = themeColor),
.fillMaxWidth(),
) {
TitleBar(
navAction = {
Expand All @@ -110,15 +82,15 @@ fun TimeTableScreen(
Image(
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = null,
colorFilter = ColorFilter.tint(themeContentColor),
colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface),
modifier = Modifier.size(24.dp),
)
}
},
title = {
Text(
text = "TimeTable",
color = themeContentColor,
color = KrailTheme.colors.onSurface,
)
},
actions = {
Expand All @@ -131,7 +103,7 @@ fun TimeTableScreen(
Image(
painter = painterResource(Res.drawable.ic_reverse),
contentDescription = null,
colorFilter = ColorFilter.tint(themeContentColor),
colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface),
modifier = Modifier.size(24.dp),
)
}
Expand All @@ -150,7 +122,7 @@ fun TimeTableScreen(
painterResource(Res.drawable.ic_star)
},
contentDescription = null,
colorFilter = ColorFilter.tint(themeContentColor),
colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface),
modifier = Modifier.size(24.dp),
)
}
Expand All @@ -163,10 +135,11 @@ fun TimeTableScreen(
timeTableState.trip?.let { trip ->
OriginDestination(
trip = trip,
themeContentColor = themeContentColor,
timeLineColor = KrailTheme.colors.onSurface,
modifier = Modifier
.fillMaxWidth()
.background(color = themeColor),
.padding(horizontal = 16.dp, vertical = 8.dp)
.background(color = KrailTheme.colors.surface),
)
}
}
Expand Down

0 comments on commit 0192764

Please sign in to comment.