From 139ae0a587a823c5912c5549078e53887087619b Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Sun, 17 Nov 2024 22:30:30 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20list=20color=20token=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 --- .../yourssu/handy/compose/foundation/SemanticColors.kt | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt index d668f4f4..e03cf5ad 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt @@ -112,7 +112,13 @@ data class ColorScheme( // Pagination / Basic val paginationBasicSelected: Color = ColorNeutralBlack, - val paginationBasicUnselected: Color = ColorGray500 + val paginationBasicUnselected: Color = ColorGray500, + + // List + val listEnabled: Color = ColorNeutralWhite, + val listPressed: Color = ColorGray50, + val listDisabled: Color = ColorNeutralWhite, + ) val lightColorScheme = ColorScheme() From e23e04694bc6006f878ffd695f4c066be534b75b Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Mon, 18 Nov 2024 00:14:59 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20ListItem=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/other.xml | 33 +++-- .../compose/foundation/SemanticColors.kt | 1 + .../yourssu/handy/compose/list/ListItem.kt | 128 ++++++++++++++++++ 3 files changed, 151 insertions(+), 11 deletions(-) create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt diff --git a/.idea/other.xml b/.idea/other.xml index 94c96f63..104e542e 100644 --- a/.idea/other.xml +++ b/.idea/other.xml @@ -25,6 +25,17 @@ diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt index e03cf5ad..a28e7cc0 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt @@ -90,6 +90,7 @@ data class ColorScheme( val iconBasicPrimary: Color = ColorNeutralBlack, val iconBasicSecondary: Color = ColorGray700, val iconBasicTertiary: Color = ColorGray500, + val iconBasicDisabledStrong: Color = ColorGray300, val iconBasicDisabled: Color = ColorGray200, val iconBasicWhite: Color = ColorNeutralWhite, diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt new file mode 100644 index 00000000..5fba18ad --- /dev/null +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt @@ -0,0 +1,128 @@ +package com.yourssu.handy.compose.list + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsPressedAsState +import androidx.compose.foundation.layout.Arrangement +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.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.Icon +import com.yourssu.handy.compose.Text +import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.line.ArrowsChevronRight +import com.yourssu.handy.compose.icons.line.User + +@Composable +fun ListItem( + headline: String, + onClick: () -> Unit, + modifier: Modifier = Modifier, + headlineColor: Color = HandyTheme.colors.textBasicPrimary, + enabled: Boolean = true, + leadingIcon: ImageVector? = null, + leadingIconColor: Color = HandyTheme.colors.iconBasicPrimary, + trailingIcon: ImageVector? = null, + tailingIconColor: Color = HandyTheme.colors.iconBasicTertiary, + containerColor: Color = HandyTheme.colors.listEnabled, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } +) { + val pressed by interactionSource.collectIsPressedAsState() + + val backgroundColor = determineBackgroundColor(enabled, pressed, containerColor) + + Row( + modifier = modifier + .fillMaxWidth() + .height(64.dp) + .clickable( + onClick = onClick, + enabled = enabled, + interactionSource = interactionSource, + indication = null + ) + .background(backgroundColor), + horizontalArrangement = Arrangement.SpaceBetween + ) { + Row { + leadingIcon?.let { + Icon( + imageVector = leadingIcon, + contentDescription = "leadingIcon", + tint = if (enabled) leadingIconColor else HandyTheme.colors.iconBasicDisabledStrong, + modifier = modifier.padding(start = 16.dp, top = 20.dp, bottom = 20.dp) + ) + } + + Text( + text = headline, + color = if (enabled) headlineColor else HandyTheme.colors.textBasicDisabled, + modifier = modifier.padding(start = 16.dp, top = 20.dp, bottom = 20.dp) + ) + + } + + trailingIcon?.let { + Icon( + imageVector = trailingIcon, + contentDescription = "trailingIcon", + tint = if (enabled) tailingIconColor else HandyTheme.colors.iconBasicDisabledStrong, + modifier = modifier.padding(end = 16.dp, top = 20.dp, bottom = 20.dp) + ) + } + } +} + +@Composable +fun determineBackgroundColor( + enabled: Boolean, + pressed: Boolean, + containerColor: Color +): Color { + return when { + !enabled -> HandyTheme.colors.listDisabled + pressed -> HandyTheme.colors.listPressed + else -> containerColor + } +} + +@Composable +@Preview +fun ListItemPreview() { + HandyTheme { + Column( + modifier = Modifier + .background(Color.White) + .fillMaxWidth() + .padding(20.dp), + verticalArrangement = Arrangement.spacedBy(10.dp) + ) { + ListItem( + headline = "Title", + onClick = {}, + leadingIcon = HandyIcons.Line.User, + trailingIcon = HandyIcons.Line.ArrowsChevronRight, + ) + + ListItem( + headline = "Title", + onClick = {}, + leadingIcon = HandyIcons.Line.User, + trailingIcon = HandyIcons.Line.ArrowsChevronRight, + enabled = false + ) + } + } +} \ No newline at end of file From b068854c5950596103896955eb86dea7e787bef2 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Fri, 22 Nov 2024 17:52:43 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20content=20=EA=B5=AC=EC=84=B1?= =?UTF-8?q?=EC=9A=94=EC=86=8C=20Color=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?= =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../yourssu/handy/compose/list/ListItem.kt | 88 +++++++++++++++---- 1 file changed, 70 insertions(+), 18 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt index 5fba18ad..94c9596f 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt @@ -13,9 +13,11 @@ import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.yourssu.handy.compose.HandyTheme @@ -24,24 +26,26 @@ import com.yourssu.handy.compose.Text import com.yourssu.handy.compose.icons.HandyIcons import com.yourssu.handy.compose.icons.line.ArrowsChevronRight import com.yourssu.handy.compose.icons.line.User +import org.w3c.dom.Text @Composable fun ListItem( headline: String, onClick: () -> Unit, modifier: Modifier = Modifier, - headlineColor: Color = HandyTheme.colors.textBasicPrimary, enabled: Boolean = true, leadingIcon: ImageVector? = null, - leadingIconColor: Color = HandyTheme.colors.iconBasicPrimary, trailingIcon: ImageVector? = null, - tailingIconColor: Color = HandyTheme.colors.iconBasicTertiary, containerColor: Color = HandyTheme.colors.listEnabled, + pressedContainerColor: Color = HandyTheme.colors.listPressed, + headlineColor: Color = HandyTheme.colors.textBasicPrimary, + leadingIconColor: Color = HandyTheme.colors.iconBasicPrimary, + tailingIconColor: Color = HandyTheme.colors.iconBasicTertiary, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } ) { val pressed by interactionSource.collectIsPressedAsState() - val backgroundColor = determineBackgroundColor(enabled, pressed, containerColor) + val backgroundColor = determineContainerColor(enabled, pressed, containerColor, pressedContainerColor) Row( modifier = modifier @@ -56,57 +60,70 @@ fun ListItem( .background(backgroundColor), horizontalArrangement = Arrangement.SpaceBetween ) { - Row { + Row( + modifier = modifier.padding(horizontal = 16.dp, vertical = 20.dp), + verticalAlignment = Alignment.CenterVertically + ) { leadingIcon?.let { Icon( imageVector = leadingIcon, contentDescription = "leadingIcon", - tint = if (enabled) leadingIconColor else HandyTheme.colors.iconBasicDisabledStrong, - modifier = modifier.padding(start = 16.dp, top = 20.dp, bottom = 20.dp) + tint = determineContentColor(enabled, leadingIconColor), ) } Text( text = headline, - color = if (enabled) headlineColor else HandyTheme.colors.textBasicDisabled, - modifier = modifier.padding(start = 16.dp, top = 20.dp, bottom = 20.dp) + color = determineContentColor(enabled, headlineColor), + modifier = modifier.padding(horizontal = 16.dp), + overflow = TextOverflow.Ellipsis, ) - } trailingIcon?.let { Icon( imageVector = trailingIcon, contentDescription = "trailingIcon", - tint = if (enabled) tailingIconColor else HandyTheme.colors.iconBasicDisabledStrong, - modifier = modifier.padding(end = 16.dp, top = 20.dp, bottom = 20.dp) + tint = determineContentColor(enabled, tailingIconColor), + modifier = modifier.padding(end = 16.dp, bottom = 20.dp, top = 20.dp) ) } } } @Composable -fun determineBackgroundColor( +fun determineContainerColor( enabled: Boolean, pressed: Boolean, - containerColor: Color + containerColor: Color, + pressedContainerColor: Color ): Color { return when { !enabled -> HandyTheme.colors.listDisabled - pressed -> HandyTheme.colors.listPressed + pressed -> pressedContainerColor else -> containerColor } } +@Composable +fun determineContentColor( + enabled: Boolean, + contentColor: Color +): Color { + return when { + !enabled -> HandyTheme.colors.textBasicDisabled + else -> contentColor + } +} + @Composable @Preview fun ListItemPreview() { HandyTheme { Column( modifier = Modifier - .background(Color.White) - .fillMaxWidth() - .padding(20.dp), + .background(Color.Red) + .fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(10.dp) ) { ListItem( @@ -123,6 +140,41 @@ fun ListItemPreview() { trailingIcon = HandyIcons.Line.ArrowsChevronRight, enabled = false ) + + ListItem( + headline = "Titleeeeeeeeeeeeeeeeeeeeeeee", + onClick = {}, + leadingIcon = HandyIcons.Line.User, + trailingIcon = HandyIcons.Line.ArrowsChevronRight, + containerColor = HandyTheme.colors.textBrandPrimary, + tailingIconColor = HandyTheme.colors.textStatusNegative, + headlineColor = HandyTheme.colors.textBasicWhite, + leadingIconColor = HandyTheme.colors.iconBasicTertiary + ) + + ListItem( + headline = "Titleeeeeeeeeeeeeeeeeeeeeeee", + onClick = {}, + leadingIcon = HandyIcons.Line.User, + trailingIcon = HandyIcons.Line.ArrowsChevronRight, + containerColor = HandyTheme.colors.textBrandPrimary, + tailingIconColor = HandyTheme.colors.textStatusNegative, + headlineColor = HandyTheme.colors.textBasicWhite, + leadingIconColor = HandyTheme.colors.iconBasicTertiary, + pressedContainerColor = HandyTheme.colors.iconBasicTertiary + ) + + ListItem( + headline = "Titleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", + onClick = {}, + leadingIcon = HandyIcons.Line.User, + trailingIcon = HandyIcons.Line.ArrowsChevronRight, + containerColor = HandyTheme.colors.textBrandPrimary, + tailingIconColor = HandyTheme.colors.textStatusNegative, + headlineColor = HandyTheme.colors.textBasicWhite, + leadingIconColor = HandyTheme.colors.iconBasicTertiary, + pressedContainerColor = HandyTheme.colors.iconBasicTertiary + ) } } } \ No newline at end of file