Skip to content

Commit

Permalink
fix: Improve discoverability with talkback of the add button in route…
Browse files Browse the repository at this point in the history
… screen
  • Loading branch information
FannyDemey committed Nov 1, 2024
1 parent 4992396 commit 1cf8b94
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 106 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import org.scottishtecharmy.soundscape.screens.home.home.Home
import org.scottishtecharmy.soundscape.screens.home.locationDetails.LocationDescription
import org.scottishtecharmy.soundscape.screens.home.locationDetails.LocationDetailsScreen
import org.scottishtecharmy.soundscape.screens.home.settings.Settings
import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.MarkersAndRoutesNavGraph
import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.ScreensForMarkersAndRoutes
import org.scottishtecharmy.soundscape.screens.markers_routes.screens.MarkersAndRoutesScreen
import org.scottishtecharmy.soundscape.screens.markers_routes.screens.addroute.AddRouteScreen
import org.scottishtecharmy.soundscape.viewmodels.HomeViewModel
Expand Down Expand Up @@ -119,14 +117,6 @@ fun HomeScreen(
val selectedTab = backStackEntry.arguments?.getString("tab")
MarkersAndRoutesScreen(mainNavController = navController, selectedTab = selectedTab)
}

// Nested graph: Routes and Markers
composable(ScreensForMarkersAndRoutes.Markers.route) {
MarkersAndRoutesNavGraph(
navController = navController,
startDestination = "Markers",
)
}
}

// AddRouteScreen, accessible within the MarkersAndRoutesScreen
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
package org.scottishtecharmy.soundscape.screens.markers_routes.components

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.IntrinsicSize
Expand All @@ -13,10 +8,6 @@ import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
Expand All @@ -36,8 +27,6 @@ import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme
@Composable
fun CustomAppBar(title : String,
onNavigateUp: () -> Unit,
onAddClicked: (() -> Unit)? = null,
showAddIcon: Boolean = false,
navigationButtonTitle: String = stringResource(R.string.ui_back_button_title),
) {
Surface(
Expand Down Expand Up @@ -67,25 +56,6 @@ fun CustomAppBar(title : String,
modifier = Modifier.semantics { heading() }
)
}


AnimatedVisibility(
visible = showAddIcon,
enter = fadeIn() + expandHorizontally(),
exit = fadeOut() + shrinkHorizontally(),
modifier = Modifier.fillMaxHeight()
) {
IconButton(
onClick = {
onAddClicked?.invoke()
}
){
Icon(
Icons.Default.Add,
contentDescription = stringResource(R.string.general_alert_add),
)
}
}
}
}
}
Expand All @@ -98,9 +68,7 @@ fun CustomAppBarPreview() {
CustomAppBar(
"Test app bar with long title",
navigationButtonTitle = "Back",
showAddIcon = false,
onNavigateUp = {},
onAddClicked = {}
)
}
}
Expand All @@ -113,9 +81,7 @@ fun CustomAppBarWithActionButtonPreview() {
CustomAppBar(
"Test app bar",
navigationButtonTitle = "Back",
showAddIcon = true,
onNavigateUp = {},
onAddClicked = {}
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,15 @@ import androidx.compose.ui.tooling.preview.Preview
import org.scottishtecharmy.soundscape.R
import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MarkersAndRoutesAppBar(showAddIcon: Boolean,
onNavigateUp: () -> Unit,
onNavigateToDestination: () -> Unit
fun MarkersAndRoutesAppBar(
onNavigateUp: () -> Unit,
) {

CustomAppBar(
title = stringResource(R.string.search_view_markers),
navigationButtonTitle = stringResource(R.string.ui_back_button_title),
onNavigateUp = onNavigateUp,
showAddIcon = showAddIcon,
onAddClicked = onNavigateToDestination,
)
}

Expand All @@ -28,10 +24,7 @@ fun MarkersAndRoutesAppBar(showAddIcon: Boolean,
fun MarkersAndRoutesAppBarPreview() {
SoundscapeTheme {
MarkersAndRoutesAppBar(
showAddIcon = true,
onNavigateUp = {},
onNavigateToDestination = {}

)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ val items = listOf(
)

@Composable
fun BottomNavigationBar(navController: NavController,
fun MarkersAndRoutesTabs(navController: NavController,
) {
val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route

Expand Down Expand Up @@ -75,7 +75,7 @@ fun BottomNavigationBar(navController: NavController,
fun BottomNavigationBarPreview() {
val navController = rememberNavController()
MaterialTheme {
BottomNavigationBar(navController = navController,
MarkersAndRoutesTabs(navController = navController,
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import org.scottishtecharmy.soundscape.screens.markers_routes.screens.addroute.A
@Composable
fun MarkersAndRoutesNavGraph(
navController: NavHostController,
onNavigateToAddRoute: () -> Unit,
startDestination: String) {
NavHost(
navController = navController,
Expand All @@ -21,7 +22,10 @@ fun MarkersAndRoutesNavGraph(
MarkersScreen(navController = navController)
}
composable(ScreensForMarkersAndRoutes.Routes.route) {
RoutesScreen(navController = navController)
RoutesScreen(
navController = navController,
onNavigateToAddRoute = onNavigateToAddRoute
)
}

// AddRouteScreen, accessible within the MarkersAndRoutesScreen
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package org.scottishtecharmy.soundscape.screens.markers_routes.screens

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
Expand All @@ -10,14 +11,17 @@ import androidx.navigation.NavController
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import org.scottishtecharmy.soundscape.screens.home.HomeRoutes
import org.scottishtecharmy.soundscape.screens.markers_routes.components.BottomNavigationBar
import org.scottishtecharmy.soundscape.screens.markers_routes.components.MarkersAndRoutesTabs
import org.scottishtecharmy.soundscape.screens.markers_routes.components.MarkersAndRoutesAppBar
import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.MarkersAndRoutesNavGraph
import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.ScreensForMarkersAndRoutes
import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme

@Composable
fun MarkersAndRoutesScreen(mainNavController: NavController, selectedTab: String?) {
fun MarkersAndRoutesScreen(
mainNavController: NavController,
selectedTab: String?
) {
// Nested navController for the tab navigation inside MarkersAndRoutes
val nestedNavController = rememberNavController()

Expand All @@ -27,24 +31,22 @@ fun MarkersAndRoutesScreen(mainNavController: NavController, selectedTab: String

Scaffold(
topBar = {
MarkersAndRoutesAppBar(
showAddIcon = showAddIcon,
onNavigateUp = {
mainNavController.navigateUp()
},
onNavigateToDestination = {
mainNavController.navigate(HomeRoutes.AddRoute.route)
},
)
},
bottomBar = {
BottomNavigationBar(navController = nestedNavController)
}
Column {
MarkersAndRoutesAppBar(
onNavigateUp = {
mainNavController.navigateUp()
},
)
MarkersAndRoutesTabs(navController = nestedNavController)
}},
) { innerPadding ->
Box(modifier = Modifier.padding(innerPadding)) {
// MarkersAndRoutesNavGraph is now responsible for handling navigation
MarkersAndRoutesNavGraph(
navController = nestedNavController,
onNavigateToAddRoute = {
mainNavController.navigate(HomeRoutes.AddRoute.route)
},
startDestination = selectedTab ?: ScreensForMarkersAndRoutes.Markers.route
)
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
package org.scottishtecharmy.soundscape.screens.markers_routes.marker_route_screens

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.AddCircleOutline
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
Expand All @@ -27,45 +30,65 @@ import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme


@Composable
fun RoutesScreen(navController: NavController) {
fun RoutesScreen(
navController: NavController,
onNavigateToAddRoute: () -> Unit,
) {
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Box(modifier = Modifier.padding(top = 40.dp)) {
Image(
painter = painterResource(
id = R.drawable.routes_selected
),
contentDescription = null,
modifier = Modifier.size(80.dp)
)
}
Box(modifier = Modifier.padding(top = 10.dp)) {
Text(
stringResource(R.string.routes_no_routes_title),
style = MaterialTheme.typography.titleLarge,
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
)
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.semantics(mergeDescendants = true) {}
) {
Box(modifier = Modifier.padding(top = 40.dp)) {
Image(
painter = painterResource(
id = R.drawable.routes_selected
),
contentDescription = null,
modifier = Modifier.size(80.dp)
)
}
Box(modifier = Modifier.padding(top = 10.dp)) {
Text(
stringResource(R.string.routes_no_routes_title),
style = MaterialTheme.typography.titleLarge,
color = MaterialTheme.colorScheme.onBackground,
textAlign = TextAlign.Center,
)
}
Box(modifier = Modifier.padding(top = 10.dp)) {
Text(
stringResource(R.string.routes_no_routes_hint_1),
color = MaterialTheme.colorScheme.onBackground,
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
)
}
Box(modifier = Modifier.padding(top = 10.dp, bottom = 40.dp)) {
Text(
stringResource(R.string.routes_no_routes_hint_2),
color = MaterialTheme.colorScheme.onBackground,
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
)
}
}
Box(modifier = Modifier.padding(top = 10.dp)) {
Text(
stringResource(R.string.routes_no_routes_hint_1),
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
)
}
Box(modifier = Modifier.padding(top = 10.dp, bottom = 40.dp)) {
Text(
stringResource(R.string.routes_no_routes_hint_2),
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
IconButton(
onClick = {
onNavigateToAddRoute.invoke()
},
modifier = Modifier.size(90.dp)
){
Icon(
Icons.Rounded.AddCircleOutline,
tint = MaterialTheme.colorScheme.onBackground,
contentDescription = stringResource(R.string.general_alert_add),
modifier = Modifier.size(80.dp)
)
}
}
Expand All @@ -75,6 +98,9 @@ fun RoutesScreen(navController: NavController) {
@Composable
fun RoutesScreenPreview() {
SoundscapeTheme {
RoutesScreen(navController = rememberNavController())
RoutesScreen(
navController = rememberNavController(),
onNavigateToAddRoute = {}
)
}
}

0 comments on commit 1cf8b94

Please sign in to comment.