For #26743: Update the URL text styling in ClickableSubstringLink used by PoweredByPocketHeader

Co-authored-by: Gabriel Luong <gabriel.luong@gmail.com>
This commit is contained in:
mcarare 2022-09-07 15:08:59 +03:00 committed by mergify[bot]
parent 62c36ab46d
commit aa4a072d73
3 changed files with 40 additions and 10 deletions

View File

@ -13,6 +13,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import org.mozilla.fenix.theme.FirefoxTheme
@ -23,6 +24,8 @@ import org.mozilla.fenix.theme.Theme
*
* @param text Full text that will be displayed
* @param textColor [Color] of the normal text. The URL substring will have a default URL style applied.
* @param linkTextColor [Color] of the link text.
* @param linkTextDecoration The decorations to paint on the link text (e.g., an underline).
* @param clickableStartIndex [text] index at which the URL substring starts.
* @param clickableEndIndex [text] index at which the URL substring ends.
* @param onClick Callback to be invoked only when the URL substring is clicked.
@ -30,7 +33,9 @@ import org.mozilla.fenix.theme.Theme
@Composable
fun ClickableSubstringLink(
text: String,
textColor: Color,
textColor: Color = FirefoxTheme.colors.textPrimary,
linkTextColor: Color = FirefoxTheme.colors.textAccent,
linkTextDecoration: TextDecoration? = null,
clickableStartIndex: Int,
clickableEndIndex: Int,
onClick: () -> Unit,
@ -45,7 +50,10 @@ fun ClickableSubstringLink(
)
addStyle(
SpanStyle(color = FirefoxTheme.colors.textAccent),
SpanStyle(
color = linkTextColor,
textDecoration = linkTextDecoration,
),
start = clickableStartIndex,
end = clickableEndIndex,
)
@ -91,7 +99,7 @@ private fun ClickableSubstringTextPreview() {
Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
ClickableSubstringLink(
text = text,
textColor = FirefoxTheme.colors.textPrimary,
linkTextDecoration = TextDecoration.Underline,
clickableStartIndex = text.indexOf("link"),
clickableEndIndex = text.length,
) { }

View File

@ -6,7 +6,10 @@
package org.mozilla.fenix.home.pocket
import android.content.res.Configuration
import android.view.View
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
@ -47,7 +50,17 @@ class PocketRecommendationsHeaderViewHolder(
val wallpaperState = components.appStore
.observeAsComposableState { state -> state.wallpaperState }.value
val wallpaperAdaptedTextColor = wallpaperState?.currentWallpaper?.textColor?.let { Color(it) }
var textColor = FirefoxTheme.colors.textPrimary
var linkTextColor = FirefoxTheme.colors.textAccent
wallpaperState?.currentWallpaper?.let { currentWallpaper ->
currentWallpaper.textColor?.let {
val wallpaperAdaptedTextColor = Color(it)
textColor = wallpaperAdaptedTextColor
linkTextColor = wallpaperAdaptedTextColor
}
}
Column {
Spacer(Modifier.height(24.dp))
@ -55,7 +68,8 @@ class PocketRecommendationsHeaderViewHolder(
PoweredByPocketHeader(
onLearnMoreClicked = interactor::onLearnMoreClicked,
modifier = Modifier.fillMaxWidth(),
textColor = wallpaperAdaptedTextColor ?: FirefoxTheme.colors.textPrimary,
textColor = textColor,
linkTextColor = linkTextColor,
)
}
}
@ -66,11 +80,14 @@ class PocketRecommendationsHeaderViewHolder(
}
@Composable
@Preview
fun PocketRecommendationsFooterViewHolderPreview() {
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
private fun PocketRecommendationsFooterViewHolderPreview() {
FirefoxTheme(theme = Theme.getTheme()) {
PoweredByPocketHeader(
onLearnMoreClicked = {},
)
Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
PoweredByPocketHeader(
onLearnMoreClicked = {},
)
}
}
}

View File

@ -44,6 +44,7 @@ import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
@ -391,12 +392,14 @@ fun PocketStoriesCategories(
* Contains the full URL for where the user should be navigated to.
* @param modifier [Modifier] to be applied to the layout.
* @param textColor [Color] to be applied to the text.
* @param linkTextColor [Color] of the link text.
*/
@Composable
fun PoweredByPocketHeader(
onLearnMoreClicked: (String) -> Unit,
modifier: Modifier = Modifier,
textColor: Color = FirefoxTheme.colors.textPrimary,
linkTextColor: Color = FirefoxTheme.colors.textAccent,
) {
val link = stringResource(R.string.pocket_stories_feature_learn_more)
val text = stringResource(R.string.pocket_stories_feature_caption, link)
@ -433,6 +436,8 @@ fun PoweredByPocketHeader(
ClickableSubstringLink(
text = text,
textColor = textColor,
linkTextColor = linkTextColor,
linkTextDecoration = TextDecoration.Underline,
clickableStartIndex = linkStartIndex,
clickableEndIndex = linkEndIndex,
) {