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

Emotion 90 달력 다이얼로그 추가 #117

Merged
merged 5 commits into from
Sep 15, 2021
Merged

Emotion 90 달력 다이얼로그 추가 #117

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3151770
높이 안맞는 부분 수정, 오늘 날짜 강조 추가
pennya Sep 15, 2021
6f9c292
팝업 구성
pennya Sep 15, 2021
2cb78d3
다이얼로그 클릭 시 날짜, emotion id 넘기도록 수정
pennya Sep 15, 2021
269feeb
ktlint 수정
pennya Sep 15, 2021
bb4bb2e
ktlint 수정
pennya Sep 15, 2021
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
172 changes: 118 additions & 54 deletions ...entation/src/main/java/com/teamtuna/emotionaldiary/compose/calendar/CalendarComposeApp.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -45,29 +48,39 @@ 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

@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<CalposeDate>()) }
val (showDialog, setShowDialog) = remember { mutableStateOf(false) }
var currentDate by remember {
mutableStateOf(CalposeDate(-1, DayOfWeek.MONDAY, YearMonth.now()))
}

MaterialCalendar(
month = month,
Expand All @@ -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
Expand All @@ -106,6 +131,7 @@ fun MaterialCalendar(
day = { dayDate, todayDate ->
Day(
dayDate = dayDate,
todayDate = todayDate,
selectionSet = selectionSet,
onSelected = onSelected
)
Expand Down Expand Up @@ -139,32 +165,35 @@ fun HeaderDayRow(
@Composable
fun RowScope.Day(
dayDate: CalposeDate,
todayDate: CalposeDate,
selectionSet: Set<CalposeDate>,
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
) {
Expand Down Expand Up @@ -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
)
Expand All @@ -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