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 fb09d580e..22557f7b7 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt @@ -18,8 +18,10 @@ import androidx.compose.material.Card import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme @@ -49,10 +51,20 @@ fun ListItemTabLarge( onClick: (() -> Unit)? = null ) { ListItemTabSurface(imageUrl, onClick) { - TabTitle(text = title, maxLines = 3) + PrimaryText( + text = title, + fontSize = 14.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 3, + ) if (caption != null) { - TabSubtitle(text = caption) + SecondaryText( + text = caption, + fontSize = 12.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + ) } } } diff --git a/app/src/main/java/org/mozilla/fenix/compose/TabSubtitle.kt b/app/src/main/java/org/mozilla/fenix/compose/TabSubtitle.kt deleted file mode 100644 index acfeef48a..000000000 --- a/app/src/main/java/org/mozilla/fenix/compose/TabSubtitle.kt +++ /dev/null @@ -1,54 +0,0 @@ -/* 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/. */ - -package org.mozilla.fenix.compose - -import androidx.compose.foundation.background -import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.foundation.layout.Box -import androidx.compose.material.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.style.TextOverflow -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.sp -import org.mozilla.fenix.theme.FirefoxTheme -import org.mozilla.fenix.theme.Theme - -/** - * Default layout for a tab composable caption. - * - * @param text Tab caption. - * @param modifier Optional [Modifier] to be applied to the layout. - */ -@Composable -fun TabSubtitle( - text: String, - modifier: Modifier = Modifier -) { - Text( - modifier = modifier, - maxLines = 1, - text = text, - style = TextStyle(fontSize = 12.sp), - overflow = TextOverflow.Ellipsis, - color = when (isSystemInDarkTheme()) { - true -> FirefoxTheme.colors.textPrimary - false -> FirefoxTheme.colors.textSecondary - } - ) -} - -@Composable -@Preview -private fun TabSubtitlePreview() { - FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) { - Box(Modifier.background(FirefoxTheme.colors.layer2)) { - TabSubtitle( - "Awesome tab subtitle", - ) - } - } -} diff --git a/app/src/main/java/org/mozilla/fenix/compose/TabSubtitleWithInterdot.kt b/app/src/main/java/org/mozilla/fenix/compose/TabSubtitleWithInterdot.kt index a9cf9f64a..fd41a904d 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/TabSubtitleWithInterdot.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/TabSubtitleWithInterdot.kt @@ -11,7 +11,9 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.layout.Layout import androidx.compose.ui.platform.LocalLayoutDirection +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.sp import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme @@ -47,9 +49,24 @@ fun TabSubtitleWithInterdot( Layout( content = { - TabSubtitle(text = firstText) - TabSubtitle(text = " \u00b7 ") - TabSubtitle(text = secondText) + SecondaryText( + text = firstText, + fontSize = 12.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + ) + SecondaryText( + text = " \u00b7 ", + fontSize = 12.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + ) + SecondaryText( + text = secondText, + fontSize = 12.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + ) } ) { items, constraints -> diff --git a/app/src/main/java/org/mozilla/fenix/compose/TabTitle.kt b/app/src/main/java/org/mozilla/fenix/compose/TabTitle.kt deleted file mode 100644 index d42966031..000000000 --- a/app/src/main/java/org/mozilla/fenix/compose/TabTitle.kt +++ /dev/null @@ -1,54 +0,0 @@ -/* 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/. */ - -package org.mozilla.fenix.compose - -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box -import androidx.compose.material.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.style.TextOverflow -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.sp -import org.mozilla.fenix.theme.FirefoxTheme -import org.mozilla.fenix.theme.Theme - -/** - * Default layout for a tab composable title. - * - * @param text Tab title - * @param maxLines Maximum number of lines for [text] to span, wrapping if necessary. - * If the text exceeds the given number of lines it will be ellipsized. - * @param modifier Optional [Modifier] to be applied to the layout. - */ -@Composable -fun TabTitle( - text: String, - maxLines: Int, - modifier: Modifier = Modifier -) { - Text( - modifier = modifier, - maxLines = maxLines, - text = text, - style = TextStyle(fontSize = 14.sp), - overflow = TextOverflow.Ellipsis, - color = FirefoxTheme.colors.textPrimary - ) -} - -@Composable -@Preview -private fun TabTitlePreview() { - FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) { - Box(Modifier.background(FirefoxTheme.colors.layer2)) { - TabTitle( - "Awesome tab title", - 2 - ) - } - } -} 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 55d6b4214..b07a7a9c5 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 @@ -30,6 +30,7 @@ import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.semantics +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.PreviewParameterProvider @@ -44,9 +45,9 @@ import org.mozilla.fenix.compose.ListItemTabLarge import org.mozilla.fenix.compose.ListItemTabLargePlaceholder import org.mozilla.fenix.compose.SelectableChip import org.mozilla.fenix.compose.StaggeredHorizontalGrid -import org.mozilla.fenix.compose.TabSubtitle +import org.mozilla.fenix.compose.PrimaryText import org.mozilla.fenix.compose.TabSubtitleWithInterdot -import org.mozilla.fenix.compose.TabTitle +import org.mozilla.fenix.compose.SecondaryText import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme import kotlin.math.roundToInt @@ -83,15 +84,30 @@ fun PocketStory( imageUrl = imageUrl, onClick = { onStoryClick(story) }, title = { - TabTitle(text = story.title, maxLines = 2) + PrimaryText( + text = story.title, + fontSize = 14.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 2, + ) }, subtitle = { if (isValidPublisher && isValidTimeToRead) { TabSubtitleWithInterdot(story.publisher, "${story.timeToRead} min") } else if (isValidPublisher) { - TabSubtitle(story.publisher) + SecondaryText( + text = story.publisher, + fontSize = 12.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + ) } else if (isValidTimeToRead) { - TabSubtitle("${story.timeToRead} min") + SecondaryText( + text = "${story.timeToRead} min", + fontSize = 12.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + ) } } )