From 706f342f80e47eadfd9f44b505d8254a50383aa9 Mon Sep 17 00:00:00 2001 From: Caren Chang Date: Thu, 23 Jun 2022 13:15:50 -0700 Subject: [PATCH 1/5] Add topic chips for NewsResourceCard --- core-designsystem/build.gradle.kts | 6 ++ .../core/designsystem/component/Chip.kt | 80 +++++++++++++++++++ .../nowinandroid/core/ui/NewsResourceCard.kt | 45 ++++++++--- 3 files changed, 122 insertions(+), 9 deletions(-) diff --git a/core-designsystem/build.gradle.kts b/core-designsystem/build.gradle.kts index bada9e329..053081bbf 100644 --- a/core-designsystem/build.gradle.kts +++ b/core-designsystem/build.gradle.kts @@ -41,4 +41,10 @@ dependencies { api(libs.androidx.compose.runtime) lintPublish(project(":lint")) androidTestImplementation(project(":core-testing")) + + // TODO : Remove these dependency once we upgrade to Android Studio Dolphin b/228889042 + // These dependencies are currently necessary to render Compose previews + debugImplementation(libs.androidx.customview.poolingcontainer) + debugImplementation(libs.androidx.lifecycle.viewModelCompose) + debugImplementation(libs.androidx.savedstate.ktx) } \ No newline at end of file diff --git a/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt b/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt index 3d2cf3f2c..bef4cfc7b 100644 --- a/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt +++ b/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt @@ -23,11 +23,17 @@ import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.ProvideTextStyle import androidx.compose.material3.Shapes +import androidx.compose.material3.SuggestionChip +import androidx.compose.material3.SuggestionChipDefaults +import androidx.compose.material3.Surface +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons +import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme /** * Now in Android filter chip with included leading checked icon as well as text content slot. @@ -101,6 +107,80 @@ fun NiaFilterChip( ) } +/** + * Now in Android topic chip that displays a topic name text. + * + * @param enabled Whether the chip is currently enabled. + * @param onClick Called when the user clicks the chip for more options. + * @param modifier Modifier to be applied to the chip. + * @param label The text label content. + */ +@Composable +@OptIn(ExperimentalMaterial3Api::class) +fun NiaTopicChip( + enabled: Boolean, + onClick: (Boolean) -> Unit, + modifier: Modifier = Modifier, + label: @Composable () -> Unit +) { + SuggestionChip( + enabled = enabled, + onClick = { onClick }, + label = { + ProvideTextStyle(value = MaterialTheme.typography.labelMedium) { + label() + } + }, + modifier = modifier, + shape = Shapes.Full, + border = SuggestionChipDefaults.suggestionChipBorder( + borderColor = MaterialTheme.colorScheme.primaryContainer, + disabledBorderColor = MaterialTheme.colorScheme.primaryContainer.copy( + alpha = NiaChipDefaults.DisabledChipContainerAlpha + ), + borderWidth = NiaChipDefaults.ChipBorderWidth + ), + colors = SuggestionChipDefaults.suggestionChipColors( + containerColor = MaterialTheme.colorScheme.primaryContainer, + disabledContainerColor = MaterialTheme.colorScheme.primaryContainer.copy( + alpha = NiaChipDefaults.DisabledChipContainerAlpha + ), + labelColor = MaterialTheme.colorScheme.onBackground, + disabledLabelColor = MaterialTheme.colorScheme.onBackground + ) + ) +} + +@Preview("Enabled Topic Chip Preview") +@Composable +fun NiaEnabledTopicChipPreview() { + NiaTheme { + Surface { + NiaTopicChip( + enabled = true, + onClick = { } + ) { + Text("Accessibility") + } + } + } +} + +@Preview("Disabled Topic Chip Preview") +@Composable +fun NiaDisabledTopicChipPreview() { + NiaTheme { + Surface { + NiaTopicChip( + enabled = false, + onClick = { } + ) { + Text("Accessibility") + } + } + } +} + /** * Now in Android chip default values. */ 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 ac3de4363..dcf9ecba2 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 @@ -17,6 +17,7 @@ package com.google.samples.apps.nowinandroid.core.ui import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -26,6 +27,8 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Card @@ -57,10 +60,12 @@ import androidx.compose.ui.unit.dp import androidx.core.os.ConfigurationCompat import coil.compose.AsyncImage import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaToggleButton +import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaTopicChip import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme import com.google.samples.apps.nowinandroid.core.model.data.Author import com.google.samples.apps.nowinandroid.core.model.data.NewsResource +import com.google.samples.apps.nowinandroid.core.model.data.Topic import com.google.samples.apps.nowinandroid.core.model.data.previewNewsResources import java.time.ZoneId import java.time.format.DateTimeFormatter @@ -117,6 +122,8 @@ fun NewsResourceCardExpanded( NewsResourceDate(newsResource.publishDate) Spacer(modifier = Modifier.height(12.dp)) NewsResourceShortDescription(newsResource.content) + Spacer(modifier = Modifier.height(12.dp)) + NewsResourceTopics(newsResource.topics) } } } @@ -152,13 +159,7 @@ fun NewsResourceAuthors( // Only display first author for now val author = authors[0] - val locale = ConfigurationCompat.getLocales(LocalConfiguration.current).get(0) - - val authorNameFormatted = if (locale != null) { - author.name.uppercase(locale) - } else { - author.name.uppercase() - } + val authorNameFormatted = uppercaseFormat(author.name) val authorImageUrl = author.imageUrl @@ -265,9 +266,35 @@ fun NewsResourceShortDescription( @Composable fun NewsResourceTopics( - newsResource: NewsResource + topics: List, + modifier: Modifier = Modifier ) { - TODO() + LazyRow( + modifier = modifier, + horizontalArrangement = Arrangement.spacedBy(4.dp) + ) { + items(items = topics, key = { item -> item.id }) { topic -> + NiaTopicChip( + enabled = true, // ToDo: Chip should be disabled if user is not following + onClick = { }, // ToDo: Handle topic chip interaction + ) { + Text(uppercaseFormat(topic.name)) + } + } + } +} + +@Composable +private fun uppercaseFormat(string: String): String { + val locale = ConfigurationCompat.getLocales(LocalConfiguration.current).get(0) + + val uppercaseFormatted = if (locale != null) { + string.uppercase(locale) + } else { + string.uppercase() + } + + return uppercaseFormatted } @Preview("Bookmark Button") From 60e8be069244c396ad091b7f5270d90dd254f8f2 Mon Sep 17 00:00:00 2001 From: Caren Chang Date: Thu, 23 Jun 2022 17:58:04 -0700 Subject: [PATCH 2/5] Fix onClick invocation for chip --- .../apps/nowinandroid/core/designsystem/component/Chip.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt b/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt index bef4cfc7b..1df362050 100644 --- a/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt +++ b/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt @@ -119,13 +119,13 @@ fun NiaFilterChip( @OptIn(ExperimentalMaterial3Api::class) fun NiaTopicChip( enabled: Boolean, - onClick: (Boolean) -> Unit, + onClick: () -> Unit, modifier: Modifier = Modifier, label: @Composable () -> Unit ) { SuggestionChip( enabled = enabled, - onClick = { onClick }, + onClick = onClick, label = { ProvideTextStyle(value = MaterialTheme.typography.labelMedium) { label() From b7f2b31cce2f3add2e6f0ce9b6fbc62f22ba3bec Mon Sep 17 00:00:00 2001 From: Caren Chang Date: Fri, 8 Jul 2022 16:03:17 -0700 Subject: [PATCH 3/5] Update to use NiaTopicTag, Row, and uppercase() --- .../core/designsystem/component/Tag.kt | 9 ++-- .../src/main/res/values/strings.xml | 21 +++++++++ .../nowinandroid/core/ui/NewsResourceCard.kt | 45 +++++++------------ 3 files changed, 43 insertions(+), 32 deletions(-) create mode 100644 core-designsystem/src/main/res/values/strings.xml 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 c2790c538..d45bdb226 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 @@ -18,6 +18,7 @@ package com.google.samples.apps.nowinandroid.core.designsystem.component import androidx.compose.foundation.layout.Box import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text import androidx.compose.material3.contentColorFor import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -26,6 +27,8 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource +import com.google.samples.apps.nowinandroid.core.designsystem.R @Composable fun NiaTopicTag( @@ -36,9 +39,9 @@ fun NiaTopicTag( modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit, - followText: @Composable () -> Unit, - unFollowText: @Composable () -> Unit, - browseText: @Composable () -> Unit + followText: @Composable () -> Unit = { Text(stringResource(R.string.follow)) }, + 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) { diff --git a/core-designsystem/src/main/res/values/strings.xml b/core-designsystem/src/main/res/values/strings.xml new file mode 100644 index 000000000..5d1158888 --- /dev/null +++ b/core-designsystem/src/main/res/values/strings.xml @@ -0,0 +1,21 @@ + + + + Follow + Unfollow + Browse topic + 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 dcf9ecba2..82cd9537b 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 @@ -17,6 +17,7 @@ package com.google.samples.apps.nowinandroid.core.ui import androidx.compose.foundation.background +import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -27,8 +28,7 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width -import androidx.compose.foundation.lazy.LazyRow -import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Card @@ -48,7 +48,6 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.layout.ContentScale -import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalInspectionMode import androidx.compose.ui.res.painterResource @@ -57,10 +56,9 @@ import androidx.compose.ui.semantics.onClick import androidx.compose.ui.semantics.semantics import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import androidx.core.os.ConfigurationCompat import coil.compose.AsyncImage import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaToggleButton -import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaTopicChip +import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaTopicTag import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme import com.google.samples.apps.nowinandroid.core.model.data.Author @@ -69,6 +67,7 @@ import com.google.samples.apps.nowinandroid.core.model.data.Topic import com.google.samples.apps.nowinandroid.core.model.data.previewNewsResources import java.time.ZoneId import java.time.format.DateTimeFormatter +import java.util.Locale import kotlinx.datetime.Instant import kotlinx.datetime.toJavaInstant @@ -159,7 +158,7 @@ fun NewsResourceAuthors( // Only display first author for now val author = authors[0] - val authorNameFormatted = uppercaseFormat(author.name) + val authorNameFormatted = author.name.uppercase(Locale.getDefault()) val authorImageUrl = author.imageUrl @@ -269,34 +268,22 @@ fun NewsResourceTopics( topics: List, modifier: Modifier = Modifier ) { - LazyRow( - modifier = modifier, - horizontalArrangement = Arrangement.spacedBy(4.dp) + Row( + modifier = modifier.horizontalScroll(rememberScrollState()), // causes narrow chips + horizontalArrangement = Arrangement.spacedBy(4.dp), ) { - items(items = topics, key = { item -> item.id }) { topic -> - NiaTopicChip( - enabled = true, // ToDo: Chip should be disabled if user is not following - onClick = { }, // ToDo: Handle topic chip interaction - ) { - Text(uppercaseFormat(topic.name)) - } + for (topic in topics) { + NiaTopicTag( + followed = true, // Todo + onFollowClick = { }, // Todo + onUnfollowClick = { }, // Todo + onBrowseClick = { }, // Todo + text = { Text(text = topic.name.uppercase(Locale.getDefault())) } + ) } } } -@Composable -private fun uppercaseFormat(string: String): String { - val locale = ConfigurationCompat.getLocales(LocalConfiguration.current).get(0) - - val uppercaseFormatted = if (locale != null) { - string.uppercase(locale) - } else { - string.uppercase() - } - - return uppercaseFormatted -} - @Preview("Bookmark Button") @Composable fun BookmarkButtonPreview() { From a37f80d234ef812017a88acc7f4c98ebed009f9c Mon Sep 17 00:00:00 2001 From: Caren Chang Date: Mon, 18 Jul 2022 14:13:04 -0700 Subject: [PATCH 4/5] Remove redundant NiaTopicChip and use previewNewsResource --- .../core/designsystem/component/Chip.kt | 80 ------------------- .../nowinandroid/core/ui/NewsResourceCard.kt | 10 +-- 2 files changed, 5 insertions(+), 85 deletions(-) diff --git a/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt b/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt index 1df362050..3d2cf3f2c 100644 --- a/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt +++ b/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt @@ -23,17 +23,11 @@ import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.ProvideTextStyle import androidx.compose.material3.Shapes -import androidx.compose.material3.SuggestionChip -import androidx.compose.material3.SuggestionChipDefaults -import androidx.compose.material3.Surface -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons -import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme /** * Now in Android filter chip with included leading checked icon as well as text content slot. @@ -107,80 +101,6 @@ fun NiaFilterChip( ) } -/** - * Now in Android topic chip that displays a topic name text. - * - * @param enabled Whether the chip is currently enabled. - * @param onClick Called when the user clicks the chip for more options. - * @param modifier Modifier to be applied to the chip. - * @param label The text label content. - */ -@Composable -@OptIn(ExperimentalMaterial3Api::class) -fun NiaTopicChip( - enabled: Boolean, - onClick: () -> Unit, - modifier: Modifier = Modifier, - label: @Composable () -> Unit -) { - SuggestionChip( - enabled = enabled, - onClick = onClick, - label = { - ProvideTextStyle(value = MaterialTheme.typography.labelMedium) { - label() - } - }, - modifier = modifier, - shape = Shapes.Full, - border = SuggestionChipDefaults.suggestionChipBorder( - borderColor = MaterialTheme.colorScheme.primaryContainer, - disabledBorderColor = MaterialTheme.colorScheme.primaryContainer.copy( - alpha = NiaChipDefaults.DisabledChipContainerAlpha - ), - borderWidth = NiaChipDefaults.ChipBorderWidth - ), - colors = SuggestionChipDefaults.suggestionChipColors( - containerColor = MaterialTheme.colorScheme.primaryContainer, - disabledContainerColor = MaterialTheme.colorScheme.primaryContainer.copy( - alpha = NiaChipDefaults.DisabledChipContainerAlpha - ), - labelColor = MaterialTheme.colorScheme.onBackground, - disabledLabelColor = MaterialTheme.colorScheme.onBackground - ) - ) -} - -@Preview("Enabled Topic Chip Preview") -@Composable -fun NiaEnabledTopicChipPreview() { - NiaTheme { - Surface { - NiaTopicChip( - enabled = true, - onClick = { } - ) { - Text("Accessibility") - } - } - } -} - -@Preview("Disabled Topic Chip Preview") -@Composable -fun NiaDisabledTopicChipPreview() { - NiaTheme { - Surface { - NiaTopicChip( - enabled = false, - onClick = { } - ) { - Text("Accessibility") - } - } - } -} - /** * Now in Android chip default values. */ 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 82cd9537b..3fdad17c4 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 @@ -274,10 +274,10 @@ fun NewsResourceTopics( ) { for (topic in topics) { NiaTopicTag( - followed = true, // Todo - onFollowClick = { }, // Todo - onUnfollowClick = { }, // Todo - onBrowseClick = { }, // Todo + followed = true, // ToDo: Check if topic is followed + onFollowClick = { }, // ToDo + onUnfollowClick = { }, // ToDo + onBrowseClick = { }, // ToDo text = { Text(text = topic.name.uppercase(Locale.getDefault())) } ) } @@ -317,4 +317,4 @@ fun ExpandedNewsResourcePreview() { ) } } -} +} \ No newline at end of file From b560351d754c0f8ab1bbc68fb630f0719bdcb94a Mon Sep 17 00:00:00 2001 From: Caren Chang Date: Mon, 18 Jul 2022 14:42:21 -0700 Subject: [PATCH 5/5] Run spotless --- .../samples/apps/nowinandroid/core/ui/NewsResourceCard.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 3fdad17c4..117b2ae47 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 @@ -317,4 +317,4 @@ fun ExpandedNewsResourcePreview() { ) } } -} \ No newline at end of file +}