mirror of
https://github.com/fork-maintainers/iceraven-browser
synced 2024-11-17 15:26:23 +00:00
[fenix] For https://github.com/mozilla-mobile/fenix/issues/25025 - Show sponsored stories on debug only
The design asks for a new row in between the primary and the secondary text so I went with making "ListItemTabSurface" public allowing for customizing the content it will show but keeping the same layout and general UX.
This commit is contained in:
Mugurell
mergify[bot]
parent
d5902b7a02
commit
0bfec6d6c7
@ -112,7 +112,7 @@ fun ListItemTabLarge(
|
||||
* @param tabDetails [Composable] Displayed to the the end of the image. Allows for variation in the item text style.
|
||||
*/
|
||||
@Composable
|
||||
private fun ListItemTabSurface(
|
||||
fun ListItemTabSurface(
|
||||
imageUrl: String,
|
||||
onClick: (() -> Unit)? = null,
|
||||
tabDetails: @Composable () -> Unit
|
||||
@ -159,3 +159,18 @@ private fun ListItemTabLargePreview() {
|
||||
) { }
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
@Preview
|
||||
private fun ListItemTabSurfacePreview() {
|
||||
FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
|
||||
ListItemTabSurface(
|
||||
imageUrl = ""
|
||||
) {
|
||||
PrimaryText(
|
||||
text = "This can be anything",
|
||||
fontSize = 22.sp
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,11 +39,14 @@ import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import mozilla.components.service.pocket.PocketStory
|
||||
import mozilla.components.service.pocket.PocketStory.PocketRecommendedStory
|
||||
import mozilla.components.service.pocket.PocketStory.PocketSponsoredStory
|
||||
import mozilla.components.service.pocket.PocketStory.PocketSponsoredStoryShim
|
||||
import org.mozilla.fenix.R
|
||||
import org.mozilla.fenix.compose.ClickableSubstringLink
|
||||
import org.mozilla.fenix.compose.EagerFlingBehavior
|
||||
import org.mozilla.fenix.compose.ListItemTabLarge
|
||||
import org.mozilla.fenix.compose.ListItemTabLargePlaceholder
|
||||
import org.mozilla.fenix.compose.ListItemTabSurface
|
||||
import org.mozilla.fenix.compose.SelectableChip
|
||||
import org.mozilla.fenix.compose.StaggeredHorizontalGrid
|
||||
import org.mozilla.fenix.compose.PrimaryText
|
||||
@ -114,6 +117,63 @@ fun PocketStory(
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays a single [PocketSponsoredStory].
|
||||
*
|
||||
* @param story The [PocketSponsoredStory] to be displayed.
|
||||
* @param onStoryClick Callback for when the user taps on this story.
|
||||
*/
|
||||
@Composable
|
||||
fun PocketSponsoredStory(
|
||||
story: PocketSponsoredStory,
|
||||
onStoryClick: (PocketSponsoredStory) -> Unit
|
||||
) {
|
||||
val (imageWidth, imageHeight) = with(LocalDensity.current) {
|
||||
116.dp.toPx().roundToInt() to 84.dp.toPx().roundToInt()
|
||||
}
|
||||
val imageUrl = story.imageUrl.replace(
|
||||
"&resize=w[0-9]+-h[0-9]+".toRegex(),
|
||||
"&resize=w$imageWidth-h$imageHeight"
|
||||
)
|
||||
|
||||
ListItemTabSurface(imageUrl, { onStoryClick(story) }) {
|
||||
PrimaryText(
|
||||
text = story.title,
|
||||
fontSize = 14.sp,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
maxLines = 2,
|
||||
)
|
||||
|
||||
Spacer(Modifier.height(9.dp))
|
||||
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Icon(
|
||||
painter = painterResource(id = R.drawable.pocket_star_stroke),
|
||||
contentDescription = null,
|
||||
tint = FirefoxTheme.colors.iconSecondary,
|
||||
)
|
||||
|
||||
Spacer(Modifier.width(8.dp))
|
||||
|
||||
SecondaryText(
|
||||
text = stringResource(R.string.pocket_stories_sponsor_indication),
|
||||
fontSize = 12.sp,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
maxLines = 1,
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(Modifier.height(7.dp))
|
||||
|
||||
SecondaryText(
|
||||
text = story.sponsor,
|
||||
fontSize = 12.sp,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
maxLines = 1,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays a list of [PocketStory]es on 3 by 3 grid.
|
||||
* If there aren't enough stories to fill all columns placeholders containing an external link
|
||||
@ -160,6 +220,10 @@ fun PocketStories(
|
||||
.build().toString()
|
||||
onStoryClicked(it.copy(url = uri), rowIndex to columnIndex)
|
||||
}
|
||||
} else if (story is PocketSponsoredStory) {
|
||||
PocketSponsoredStory(story) {
|
||||
onStoryClicked(story, rowIndex to columnIndex)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -291,9 +355,10 @@ private class PocketStoryProvider : PreviewParameterProvider<PocketStory> {
|
||||
}
|
||||
|
||||
internal fun getFakePocketStories(limit: Int = 1): List<PocketStory> {
|
||||
return mutableListOf<PocketRecommendedStory>().apply {
|
||||
return mutableListOf<PocketStory>().apply {
|
||||
for (index in 0 until limit) {
|
||||
add(
|
||||
when (index % 2 == 0) {
|
||||
true -> add(
|
||||
PocketRecommendedStory(
|
||||
title = "This is a ${"very ".repeat(index)} long title",
|
||||
publisher = "Publisher",
|
||||
@ -304,6 +369,16 @@ internal fun getFakePocketStories(limit: Int = 1): List<PocketStory> {
|
||||
timesShown = index.toLong()
|
||||
)
|
||||
)
|
||||
false -> add(
|
||||
PocketSponsoredStory(
|
||||
title = "This is a ${"very ".repeat(index)} long title",
|
||||
url = "https://sponsored-story$index.com",
|
||||
imageUrl = "",
|
||||
sponsor = "Mozilla",
|
||||
shim = PocketSponsoredStoryShim("", "")
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
15
app/src/main/res/drawable/pocket_star_stroke.xml
Normal file
15
app/src/main/res/drawable/pocket_star_stroke.xml
Normal file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<vector
|
||||
xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="12dp"
|
||||
android:height="12dp"
|
||||
android:viewportWidth="12"
|
||||
android:viewportHeight="12">
|
||||
<path
|
||||
android:pathData="M6,0C6.335,0 6.634,0.208 6.75,0.522L8.027,3.973L11.478,5.25C11.792,5.366 12,5.665 12,6C12,6.335 11.792,6.634 11.478,6.75L8.027,8.027L6.75,11.478C6.634,11.792 6.335,12 6,12C5.665,12 5.366,11.792 5.25,11.478L3.973,8.027L0.522,6.75C0.208,6.634 0,6.335 0,6C0,5.665 0.208,5.366 0.522,5.25L3.973,3.973L5.25,0.522C5.366,0.208 5.665,0 6,0ZM6,3.105L5.346,4.873C5.265,5.092 5.092,5.265 4.873,5.346L3.105,6L4.873,6.654C5.092,6.735 5.265,6.908 5.346,7.127L6,8.895L6.654,7.127C6.735,6.908 6.908,6.735 7.127,6.654L8.895,6L7.127,5.346C6.908,5.265 6.735,5.092 6.654,4.873L6,3.105Z"
|
||||
android:fillColor="#666666"
|
||||
android:fillType="evenOdd"/>
|
||||
</vector>
|
||||
@ -1823,6 +1823,8 @@
|
||||
<string name="pocket_stories_feature_caption">Part of the Firefox family. %s</string>
|
||||
<!-- Clickable text for opening an external link for more information about Pocket. -->
|
||||
<string name="pocket_stories_feature_learn_more">Learn more</string>
|
||||
<!-- Text indicating that the Pocket story that also displays this text is a sponsored story by other 3rd party entity. -->
|
||||
<string name="pocket_stories_sponsor_indication">Sponsored</string>
|
||||
|
||||
<!-- Snackbar message for enrolling in a Nimbus experiment from the secret settings when Studies preference is Off.-->
|
||||
<string name="experiments_snackbar">Enable telemetry to send data.</string>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user