From 3ac87c3eaa006e0ab75f9eca8c8bff2859f52497 Mon Sep 17 00:00:00 2001 From: Suhas Dissanayake Date: Tue, 16 Apr 2024 15:32:03 +0530 Subject: [PATCH] style: Alarm screen UX improvements --- .../presentation/screens/alarm/AlarmScreen.kt | 58 +--------- .../components/{AlarmRow.kt => AlarmCard.kt} | 4 +- .../screens/alarm/components/AlarmItem.kt | 106 ++++++++++++++++++ 3 files changed, 109 insertions(+), 59 deletions(-) rename app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/{AlarmRow.kt => AlarmCard.kt} (97%) create mode 100644 app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmItem.kt diff --git a/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/AlarmScreen.kt b/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/AlarmScreen.kt index ff50ca05..a072ce96 100644 --- a/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/AlarmScreen.kt +++ b/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/AlarmScreen.kt @@ -12,14 +12,9 @@ import androidx.compose.foundation.lazy.items import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Create import androidx.compose.material.icons.filled.FilterAlt -import androidx.compose.material3.AlertDialog import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.FloatingActionButton import androidx.compose.material3.Icon -import androidx.compose.material3.SwipeToDismissBox -import androidx.compose.material3.SwipeToDismissBoxValue -import androidx.compose.material3.Text -import androidx.compose.material3.rememberSwipeToDismissBoxState import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.collectAsState @@ -38,9 +33,8 @@ import com.bnyro.clock.domain.model.Alarm import com.bnyro.clock.navigation.TopBarScaffold import com.bnyro.clock.presentation.components.BlobIconBox import com.bnyro.clock.presentation.components.ClickableIcon -import com.bnyro.clock.presentation.components.DialogButton import com.bnyro.clock.presentation.screens.alarm.components.AlarmFilterSection -import com.bnyro.clock.presentation.screens.alarm.components.AlarmRow +import com.bnyro.clock.presentation.screens.alarm.components.AlarmItem import com.bnyro.clock.presentation.screens.alarm.components.AlarmSettingsSheet import com.bnyro.clock.presentation.screens.alarm.components.TimePickerDialog import com.bnyro.clock.presentation.screens.alarm.model.AlarmModel @@ -112,55 +106,7 @@ fun AlarmScreen( } items(items = alarms, key = { it.id }) { - var showDeletionDialog by remember { - mutableStateOf(false) - } - - val dismissState = rememberSwipeToDismissBoxState( - confirmValueChange = { dismissValue -> - when (dismissValue) { - SwipeToDismissBoxValue.StartToEnd -> { - showDeletionDialog = true - } - - else -> {} - } - false - } - ) - SwipeToDismissBox( - state = dismissState, - enableDismissFromStartToEnd = true, - content = { - AlarmRow(it, alarmModel) - }, - backgroundContent = { - - } - ) - - if (showDeletionDialog) { - AlertDialog( - onDismissRequest = { showCreationDialog = false }, - title = { - Text(text = stringResource(R.string.delete_alarm)) - }, - text = { - Text(text = stringResource(R.string.irreversible)) - }, - confirmButton = { - DialogButton(label = android.R.string.ok) { - alarmModel.deleteAlarm(context, it) - showDeletionDialog = false - } - }, - dismissButton = { - DialogButton(label = android.R.string.cancel) { - showDeletionDialog = false - } - } - ) - } + AlarmItem(it, alarmModel, context) } item { diff --git a/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmRow.kt b/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmCard.kt similarity index 97% rename from app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmRow.kt rename to app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmCard.kt index 63d3d368..e5fd428e 100644 --- a/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmRow.kt +++ b/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmCard.kt @@ -13,7 +13,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Label import androidx.compose.material3.ElevatedCard -import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Switch @@ -36,9 +35,8 @@ import com.bnyro.clock.domain.model.Alarm import com.bnyro.clock.presentation.screens.alarm.model.AlarmModel import com.bnyro.clock.util.AlarmHelper -@OptIn(ExperimentalMaterial3Api::class) @Composable -fun AlarmRow(alarm: Alarm, alarmModel: AlarmModel) { +fun AlarmCard(alarm: Alarm, alarmModel: AlarmModel) { val context = LocalContext.current ElevatedCard( onClick = { diff --git a/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmItem.kt b/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmItem.kt new file mode 100644 index 00000000..18a6a826 --- /dev/null +++ b/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmItem.kt @@ -0,0 +1,106 @@ +package com.bnyro.clock.presentation.screens.alarm.components + +import android.content.Context +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.rounded.DeleteOutline +import androidx.compose.material3.AlertDialog +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.SwipeToDismissBox +import androidx.compose.material3.SwipeToDismissBoxValue +import androidx.compose.material3.Text +import androidx.compose.material3.rememberSwipeToDismissBoxState +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp +import com.bnyro.clock.R +import com.bnyro.clock.domain.model.Alarm +import com.bnyro.clock.presentation.components.DialogButton +import com.bnyro.clock.presentation.screens.alarm.model.AlarmModel + +@Composable +@OptIn(ExperimentalMaterial3Api::class) +fun AlarmItem( + it: Alarm, + alarmModel: AlarmModel, + context: Context +) { + var showDeletionDialog by remember { + mutableStateOf(false) + } + + val dismissState = rememberSwipeToDismissBoxState( + confirmValueChange = { dismissValue -> + when (dismissValue) { + SwipeToDismissBoxValue.StartToEnd -> { + showDeletionDialog = true + } + + else -> {} + } + false + } + ) + SwipeToDismissBox( + state = dismissState, + enableDismissFromStartToEnd = true, + enableDismissFromEndToStart = false, + content = { + AlarmCard(it, alarmModel) + }, + backgroundContent = { + Row( + modifier = Modifier + .fillMaxSize() + .padding(horizontal = 12.dp, vertical = 6.dp) + .clip(RoundedCornerShape(20.dp)) + .background(MaterialTheme.colorScheme.errorContainer), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.Start + ) { + Icon( + imageVector = Icons.Rounded.DeleteOutline, + contentDescription = null, + modifier = Modifier.padding(start = 16.dp), + ) + } + } + ) + + if (showDeletionDialog) { + AlertDialog( + onDismissRequest = { showDeletionDialog = false }, + title = { + Text(text = stringResource(R.string.delete_alarm)) + }, + text = { + Text(text = stringResource(R.string.irreversible)) + }, + confirmButton = { + DialogButton(label = android.R.string.ok) { + alarmModel.deleteAlarm(context, it) + showDeletionDialog = false + } + }, + dismissButton = { + DialogButton(label = android.R.string.cancel) { + showDeletionDialog = false + } + } + ) + } +} \ No newline at end of file