diff --git a/app-nia-catalog/src/main/java/com/google/samples/apps/niacatalog/ui/Catalog.kt b/app-nia-catalog/src/main/java/com/google/samples/apps/niacatalog/ui/Catalog.kt index d4d7b499b..9dc2d2fb2 100644 --- a/app-nia-catalog/src/main/java/com/google/samples/apps/niacatalog/ui/Catalog.kt +++ b/app-nia-catalog/src/main/java/com/google/samples/apps/niacatalog/ui/Catalog.kt @@ -518,24 +518,30 @@ fun NiaCatalog() { item { Text("Tags", Modifier.padding(top = 16.dp)) } item { FlowRow(mainAxisSpacing = 16.dp) { + var expandedTopic by remember { mutableStateOf(null) } + var firstFollowed by remember { mutableStateOf(false) } NiaTopicTag( + expanded = expandedTopic == "Topic 1", followed = firstFollowed, + onDropMenuToggle = { show -> expandedTopic = if (show) "Topic 1" else null }, onFollowClick = { firstFollowed = true }, onUnfollowClick = { firstFollowed = false }, onBrowseClick = {}, - text = { Text(text = "Topic".uppercase()) }, + text = { Text(text = "Topic 1".uppercase()) }, followText = { Text(text = "Follow") }, unFollowText = { Text(text = "Unfollow") }, browseText = { Text(text = "Browse topic") } ) var secondFollowed by remember { mutableStateOf(true) } NiaTopicTag( + expanded = expandedTopic == "Topic 2", followed = secondFollowed, + onDropMenuToggle = { show -> expandedTopic = if (show) "Topic 2" else null }, onFollowClick = { secondFollowed = true }, onUnfollowClick = { secondFollowed = false }, onBrowseClick = {}, - text = { Text(text = "Topic".uppercase()) }, + text = { Text(text = "Topic 2".uppercase()) }, followText = { Text(text = "Follow") }, unFollowText = { Text(text = "Unfollow") }, browseText = { Text(text = "Browse topic") } diff --git a/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Tag.kt b/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Tag.kt index d45bdb226..38a585907 100644 --- a/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Tag.kt +++ b/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Tag.kt @@ -32,7 +32,9 @@ import com.google.samples.apps.nowinandroid.core.designsystem.R @Composable fun NiaTopicTag( + expanded : Boolean = false, followed: Boolean, + onDropMenuToggle : (show: Boolean) -> Unit = {}, onFollowClick: () -> Unit, onUnfollowClick: () -> Unit, onBrowseClick: () -> Unit, @@ -43,7 +45,7 @@ fun NiaTopicTag( unFollowText: @Composable () -> Unit = { Text(stringResource(R.string.unfollow)) }, browseText: @Composable () -> Unit = { Text(stringResource(R.string.browse_topic)) } ) { - var expanded by remember { mutableStateOf(false) } + Box(modifier = modifier) { val containerColor = if (followed) { MaterialTheme.colorScheme.primaryContainer @@ -51,7 +53,7 @@ fun NiaTopicTag( MaterialTheme.colorScheme.surfaceVariant } NiaTextButton( - onClick = { expanded = true }, + onClick = { onDropMenuToggle(true) }, enabled = enabled, small = true, colors = NiaButtonDefaults.textButtonColors( @@ -69,7 +71,7 @@ fun NiaTopicTag( ) NiaDropdownMenu( expanded = expanded, - onDismissRequest = { expanded = false }, + onDismissRequest = { onDropMenuToggle(false) }, items = if (followed) listOf(UNFOLLOW, BROWSE) else listOf(FOLLOW, BROWSE), onItemClick = { item -> when (item) { diff --git a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt index 117b2ae47..d29d022c3 100644 --- a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt +++ b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt @@ -268,13 +268,17 @@ fun NewsResourceTopics( topics: List, modifier: Modifier = Modifier ) { + var expandedTopic by remember { mutableStateOf(null) } + Row( modifier = modifier.horizontalScroll(rememberScrollState()), // causes narrow chips horizontalArrangement = Arrangement.spacedBy(4.dp), ) { for (topic in topics) { NiaTopicTag( + expanded = expandedTopic == topic.id, followed = true, // ToDo: Check if topic is followed + onDropMenuToggle = { show -> expandedTopic = if (show) topic.id else null }, onFollowClick = { }, // ToDo onUnfollowClick = { }, // ToDo onBrowseClick = { }, // ToDo