Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: extract bottom sheet to separate class for reusage #66

Merged
merged 1 commit into from
Sep 22, 2023
Merged

refactor: extract bottom sheet to separate class for reusage #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 22 additions & 109 deletions app/src/main/java/tech/relaycorp/letro/contacts/ui/ContactsScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,29 @@
package tech.relaycorp.letro.contacts.ui

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Divider
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import tech.relaycorp.letro.R
import tech.relaycorp.letro.contacts.ContactsViewModel
import tech.relaycorp.letro.contacts.model.Contact
import tech.relaycorp.letro.ui.common.BottomSheetAction
import tech.relaycorp.letro.ui.common.LetroActionsBottomSheet
import tech.relaycorp.letro.ui.common.text.BoldText
import tech.relaycorp.letro.ui.theme.LabelLargeProminent
import tech.relaycorp.letro.ui.theme.LetroColor
import tech.relaycorp.letro.ui.theme.TitleSmallProminent
import tech.relaycorp.letro.ui.utils.SnackbarStringsProvider
import tech.relaycorp.letro.utils.ext.showSnackbar

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ContactsScreen(
viewModel: ContactsViewModel,
Expand All @@ -63,21 +45,27 @@ fun ContactsScreen(
val deleteContactDialog = deleteContactDialogState
Box {
if (editBottomSheet.isShown && editBottomSheet.contact != null) {
ModalBottomSheet(
containerColor = MaterialTheme.colorScheme.surface,
LetroActionsBottomSheet(
title = editBottomSheet.contact.alias ?: editBottomSheet.contact.contactVeraId,
onDismissRequest = { viewModel.onEditBottomSheetDismissed() },
) {
EditContactBottomSheet(
title = editBottomSheet.contact.alias ?: editBottomSheet.contact.contactVeraId,
onEditClick = {
viewModel.onEditContactClick()
onEditContactClick(editBottomSheet.contact)
},
onDeleteClick = {
viewModel.onDeleteContactClick(editBottomSheet.contact)
},
)
}
actions = listOf(
BottomSheetAction(
icon = R.drawable.edit,
title = R.string.edit,
action = {
viewModel.onEditContactClick()
onEditContactClick(editBottomSheet.contact)
},
),
BottomSheetAction(
icon = R.drawable.ic_delete,
title = R.string.delete,
action = {
viewModel.onDeleteContactClick(editBottomSheet.contact)
},
),
),
)
} else if (deleteContactDialog.isShown && deleteContactDialog.contact != null) {
AlertDialog(
onDismissRequest = {
Expand Down Expand Up @@ -139,78 +127,3 @@ fun ContactsScreen(
}
}
}

@Composable
private fun EditContactBottomSheet(
title: String,
onEditClick: () -> Unit,
onDeleteClick: () -> Unit,
) {
Column(
modifier = Modifier
.padding(
PaddingValues(
bottom = 44.dp,
),
),
) {
Text(
text = title,
style = MaterialTheme.typography.TitleSmallProminent,
color = MaterialTheme.colorScheme.onSurface,
modifier = Modifier
.fillMaxWidth()
.padding(
start = 16.dp,
),
)
Spacer(
modifier = Modifier.height(14.dp),
)
Divider(
color = MaterialTheme.colorScheme.outlineVariant,
)
EditContactAction(
icon = R.drawable.edit,
title = R.string.edit,
onClick = onEditClick,
)
EditContactAction(
icon = R.drawable.ic_delete,
title = R.string.delete,
onClick = onDeleteClick,
)
}
}

@Composable
private fun EditContactAction(
@DrawableRes icon: Int,
@StringRes title: Int,
onClick: () -> Unit,
) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.fillMaxWidth()
.clickable { onClick() }
.padding(
vertical = 14.dp,
horizontal = 16.dp,
),
) {
Icon(
painter = painterResource(id = icon),
contentDescription = null,
tint = LetroColor.OnSurfaceContainer,
)
Spacer(
modifier = Modifier.width(16.dp),
)
Text(
text = stringResource(id = title),
style = MaterialTheme.typography.labelLarge,
color = MaterialTheme.colorScheme.onSurface,
)
}
}
126 changes: 126 additions & 0 deletions app/src/main/java/tech/relaycorp/letro/ui/common/LetroActionsBottomSheet.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
package tech.relaycorp.letro.ui.common

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Divider
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import tech.relaycorp.letro.ui.theme.LetroColor
import tech.relaycorp.letro.ui.theme.TitleSmallProminent
import androidx.compose.ui.res.painterResource as painterResource1

data class BottomSheetAction(
@DrawableRes val icon: Int,
@StringRes val title: Int,
val action: () -> Unit,
)

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LetroActionsBottomSheet(
title: String,
actions: List<BottomSheetAction>,
onDismissRequest: () -> Unit,
) {
ModalBottomSheet(
containerColor = MaterialTheme.colorScheme.surface,
onDismissRequest = {
onDismissRequest()
},
) {
BottomSheetContent(
actions = actions,
title = title,
)
}
}

@Composable
private fun BottomSheetContent(
actions: List<BottomSheetAction>,
title: String? = null,
) {
Column(
modifier = Modifier
.padding(
PaddingValues(
bottom = 44.dp,
),
),
) {
if (title != null) {
Text(
text = title,
style = MaterialTheme.typography.TitleSmallProminent,
color = MaterialTheme.colorScheme.onSurface,
modifier = Modifier
.fillMaxWidth()
.padding(
start = 16.dp,
),
)
Spacer(
modifier = Modifier.height(14.dp),
)
Divider(
color = MaterialTheme.colorScheme.outlineVariant,
)
}
LazyColumn {
items(actions) {
BottomSheetActionView(it.icon, it.title, it.action)
}
}
}
}

@Composable
private fun BottomSheetActionView(
@DrawableRes icon: Int,
@StringRes title: Int,
onClick: () -> Unit,
) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.fillMaxWidth()
.clickable { onClick() }
.padding(
vertical = 14.dp,
horizontal = 16.dp,
),
) {
Icon(
painter = painterResource1(id = icon),
contentDescription = null,
tint = LetroColor.OnSurfaceContainer,
)
Spacer(
modifier = Modifier.width(16.dp),
)
Text(
text = stringResource(id = title),
style = MaterialTheme.typography.labelLarge,
color = MaterialTheme.colorScheme.onSurface,
)
}
}
Loading