Added back-button

PayEx · Sep 17, 2024 · cdcc268 · cdcc268
1 parent 5abadc6
commit cdcc268
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 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
@@ -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
@@ -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
@@ -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,14 +86,30 @@ 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),
             contentDescription = "Restaurant banner image",
             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
@@ -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,
+        )
+    }
+}