From b7a9bfd47fbc3af0a66a2697a4c16c3ef3e5bcef Mon Sep 17 00:00:00 2001 From: Giovanni Junseo Kim Date: Sat, 16 Mar 2024 14:28:49 +0900 Subject: [PATCH] Common dialog (#7) * chore: change naming * chore: add icon resource * feat: implement CommonDialogWithXIcon --- .../univ/earthbreaker/namu/MainActivity.kt | 6 +- .../namu/compose/CommonDialogWithXIcon.kt | 85 +++++++++++++++++++ .../univ/earthbreaker/namu/ui/theme/Theme.kt | 41 +++++---- app/src/main/res/drawable/ic_x.xml | 9 ++ 4 files changed, 116 insertions(+), 25 deletions(-) create mode 100644 app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt create mode 100644 app/src/main/res/drawable/ic_x.xml diff --git a/app/src/main/java/univ/earthbreaker/namu/MainActivity.kt b/app/src/main/java/univ/earthbreaker/namu/MainActivity.kt index 7a1ffab..9445ce5 100644 --- 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 new file mode 100644 index 0000000..8052114 --- /dev/null +++ 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 index 4c5b3e6..d6c5caf 100644 --- 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 new file mode 100644 index 0000000..a4ad56d --- /dev/null +++ b/app/src/main/res/drawable/ic_x.xml @@ -0,0 +1,9 @@ + + +