diff --git a/app/src/main/java/org/memento/ui/MementoTagBottomSheetItem.kt b/app/src/main/java/org/memento/ui/MementoTagBottomSheetItem.kt index 8df790b..568ccae 100644 --- a/app/src/main/java/org/memento/ui/MementoTagBottomSheetItem.kt +++ b/app/src/main/java/org/memento/ui/MementoTagBottomSheetItem.kt @@ -7,8 +7,11 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.shape.CircleShape import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -38,33 +41,33 @@ fun MementoTagBottomSheetItem( ) { Row( modifier = - Modifier - .fillMaxWidth() - .background( - color = if (isActive) activeBgColor else darkModeColors.gray09, - ) - .noRippleClickable { - onClick() - } - .padding(vertical = 7.dp, horizontal = 12.dp), + Modifier + .fillMaxWidth() + .background( + color = if (isActive) activeBgColor else darkModeColors.gray09, + ) + .noRippleClickable { + onClick() + } + .padding(vertical = 7.dp, horizontal = 12.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(10.dp), ) { Box( modifier = - Modifier - .size(10.dp) - .background( - color = tagColor, - shape = CircleShape, - ), + Modifier + .size(10.dp) + .background( + color = tagColor, + shape = CircleShape, + ), ) Text( text = option, style = - MementoTheme.typography.body_r_16.copy( - color = if (isActive) activeContentColor else darkModeColors.gray07, - ), + MementoTheme.typography.body_r_16.copy( + color = if (isActive) activeContentColor else darkModeColors.gray07, + ), ) } } @@ -77,21 +80,36 @@ fun TagSelectorContent( val options = getDummyTagData() - options.forEachIndexed { index, option -> - MementoTagBottomSheetItem( - option = option.text, - isActive = activeIndex == index, - activeBgColor = darkModeColors.gray08, - activeContentColor = darkModeColors.gray02, - tagColor = changeHexToColor(option.color), - onClick = { - if (activeIndex != index) { - activeIndex = index - onTagSelected(option.color, option.text) - } - }, - ) + var itemHeight by remember { mutableIntStateOf(0) } + val maxHeight = if (itemHeight > 0) (itemHeight * 5.5).dp else 25.dp + + + Box( + modifier = Modifier + .fillMaxWidth() + .heightIn(maxHeight) + ) { + LazyColumn( + modifier = Modifier.fillMaxWidth() + ) { + itemsIndexed(options) { index, option -> + MementoTagBottomSheetItem( + option = option.text, + isActive = activeIndex == index, + activeBgColor = darkModeColors.gray08, + activeContentColor = darkModeColors.gray02, + tagColor = changeHexToColor(option.color), + onClick = { + if (activeIndex != index) { + activeIndex = index + onTagSelected(option.color, option.text) + } + }, + ) + } + } } + } fun getDummyTagData(): List { @@ -100,6 +118,18 @@ fun getDummyTagData(): List { ColorTagData("SOPT", "#33FF57"), ColorTagData("Fitness", "#3357FF"), ColorTagData("Project", "#FFD700"), + ColorTagData("Untitled", "#FF5733"), + ColorTagData("SOPT", "#33FF57"), + ColorTagData("Fitness", "#3357FF"), + ColorTagData("Project", "#FFD700"), + ColorTagData("Untitled", "#FF5733"), + ColorTagData("SOPT", "#33FF57"), + ColorTagData("Fitness", "#3357FF"), + ColorTagData("Project", "#FFD700"), + ColorTagData("Untitled", "#FF5733"), + ColorTagData("SOPT", "#33FF57"), + ColorTagData("Fitness", "#3357FF"), + ColorTagData("Project", "#FFD700"), ) } @@ -108,9 +138,9 @@ fun getDummyTagData(): List { fun MementoTagBottomSheetItemPreview() { Column( modifier = - Modifier - .fillMaxSize() - .padding(16.dp), + Modifier + .fillMaxSize() + .padding(16.dp), verticalArrangement = Arrangement.spacedBy(space = 5.dp), ) { TagSelectorContent(