Skip to content

Commit

Permalink
For mozilla-mobile#21894: Move Tabs Tray to compose: Individual tab v…
Browse files Browse the repository at this point in the history
…iewholders: ListViewHolder.
  • Loading branch information
Amejia481 committed May 15, 2022
1 parent a304600 commit 41794da
Show file tree
Hide file tree
Showing 21 changed files with 764 additions and 97 deletions.
4 changes: 4 additions & 0 deletions app/src/main/java/org/mozilla/fenix/FeatureFlags.kt
Original file line number Diff line number Diff line change
Expand Up @@ -91,4 +91,8 @@ object FeatureFlags {
* Enables receiving from the messaging framework.
*/
const val messagingFeature = true
/**
* Enables compose on the tabs tray items.
*/
val composeTabsTray = false
}
16 changes: 10 additions & 6 deletions app/src/main/java/org/mozilla/fenix/compose/TabSubtitle.kt
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ 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.graphics.Color
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.TextUnit
import androidx.compose.ui.unit.sp
import org.mozilla.fenix.theme.FirefoxTheme
import org.mozilla.fenix.theme.Theme
Expand All @@ -26,18 +28,20 @@ import org.mozilla.fenix.theme.Theme
@Composable
fun TabSubtitle(
text: String,
modifier: Modifier = Modifier
modifier: Modifier = Modifier,
fontSize: TextUnit = 12.sp,
color: Color = when (isSystemInDarkTheme()) {
true -> FirefoxTheme.colors.textPrimary
false -> FirefoxTheme.colors.textSecondary
}
) {
Text(
modifier = modifier,
maxLines = 1,
text = text,
style = TextStyle(fontSize = 12.sp),
style = TextStyle(fontSize = fontSize),
overflow = TextOverflow.Ellipsis,
color = when (isSystemInDarkTheme()) {
true -> FirefoxTheme.colors.textPrimary
false -> FirefoxTheme.colors.textSecondary
}
color = color
)
}

Expand Down
10 changes: 7 additions & 3 deletions app/src/main/java/org/mozilla/fenix/compose/TabTitle.kt
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ 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.graphics.Color
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.TextUnit
import androidx.compose.ui.unit.sp
import org.mozilla.fenix.theme.FirefoxTheme
import org.mozilla.fenix.theme.Theme
Expand All @@ -28,15 +30,17 @@ import org.mozilla.fenix.theme.Theme
fun TabTitle(
text: String,
maxLines: Int,
modifier: Modifier = Modifier
modifier: Modifier = Modifier,
fontSize: TextUnit = 14.sp,
color: Color = FirefoxTheme.colors.textPrimary,
) {
Text(
modifier = modifier,
maxLines = maxLines,
text = text,
style = TextStyle(fontSize = 14.sp),
style = TextStyle(fontSize = fontSize),
overflow = TextOverflow.Ellipsis,
color = FirefoxTheme.colors.textPrimary
color = color
)
}

Expand Down
78 changes: 45 additions & 33 deletions app/src/main/java/org/mozilla/fenix/compose/ThumbnailCard.kt
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import mozilla.components.concept.base.images.ImageLoadRequest
import org.mozilla.fenix.R
import org.mozilla.fenix.components.components
import org.mozilla.fenix.theme.FirefoxTheme
import org.mozilla.fenix.theme.Theme

/**
* Card which will display a thumbnail. If a thumbnail is not available for [url], the favicon
Expand All @@ -40,6 +41,8 @@ import org.mozilla.fenix.theme.FirefoxTheme
* @param url Url to display thumbnail for.
* @param key Key used to remember the thumbnail for future compositions.
* @param modifier [Modifier] used to draw the image content.
* @param contentDescription Text used by accessibility services
* to describe what this image represents.
* @param contentScale [ContentScale] used to draw image content.
* @param alignment [Alignment] used to draw the image content.
*/
Expand All @@ -48,43 +51,50 @@ fun ThumbnailCard(
url: String,
key: String,
modifier: Modifier = Modifier,
contentDescription: String? = null,
contentScale: ContentScale = ContentScale.FillWidth,
alignment: Alignment = Alignment.TopCenter
) {
Card(
modifier = modifier,
backgroundColor = colorResource(id = R.color.photonGrey20)
) {
components.core.icons.Loader(url) {
Placeholder {
Box(
modifier = Modifier.background(color = FirefoxTheme.colors.layer3)
)
}

WithIcon { icon ->
Box(
modifier = Modifier.size(36.dp),
contentAlignment = Alignment.Center
) {
Image(
painter = icon.painter,
contentDescription = null,
modifier = Modifier
.size(36.dp)
.clip(RoundedCornerShape(8.dp)),
contentScale = ContentScale.Fit
if (inComposePreview) {
Box(
modifier = Modifier.background(color = FirefoxTheme.colors.layer3)
)
} else {
components.core.icons.Loader(url) {
Placeholder {
Box(
modifier = Modifier.background(color = FirefoxTheme.colors.layer3)
)
}

WithIcon { icon ->
Box(
modifier = Modifier.size(36.dp),
contentAlignment = Alignment.Center
) {
Image(
painter = icon.painter,
contentDescription = contentDescription,
modifier = Modifier
.size(36.dp)
.clip(RoundedCornerShape(8.dp)),
contentScale = ContentScale.Fit
)
}
}
}
}

ThumbnailImage(
key = key,
modifier = modifier,
contentScale = contentScale,
alignment = alignment
)
ThumbnailImage(
key = key,
modifier = modifier,
contentScale = contentScale,
alignment = alignment
)
}
}
}

Expand Down Expand Up @@ -120,11 +130,13 @@ private fun ThumbnailImage(
@Preview
@Composable
private fun ThumbnailCardPreview() {
ThumbnailCard(
url = "https://mozilla.com",
key = "123",
modifier = Modifier
.size(108.dp, 80.dp)
.clip(RoundedCornerShape(8.dp))
)
FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
ThumbnailCard(
url = "https://mozilla.com",
key = "123",
modifier = Modifier
.size(108.dp, 80.dp)
.clip(RoundedCornerShape(8.dp))
)
}
}
89 changes: 89 additions & 0 deletions app/src/main/java/org/mozilla/fenix/compose/tabstray/MediaImage.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
/* 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.tabstray

import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Card
import androidx.compose.material.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import mozilla.components.browser.state.state.TabSessionState
import mozilla.components.browser.state.state.createTab
import mozilla.components.concept.engine.mediasession.MediaSession.PlaybackState
import org.mozilla.fenix.R

/**
* A composable that lays out and draws the image from a given [tab] while showing a default placeholder
* while that image is downloaded or a default fallback image when downloading failed.
*
* @param tab the tab which the image should be shown.
* @param onMediaIconClicked handles the click event when tab has media session like play/pause.
* @param modifier [Modifier] to be applied to the layout.
*/
@Composable
fun MediaImage(
tab: TabSessionState,
onMediaIconClicked: ((TabSessionState) -> Unit),
modifier: Modifier,
) {
val backGroundColor = if (tab.content.private) {
R.color.accent_private_theme
} else {
R.color.accent_normal_theme
}
val (icon, contentDescription) = when (tab.mediaSessionState?.playbackState) {
PlaybackState.PAUSED -> {
R.drawable.media_state_play_vector to R.string.mozac_feature_media_notification_action_play
}
PlaybackState.PLAYING -> {
R.drawable.media_state_pause_vector to R.string.mozac_feature_media_notification_action_pause
}
else -> return
}

Card(
modifier = modifier
.size(24.dp)
.clip(CircleShape)
.border(
width = 2.dp,
color = colorResource(id = R.color.photonWhite),
CircleShape
),
backgroundColor = colorResource(id = backGroundColor)
) {
Icon(
painter = painterResource(id = icon),
modifier = Modifier
.size(24.dp)
.clickable { onMediaIconClicked.invoke(tab) },
contentDescription = stringResource(id = contentDescription),
tint = colorResource(id = R.color.photonWhite)
)
}
}

@Composable
@Preview
private fun ImagePreview() {
MediaImage(
tab = createTab(url = "https://mozilla.com"),
onMediaIconClicked = {},
modifier = Modifier
.height(100.dp)
.width(200.dp)
)
}
Loading

0 comments on commit 41794da

Please sign in to comment.