From d60f40f1f239531d37b0df666df11a06ee0d5c0a Mon Sep 17 00:00:00 2001 From: murjune Date: Sat, 3 Feb 2024 06:10:37 +0900 Subject: [PATCH 1/6] =?UTF-8?q?[chore]=20neonSign=20default=20color=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/java/com/moya/funch/modifier/NeonSign.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt b/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt index f28dfed1..c9044dec 100644 --- a/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt +++ b/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt @@ -43,7 +43,7 @@ import com.moya.funch.theme.Yellow500 * @return Composable에 그림자 효과를 적용하는 Modifier */ fun Modifier.neonSign( - color: Color = Color.Yellow, + color: Color = Lemon500, borderRadius: Dp = 0.dp, blurRadius: Dp = 8.dp, offsetY: Dp = 0.dp, From 9afb086e66f10f7e4701eff461ee85a1dc8eab8e Mon Sep 17 00:00:00 2001 From: murjune Date: Sat, 3 Feb 2024 06:10:53 +0900 Subject: [PATCH 2/6] =?UTF-8?q?[feat]=20FunchRadiusDefaults=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/java/com/moya/funch/theme/Shape.kt | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/core/designsystem/src/main/java/com/moya/funch/theme/Shape.kt b/core/designsystem/src/main/java/com/moya/funch/theme/Shape.kt index e4a89304..67f46a7c 100644 --- a/core/designsystem/src/main/java/com/moya/funch/theme/Shape.kt +++ b/core/designsystem/src/main/java/com/moya/funch/theme/Shape.kt @@ -6,6 +6,12 @@ import androidx.compose.runtime.Immutable import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.unit.dp +object FunchRadiusDefaults { + val Small = 12.dp + val Medium = 16.dp + val Large = 20.dp +} + object FunchShapeDefaults { val ExtraSmall = RoundedCornerShape(10.dp) val Small = RoundedCornerShape(12.dp) From 80a443af74f8829cec79435901012476acaa0149 Mon Sep 17 00:00:00 2001 From: murjune Date: Sat, 3 Feb 2024 06:11:16 +0900 Subject: [PATCH 3/6] =?UTF-8?q?[feat]=20match=20=EC=8B=9C=20borderStroke?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/com/moya/funch/component/Chip.kt | 70 ++++++++++++++++--- 1 file changed, 60 insertions(+), 10 deletions(-) diff --git a/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt b/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt index ddcc0eed..cea6261d 100644 --- a/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt +++ b/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt @@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.CornerBasedShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.material3.LocalContentColor @@ -24,36 +25,45 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.Immutable +import androidx.compose.runtime.Stable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.Shape import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.moya.funch.icon.FunchIconAsset +import com.moya.funch.modifier.neonSign +import com.moya.funch.theme.FunchRadiusDefaults import com.moya.funch.theme.FunchTheme import com.moya.funch.theme.Gray400 import com.moya.funch.theme.Gray500 import com.moya.funch.theme.Gray800 import com.moya.funch.theme.Gray900 +import com.moya.funch.theme.Lemon500 import com.moya.funch.theme.White +import com.moya.funch.theme.Yellow500 private val FunchChipContentMinHeight = 21.dp private val FunchMinHeight = 48.dp +val MATCHED_BORDER_BRUSH = Brush.horizontalGradient( + listOf(Lemon500, Yellow500) +) @Composable fun FunchChip( modifier: Modifier = Modifier, + matched: Boolean = false, selected: Boolean, enabled: Boolean, onSelected: () -> Unit = {}, - shape: Shape = FunchTheme.shapes.medium, + shape: CornerBasedShape = FunchTheme.shapes.medium, label: @Composable () -> Unit, leadingIcon: @Composable (() -> Unit)? = null, trailingIcon: @Composable (() -> Unit)? = null, @@ -64,9 +74,23 @@ fun FunchChip( Row( modifier = modifier .defaultMinSize(minHeight = FunchMinHeight) - .clip(shape) + .then( + if (matched) { + Modifier.neonSign( + borderRadius = FunchRadiusDefaults.Medium, + blurRadius = 5.dp, + spread = PaddingValues((-1).dp) + ) + } else Modifier + ) .background( color = colors.provideContainerColor(enabled, selected), + shape = shape + ) + .then( + if (matched) { + Modifier.border(1.dp, MATCHED_BORDER_BRUSH, shape) + } else Modifier ) .selectable( selected = selected, @@ -138,7 +162,9 @@ data class PunchChipColors( private val selectedLabelColor: Color = White, private val disabledLabelColor: Color = Gray400, private val disabledSelectedLabelColor: Color = White, + // private val ) { + @Stable fun provideContainerColor(enabled: Boolean, selected: Boolean): Color { return when { enabled && selected -> selectedContainerColor @@ -148,6 +174,7 @@ data class PunchChipColors( } } + @Stable fun provideLabelColor(enabled: Boolean, selected: Boolean): Color { return when { enabled && selected -> selectedLabelColor @@ -158,15 +185,18 @@ data class PunchChipColors( } } +/** + * Preview + * */ @Preview( - name = "FunchChip - Chip with leading and trailing icon", - showBackground = true + name = "FunchChip - Chip with leading and trailing icon", showBackground = true ) @Composable private fun Preview1() { FunchTheme { val isSelected = remember { mutableStateOf(false) } val onSelected = { isSelected.value = !isSelected.value } + FunchChip( selected = isSelected.value, enabled = true, @@ -199,8 +229,7 @@ private fun Preview2() { @Composable @Preview( - name = "FunchChip - Chip with trailing icon", - showBackground = true + name = "FunchChip - Chip with trailing icon", showBackground = true ) private fun Preview3() { FunchTheme { @@ -217,13 +246,12 @@ private fun Preview3() { } @Preview( - name = "FunchChip - non interactive", - showBackground = true + name = "FunchChip - non interactive", showBackground = true ) @Composable private fun Preview4() { FunchTheme { - Column { + Column(Modifier.background(Gray900)) { Spacer(modifier = Modifier.size(12.dp)) FunchChip( @@ -244,6 +272,28 @@ private fun Preview4() { } } +@Preview( + name = "FunchChip - matched", showBackground = true +) +@Composable +private fun Preview5() { + FunchTheme { + Column( + Modifier + .background(Gray900) + .padding(10.dp) + ) { + FunchChip( + matched = true, + selected = false, + enabled = false, + leadingIcon = { LeadingIconForPreview() }, + label = { Text(text = "안뇽") }, + ) + } + } +} + @Composable private fun TrailingIconForPreview() { Row { From e4826cb274b8dd257ee9764277e12464912ba824 Mon Sep 17 00:00:00 2001 From: murjune Date: Sat, 3 Feb 2024 14:27:22 +0900 Subject: [PATCH 4/6] =?UTF-8?q?[chore]=20border=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/java/com/moya/funch/component/Chip.kt | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt b/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt index cea6261d..c876e2b9 100644 --- a/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt +++ b/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt @@ -76,22 +76,19 @@ fun FunchChip( .defaultMinSize(minHeight = FunchMinHeight) .then( if (matched) { - Modifier.neonSign( - borderRadius = FunchRadiusDefaults.Medium, - blurRadius = 5.dp, - spread = PaddingValues((-1).dp) - ) + Modifier + .neonSign( + borderRadius = FunchRadiusDefaults.Medium, + blurRadius = 5.dp, + spread = PaddingValues((-1).dp) + ) + .border(1.dp, MATCHED_BORDER_BRUSH, shape) } else Modifier ) .background( color = colors.provideContainerColor(enabled, selected), shape = shape ) - .then( - if (matched) { - Modifier.border(1.dp, MATCHED_BORDER_BRUSH, shape) - } else Modifier - ) .selectable( selected = selected, enabled = enabled, From 3aa29b0a844acff4356fa00a38c971c24d020899 Mon Sep 17 00:00:00 2001 From: murjune Date: Sat, 3 Feb 2024 15:32:40 +0900 Subject: [PATCH 5/6] =?UTF-8?q?[fix]=20=EB=94=94=EC=9F=8C=EC=8C=A4?= =?UTF-8?q?=EC=9D=98=20Chip=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=20-=20alpha=20=3D=200.6f?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/com/moya/funch/component/Chip.kt | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt b/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt index c876e2b9..a50e13a8 100644 --- a/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt +++ b/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt @@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.sizeIn import androidx.compose.foundation.layout.width import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.shape.CircleShape @@ -77,12 +78,14 @@ fun FunchChip( .then( if (matched) { Modifier + .sizeIn() .neonSign( + color = Lemon500.copy(alpha = 0.6f), borderRadius = FunchRadiusDefaults.Medium, blurRadius = 5.dp, spread = PaddingValues((-1).dp) ) - .border(1.dp, MATCHED_BORDER_BRUSH, shape) + .border(1.dp, MATCHED_BORDER_BRUSH, shape) } else Modifier ) .background( @@ -103,7 +106,7 @@ fun FunchChip( labelColor = colors.provideLabelColor(enabled, selected), leadingIcon = leadingIcon, trailingIcon = trailingIcon, - paddingValues = PaddingValues(horizontal = 8.dp, vertical = 4.dp) + paddingValues = PaddingValues(vertical = 4.dp) ) } } @@ -280,13 +283,14 @@ private fun Preview5() { .background(Gray900) .padding(10.dp) ) { - FunchChip( - matched = true, - selected = false, - enabled = false, - leadingIcon = { LeadingIconForPreview() }, - label = { Text(text = "안뇽") }, - ) + Column { + FunchChip( + matched = true, + selected = true, + enabled = false, + label = { Text(text = "Text", color = White, style = FunchTheme.typography.b) }, + ) + } } } } From 79dfbd79dd0fcd57b02d82c2b6220acf60b0f850 Mon Sep 17 00:00:00 2001 From: murjune Date: Sat, 3 Feb 2024 15:33:11 +0900 Subject: [PATCH 6/6] =?UTF-8?q?[fix]=20=EB=94=94=EC=9F=8C=EC=8C=A4?= =?UTF-8?q?=EC=9D=98=20Button=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=20-=20alpha=20=3D=200.7f,=20vertical=20Padding=20=3D?= =?UTF-8?q?=204.dp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/java/com/moya/funch/component/Button.kt | 4 +++- .../src/main/java/com/moya/funch/modifier/NeonSign.kt | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/core/designsystem/src/main/java/com/moya/funch/component/Button.kt b/core/designsystem/src/main/java/com/moya/funch/component/Button.kt index 3c58807d..01f495d1 100644 --- a/core/designsystem/src/main/java/com/moya/funch/component/Button.kt +++ b/core/designsystem/src/main/java/com/moya/funch/component/Button.kt @@ -98,7 +98,9 @@ fun FunchMainButton( modifier = modifier .then( if (enabled) Modifier.neonSign( - color = Lemon500, borderRadius = 16.dp + color = Lemon500.copy(alpha = 0.7f), borderRadius = 16.dp, + blurRadius = 5.dp, + spread = PaddingValues(top = (-4).dp, start = 0.dp, end = 0.dp, bottom = 4.dp), ) else Modifier ) .clip(shape = shape) diff --git a/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt b/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt index c9044dec..30e45557 100644 --- a/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt +++ b/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt @@ -106,7 +106,8 @@ private fun ShadowPreview() { .clip(RoundedCornerShape(size = 16.dp)) .background( brush - ), + ) + , contentAlignment = Alignment.Center ) { Text(