Skip to content

Commit

Permalink
style: Alarm screen UX improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
SuhasDissa committed Apr 16, 2024
1 parent 6bde685 commit 3ac87c3
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 59 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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
}
}
)
}
}

0 comments on commit 3ac87c3

Please sign in to comment.