diff --git a/presentation/src/main/java/com/teamtuna/emotionaldiary/compose/calendar/CalendarComposeApp.kt b/presentation/src/main/java/com/teamtuna/emotionaldiary/compose/calendar/CalendarComposeApp.kt index af7627e..36a112c 100644 --- a/presentation/src/main/java/com/teamtuna/emotionaldiary/compose/calendar/CalendarComposeApp.kt +++ b/presentation/src/main/java/com/teamtuna/emotionaldiary/compose/calendar/CalendarComposeApp.kt @@ -10,14 +10,16 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.CornerSize import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.AlertDialog -import androidx.compose.material.Button +import androidx.compose.material.Card +import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -29,12 +31,13 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color -import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import androidx.compose.ui.window.Dialog import be.sigmadelta.calpose.Calpose import be.sigmadelta.calpose.WEIGHT_7DAY_WEEK import be.sigmadelta.calpose.model.CalposeActions @@ -45,6 +48,7 @@ import be.sigmadelta.calpose.widgets.MaterialHeader import coil.compose.rememberImagePainter import coil.transform.CircleCropTransformation import com.google.accompanist.insets.ProvideWindowInsets +import com.google.accompanist.insets.statusBarsHeight import com.teamtuna.emotionaldiary.compose.theme.EmotionalDiaryTheme import org.threeten.bp.DayOfWeek import org.threeten.bp.YearMonth @@ -52,22 +56,31 @@ import org.threeten.bp.YearMonth @Preview @Composable fun CalendarComposeApp() { + val appBarColor = MaterialTheme.colors.surface.copy(alpha = 0.87f) + EmotionalDiaryTheme { ProvideWindowInsets { Column { - Spacer(modifier = Modifier.height(100.dp)) + Spacer( + modifier = Modifier + .background(appBarColor) + .fillMaxWidth() + .statusBarsHeight() + ) MaterialPreview() } } } } -@Preview("MaterialPreview") @Composable fun MaterialPreview() { var month by remember { mutableStateOf(YearMonth.now()) } var selectionSet by remember { mutableStateOf(setOf()) } val (showDialog, setShowDialog) = remember { mutableStateOf(false) } + var currentDate by remember { + mutableStateOf(CalposeDate(-1, DayOfWeek.MONDAY, YearMonth.now())) + } MaterialCalendar( month = month, @@ -76,15 +89,27 @@ fun MaterialPreview() { onClickedPreviousMonth = { month = month.minusMonths(1) }, onClickedNextMonth = { month = month.plusMonths(1) }, ), - onSelected = { - selectionSet = mutableSetOf(it).apply { + onSelected = { calPoseDate -> + selectionSet = mutableSetOf(calPoseDate).apply { + currentDate = calPoseDate setShowDialog(true) addAll(selectionSet) } } ) - EmotionDialog(showDialog, setShowDialog) + EmotionListDialog( + showDialog, + setShowDialog, + currentDate, + onDismiss = { + // dialog 없어진 후 작업이 필요할 경 + }, + onEmotionClick = { calposeDate, emotionId -> + // newIntent 작업한 곳으로 보내기 + // 날짜, emotion Id 값이 보내져아함 + } + ) } @Composable @@ -106,6 +131,7 @@ fun MaterialCalendar( day = { dayDate, todayDate -> Day( dayDate = dayDate, + todayDate = todayDate, selectionSet = selectionSet, onSelected = onSelected ) @@ -139,32 +165,35 @@ fun HeaderDayRow( @Composable fun RowScope.Day( dayDate: CalposeDate, + todayDate: CalposeDate, selectionSet: Set, onSelected: (CalposeDate) -> Unit ) { + val isToday = todayDate == dayDate val isSelected = selectionSet.contains(dayDate) - val weight = WEIGHT_7DAY_WEEK - val bgColor = if (isSelected) Color(primaryAccent) else Color.Transparent + val bgColor = when { + isSelected -> Color(primaryAccent) + isToday -> Color(todayColor) + else -> Color.Transparent + } val widget: @Composable () -> Unit = { EmotionDay( text = dayDate.day.toString(), - modifier = Modifier - .padding(4.dp) - .weight(weight) - .fillMaxWidth(), style = TextStyle( color = when { - isSelected -> Color.White + isSelected || isToday -> Color.White else -> Color.Black }, - fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Normal + fontWeight = if (isSelected || isToday) FontWeight.Bold else FontWeight.Normal ) ) } Column( - modifier = Modifier.weight(WEIGHT_7DAY_WEEK), + modifier = Modifier + .weight(WEIGHT_7DAY_WEEK) + .padding(4.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { @@ -200,21 +229,19 @@ fun RowScope.PriorMonthDay( @Composable fun EmotionDay( text: String, - modifier: Modifier = Modifier.padding(4.dp), style: TextStyle = TextStyle() ) { - val ctx = LocalContext.current - val maxSize = 50.dp val url = "https://upload.wikimedia.org/wikipedia/commons/thumb/" + "e/e6/Noto_Emoji_KitKat_263a.svg/1200px-Noto_Emoji_KitKat_263a.svg.png" Column( verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally ) { Text( text, - modifier = modifier, + Modifier + .padding(4.dp) + .fillMaxWidth(), textAlign = TextAlign.Center, style = style ) @@ -227,48 +254,85 @@ fun EmotionDay( ), contentDescription = null, modifier = Modifier - .weight(WEIGHT_7DAY_WEEK) - .size(maxSize) + .fillMaxWidth() + .fillMaxHeight() ) } } @Composable -fun EmotionDialog(showDialog: Boolean, setShowDialog: (Boolean) -> Unit) { - if (showDialog) { - AlertDialog( - onDismissRequest = { - }, - title = { - Text("Title") - }, - confirmButton = { - Button( - onClick = { - // Change the state to close the dialog - setShowDialog(false) - }, - ) { - Text("Confirm") - } - }, - dismissButton = { - Button( - onClick = { - // Change the state to close the dialog - setShowDialog(false) - }, +private fun EmotionListDialog( + showDialog: Boolean, + setShowDialog: (Boolean) -> Unit, + currentDate: CalposeDate, + onDismiss: () -> Unit, + onEmotionClick: (CalposeDate, Int) -> Unit, +) { + val url = "https://upload.wikimedia.org/wikipedia/commons/thumb/" + + "e/e6/Noto_Emoji_KitKat_263a.svg/1200px-Noto_Emoji_KitKat_263a.svg.png" + + var emotion by remember { mutableStateOf(-1) } + + if (!showDialog || currentDate.day == -1) + return + + Dialog(onDismissRequest = onDismiss) { + Card( + elevation = 8.dp, + shape = RoundedCornerShape(12.dp) + ) { + Column(modifier = Modifier.padding(8.dp)) { + + Text( + text = "Select Emotion", + fontWeight = FontWeight.Bold, + fontSize = 20.sp, + modifier = Modifier.padding(8.dp) + ) + Spacer(modifier = Modifier.height(8.dp)) + + Column( + modifier = Modifier.padding(16.dp) ) { - Text("Dismiss") + // TODO 정의된 emotion 개수에 맞게 적절하게 배치되도록 수정하기 (dialog height, emotion item size) + for (i in 0 until 2) { + Row( + modifier = Modifier.padding(8.dp) + ) { + for (j in 0 until 4) { + Box( + Modifier.clickable( + onClick = { + onEmotionClick(currentDate, emotion) + setShowDialog(false) + } + ) + ) { + Image( + painter = rememberImagePainter( + data = url, + builder = { + transformations(CircleCropTransformation()) + } + ), + contentDescription = null, + modifier = Modifier + .width(50.dp) + .height(50.dp) + ) + } + Spacer(modifier = Modifier.width(16.dp)) + } + Spacer(modifier = Modifier.height(16.dp)) + } + } } - }, - text = { - Text("This is a text on the dialog") - }, - ) + } + } } } const val lightGrey = 0xa0bdbdbd +const val todayColor = 0xFF30cf5a const val primaryAccent = 0xFF4db6ac const val primaryAccentLight = 0xFF82e9de