From c7eabb687081f33d81395610bc20bed7a622b8cd Mon Sep 17 00:00:00 2001 From: Junhyeok Date: Fri, 31 Jan 2025 22:28:39 +0900 Subject: [PATCH] feat : redesign notification permission dialog --- .../core/designsystem/component/Dialog.kt | 119 +++++++----------- .../feature/dashboard/DashboardScreen.kt | 37 +++--- .../dashboard/component/DashboardEditMode.kt | 62 ++------- .../src/main/res/drawable/ic_alarm_64.xml | 14 +++ 4 files changed, 88 insertions(+), 144 deletions(-) create mode 100644 feature/dashboard/src/main/res/drawable/ic_alarm_64.xml diff --git a/core/designsystem/src/main/kotlin/com/chipichipi/dobedobe/core/designsystem/component/Dialog.kt b/core/designsystem/src/main/kotlin/com/chipichipi/dobedobe/core/designsystem/component/Dialog.kt index 0204061d..59617a51 100644 --- a/core/designsystem/src/main/kotlin/com/chipichipi/dobedobe/core/designsystem/component/Dialog.kt +++ b/core/designsystem/src/main/kotlin/com/chipichipi/dobedobe/core/designsystem/component/Dialog.kt @@ -5,6 +5,7 @@ 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.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Button @@ -23,55 +24,14 @@ import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme @Composable fun DobeDobeDialog( - onDismissRequest: () -> Unit, title: String, - modifier: Modifier = Modifier, - properties: DialogProperties = DialogProperties( - usePlatformDefaultWidth = false, - ), - content: @Composable () -> Unit, -) { - Dialog( - onDismissRequest = onDismissRequest, - properties = properties, - ) { - Surface( - modifier = modifier, - shape = RoundedCornerShape(16.dp), - color = DobeDobeTheme.colors.white, - ) { - Column( - modifier = Modifier - .padding(horizontal = 16.dp) - .padding(bottom = 16.dp), - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally, - ) { - Text( - text = title, - style = DobeDobeTheme.typography.heading2, - color = DobeDobeTheme.colors.gray900, - modifier = Modifier - .padding( - top = 24.dp, - bottom = 32.dp, - ), - ) - content() - } - } - } -} - -@Composable -fun DobeDobeDialog( - title: String, - primaryText: String, - secondaryText: String, - onClickPrimary: () -> Unit, - onClickSecondary: () -> Unit, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, + header: (@Composable () -> Unit)? = null, + primaryText: String? = null, + secondaryText: String? = null, + onClickPrimary: () -> Unit = {}, + onClickSecondary: () -> Unit = {}, description: String? = null, properties: DialogProperties = DialogProperties( usePlatformDefaultWidth = false, @@ -89,17 +49,23 @@ fun DobeDobeDialog( Column( modifier = Modifier .padding(horizontal = 16.dp) - .padding(bottom = 16.dp), + .padding( + top = 24.dp, + bottom = 16.dp, + ), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { + if (header != null) { + header() + Spacer(modifier = Modifier.height(16.dp)) + } + Text( text = title, style = DobeDobeTheme.typography.heading2, color = DobeDobeTheme.colors.black, textAlign = TextAlign.Center, - modifier = Modifier - .padding(top = 24.dp), ) if (description != null) { @@ -114,24 +80,29 @@ fun DobeDobeDialog( Spacer(modifier = Modifier.height(32.dp)) - DialogButton( - text = primaryText, - onClick = onClickPrimary, - colors = ButtonDefaults.buttonColors( - containerColor = DobeDobeTheme.colors.gray900, - contentColor = DobeDobeTheme.colors.white, - ), - modifier = Modifier.fillMaxWidth(), - ) - DialogButton( - text = secondaryText, - onClick = onClickSecondary, - colors = ButtonDefaults.buttonColors( - containerColor = DobeDobeTheme.colors.white, - contentColor = DobeDobeTheme.colors.red, - ), - modifier = Modifier.fillMaxWidth(), - ) + if (primaryText != null) { + DialogButton( + text = primaryText, + onClick = onClickPrimary, + colors = ButtonDefaults.buttonColors( + containerColor = DobeDobeTheme.colors.gray900, + contentColor = DobeDobeTheme.colors.white, + ), + modifier = Modifier.fillMaxWidth(), + ) + } + + if (secondaryText != null) { + DialogButton( + text = secondaryText, + onClick = onClickSecondary, + colors = ButtonDefaults.buttonColors( + containerColor = DobeDobeTheme.colors.white, + contentColor = DobeDobeTheme.colors.red, + ), + modifier = Modifier.fillMaxWidth(), + ) + } } } } @@ -148,9 +119,10 @@ private fun DialogButton( ), ) { Button( - modifier = modifier, + modifier = modifier + .heightIn(48.dp), onClick = onClick, - shape = RoundedCornerShape(12.dp), + shape = RoundedCornerShape(8.dp), colors = colors, ) { Text( @@ -168,13 +140,8 @@ private fun DobeDobeDialogPreview() { DobeDobeDialog( onDismissRequest = {}, title = "TEST", - ) { - Button( - onClick = {}, - ) { - Text(text = "TEST") - } - } + primaryText = "Confirm", + ) } } diff --git a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/DashboardScreen.kt b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/DashboardScreen.kt index 7dd1b4c4..bd9c3654 100644 --- a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/DashboardScreen.kt +++ b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/DashboardScreen.kt @@ -10,14 +10,13 @@ import androidx.compose.animation.core.tween import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.width -import androidx.compose.material3.Button import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Icon import androidx.compose.material3.SheetValue -import androidx.compose.material3.Text import androidx.compose.material3.rememberBottomSheetScaffoldState import androidx.compose.material3.rememberStandardBottomSheetState import androidx.compose.runtime.Composable @@ -28,6 +27,8 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.compose.ui.zIndex @@ -293,21 +294,23 @@ private fun GoalNotificationPermission( showGoalNotificationDialog = false }, title = stringResource(R.string.feature_dashboard_goal_notification_prompt), - modifier = Modifier.width(253.dp), - ) { - Button( - onClick = { - notificationsPermissionState.launchPermissionRequest() - showGoalNotificationDialog = false - }, - ) { - Text( - text = stringResource(R.string.feature_dashboard_goal_notification_confirm_text), - style = DobeDobeTheme.typography.heading2, - color = DobeDobeTheme.colors.white, + description = stringResource(R.string.feature_dashboard_goal_notification_description), + header = { + Icon( + painter = painterResource(R.drawable.ic_alarm_64), + contentDescription = "alarm icon", + tint = Color.Unspecified, ) - } - } + }, + primaryText = stringResource(R.string.feature_dashboard_goal_notification_confirm_text), + onClickPrimary = { + notificationsPermissionState.launchPermissionRequest() + showGoalNotificationDialog = false + }, + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 24.dp), + ) } } diff --git a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardEditMode.kt b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardEditMode.kt index 3d75847c..3c585f4f 100644 --- a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardEditMode.kt +++ b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardEditMode.kt @@ -13,11 +13,6 @@ 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.heightIn -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.Button -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -204,50 +199,15 @@ private fun DashboardEditOptionsDialog( DobeDobeDialog( onDismissRequest = onDismissRequest, title = stringResource(R.string.feature_dashboard_edit_change_image_title), - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 24.dp), - ) { - Button( - onClick = { - onPickPhoto() - onDismissRequest() - }, - shape = RoundedCornerShape(8.dp), - colors = ButtonDefaults.buttonColors( - containerColor = DobeDobeTheme.colors.gray900, - contentColor = DobeDobeTheme.colors.white, - ), - modifier = Modifier - .fillMaxWidth() - .heightIn(48.dp), - ) { - Text( - text = stringResource(R.string.feature_dashboard_edit_select_image_from_album), - style = DobeDobeTheme.typography.heading2, - color = DobeDobeTheme.colors.white, - ) - } - - Button( - onClick = { - onDeletePhoto() - onDismissRequest() - }, - shape = RoundedCornerShape(8.dp), - colors = ButtonDefaults.buttonColors( - containerColor = DobeDobeTheme.colors.white, - contentColor = DobeDobeTheme.colors.red, - ), - modifier = Modifier - .fillMaxWidth() - .heightIn(48.dp), - ) { - Text( - text = stringResource(R.string.feature_dashboard_edit_delete_image), - style = DobeDobeTheme.typography.heading2, - color = DobeDobeTheme.colors.red, - ) - } - } + primaryText = stringResource(R.string.feature_dashboard_edit_select_image_from_album), + secondaryText = stringResource(R.string.feature_dashboard_edit_delete_image), + onClickPrimary = { + onPickPhoto() + onDismissRequest() + }, + onClickSecondary = { + onDeletePhoto() + onDismissRequest() + }, + ) } diff --git a/feature/dashboard/src/main/res/drawable/ic_alarm_64.xml b/feature/dashboard/src/main/res/drawable/ic_alarm_64.xml new file mode 100644 index 00000000..360e1256 --- /dev/null +++ b/feature/dashboard/src/main/res/drawable/ic_alarm_64.xml @@ -0,0 +1,14 @@ + + + +