Skip to content

Commit

Permalink
feat : redesign notification permission dialog (#39)
Browse files Browse the repository at this point in the history
  • Loading branch information
nohjunh authored Jan 31, 2025
1 parent 6cfb634 commit ad18a21
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 144 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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) {
Expand All @@ -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(),
)
}
}
}
}
Expand All @@ -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(
Expand All @@ -168,13 +140,8 @@ private fun DobeDobeDialogPreview() {
DobeDobeDialog(
onDismissRequest = {},
title = "TEST",
) {
Button(
onClick = {},
) {
Text(text = "TEST")
}
}
primaryText = "Confirm",
)
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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),
)
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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()
},
)
}
14 changes: 14 additions & 0 deletions feature/dashboard/src/main/res/drawable/ic_alarm_64.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="64dp"
android:height="64dp"
android:viewportWidth="64"
android:viewportHeight="64">
<path
android:pathData="M12,0L52,0A12,12 0,0 1,64 12L64,52A12,12 0,0 1,52 64L12,64A12,12 0,0 1,0 52L0,12A12,12 0,0 1,12 0z"
android:fillColor="#00B35D"
android:fillAlpha="0.24"/>
<path
android:pathData="M20.669,26.667C20.669,20.776 25.444,16 31.335,16C37.226,16 42.002,20.776 42.002,26.667V35.556L43.341,39.573C43.557,40.22 43.075,40.889 42.392,40.889H20.278C19.596,40.889 19.114,40.22 19.329,39.573L20.669,35.556V26.667ZM27.564,46.438C26.564,45.438 26.002,44.081 26.002,42.667L31.335,42.667H36.668C36.668,44.081 36.107,45.438 35.106,46.438C34.106,47.438 32.75,48 31.335,48C29.921,48 28.564,47.438 27.564,46.438Z"
android:fillColor="#00B35D"
android:fillType="evenOdd"/>
</vector>

0 comments on commit ad18a21

Please sign in to comment.