From d25f8c6c43c5abcab7de3b72e6566da2996d004b Mon Sep 17 00:00:00 2001 From: Noah Bond Date: Tue, 6 Sep 2022 12:29:30 -0700 Subject: [PATCH] [fenix] For https://github.com/mozilla-mobile/fenix/issues/26797 - Add optional parameter to customize the background color of ListItemTabLarge --- .../mozilla/fenix/compose/ListItemTabLarge.kt | 48 ++++++++++++++++--- .../home/pocket/PocketStoriesComposables.kt | 5 +- 2 files changed, 46 insertions(+), 7 deletions(-) diff --git a/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt b/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt index 9f72d8ac15..7b4c7e13b4 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt @@ -4,6 +4,7 @@ package org.mozilla.fenix.compose +import android.content.res.Configuration import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column @@ -19,6 +20,7 @@ import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp @@ -42,6 +44,7 @@ import org.mozilla.fenix.theme.Theme * @param imageUrl URL from where the to download a header image of the tab this composable renders. * @param title Title off the tab this composable renders. * @param caption Optional caption text. + * @param backgroundColor Background [Color] of the item. * @param onClick Optional callback to be invoked when this composable is clicked. */ @Composable @@ -49,9 +52,14 @@ fun ListItemTabLarge( imageUrl: String, title: String, caption: String? = null, + backgroundColor: Color = FirefoxTheme.colors.layer2, onClick: (() -> Unit)? = null ) { - ListItemTabSurface(imageUrl, onClick) { + ListItemTabSurface( + imageUrl = imageUrl, + backgroundColor = backgroundColor, + onClick = onClick, + ) { Text( text = title, color = FirefoxTheme.colors.textPrimary, @@ -89,18 +97,24 @@ fun ListItemTabLarge( * ``` * * @param imageUrl URL from where the to download a header image of the tab this composable renders. + * @param backgroundColor Background [Color] of the item. + * @param onClick Optional callback to be invoked when this composable is clicked. * @param title Composable rendering the title of the tab this composable represents. * @param subtitle Optional tab caption composable. - * @param onClick Optional callback to be invoked when this composable is clicked. */ @Composable fun ListItemTabLarge( imageUrl: String, + backgroundColor: Color = FirefoxTheme.colors.layer2, onClick: () -> Unit, title: @Composable () -> Unit, subtitle: @Composable (() -> Unit)? = null ) { - ListItemTabSurface(imageUrl, onClick) { + ListItemTabSurface( + imageUrl = imageUrl, + backgroundColor = backgroundColor, + onClick = onClick, + ) { title() subtitle?.invoke() @@ -111,12 +125,14 @@ fun ListItemTabLarge( * Shared default configuration of a ListItemTabLarge Composable. * * @param imageUrl URL from where the to download a header image of the tab this composable renders. + * @param backgroundColor Background [Color] of the item. * @param onClick Optional callback to be invoked when this composable is clicked. * @param tabDetails [Composable] Displayed to the the end of the image. Allows for variation in the item text style. */ @Composable fun ListItemTabSurface( imageUrl: String, + backgroundColor: Color = FirefoxTheme.colors.layer2, onClick: (() -> Unit)? = null, tabDetails: @Composable () -> Unit ) { @@ -126,7 +142,7 @@ fun ListItemTabSurface( Card( modifier = modifier, shape = RoundedCornerShape(8.dp), - backgroundColor = FirefoxTheme.colors.layer2, + backgroundColor = backgroundColor, elevation = 6.dp ) { Row( @@ -152,7 +168,8 @@ fun ListItemTabSurface( } @Composable -@Preview +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) +@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO) private fun ListItemTabLargePreview() { FirefoxTheme(theme = Theme.getTheme()) { ListItemTabLarge( @@ -164,7 +181,8 @@ private fun ListItemTabLargePreview() { } @Composable -@Preview +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) +@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO) private fun ListItemTabSurfacePreview() { FirefoxTheme(theme = Theme.getTheme()) { ListItemTabSurface( @@ -178,3 +196,21 @@ private fun ListItemTabSurfacePreview() { } } } + +@Composable +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) +@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO) +private fun ListItemTabSurfaceWithCustomBackgroundPreview() { + FirefoxTheme(theme = Theme.getTheme()) { + ListItemTabSurface( + imageUrl = "", + backgroundColor = Color.Cyan, + ) { + Text( + text = "This can be anything", + color = FirefoxTheme.colors.textPrimary, + fontSize = 22.sp + ) + } + } +} diff --git a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt b/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt index ab22ddf6ee..03b6080b75 100644 --- a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt +++ b/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt @@ -165,7 +165,10 @@ fun PocketSponsoredStory( "&resize=w$imageWidth-h$imageHeight" ) - ListItemTabSurface(imageUrl, { onStoryClick(story) }) { + ListItemTabSurface( + imageUrl = imageUrl, + onClick = { onStoryClick(story) }, + ) { Text( text = story.title, color = FirefoxTheme.colors.textPrimary,