Skip to content

Commit

Permalink
- adds a dialog to create categories
Browse files Browse the repository at this point in the history
  • Loading branch information
@pablo03v
pablo03v committed Apr 12, 2024
1 parent ad79b47 commit 83a8808
Show file tree
Hide file tree
Showing 2 changed files with 246 additions and 10 deletions.
242 changes: 239 additions & 3 deletions ...ava/cloud/pablos/overload/ui/tabs/configurations/ConfigurationsTabCreateCategoryDialog.kt
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,46 @@
package cloud.pablos.overload.ui.tabs.configurations

import androidx.compose.animation.Animatable
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandIn
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkOut
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
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.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Check
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
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.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
Expand All @@ -28,12 +52,74 @@ import cloud.pablos.overload.data.Converters.Companion.convertColorToLong
import cloud.pablos.overload.data.category.CategoryEvent
import cloud.pablos.overload.ui.views.TextView

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ConfigurationsTabCreateCategoryDialog(
onClose: () -> Unit,
categoryEvent: (CategoryEvent) -> Unit,
) {
val colorOptions: List<Color> =
listOf(
Color(255, 209, 220), // Pastel Pink
Color(255, 204, 204), // Pastel Red
Color(250, 223, 173), // Pastel Yellow
Color(255, 230, 204), // Light Orange
Color(204, 255, 229), // Pastel Green
Color(230, 255, 204), // Light Lime
Color(221, 204, 255), // Pastel Purple
Color(230, 204, 255), // Light Indigo
Color(204, 230, 255), // Pastel Blue
Color(204, 255, 255), // Light Cyan
Color(255, 204, 230), // Light Magenta
Color(255, 230, 255), // Light Lavender
)

val emojiOptions: List<String> =
listOf(
"💼",
"👔",
"💻",
"🖋️",
"📚",
"🎓",
"📝",
"✏️",
"🏋️‍♂️",
"🚴",
"🏃",
"⛹️‍♀️",
"🎉",
"🍻",
"🎮",
"🍹",
"👨‍👩‍👧‍👦",
"👪",
"🏡",
"🎨",
"🎸",
"🎮",
"📷",
"🍳",
"🍔",
"🍕",
"🥗",
"✈️",
"🚗",
"🚢",
"🌍",
"💊",
"🧘",
"🏥",
"🌱",
"🛀",
"🌅",
"🛋️",
"📺",
)

var name by remember { mutableStateOf(TextFieldValue()) }
var color by remember { mutableStateOf(colorOptions.first()) }
var emoji by remember { mutableStateOf(emojiOptions.first()) }

AlertDialog(
onDismissRequest = onClose,
Expand All @@ -49,6 +135,7 @@ fun ConfigurationsTabCreateCategoryDialog(
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
Column(
verticalArrangement = Arrangement.spacedBy(8.dp),
Expand All @@ -59,14 +146,61 @@ fun ConfigurationsTabCreateCategoryDialog(
label = { Text(text = "Name") },
)
}

Column(
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
TextView(
"Color",
fontWeight = FontWeight.Bold,
)
Row(
modifier =
Modifier
.horizontalScroll(rememberScrollState()),
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
colorOptions.forEach { colorOption ->
SelectableColor(
selected = colorOption == color,
onClick = { color = colorOption },
color = colorOption,
)
}
}
}

Column(
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
TextView(
"Emoji",
fontWeight = FontWeight.Bold,
)
Row(
modifier =
Modifier
.horizontalScroll(rememberScrollState()),
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
emojiOptions.forEach { emojiOption ->
SelectableEmoji(
selected = emojiOption == emoji,
onClick = { emoji = emojiOption },
emoji = emojiOption,
color = color,
)
}
}
}
}
},
confirmButton = {
Button(
onClick = {
categoryEvent(CategoryEvent.SetName(name.text))
categoryEvent(CategoryEvent.SetEmoji("💙"))
categoryEvent(CategoryEvent.SetColor(convertColorToLong(Color.Blue)))
categoryEvent(CategoryEvent.SetName(name.text.replaceFirstChar { it.uppercase() }))
categoryEvent(CategoryEvent.SetEmoji(emoji))
categoryEvent(CategoryEvent.SetColor(convertColorToLong(color)))
categoryEvent(CategoryEvent.SetIsDefault(false))
categoryEvent(CategoryEvent.SaveCategory)
onClose()
Expand Down Expand Up @@ -117,3 +251,105 @@ private fun (() -> Unit).save(
}
}
}

@Composable
fun SelectableColor(
modifier: Modifier = Modifier,
selected: Boolean,
onClick: () -> Unit,
color: Color,
) {
Surface(
modifier = modifier,
shape = RoundedCornerShape(16.dp),
color = MaterialTheme.colorScheme.inverseOnSurface,
) {
Surface(
modifier =
Modifier
.clickable { onClick() }
.padding(12.dp)
.size(34.dp),
shape = CircleShape,
color = color,
) {
Box {
AnimatedVisibility(
visible = selected,
modifier =
Modifier
.align(Alignment.Center)
.clip(CircleShape)
.background(MaterialTheme.colorScheme.primary),
enter = fadeIn() + expandIn(expandFrom = Alignment.Center),
exit = shrinkOut(shrinkTowards = Alignment.Center) + fadeOut(),
) {
Icon(
imageVector = Icons.Outlined.Check,
contentDescription = "Checked",
modifier =
Modifier
.padding(5.dp)
.size(15.dp),
tint = MaterialTheme.colorScheme.surface,
)
}
}
}
}
}

@Composable
fun SelectableEmoji(
modifier: Modifier = Modifier,
selected: Boolean,
onClick: () -> Unit,
emoji: String,
color: Color,
) {
val surfaceColorUnselected = MaterialTheme.colorScheme.inverseOnSurface
val surfaceColorSelected = MaterialTheme.colorScheme.primary
val surfaceColor = remember { Animatable(if (selected) surfaceColorSelected else surfaceColorUnselected) }
LaunchedEffect(selected) {
surfaceColor.animateTo(
if (selected) surfaceColorSelected else surfaceColorUnselected,
animationSpec = tween(250),
)
}

val bgColor = remember { Animatable(color) }
LaunchedEffect(color) {
bgColor.animateTo(
color,
animationSpec = tween(250),
)
}

Surface(
modifier = modifier,
shape = RoundedCornerShape(16.dp),
color = surfaceColor.value,
) {
Surface(
modifier =
Modifier
.clickable { onClick() }
.padding(12.dp)
.size(34.dp),
shape = CircleShape,
color = Color.LightGray,
) {
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
modifier =
Modifier
.clip(CircleShape)
.background(bgColor.value)
.fillMaxSize(),
) {
Text(emoji)
}
}
}
}
14 changes: 7 additions & 7 deletions app/src/main/java/cloud/pablos/overload/ui/tabs/home/HomeTabFab.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import androidx.compose.ui.platform.LocalViewConfiguration
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import cloud.pablos.overload.R
import cloud.pablos.overload.data.Converters.Companion.convertLongToColor
import cloud.pablos.overload.data.Helpers
import cloud.pablos.overload.data.category.CategoryEvent
import cloud.pablos.overload.data.category.CategoryState
Expand Down Expand Up @@ -94,7 +95,9 @@ fun HomeTabFab(
) {
when (itemState.isFabOpen) {
true -> {
categoryState.categories.forEach { category ->
categoryState.categories.filter {
categoryState.selectedCategory != it.id
}.forEach { category ->
Row(
verticalAlignment = Alignment.CenterVertically,
) {
Expand All @@ -111,20 +114,17 @@ fun HomeTabFab(
)
}

val color = convertLongToColor(category.color)
SmallFloatingActionButton(
onClick = {
categoryEvent(CategoryEvent.SetSelectedCategory(category.id))

itemEvent(ItemEvent.SetIsFabOpen(false))
},
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.primaryContainer,
containerColor = color,
contentColor = Helpers.decideForeground(color),
) {
TextView(text = category.emoji)
/*Icon(
imageVector = category.icon,
contentDescription = category.name,
)*/
}
}
}
Expand Down

0 comments on commit 83a8808

Please sign in to comment.