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/25176 - Refactor TabTitle and TabSubtitle
This commit is contained in:
sarah541
mergify[bot]
parent
840cf3a041
commit
e2aecb47b5
@ -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,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 ->
|
||||
|
||||
|
||||
@ -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
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user