Skip to content

Commit

Permalink
[MERGE] #53 -> develop
Browse files Browse the repository at this point in the history 
[UI/#53] TerningBasicDialog
  • Loading branch information
@arinming
arinming authored Jul 12, 2024
2 parents 97777a2 + b37203d commit 655cc53
Show file tree
Hide file tree
Showing 12 changed files with 367 additions and 17 deletions.
2 changes: 1 addition & 1 deletion core/src/main/java/com/terning/core/designsystem/component/button/SortingButton.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ fun SortingButton(
)
)
Image(
painter = painterResource(id = R.drawable.ic_down),
painter = painterResource(id = R.drawable.ic_down_18),
contentDescription = stringResource(id = R.string.sort_button_description),
modifier = modifier
.padding(vertical = 5.dp)
Expand Down
259 changes: 259 additions & 0 deletions core/src/main/java/com/terning/core/designsystem/component/dialog/ScrapDialogContent.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
package com.terning.core.designsystem.component.dialog

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
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.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
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.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.terning.core.R
import com.terning.core.designsystem.component.button.RoundButton
import com.terning.core.designsystem.component.item.ColorPalette
import com.terning.core.designsystem.theme.CalBlue2
import com.terning.core.designsystem.theme.CalGreen2
import com.terning.core.designsystem.theme.CalRed
import com.terning.core.designsystem.theme.Grey200
import com.terning.core.designsystem.theme.Grey300
import com.terning.core.designsystem.theme.Grey350
import com.terning.core.designsystem.theme.Grey500
import com.terning.core.designsystem.theme.TerningMain
import com.terning.core.designsystem.theme.TerningTheme
import com.terning.core.designsystem.theme.White
import com.terning.core.extension.noRippleClickable


@Composable
fun ScrapDialogContent(
onDismissRequest: () -> Unit,
isScrapped: Boolean,
internInfoList: List<Pair<String, String>>,
) {
var isColorChange by remember { mutableStateOf(false) }
var selectedColor by remember { mutableStateOf(CalRed) }

Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(30.dp)
.background(
color = White,
shape = RoundedCornerShape(20.dp)
),
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End
) {
IconButton(
onClick = { onDismissRequest() },
modifier = Modifier
.padding(6.dp)
) {
Icon(
painter = painterResource(id = R.drawable.ic_dialog_x_32),
contentDescription = null,
tint = Grey300,
modifier = Modifier
.noRippleClickable { onDismissRequest() }
)
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.padding(top = 32.dp),
contentAlignment = Alignment.TopCenter
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 11.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
modifier = Modifier
.width(60.dp)
.height(60.dp)
.border(
width = 1.dp,
color = TerningMain,
shape = RoundedCornerShape(size = 15.dp)
)
) {
Image(
painter = painterResource(
id = R.drawable.ic_character1
),
modifier = Modifier
.fillMaxWidth()
.background(
Grey200,
shape = RoundedCornerShape(size = 15.dp)
),
contentDescription = null,
contentScale = ContentScale.Fit,
alignment = Alignment.Center
)
}
Text(
text = "[ํ•œ์–‘๋Œ€ํ•™๊ต ์ปฌ๋ ‰ํ‹ฐ๋ธŒ์ž„ํŒฉํŠธ์„ผํ„ฐ] /์ฝ”์ด์นด ์˜ํ”„๋กœํŽ˜์…”๋„(YP) ๋ชจ์ง‘ํ•ฉ๋‹ˆ๋‹ค",
textAlign = TextAlign.Center,
style = TerningTheme.typography.title4,
color = Grey500,
modifier = Modifier.padding(top = 20.dp)
)
Text(
text = stringResource(id = R.string.dialog_content_scrap_sub_title),
style = TerningTheme.typography.body5,
color = Grey350,
modifier = Modifier.padding(
top = 4.dp,
bottom = 13.dp
)
)
Column(
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.Top,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 13.dp)
) {
Row(
modifier = Modifier
.background(
color = if (selectedColor != CalRed) CalBlue2 else CalGreen2,
shape = RoundedCornerShape(14.dp)
)
.noRippleClickable {
isColorChange = !isColorChange
},
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Start
) {
Icon(
painter = painterResource(
id = if (isColorChange) R.drawable.ic_up_22
else R.drawable.ic_down_22
),
contentDescription = stringResource(
id = R.string.dialog_content_color_button
),
tint = White,
modifier = Modifier.padding(
start = 7.dp,
top = 2.dp,
bottom = 2.dp
)
)
Text(
text = stringResource(id = R.string.dialog_content_color_button),
style = TerningTheme.typography.body5,
color = White,
modifier = Modifier.padding(end = 13.dp)
)
}
HorizontalDivider(
thickness = 1.dp,
color = Grey200,
modifier = Modifier.padding(
top = 11.dp,
bottom = 8.dp
)
)
if (isColorChange) {
Box(
modifier = Modifier
.fillMaxWidth()
.padding(
top = 12.dp,
bottom = 23.dp,
),
contentAlignment = Alignment.Center
) {
ColorPalette(
initialColor = CalRed,
onColorSelected = { selectedColor = it })
}
} else {
Text(
text = stringResource(id = R.string.intern_item_d_day),
style = TerningTheme.typography.body5,
color = TerningMain,
modifier = Modifier.padding(bottom = 9.dp)
)
Column(
modifier = Modifier.padding(bottom = 29.dp),
verticalArrangement = Arrangement.spacedBy(
5.dp,
Alignment.CenterVertically
),
horizontalAlignment = Alignment.Start,
) {
internInfoList.forEach { (title, value) ->
InternInfoRow(title, value)
}
}
}
}
RoundButton(
style = TerningTheme.typography.button3,
paddingVertical = 12.dp,
cornerRadius = 8.dp,
text = if (isScrapped) {
if (isColorChange)
R.string.dialog_content_color_button
else R.string.dialog_scrap_button
} else {
R.string.dialog_scrap_button
},
onButtonClick = { /*TODO*/ },
modifier = Modifier.padding(bottom = 8.dp)
)
}
}
}
}

// TODO ์‚ญ์ œ
@Composable
fun InternInfoRow(title: String, value: String) {
Row(
horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start),
verticalAlignment = Alignment.Top,
) {
Text(
text = title,
style = TerningTheme.typography.body2,
color = Grey350,
)
Text(
text = value,
style = TerningTheme.typography.body3,
color = Grey500,
)
}
}
40 changes: 40 additions & 0 deletions core/src/main/java/com/terning/core/designsystem/component/dialog/TerningBasicDialog.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
package com.terning.core.designsystem.component.dialog

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties

@Composable
fun TerningBasicDialog(
onDismissRequest: () -> Unit,
properties: DialogProperties = DialogProperties(
usePlatformDefaultWidth = false,
decorFitsSystemWindows = true,
dismissOnBackPress = true,
dismissOnClickOutside = true,
),
content: @Composable () -> Unit,
) {
Dialog(
onDismissRequest = { onDismissRequest() },
properties = properties,
) {
content()
}
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun TerningBasicDialogPreview() {
TerningBasicDialog(
onDismissRequest = {},
content = {
ScrapDialogContent(
onDismissRequest = {},
isScrapped = false,
internInfoList = listOf()
)
}
)
}
36 changes: 22 additions & 14 deletions core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,13 @@ import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.CircleShape
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.graphics.Color
Expand All @@ -27,8 +32,8 @@ import com.terning.core.extension.noRippleClickable

@Composable
fun ColorPalette(
modifier: Modifier = Modifier,
onColorSelected:(Color) -> Unit = {}
initialColor: Color,
onColorSelected: (Color) -> Unit = {},
) {
val colorList = listOf(
CalRed,
Expand All @@ -43,22 +48,24 @@ fun ColorPalette(
CalPink
)

var selectedColor by remember { mutableStateOf(initialColor) }

RadioButtonGroups(
modifier = modifier.size(251.dp, 84.dp),
options = colorList,
gridCellCount = 5,
onOptionSelected = { color ->
selectedColor = color
onColorSelected(color)
},
buttonComposable = {
color, isSelected, onOptionSelected ->
buttonComposable = { color, isSelected, onOptionSelected ->
ColorButton(
color = color,
isSelected = isSelected,
onColorSelected = onOptionSelected)
isSelected = selectedColor == color,
onColorSelected = onOptionSelected
)
},
verticalArrangementSpace = 6.dp,
horizontalArrangementSpace = 14.dp,
horizontalArrangementSpace = 0.dp,
)
}

Expand All @@ -67,13 +74,16 @@ internal fun ColorButton(
modifier: Modifier = Modifier,
color: Color,
isSelected: Boolean,
onColorSelected: (Color) -> Unit
onColorSelected: (Color) -> Unit,
) {
Box(modifier = modifier.size(39.dp)) {
Box(modifier = modifier.wrapContentSize()) {
Box(
modifier = Modifier
.size(39.dp)
.background(shape = CircleShape, color = color)
.background(
shape = CircleShape,
color = color
)
.noRippleClickable {
onColorSelected(color)
},
Expand All @@ -89,10 +99,8 @@ internal fun ColorButton(
}
}


@Preview(showBackground = true)
@Composable
fun ColorPalettePreview() {
ColorPalette()
ColorPalette(initialColor = CalRed)
}

Loading

0 comments on commit 655cc53

Please sign in to comment.