Common dialog (#7)

* chore: change naming * chore: add icon resource * feat: implement CommonDialogWithXIcon
Earth-Breakers · Mar 16, 2024 · b7a9bfd · b7a9bfd
1 parent b874944
commit b7a9bfd
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 25 deletions.
diff --git a/app/src/main/java/univ/earthbreaker/namu/MainActivity.kt b/app/src/main/java/univ/earthbreaker/namu/MainActivity.kt
@@ -10,13 +10,13 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import univ.earthbreaker.namu.ui.theme.GrowTreeTheme
+import univ.earthbreaker.namu.ui.theme.GTTheme
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            GrowTreeTheme {
+            GTTheme {
                 // A surface container using the 'background' color from the theme
                 Surface(
                     modifier = Modifier.fillMaxSize(),
@@ -43,7 +43,7 @@ fun Greeting(
 @Preview(showBackground = true)
 @Composable
 fun GreetingPreview() {
-    GrowTreeTheme {
+    GTTheme {
         Greeting("Android")
     }
 }
diff --git a/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt b/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt
@@ -0,0 +1,85 @@
+package univ.earthbreaker.namu.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import univ.earthbreaker.namu.R
+import univ.earthbreaker.namu.ui.theme.GTTheme
+
+@Composable
+fun CommonDialogWithXIcon(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+    dismiss: () -> Unit,
+) {
+    Dialog(onDismissRequest = (dismiss)) {
+        Column(
+            modifier = modifier
+                .background(color = Color.Transparent)
+                .fillMaxWidth(0.89f),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Box(
+                modifier = Modifier
+                    .clip(shape = RoundedCornerShape(15.dp))
+                    .background(GTTheme.colors.white)
+                    .fillMaxWidth(),
+                contentAlignment = Alignment.Center,
+            ) {
+                content()
+            }
+
+            Spacer(Modifier.height(23.dp))
+            IconButton(
+                modifier = Modifier
+                    .size(size = 64.dp)
+                    .clip(shape = RoundedCornerShape(100.dp))
+                    .background(GTTheme.colors.white),
+                onClick = dismiss,
+            ) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_x),
+                    contentDescription = null,
+                    tint = GTTheme.colors.gray5,
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun CommonDialogWithXIconPreview() {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+    ) {
+        CommonDialogWithXIcon(
+            content = {
+                Column {
+                    repeat(15) {
+                        Text(text = "Hello World!", style = GTTheme.typography.titleSemiBold20)
+                    }
+                }
+            },
+            dismiss = {},
+        )
+    }
+}
diff --git a/app/src/main/java/univ/earthbreaker/namu/ui/theme/Theme.kt b/app/src/main/java/univ/earthbreaker/namu/ui/theme/Theme.kt
@@ -15,18 +15,16 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.WindowCompat
 
-private val DarkColorScheme =
-    darkColorScheme(
-        primary = Purple80,
-        secondary = PurpleGrey80,
-        tertiary = Pink80,
-    )
+private val DarkColorScheme = darkColorScheme(
+    primary = Purple80,
+    secondary = PurpleGrey80,
+    tertiary = Pink80,
+)
 
-private val LightColorScheme =
-    lightColorScheme(
-        primary = Purple40,
-        secondary = PurpleGrey40,
-        tertiary = Pink40,
+private val LightColorScheme = lightColorScheme(
+    primary = Purple40,
+    secondary = PurpleGrey40,
+    tertiary = Pink40,
     /* Other default colors to override
     background = Color(0xFFFFFBFE),
     surface = Color(0xFFFFFBFE),
@@ -36,25 +34,24 @@ private val LightColorScheme =
     onBackground = Color(0xFF1C1B1F),
     onSurface = Color(0xFF1C1B1F),
      */
-    )
+)
 
 @Composable
-fun GrowTreeTheme(
+fun GTTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     // Dynamic color is available on Android 12+
     dynamicColor: Boolean = true,
     content: @Composable () -> Unit,
 ) {
-    val colorScheme =
-        when {
-            dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
-                val context = LocalContext.current
-                if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
-            }
-
-            darkTheme -> DarkColorScheme
-            else -> LightColorScheme
+    val colorScheme = when {
+        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
+            val context = LocalContext.current
+            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
         }
+
+        darkTheme -> DarkColorScheme
+        else -> LightColorScheme
+    }
     val view = LocalView.current
     if (!view.isInEditMode) {
         SideEffect {

diff --git a/app/src/main/res/drawable/ic_x.xml b/app/src/main/res/drawable/ic_x.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="30dp"
+    android:height="30dp"
+    android:viewportWidth="30"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M22.875,7.138C22.759,7.022 22.622,6.93 22.471,6.867C22.319,6.804 22.157,6.772 21.993,6.772C21.83,6.772 21.668,6.804 21.517,6.867C21.365,6.93 21.228,7.022 21.112,7.138L15,13.238L8.887,7.125C8.772,7.009 8.634,6.918 8.483,6.855C8.332,6.792 8.17,6.76 8.006,6.76C7.842,6.76 7.68,6.792 7.529,6.855C7.378,6.918 7.241,7.009 7.125,7.125C7.009,7.241 6.917,7.378 6.855,7.529C6.792,7.681 6.76,7.843 6.76,8.006C6.76,8.17 6.792,8.332 6.855,8.483C6.917,8.634 7.009,8.772 7.125,8.888L13.237,15L7.125,21.112C7.009,21.228 6.917,21.366 6.855,21.517C6.792,21.668 6.76,21.83 6.76,21.994C6.76,22.157 6.792,22.319 6.855,22.471C6.917,22.622 7.009,22.759 7.125,22.875C7.241,22.991 7.378,23.083 7.529,23.145C7.68,23.208 7.842,23.24 8.006,23.24C8.17,23.24 8.332,23.208 8.483,23.145C8.634,23.083 8.772,22.991 8.887,22.875L15,16.763L21.112,22.875C21.228,22.991 21.365,23.083 21.517,23.145C21.668,23.208 21.83,23.24 21.993,23.24C22.157,23.24 22.319,23.208 22.471,23.145C22.622,23.083 22.759,22.991 22.875,22.875C22.99,22.759 23.082,22.622 23.145,22.471C23.208,22.319 23.24,22.157 23.24,21.994C23.24,21.83 23.208,21.668 23.145,21.517C23.082,21.366 22.99,21.228 22.875,21.112L16.762,15L22.875,8.888C23.35,8.413 23.35,7.613 22.875,7.138Z"
+      android:fillColor="#888F9D"/>
+</vector>