From cdcc268e473149b8c60c5fdac506274e51335b72 Mon Sep 17 00:00:00 2001 From: Henrik Klev Date: Tue, 17 Sep 2024 10:36:12 +0200 Subject: [PATCH] Added back-button --- .../main/java/com/pax/ecr/app/MainActivity.kt | 9 +++-- .../ecr/app/ui/screen/ModeSelectorScreen.kt | 18 ++++++++++ .../ui/screen/restaurant/RestaurantScreen.kt | 28 +++++++++++++-- .../app/ui/screen/retail/RetailerScreen.kt | 36 +++++++++++++++++-- 4 files changed, 84 insertions(+), 7 deletions(-) diff --git a/app/src/main/java/com/pax/ecr/app/MainActivity.kt b/app/src/main/java/com/pax/ecr/app/MainActivity.kt index ceb1bd8..a8319ee 100644 --- a/app/src/main/java/com/pax/ecr/app/MainActivity.kt +++ b/app/src/main/java/com/pax/ecr/app/MainActivity.kt @@ -88,11 +88,11 @@ class MainActivity : ComponentActivity() { ) Mode.RESTAURANT -> - RestaurantScreen { + RestaurantScreen(onBack = ::handleModeBack) { sendMessageIntent(payment(it)) } Mode.RETAIL -> - RetailerScreen { + RetailerScreen(onBack = ::handleModeBack) { sendMessageIntent(payment(it)) } null -> @@ -104,6 +104,11 @@ class MainActivity : ComponentActivity() { } } + private fun handleModeBack() { + selectedMode = null + hideNavBar() + } + private fun handleModeSelected(mode: Mode) { handleAction(Action.LOGIN) selectedMode = mode diff --git a/app/src/main/java/com/pax/ecr/app/ui/screen/ModeSelectorScreen.kt b/app/src/main/java/com/pax/ecr/app/ui/screen/ModeSelectorScreen.kt index 9cdce11..bec50bb 100644 --- a/app/src/main/java/com/pax/ecr/app/ui/screen/ModeSelectorScreen.kt +++ b/app/src/main/java/com/pax/ecr/app/ui/screen/ModeSelectorScreen.kt @@ -6,7 +6,9 @@ import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -34,11 +36,17 @@ fun ModeSelectorScreen( image = R.drawable.pizza, modifier = Modifier.fillMaxWidth().weight(1f), ) { modeSelector(Mode.RESTAURANT) } + + ButtonSpacer() + ModeButton( label = "Retail", image = R.drawable.retail, modifier = Modifier.fillMaxWidth().weight(1f), ) { modeSelector(Mode.RETAIL) } + + ButtonSpacer() + ModeButton( label = "Payment Application", image = R.drawable.pax, @@ -47,6 +55,16 @@ fun ModeSelectorScreen( } } +@Composable +private fun ButtonSpacer() = + Spacer( + modifier = + Modifier + .height(4.dp) + .fillMaxWidth() + .background(Color.Black), + ) + @Composable private fun ModeButton( label: String, diff --git a/app/src/main/java/com/pax/ecr/app/ui/screen/restaurant/RestaurantScreen.kt b/app/src/main/java/com/pax/ecr/app/ui/screen/restaurant/RestaurantScreen.kt index 223f5b9..09a5127 100644 --- a/app/src/main/java/com/pax/ecr/app/ui/screen/restaurant/RestaurantScreen.kt +++ b/app/src/main/java/com/pax/ecr/app/ui/screen/restaurant/RestaurantScreen.kt @@ -13,12 +13,17 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width 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.material.icons.Icons +import androidx.compose.material.icons.automirrored.outlined.ArrowBack import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableIntState @@ -56,12 +61,13 @@ private var selected by mutableIntStateOf(0) @Composable fun RestaurantScreen( + onBack: () -> Unit, modifier: Modifier = Modifier, onCheckout: (BigDecimal) -> Unit, ) { Box(modifier = modifier.fillMaxSize().background(Color.DarkGray)) { Column(modifier = Modifier.align(Alignment.TopCenter)) { - Banner() + Banner(onBack) Spacer(Modifier.height(30.dp)) ItemList() } @@ -80,7 +86,7 @@ private data class FoodItem( ) @Composable -private fun Banner() { +private fun Banner(onBack: () -> Unit) { Box(modifier = Modifier.fillMaxWidth().height(270.dp)) { Image( painter = painterResource(R.drawable.pizza), @@ -88,6 +94,22 @@ private fun Banner() { contentScale = ContentScale.FillWidth, modifier = Modifier.align(Alignment.TopCenter).height(175.dp), ) + Box( + modifier = + Modifier.align(Alignment.TopStart).padding(start = 10.dp, top = 10.dp).size(40.dp) + .clip(CircleShape) + .background(Color(114, 157, 225)), + contentAlignment = Alignment.Center, + ) { + IconButton( + onClick = onBack, + ) { + Icon( + imageVector = Icons.AutoMirrored.Outlined.ArrowBack, + contentDescription = "Back", + ) + } + } Box( modifier = Modifier.width(100.dp).height(160.dp).padding(bottom = 30.dp) @@ -197,7 +219,7 @@ private fun Checkout(onPaymentSelect: (BigDecimal) -> Unit) { modifier = Modifier.clip(CircleShape).background( Color.DarkGray, - ).width(35.dp).height(35.dp), + ).size(35.dp), ) { Text(selected.toString(), color = Color(114, 157, 225)) } diff --git a/app/src/main/java/com/pax/ecr/app/ui/screen/retail/RetailerScreen.kt b/app/src/main/java/com/pax/ecr/app/ui/screen/retail/RetailerScreen.kt index b47ea54..82c6578 100644 --- a/app/src/main/java/com/pax/ecr/app/ui/screen/retail/RetailerScreen.kt +++ b/app/src/main/java/com/pax/ecr/app/ui/screen/retail/RetailerScreen.kt @@ -18,6 +18,10 @@ import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.items import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.automirrored.outlined.ArrowBack +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableIntState @@ -63,11 +67,13 @@ private data class Product( @Composable fun RetailerScreen( + onBack: () -> Unit, modifier: Modifier = Modifier, onCheckout: (BigDecimal) -> Unit, ) { Box(modifier = modifier.fillMaxSize().background(Color.White)) { - Column(modifier = Modifier.align(Alignment.TopCenter)) { + Header(onBack) + Column(modifier = Modifier.align(Alignment.TopCenter).padding(top = 60.dp)) { ItemList() } Box(modifier = Modifier.align(Alignment.BottomCenter)) { @@ -100,7 +106,7 @@ private fun ItemList() { contentScale = ContentScale.FillHeight, ) Row { - if (it.amountSelected.intValue > 0) Text("${it.amountSelected}x ", fontSize = 16.sp) + if (it.amountSelected.intValue > 0) Text("${it.amountSelected.intValue}x ", fontSize = 16.sp) Text(it.title, maxLines = 1, overflow = TextOverflow.Ellipsis, fontSize = 16.sp, fontWeight = FontWeight.Medium) } Text(it.description, maxLines = 1, overflow = TextOverflow.Ellipsis) @@ -158,3 +164,29 @@ private fun Checkout(onCheckout: (BigDecimal) -> Unit) { Text(formatAmountInNOK(price), modifier = Modifier.padding(10.dp)) } } + +@Composable +private fun Header( + onBack: () -> Unit, + modifier: Modifier = Modifier, +) { + Box( + modifier = modifier.fillMaxWidth().height(60.dp), + ) { + IconButton( + onClick = onBack, + modifier = Modifier.align(Alignment.CenterStart), + ) { + Icon( + imageVector = Icons.AutoMirrored.Outlined.ArrowBack, + contentDescription = "Back", + ) + } + Text( + text = "PayEx Wear & Gear", + modifier = Modifier.align(Alignment.Center), + fontSize = 22.sp, + fontWeight = FontWeight.Medium, + ) + } +}