diff --git a/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/category/PodcastCategory.kt b/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/category/PodcastCategory.kt index 2deb2d444b..9c6409faf6 100644 --- a/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/category/PodcastCategory.kt +++ b/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/category/PodcastCategory.kt @@ -17,10 +17,10 @@ package com.example.jetcaster.ui.home.category import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth @@ -31,7 +31,6 @@ import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.foundation.lazy.grid.items import androidx.compose.foundation.lazy.items -import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -130,15 +129,20 @@ private fun CategoryPodcastRow( navigateToPodcastDetails: (PodcastInfo) -> Unit, modifier: Modifier = Modifier ) { - val lastIndex = podcasts.size - 1 LazyRow( modifier = modifier, - contentPadding = PaddingValues(start = Keyline1, top = 8.dp, end = Keyline1, bottom = 24.dp) + contentPadding = PaddingValues( + start = Keyline1, + top = 8.dp, + end = Keyline1, + bottom = 24.dp + ), + horizontalArrangement = Arrangement.spacedBy(24.dp) ) { - itemsIndexed( + items( items = podcasts, - key = { _, p -> p.uri } - ) { index, podcast -> + key = { it.uri } + ) { podcast -> TopPodcastRowItem( podcastTitle = podcast.title, podcastImageUrl = podcast.imageUrl, @@ -150,8 +154,6 @@ private fun CategoryPodcastRow( navigateToPodcastDetails(podcast) } ) - - if (index < lastIndex) Spacer(Modifier.width(24.dp)) } } } diff --git a/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt b/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt index 4d630242e4..3d43b7d78c 100644 --- a/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt +++ b/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt @@ -25,14 +25,16 @@ import androidx.compose.foundation.lazy.LazyListScope import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Check +import androidx.compose.material3.ExperimentalMaterial3Api 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.Tab 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 @@ -139,61 +141,65 @@ private fun PodcastCategoryTabs( modifier = modifier ) { filterableCategoriesModel.categories.forEachIndexed { index, category -> - Tab( + ChoiceChipContent( + text = category.name, selected = index == selectedIndex, - onClick = { onCategorySelected(category) } - ) { - ChoiceChipContent( - text = category.name, - selected = index == selectedIndex, - modifier = Modifier.padding(horizontal = 4.dp, vertical = 16.dp) - ) - } + modifier = Modifier.padding(horizontal = 4.dp, vertical = 16.dp), + onClick = { onCategorySelected(category) }, + ) } } } +@OptIn(ExperimentalMaterial3Api::class) @Composable private fun ChoiceChipContent( text: String, selected: Boolean, + onClick: () -> Unit, modifier: Modifier = Modifier ) { - 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 - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier.padding( - horizontal = when { - selected -> 8.dp - else -> 16.dp - }, - vertical = 8.dp - ) + // 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, ) { - if (selected) { - Icon( - imageVector = Icons.Default.Check, - contentDescription = stringResource(id = R.string.cd_selected_category), - modifier = Modifier - .height(18.dp) - .padding(end = 8.dp) + 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, ) } - Text( - text = text, - style = MaterialTheme.typography.bodyMedium, - ) } } } diff --git a/Jetcaster/app/src/main/java/com/example/jetcaster/ui/shared/EpisodeListItem.kt b/Jetcaster/app/src/main/java/com/example/jetcaster/ui/shared/EpisodeListItem.kt index b31f1ca472..a1db91845a 100644 --- a/Jetcaster/app/src/main/java/com/example/jetcaster/ui/shared/EpisodeListItem.kt +++ b/Jetcaster/app/src/main/java/com/example/jetcaster/ui/shared/EpisodeListItem.kt @@ -77,14 +77,11 @@ fun EpisodeListItem( Box(modifier = modifier.padding(vertical = 8.dp, horizontal = 16.dp)) { Surface( shape = MaterialTheme.shapes.large, - color = MaterialTheme.colorScheme.surfaceContainer + color = MaterialTheme.colorScheme.surfaceContainer, + onClick = { onClick(episode) } ) { Column( - modifier = Modifier - .padding(horizontal = 16.dp, vertical = 8.dp) - .clickable { - onClick(episode) - }, + modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp) ) { // Top Part EpisodeListItemHeader(