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

[Feat] FunchChip matched 시 border 및 neonSign 효과 구현 #31

Merged
merged 6 commits into from
Feb 4, 2024
+74 −14
Merged

[Feat] FunchChip matched 시 border 및 neonSign 효과 구현 #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d60f40f
[chore] neonSign default color 변경
murjune Feb 2, 2024
9afb086
[feat] FunchRadiusDefaults 추가
murjune Feb 2, 2024
80a443a
[feat] match 시 borderStroke 구현
murjune Feb 2, 2024
e4826cb
[chore] border 위치 변경
murjune Feb 3, 2024
3aa29b0
[fix] 디쟌쌤의 Chip 피드백 반영 - alpha = 0.6f
murjune Feb 3, 2024
79dfbd7
[fix] 디쟌쌤의 Button 피드백 반영 - alpha = 0.7f, vertical Padding = 4.dp
murjune Feb 3, 2024
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
4 changes: 3 additions & 1 deletion core/designsystem/src/main/java/com/moya/funch/component/Button.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
73 changes: 62 additions & 11 deletions core/designsystem/src/main/java/com/moya/funch/component/Chip.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ 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
import androidx.compose.foundation.shape.CornerBasedShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalContentColor
Expand All @@ -24,36 +26,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,
Expand All @@ -64,9 +75,22 @@ fun FunchChip(
Row(
modifier = modifier
.defaultMinSize(minHeight = FunchMinHeight)
.clip(shape)
.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)
} else Modifier
)
.background(
color = colors.provideContainerColor(enabled, selected),
shape = shape
)
.selectable(
selected = selected,
Expand All @@ -82,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)
)
}
}
Expand Down Expand Up @@ -138,7 +162,9 @@ data class PunchChipColors(
private val selectedLabelColor: Color = White,
private val disabledLabelColor: Color = Gray400,
private val disabledSelectedLabelColor: Color = White,
// private val
Copy link
Collaborator

@ham2174 ham2174 Feb 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요거 불필요한 주석은 #39 에서 제거할게요잇!

) {
@Stable
fun provideContainerColor(enabled: Boolean, selected: Boolean): Color {
return when {
enabled && selected -> selectedContainerColor
Expand All @@ -148,6 +174,7 @@ data class PunchChipColors(
}
}

@Stable
fun provideLabelColor(enabled: Boolean, selected: Boolean): Color {
return when {
enabled && selected -> selectedLabelColor
Expand All @@ -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,
Expand Down Expand Up @@ -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 {
Expand All @@ -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(
Expand All @@ -244,6 +272,29 @@ private fun Preview4() {
}
}

@Preview(
name = "FunchChip - matched", showBackground = true
)
@Composable
private fun Preview5() {
FunchTheme {
Column(
Modifier
.background(Gray900)
.padding(10.dp)
) {
Column {
FunchChip(
matched = true,
selected = true,
enabled = false,
label = { Text(text = "Text", color = White, style = FunchTheme.typography.b) },
)
}
}
}
}

@Composable
private fun TrailingIconForPreview() {
Row {
Expand Down
5 changes: 3 additions & 2 deletions core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -106,7 +106,8 @@ private fun ShadowPreview() {
.clip(RoundedCornerShape(size = 16.dp))
.background(
brush
),
)
,
contentAlignment = Alignment.Center
) {
Text(
Expand Down
6 changes: 6 additions & 0 deletions core/designsystem/src/main/java/com/moya/funch/theme/Shape.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Loading