Add reusable title bar navigation action button

ksharma-xyz · Jan 19, 2025 · d916a4c · d916a4c
1 parent bfe2f14
commit d916a4c
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 92 deletions.
diff --git a/...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/ServiceAlertScreen.kt b/...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/ServiceAlertScreen.kt
@@ -1,25 +1,20 @@
 package xyz.ksharma.krail.trip.planner.ui.alerts
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.unit.dp
 import kotlinx.collections.immutable.ImmutableSet
 import kotlinx.collections.immutable.persistentSetOf
@@ -28,7 +23,6 @@ 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.trip.planner.ui.state.alerts.ServiceAlert
-import xyz.ksharma.krail.trip.planner.ui.timetable.ActionButton
 
 @Composable
 fun ServiceAlertScreen(
@@ -46,19 +40,7 @@ fun ServiceAlertScreen(
     ) {
         Column(modifier = Modifier.fillMaxWidth()) {
             TitleBar(
-                navAction = {
-                    ActionButton(
-                        onClick = onBackClick,
-                        contentDescription = "Back",
-                    ) {
-                        Image(
-                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                            contentDescription = null,
-                            colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface),
-                            modifier = Modifier.size(24.dp),
-                        )
-                    }
-                },
+                onNavActionClick = onBackClick,
                 title = { Text(text = "Service Alerts") },
             )
         }

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
@@ -1,6 +1,5 @@
 package xyz.ksharma.krail.trip.planner.ui.datetimeselector
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -9,12 +8,9 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.rememberTimePickerState
 import androidx.compose.runtime.Composable
@@ -27,7 +23,6 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
@@ -51,7 +46,6 @@ import xyz.ksharma.krail.trip.planner.ui.components.hexToComposeColor
 import xyz.ksharma.krail.trip.planner.ui.components.themeContentColor
 import xyz.ksharma.krail.trip.planner.ui.state.datetimeselector.DateTimeSelectionItem
 import xyz.ksharma.krail.trip.planner.ui.state.datetimeselector.JourneyTimeOptions
-import xyz.ksharma.krail.trip.planner.ui.timetable.ActionButton
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -121,31 +115,21 @@ fun DateTimeSelectorScreen(
             .background(color = KrailTheme.colors.surface)
             .systemBarsPadding(),
     ) {
-        TitleBar(title = { Text(text = "Plan your trip") }, navAction = {
-            ActionButton(
-                onClick = onBackClick,
-                contentDescription = "Back",
-            ) {
-                Image(
-                    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                    contentDescription = null,
-                    colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface),
-                    modifier = Modifier.size(24.dp),
-                )
-            }
-        }, actions = {
-            SecondaryButton(text = "Reset",
-                onClick = {
-                    val now: LocalDateTime =
-                        Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
-                    selectedDateStr = now.date.toString()
-                    timePickerState.hour = now.time.hour
-                    timePickerState.minute = now.time.minute
-                    journeyTimeOption = JourneyTimeOptions.LEAVE
-                    reset = true
-                    onResetClick()
-                })
-        })
+        TitleBar(title = { Text(text = "Plan your trip") },
+            onNavActionClick = onBackClick,
+            actions = {
+                SecondaryButton(text = "Reset",
+                    onClick = {
+                        val now: LocalDateTime =
+                            Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
+                        selectedDateStr = now.date.toString()
+                        timePickerState.hour = now.time.hour
+                        timePickerState.minute = now.time.minute
+                        journeyTimeOption = JourneyTimeOptions.LEAVE
+                        reset = true
+                        onResetClick()
+                    })
+            })
 
         LazyColumn(
             contentPadding = PaddingValues(vertical = 16.dp),

diff --git a/...ner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/settings/SettingsScreen.kt b/...ner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/settings/SettingsScreen.kt
@@ -56,19 +56,7 @@ fun SettingsScreen(
         Column(modifier = Modifier.fillMaxWidth()) {
             TitleBar(
                 modifier = Modifier.fillMaxWidth(),
-                navAction = {
-                    ActionButton(
-                        onClick = onBackClick,
-                        contentDescription = "Back",
-                    ) {
-                        Image(
-                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                            contentDescription = null,
-                            colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface),
-                            modifier = Modifier.size(24.dp),
-                        )
-                    }
-                },
+                onNavActionClick = onBackClick,
                 title = { Text(text = "Settings") },
             )
         }

diff --git a/...ommonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/themeselection/ThemeSelectionScreen.kt b/...ommonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/themeselection/ThemeSelectionScreen.kt
@@ -92,19 +92,7 @@ fun ThemeSelectionScreen(
 
         Column {
             TitleBar(
-                navAction = {
-                    ActionButton(
-                        onClick = onBackClick,
-                        contentDescription = "Back",
-                    ) {
-                        Image(
-                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                            contentDescription = null,
-                            colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface),
-                            modifier = Modifier.size(24.dp),
-                        )
-                    }
-                },
+                onNavActionClick= onBackClick,
                 title = {},
                 modifier = Modifier.fillMaxWidth(),
             )

diff --git a/...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt b/...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt
@@ -87,19 +87,7 @@ fun TimeTableScreen(
             modifier = Modifier.fillMaxWidth(),
         ) {
             TitleBar(
-                navAction = {
-                    ActionButton(
-                        onClick = onBackClick,
-                        contentDescription = "Back",
-                    ) {
-                        Image(
-                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                            contentDescription = null,
-                            colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface),
-                            modifier = Modifier.size(24.dp),
-                        )
-                    }
-                },
+                onNavActionClick = onBackClick,
                 title = {
                     Row(
                         horizontalArrangement = Arrangement.spacedBy(12.dp),

diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/TitleBar.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/TitleBar.kt
@@ -1,15 +1,29 @@
 package xyz.ksharma.krail.taj.components
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 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
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import xyz.ksharma.krail.taj.LocalContentColor
 import xyz.ksharma.krail.taj.LocalTextColor
@@ -20,7 +34,7 @@ import xyz.ksharma.krail.taj.theme.KrailTheme
 fun TitleBar(
     title: @Composable () -> Unit,
     modifier: Modifier = Modifier,
-    navAction: @Composable (() -> Unit)? = null,
+    onNavActionClick: (() -> Unit)? = null,
     actions: @Composable (() -> Unit)? = null,
 ) {
     Row(
@@ -33,9 +47,10 @@ fun TitleBar(
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        navAction?.let {
-            navAction()
+        onNavActionClick?.let {
+            NavActionButton(onClick = onNavActionClick)
         }
+
         Row(
             modifier = Modifier
                 .weight(1f)
@@ -62,3 +77,30 @@ fun TitleBar(
         }
     }
 }
+
+@Composable
+private fun NavActionButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier.size(40.dp).clip(CircleShape)
+            .clickable(
+                role = Role.Button,
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null,
+                onClick = onClick,
+            )
+            .semantics(mergeDescendants = true) {
+                this.contentDescription = "Back"
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        Image(
+            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+            contentDescription = null,
+            colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface),
+            modifier = Modifier.size(24.dp),
+        )
+    }
+}