Show data submission modal dialog inline (#2811)

* updated the ui for full screen * added landscape ui * svg fixed
google · Nov 10, 2024 · 5f7c649 · 5f7c649
1 parent d704635
commit 5f7c649
Show file tree

Hide file tree

Showing 2 changed files with 1,111 additions and 702 deletions.
diff --git a/...main/java/com/google/android/ground/ui/datacollection/DataSubmissionConfirmationDialog.kt b/...main/java/com/google/android/ground/ui/datacollection/DataSubmissionConfirmationDialog.kt
@@ -18,19 +18,18 @@ package com.google.android.ground.ui.datacollection
 import android.content.res.Configuration
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+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.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentWidth
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -41,48 +40,48 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import androidx.compose.ui.window.Dialog
-import androidx.compose.ui.window.DialogProperties
 import com.google.android.ground.R
 import com.google.android.ground.ui.theme.AppTheme
 
 @Composable
 fun DataSubmissionConfirmationDialog(onDismiss: () -> Unit) {
-  Dialog(
-    onDismissRequest = onDismiss,
-    properties = DialogProperties(dismissOnBackPress = true, dismissOnClickOutside = true),
-  ) {
-    Surface(
-      modifier = Modifier.wrapContentWidth().wrapContentHeight(),
-      shape = RoundedCornerShape(16.dp),
-      tonalElevation = 8.dp,
+  val configuration = LocalConfiguration.current
+  if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+    Row(
+      modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background),
+      verticalAlignment = Alignment.CenterVertically,
+      horizontalArrangement = Arrangement.Center,
     ) {
-      val configuration = LocalConfiguration.current
-      if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
-        Column {
-          Row(verticalAlignment = Alignment.CenterVertically) {
-            DataCollectionThumbnail(modifier = Modifier.weight(1f))
-            Column(
-              modifier = Modifier.padding(start = 16.dp, end = 24.dp, top = 16.dp).weight(2f),
-              verticalArrangement = Arrangement.Center,
-            ) {
-              DetailColumn()
-            }
-          }
-          CloseButton(modifier = Modifier.padding(bottom = 24.dp, end = 24.dp), onDismiss)
-        }
-      } else {
-        Column(modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)) {
-          DataCollectionThumbnail()
-          DetailColumn()
-          Spacer(modifier = Modifier.height(12.dp))
-          CloseButton(onDismiss = onDismiss)
-        }
+      Column(
+        modifier = Modifier.weight(1f).wrapContentWidth(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally,
+      ) {
+        DataCollectionThumbnail(modifier = Modifier.weight(0.8f))
+      }
+      Column(
+        modifier = Modifier.fillMaxSize().weight(1f),
+        verticalArrangement = Arrangement.Center,
+      ) {
+        DetailColumn()
+        Spacer(modifier = Modifier.height(24.dp))
+        CloseButton(modifier = Modifier.align(Alignment.CenterHorizontally), onDismiss = onDismiss)
       }
     }
+  } else {
+    Column(modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
+      Spacer(modifier = Modifier.height(150.dp))
+      DataCollectionThumbnail(modifier = Modifier.padding(horizontal = 8.dp))
+      Spacer(modifier = Modifier.height(100.dp))
+      DetailColumn()
+      Spacer(modifier = Modifier.height(32.dp))
+      CloseButton(modifier = Modifier.align(Alignment.CenterHorizontally), onDismiss = onDismiss)
+    }
   }
 }
 
@@ -97,32 +96,40 @@ private fun DataCollectionThumbnail(modifier: Modifier = Modifier) {
 }
 
 @Composable
-private fun ColumnScope.DetailColumn() {
-  Text(
-    text = stringResource(R.string.data_collection_complete),
-    style = MaterialTheme.typography.titleLarge,
-    color = MaterialTheme.colorScheme.onBackground,
-    lineHeight = 28.sp,
-  )
-  Spacer(modifier = Modifier.height(8.dp))
-  Text(
-    text = stringResource(R.string.data_collection_complete_details),
-    fontSize = 16.sp,
-    lineHeight = 24.sp,
-    color = MaterialTheme.colorScheme.onSurfaceVariant,
-    fontFamily = FontFamily(Font(R.font.text_500)),
-  )
+private fun DetailColumn() {
+  Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+    Text(
+      text = stringResource(R.string.data_collection_complete),
+      color = MaterialTheme.colorScheme.onSurface,
+      fontFamily = FontFamily(Font(R.font.text_500)),
+      lineHeight = 28.sp,
+      fontSize = 22.sp,
+      fontWeight = FontWeight(400),
+    )
+    Spacer(modifier = Modifier.height(8.dp))
+    Text(
+      modifier = Modifier.padding(horizontal = 28.dp),
+      text = stringResource(R.string.data_collection_complete_details),
+      fontSize = 14.sp,
+      lineHeight = 20.sp,
+      fontWeight = FontWeight(400),
+      color = MaterialTheme.colorScheme.onSurface,
+      fontFamily = FontFamily(Font(R.font.text_500)),
+      textAlign = TextAlign.Center,
+    )
+  }
 }
 
 @Composable
-private fun ColumnScope.CloseButton(modifier: Modifier = Modifier, onDismiss: () -> Unit) {
+private fun CloseButton(modifier: Modifier = Modifier, onDismiss: () -> Unit) {
   OutlinedButton(
-    modifier = modifier.align(Alignment.End),
+    modifier = modifier,
     border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.outline),
     onClick = { onDismiss() },
   ) {
     Text(
-      stringResource(id = R.string.close),
+      modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp),
+      text = stringResource(id = R.string.close),
       fontSize = 14.sp,
       lineHeight = 20.sp,
       fontFamily = FontFamily(Font(R.font.text_500)),
@@ -131,7 +138,7 @@ private fun ColumnScope.CloseButton(modifier: Modifier = Modifier, onDismiss: ()
 }
 
 @Composable
-@Preview(showBackground = false, heightDp = 360, widthDp = 800)
+@Preview(heightDp = 320, widthDp = 800)
 @Preview
 fun DataSubmissionConfirmationDialogPreview() {
   AppTheme { DataSubmissionConfirmationDialog {} }