|
|
@ -68,6 +68,7 @@ import org.mozilla.fenix.compose.ListItemTabLarge
|
|
|
|
import org.mozilla.fenix.compose.ListItemTabLargePlaceholder
|
|
|
|
import org.mozilla.fenix.compose.ListItemTabLargePlaceholder
|
|
|
|
import org.mozilla.fenix.compose.ListItemTabSurface
|
|
|
|
import org.mozilla.fenix.compose.ListItemTabSurface
|
|
|
|
import org.mozilla.fenix.compose.SelectableChip
|
|
|
|
import org.mozilla.fenix.compose.SelectableChip
|
|
|
|
|
|
|
|
import org.mozilla.fenix.compose.SelectableChipColors
|
|
|
|
import org.mozilla.fenix.compose.StaggeredHorizontalGrid
|
|
|
|
import org.mozilla.fenix.compose.StaggeredHorizontalGrid
|
|
|
|
import org.mozilla.fenix.compose.TabSubtitleWithInterdot
|
|
|
|
import org.mozilla.fenix.compose.TabSubtitleWithInterdot
|
|
|
|
import org.mozilla.fenix.compose.inComposePreview
|
|
|
|
import org.mozilla.fenix.compose.inComposePreview
|
|
|
@ -419,7 +420,7 @@ private fun Rect.getIntersectPercentage(realSize: IntSize, other: Rect): Float {
|
|
|
|
* @param categories The categories needed to be displayed.
|
|
|
|
* @param categories The categories needed to be displayed.
|
|
|
|
* @param selections List of categories currently selected.
|
|
|
|
* @param selections List of categories currently selected.
|
|
|
|
* @param modifier [Modifier] to be applied to the layout.
|
|
|
|
* @param modifier [Modifier] to be applied to the layout.
|
|
|
|
* @param categoryColors The color set defined by [PocketStoriesCategoryColors] used to style Pocket categories.
|
|
|
|
* @param categoryColors The color set defined by [SelectableChipColors] used to style Pocket categories.
|
|
|
|
* @param onCategoryClick Callback for when the user taps a category.
|
|
|
|
* @param onCategoryClick Callback for when the user taps a category.
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
@OptIn(ExperimentalComposeUiApi::class)
|
|
|
|
@OptIn(ExperimentalComposeUiApi::class)
|
|
|
@ -429,9 +430,16 @@ fun PocketStoriesCategories(
|
|
|
|
categories: List<PocketRecommendedStoriesCategory>,
|
|
|
|
categories: List<PocketRecommendedStoriesCategory>,
|
|
|
|
selections: List<PocketRecommendedStoriesSelectedCategory>,
|
|
|
|
selections: List<PocketRecommendedStoriesSelectedCategory>,
|
|
|
|
modifier: Modifier = Modifier,
|
|
|
|
modifier: Modifier = Modifier,
|
|
|
|
categoryColors: PocketStoriesCategoryColors = PocketStoriesCategoryColors.buildColors(),
|
|
|
|
categoryColors: SelectableChipColors = SelectableChipColors.buildColors(),
|
|
|
|
onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
|
|
|
|
onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
|
|
|
|
val selectableChipColors = SelectableChipColors(
|
|
|
|
|
|
|
|
selectedTextColor = categoryColors.selectedTextColor,
|
|
|
|
|
|
|
|
unselectedTextColor = categoryColors.unselectedTextColor,
|
|
|
|
|
|
|
|
selectedBackgroundColor = categoryColors.selectedBackgroundColor,
|
|
|
|
|
|
|
|
unselectedBackgroundColor = categoryColors.unselectedBackgroundColor,
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
Box(
|
|
|
|
Box(
|
|
|
|
modifier = modifier.semantics {
|
|
|
|
modifier = modifier.semantics {
|
|
|
|
testTagsAsResourceId = true
|
|
|
|
testTagsAsResourceId = true
|
|
|
@ -446,10 +454,8 @@ fun PocketStoriesCategories(
|
|
|
|
SelectableChip(
|
|
|
|
SelectableChip(
|
|
|
|
text = category.name,
|
|
|
|
text = category.name,
|
|
|
|
isSelected = selections.map { it.name }.contains(category.name),
|
|
|
|
isSelected = selections.map { it.name }.contains(category.name),
|
|
|
|
selectedTextColor = categoryColors.selectedTextColor,
|
|
|
|
isSquare = true,
|
|
|
|
unselectedTextColor = categoryColors.unselectedTextColor,
|
|
|
|
selectableChipColors = selectableChipColors,
|
|
|
|
selectedBackgroundColor = categoryColors.selectedBackgroundColor,
|
|
|
|
|
|
|
|
unselectedBackgroundColor = categoryColors.unselectedBackgroundColor,
|
|
|
|
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
onCategoryClick(category)
|
|
|
|
onCategoryClick(category)
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -458,40 +464,6 @@ 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.actionPrimary,
|
|
|
|
|
|
|
|
unselectedBackgroundColor: Color = FirefoxTheme.colors.actionTertiary,
|
|
|
|
|
|
|
|
selectedTextColor: Color = FirefoxTheme.colors.textActionPrimary,
|
|
|
|
|
|
|
|
unselectedTextColor: Color = FirefoxTheme.colors.textActionTertiary,
|
|
|
|
|
|
|
|
) = PocketStoriesCategoryColors(
|
|
|
|
|
|
|
|
selectedBackgroundColor = selectedBackgroundColor,
|
|
|
|
|
|
|
|
unselectedBackgroundColor = unselectedBackgroundColor,
|
|
|
|
|
|
|
|
selectedTextColor = selectedTextColor,
|
|
|
|
|
|
|
|
unselectedTextColor = unselectedTextColor,
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* Pocket feature section title.
|
|
|
|
* Pocket feature section title.
|
|
|
|
* Shows a default text about Pocket and offers a external link to learn more.
|
|
|
|
* Shows a default text about Pocket and offers a external link to learn more.
|
|
|
|