For #27457 - Refactor Pocket category colors
This commit is contained in:
Noah Bond
mergify[bot]
parent
9a52bbcc3d
commit
0609475ede
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
package org.mozilla.fenix.home.pocket
|
||||
|
||||
import android.content.res.Configuration
|
||||
import android.view.View
|
||||
import androidx.compose.foundation.isSystemInDarkTheme
|
||||
import androidx.compose.foundation.layout.Column
|
||||
|
|
@ -12,7 +13,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
|
|||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.platform.ComposeView
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
|
|
@ -25,7 +25,6 @@ import org.mozilla.fenix.components.components
|
|||
import org.mozilla.fenix.compose.ComposeViewHolder
|
||||
import org.mozilla.fenix.compose.home.HomeSectionHeader
|
||||
import org.mozilla.fenix.theme.FirefoxTheme
|
||||
import org.mozilla.fenix.theme.Theme
|
||||
import org.mozilla.fenix.wallpapers.WallpaperState
|
||||
|
||||
internal const val POCKET_CATEGORIES_SELECTED_AT_A_TIME_COUNT = 8
|
||||
|
|
@ -61,10 +60,8 @@ class PocketCategoriesViewHolder(
|
|||
val wallpaperState = components.appStore
|
||||
.observeAsComposableState { state -> state.wallpaperState }.value ?: WallpaperState.default
|
||||
|
||||
var selectedBackgroundColor: Color? = null
|
||||
var unselectedBackgroundColor: Color? = null
|
||||
var selectedTextColor: Color? = null
|
||||
var unselectedTextColor: Color? = null
|
||||
var (selectedBackgroundColor, unselectedBackgroundColor, selectedTextColor, unselectedTextColor) =
|
||||
PocketStoriesCategoryColors.buildColors()
|
||||
wallpaperState.composeRunIfWallpaperCardColorsAreAvailable { cardColorLight, cardColorDark ->
|
||||
if (isSystemInDarkTheme()) {
|
||||
selectedBackgroundColor = cardColorDark
|
||||
|
|
@ -79,16 +76,20 @@ class PocketCategoriesViewHolder(
|
|||
}
|
||||
}
|
||||
|
||||
val categoryColors = PocketStoriesCategoryColors(
|
||||
selectedTextColor = selectedTextColor,
|
||||
unselectedTextColor = unselectedTextColor,
|
||||
selectedBackgroundColor = selectedBackgroundColor,
|
||||
unselectedBackgroundColor = unselectedBackgroundColor,
|
||||
)
|
||||
|
||||
// See the detailed comment in PocketStoriesViewHolder for reasoning behind this change.
|
||||
if (!homeScreenReady) return
|
||||
Column {
|
||||
Spacer(Modifier.height(24.dp))
|
||||
|
||||
PocketTopics(
|
||||
selectedBackgroundColor = selectedBackgroundColor,
|
||||
unselectedBackgroundColor = unselectedBackgroundColor,
|
||||
selectedTextColor = selectedTextColor,
|
||||
unselectedTextColor = unselectedTextColor,
|
||||
categoryColors = categoryColors,
|
||||
categories = categories ?: emptyList(),
|
||||
categoriesSelections = categoriesSelections ?: emptyList(),
|
||||
onCategoryClick = interactor::onCategoryClicked,
|
||||
|
|
@ -103,12 +104,9 @@ class PocketCategoriesViewHolder(
|
|||
|
||||
@Composable
|
||||
private fun PocketTopics(
|
||||
selectedTextColor: Color? = null,
|
||||
unselectedTextColor: Color? = null,
|
||||
selectedBackgroundColor: Color? = null,
|
||||
unselectedBackgroundColor: Color? = null,
|
||||
categories: List<PocketRecommendedStoriesCategory> = emptyList(),
|
||||
categoriesSelections: List<PocketRecommendedStoriesSelectedCategory> = emptyList(),
|
||||
categoryColors: PocketStoriesCategoryColors = PocketStoriesCategoryColors.buildColors(),
|
||||
onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
|
||||
) {
|
||||
Column {
|
||||
|
|
@ -121,21 +119,18 @@ private fun PocketTopics(
|
|||
PocketStoriesCategories(
|
||||
categories = categories,
|
||||
selections = categoriesSelections,
|
||||
selectedTextColor = selectedTextColor,
|
||||
unselectedTextColor = unselectedTextColor,
|
||||
selectedBackgroundColor = selectedBackgroundColor,
|
||||
unselectedBackgroundColor = unselectedBackgroundColor,
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
categoryColors = categoryColors,
|
||||
onCategoryClick = onCategoryClick,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
@Preview
|
||||
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
|
||||
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
|
||||
private fun PocketCategoriesViewHolderPreview() {
|
||||
FirefoxTheme(theme = Theme.getTheme()) {
|
||||
FirefoxTheme {
|
||||
PocketTopics(
|
||||
categories = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"
|
||||
.split(" ")
|
||||
|
|
|
|||
|
|
@ -419,12 +419,9 @@ private fun Rect.getIntersectPercentage(realSize: IntSize, other: Rect): Float {
|
|||
*
|
||||
* @param categories The categories needed to be displayed.
|
||||
* @param selections List of categories currently selected.
|
||||
* @param selectedTextColor Text [Color] when the category is selected.
|
||||
* @param unselectedTextColor Text [Color] when the category is not selected.
|
||||
* @param selectedBackgroundColor Background [Color] when the category is selected.
|
||||
* @param unselectedBackgroundColor Background [Color] when the category is not selected.
|
||||
* @param onCategoryClick Callback for when the user taps a category.
|
||||
* @param modifier [Modifier] to be applied to the layout.
|
||||
* @param categoryColors The color set defined by [PocketStoriesCategoryColors] used to style Pocket categories.
|
||||
* @param onCategoryClick Callback for when the user taps a category.
|
||||
*/
|
||||
@OptIn(ExperimentalComposeUiApi::class)
|
||||
@Suppress("LongParameterList")
|
||||
|
|
@ -432,12 +429,9 @@ private fun Rect.getIntersectPercentage(realSize: IntSize, other: Rect): Float {
|
|||
fun PocketStoriesCategories(
|
||||
categories: List<PocketRecommendedStoriesCategory>,
|
||||
selections: List<PocketRecommendedStoriesSelectedCategory>,
|
||||
selectedTextColor: Color? = null,
|
||||
unselectedTextColor: Color? = null,
|
||||
selectedBackgroundColor: Color? = null,
|
||||
unselectedBackgroundColor: Color? = null,
|
||||
onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
categoryColors: PocketStoriesCategoryColors = PocketStoriesCategoryColors.buildColors(),
|
||||
onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
|
||||
) {
|
||||
Box(
|
||||
modifier = modifier.semantics {
|
||||
|
|
@ -453,10 +447,10 @@ fun PocketStoriesCategories(
|
|||
SelectableChip(
|
||||
text = category.name,
|
||||
isSelected = selections.map { it.name }.contains(category.name),
|
||||
selectedTextColor = selectedTextColor,
|
||||
unselectedTextColor = unselectedTextColor,
|
||||
selectedBackgroundColor = selectedBackgroundColor,
|
||||
unselectedBackgroundColor = unselectedBackgroundColor,
|
||||
selectedTextColor = categoryColors.selectedTextColor,
|
||||
unselectedTextColor = categoryColors.unselectedTextColor,
|
||||
selectedBackgroundColor = categoryColors.selectedBackgroundColor,
|
||||
unselectedBackgroundColor = categoryColors.unselectedBackgroundColor,
|
||||
) {
|
||||
onCategoryClick(category)
|
||||
}
|
||||
|
|
@ -465,6 +459,40 @@ fun PocketStoriesCategories(
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrapper for the color parameters of [PocketStoriesCategories].
|
||||
*
|
||||
* @param selectedTextColor Text [Color] when the category is selected.
|
||||
* @param unselectedTextColor Text [Color] when the category is not selected.
|
||||
* @param selectedBackgroundColor Background [Color] when the category is selected.
|
||||
* @param unselectedBackgroundColor Background [Color] when the category is not selected.
|
||||
*/
|
||||
data class PocketStoriesCategoryColors(
|
||||
val selectedBackgroundColor: Color,
|
||||
val unselectedBackgroundColor: Color,
|
||||
val selectedTextColor: Color,
|
||||
val unselectedTextColor: Color,
|
||||
) {
|
||||
companion object {
|
||||
|
||||
/**
|
||||
* Builder function used to construct an instance of [PocketStoriesCategoryColors].
|
||||
*/
|
||||
@Composable
|
||||
fun buildColors(
|
||||
selectedBackgroundColor: Color = FirefoxTheme.colors.textActionPrimary,
|
||||
unselectedBackgroundColor: Color = FirefoxTheme.colors.textActionTertiary,
|
||||
selectedTextColor: Color = FirefoxTheme.colors.actionPrimary,
|
||||
unselectedTextColor: Color = FirefoxTheme.colors.actionTertiary,
|
||||
) = PocketStoriesCategoryColors(
|
||||
selectedTextColor = selectedTextColor,
|
||||
unselectedTextColor = unselectedTextColor,
|
||||
selectedBackgroundColor = selectedBackgroundColor,
|
||||
unselectedBackgroundColor = unselectedBackgroundColor,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pocket feature section title.
|
||||
* Shows a default text about Pocket and offers a external link to learn more.
|
||||
|
|
|
|||
Loading…
Reference in New Issue