From 4538e00ce1761c4ad90bda40a012158685552ab6 Mon Sep 17 00:00:00 2001 From: yongsuk44 Date: Mon, 4 Nov 2024 19:42:01 +0900 Subject: [PATCH] [Jetcaster] Switched to FilterChip for improved readability --- .../jetcaster/ui/home/discover/Discover.kt | 98 ++++++++----------- 1 file changed, 40 insertions(+), 58 deletions(-) diff --git a/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt b/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt index adab7e487b..4fafc7353d 100644 --- a/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt +++ b/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt @@ -16,28 +16,26 @@ package com.example.jetcaster.ui.home.discover -import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyListScope +import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.grid.LazyGridScope +import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Check import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.FilterChip +import androidx.compose.material3.FilterChipDefaults import androidx.compose.material3.Icon -import androidx.compose.material3.LocalMinimumInteractiveComponentEnforcement import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.ScrollableTabRow -import androidx.compose.material3.Surface -import androidx.compose.material3.TabPosition import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import com.example.jetcaster.R @@ -121,8 +119,6 @@ fun LazyGridScope.discoverItems( ) } -private val emptyTabIndicator: @Composable (List) -> Unit = {} - @Composable private fun PodcastCategoryTabs( filterableCategoriesModel: FilterableCategoriesModel, @@ -132,15 +128,15 @@ private fun PodcastCategoryTabs( val selectedIndex = filterableCategoriesModel.categories.indexOf( filterableCategoriesModel.selectedCategory ) - ScrollableTabRow( - selectedTabIndex = selectedIndex, - containerColor = Color.Transparent, - divider = {}, /* Disable the built-in divider */ - edgePadding = Keyline1, - indicator = emptyTabIndicator, - modifier = modifier + LazyRow( + modifier = modifier, + contentPadding = PaddingValues(horizontal = Keyline1), + verticalAlignment = Alignment.CenterVertically, ) { - filterableCategoriesModel.categories.forEachIndexed { index, category -> + itemsIndexed( + items = filterableCategoriesModel.categories, + key = { i, category -> category.id } + ) { index, category -> ChoiceChipContent( text = category.name, selected = index == selectedIndex, @@ -159,47 +155,33 @@ private fun ChoiceChipContent( onClick: () -> Unit, modifier: Modifier = Modifier ) { - // When adding onClick to Surface, it automatically makes this item higher. - // On the other hand, adding .clickable modifier, doesn't use the same shape as Surface. - // This way we disable the minimum height requirement - CompositionLocalProvider(value = LocalMinimumInteractiveComponentEnforcement provides false) { - Surface( - color = when { - selected -> MaterialTheme.colorScheme.secondaryContainer - else -> MaterialTheme.colorScheme.surfaceContainer - }, - contentColor = when { - selected -> MaterialTheme.colorScheme.onSecondaryContainer - else -> MaterialTheme.colorScheme.onSurfaceVariant - }, - shape = MaterialTheme.shapes.medium, - modifier = modifier, - onClick = onClick, - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier.padding( - horizontal = when { - selected -> 8.dp - else -> 16.dp - }, - vertical = 8.dp - ) - ) { - if (selected) { - Icon( - imageVector = Icons.Default.Check, - contentDescription = stringResource(id = R.string.cd_selected_category), - modifier = Modifier - .height(18.dp) - .padding(end = 8.dp) - ) - } - Text( - text = text, - style = MaterialTheme.typography.bodyMedium, + FilterChip( + selected = selected, + onClick = onClick, + leadingIcon = { + if (selected) { + Icon( + imageVector = Icons.Default.Check, + contentDescription = stringResource(id = R.string.cd_selected_category), + modifier = Modifier.height(18.dp) ) } - } - } + }, + label = { + Text( + text = text, + style = MaterialTheme.typography.bodyMedium, + ) + }, + colors = FilterChipDefaults.filterChipColors().copy( + containerColor = MaterialTheme.colorScheme.surfaceContainer, + labelColor = MaterialTheme.colorScheme.onSurfaceVariant, + selectedContainerColor = MaterialTheme.colorScheme.secondaryContainer, + selectedLabelColor = MaterialTheme.colorScheme.onSecondaryContainer, + selectedLeadingIconColor = MaterialTheme.colorScheme.onSecondaryContainer, + ), + shape = MaterialTheme.shapes.medium, + border = null, + modifier = modifier, + ) }