Update custom dialogs in the todo-lite example (#3671)

* Replace custom dialog

* Apply material background

examples/todoapp-lite/shared/src/androidMain/kotlin/example/todoapp/lite/common/Utils.kt

@@ -2,20 +2,8 @@
 
 package example.todoapp.lite.common
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.IntrinsicSize
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.material.Button
-import androidx.compose.material.Card
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.ProvideTextStyle
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -36,40 +24,3 @@ internal actual fun VerticalScrollbar(
     // no-op
 }
 
-@Composable
-internal actual fun Dialog(
-    title: String,
-    onCloseRequest: () -> Unit,
-    content: @Composable () -> Unit
-) {
-    androidx.compose.ui.window.Dialog(
-        onDismissRequest = onCloseRequest,
-    ) {
-        Card(elevation = 8.dp) {
-            Column(
-                modifier = Modifier
-                    .padding(8.dp)
-                    .height(IntrinsicSize.Min)
-            ) {
-                ProvideTextStyle(MaterialTheme.typography.subtitle1) {
-                    Text(text = title)
-                }
-
-                Spacer(modifier = Modifier.height(8.dp))
-
-                Box(modifier = Modifier.weight(1F)) {
-                    content()
-                }
-
-                Spacer(modifier = Modifier.height(8.dp))
-
-                Button(
-                    onClick = onCloseRequest,
-                    modifier = Modifier.align(Alignment.End)
-                ) {
-                    Text(text = "Done")
-                }
-            }
-        }
-    }
-}

examples/todoapp-lite/shared/src/commonMain/kotlin/example/todoapp/lite/common/EditDialog.kt

@@ -1,15 +1,26 @@
 package example.todoapp.lite.common
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+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.foundation.layout.sizeIn
+import androidx.compose.material.Button
+import androidx.compose.material.Card
 import androidx.compose.material.Checkbox
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.ProvideTextStyle
 import androidx.compose.material.Text
 import androidx.compose.material.TextField
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
 
 @Composable
 internal fun EditDialog(
@@ -18,8 +29,7 @@ internal fun EditDialog(
     onTextChanged: (String) -> Unit,
     onDoneChanged: (Boolean) -> Unit,
 ) {
-    Dialog(
-        title = "Edit todo",
+    EditDialog(
         onCloseRequest = onCloseClicked,
     ) {
         Column(horizontalAlignment = Alignment.CenterHorizontally) {
@@ -43,3 +53,40 @@ internal fun EditDialog(
         }
     }
 }
+
+@Composable
+private fun EditDialog(
+    onCloseRequest: () -> Unit,
+    content: @Composable () -> Unit
+) {
+    Dialog(
+        onDismissRequest = onCloseRequest,
+    ) {
+        Card(elevation = 8.dp) {
+            Column(
+                modifier = Modifier
+                    .padding(8.dp)
+                    .height(IntrinsicSize.Min)
+            ) {
+                ProvideTextStyle(MaterialTheme.typography.subtitle1) {
+                    Text(text = "Edit todo")
+                }
+
+                Spacer(modifier = Modifier.height(8.dp))
+
+                Box(modifier = Modifier.weight(1F)) {
+                    content()
+                }
+
+                Spacer(modifier = Modifier.height(8.dp))
+
+                Button(
+                    onClick = onCloseRequest,
+                    modifier = Modifier.align(Alignment.End)
+                ) {
+                    Text(text = "Done")
+                }
+            }
+        }
+    }
+}

examples/todoapp-lite/shared/src/commonMain/kotlin/example/todoapp/lite/common/RootContent.kt

@@ -1,5 +1,7 @@
 package example.todoapp.lite.common
 
+import androidx.compose.foundation.background
+import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -11,7 +13,7 @@ fun RootContent(modifier: Modifier = Modifier) {
     val state = model.state
 
     MainContent(
-        modifier = modifier,
+        modifier = modifier.background(MaterialTheme.colors.background),
         items = state.items,
         inputText = state.inputText,
         onItemClicked = model::onItemClicked,

examples/todoapp-lite/shared/src/commonMain/kotlin/example/todoapp/lite/common/Utils.kt

@@ -23,13 +23,6 @@ internal expect fun VerticalScrollbar(
     adapter: ScrollbarAdapter
 )
 
-@Composable
-internal expect fun Dialog(
-    title: String,
-    onCloseRequest: () -> Unit,
-    content: @Composable () -> Unit
-)
-
 internal fun Modifier.onKeyUp(key: Key, action: () -> Unit): Modifier =
     onKeyEvent { event ->
         if ((event.type == KeyEventType.KeyUp) && (event.key == key)) {

examples/todoapp-lite/shared/src/desktopMain/kotlin/example/todoapp/lite/common/Utils.kt

@@ -2,12 +2,8 @@
 
 package example.todoapp.lite.common
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -31,25 +27,3 @@ internal actual fun VerticalScrollbar(
         adapter = adapter
     )
 }
-
-@Composable
-internal actual fun Dialog(
-    title: String,
-    onCloseRequest: () -> Unit,
-    content: @Composable () -> Unit
-) {
-    androidx.compose.ui.window.Dialog(
-        onCloseRequest = onCloseRequest,
-        focusable = true,
-        title = title,
-    ) {
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(8.dp),
-            contentAlignment = Alignment.Center,
-        ) {
-            content()
-        }
-    }
-}

examples/todoapp-lite/shared/src/iosMain/kotlin/example/todoapp/lite/common/Utils.kt

@@ -1,16 +1,8 @@
 package example.todoapp.lite.common
 
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.material.*
-
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
@@ -29,50 +21,3 @@ internal actual fun VerticalScrollbar(
 ) {
     // no-op
 }
-
-@Composable
-internal actual fun Dialog(
-    title: String,
-    onCloseRequest: () -> Unit,
-    content: @Composable () -> Unit
-) {
-    Box(
-        Modifier
-            .fillMaxSize()
-            .background(Color.Black.copy(alpha = 0.4f))
-            .clickable {
-                onCloseRequest()
-            }
-    ) {
-        Box(
-            Modifier
-                .padding(30.dp)
-                .background(Color.White)
-                .align(Alignment.TopCenter)
-                .clickable(enabled = false){}
-        ) {
-            Column(
-                modifier = Modifier.padding(8.dp)
-            ) {
-                ProvideTextStyle(MaterialTheme.typography.subtitle1) {
-                    Text(text = title)
-                }
-
-                Spacer(modifier = Modifier.height(8.dp))
-
-                Box(modifier = Modifier.fillMaxHeight(0.5f)) {
-                    content()
-                }
-
-                Spacer(modifier = Modifier.height(8.dp))
-
-                Button(
-                    onClick = onCloseRequest,
-                    modifier = Modifier.align(Alignment.End)
-                ) {
-                    Text(text = "Done")
-                }
-            }
-        }
-    }
-}