From 5ba048f43b2717f4ffced0046ee007e58fcde73d Mon Sep 17 00:00:00 2001 From: Noah Bond Date: Wed, 31 Aug 2022 11:32:11 -0700 Subject: [PATCH] [fenix] For https://github.com/mozilla-mobile/fenix/issues/26607 - Update back plating for recent Bookmarks --- .../recentbookmarks/view/RecentBookmarks.kt | 101 +++++++++++------- 1 file changed, 63 insertions(+), 38 deletions(-) diff --git a/app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt b/app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt index 8ad3026a5b..0947c35fa2 100644 --- a/app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt +++ b/app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt @@ -4,6 +4,7 @@ package org.mozilla.fenix.home.recentbookmarks.view +import android.content.res.Configuration import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.Image import androidx.compose.foundation.background @@ -17,6 +18,7 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyRow @@ -27,8 +29,8 @@ import androidx.compose.material.DropdownMenu import androidx.compose.material.DropdownMenuItem import androidx.compose.material.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment @@ -38,17 +40,25 @@ import androidx.compose.ui.layout.ContentScale 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 mozilla.components.browser.icons.compose.Loader import mozilla.components.browser.icons.compose.Placeholder import mozilla.components.browser.icons.compose.WithIcon import mozilla.components.ui.colors.PhotonColors import org.mozilla.fenix.components.components import org.mozilla.fenix.compose.Image +import org.mozilla.fenix.compose.inComposePreview import org.mozilla.fenix.home.recentbookmarks.RecentBookmark import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +private val cardShape = RoundedCornerShape(8.dp) + +private val imageWidth = 126.dp + +private val imageModifier = Modifier + .size(width = imageWidth, height = 82.dp) + .clip(cardShape) + /** * A list of recent bookmarks. * @@ -91,40 +101,42 @@ private fun RecentBookmarkItem( ) { var isMenuExpanded by remember { mutableStateOf(false) } - Column( + Card( modifier = Modifier - .width(156.dp) + .width(158.dp) .combinedClickable( enabled = true, onClick = { onRecentBookmarkClick(bookmark) }, onLongClick = { isMenuExpanded = true } - ) + ), + shape = cardShape, + backgroundColor = FirefoxTheme.colors.layer2, + elevation = 6.dp, ) { - Card( + Column( modifier = Modifier .fillMaxWidth() - .height(96.dp), - elevation = 6.dp + .padding(start = 16.dp, end = 16.dp, top = 16.dp, bottom = 8.dp) ) { RecentBookmarkImage(bookmark) - } - Spacer(modifier = Modifier.height(8.dp)) + Spacer(modifier = Modifier.height(8.dp)) - Text( - text = bookmark.title ?: bookmark.url ?: "", - color = FirefoxTheme.colors.textPrimary, - fontSize = 12.sp, - overflow = TextOverflow.Ellipsis, - maxLines = 1 - ) + Text( + text = bookmark.title ?: bookmark.url ?: "", + color = FirefoxTheme.colors.textPrimary, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + style = FirefoxTheme.typography.caption, + ) - RecentBookmarksMenu( - showMenu = isMenuExpanded, - menuItems = menuItems, - recentBookmark = bookmark, - onDismissRequest = { isMenuExpanded = false } - ) + RecentBookmarksMenu( + showMenu = isMenuExpanded, + menuItems = menuItems, + recentBookmark = bookmark, + onDismissRequest = { isMenuExpanded = false } + ) + } } } @@ -134,45 +146,57 @@ private fun RecentBookmarkImage(bookmark: RecentBookmark) { !bookmark.previewImageUrl.isNullOrEmpty() -> { Image( url = bookmark.previewImageUrl, - modifier = Modifier - .size(156.dp, 96.dp), - targetSize = 156.dp, + modifier = imageModifier, + targetSize = imageWidth, contentScale = ContentScale.Crop ) } - !bookmark.url.isNullOrEmpty() -> { + !bookmark.url.isNullOrEmpty() && !inComposePreview -> { components.core.icons.Loader(bookmark.url) { Placeholder { + PlaceholderBookmarkImage() + } + + WithIcon { icon -> Box( - modifier = Modifier.background( + modifier = imageModifier.background( color = when (isSystemInDarkTheme()) { true -> PhotonColors.DarkGrey30 false -> PhotonColors.LightGrey30 } - ) - ) - } - - WithIcon { icon -> - Box( - modifier = Modifier.size(36.dp), - contentAlignment = Alignment.Center + ), + contentAlignment = Alignment.Center, ) { Image( painter = icon.painter, contentDescription = null, modifier = Modifier .size(36.dp) - .clip(RoundedCornerShape(8.dp)), + .clip(cardShape), contentScale = ContentScale.Crop, ) } } } } + inComposePreview -> { + PlaceholderBookmarkImage() + } } } +@Composable +private fun PlaceholderBookmarkImage() { + Box( + modifier = imageModifier.background( + color = when (isSystemInDarkTheme()) { + true -> PhotonColors.DarkGrey30 + false -> PhotonColors.LightGrey30 + } + ) + ) +} + /** * Menu shown for a [RecentBookmark]. * @@ -217,7 +241,8 @@ private fun RecentBookmarksMenu( } @Composable -@Preview +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) +@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO) private fun RecentBookmarksPreview() { FirefoxTheme(theme = Theme.getTheme()) { RecentBookmarks(