Close #21573: Update design for jump back in section and recently bookmarked section

2021-10-05 13:30:48 -04:00 · 2021-10-05 13:30:48 -04:00 · fb345a4131
parent b1a5025610
commit fb345a4131
8 changed files with 188 additions and 61 deletions
--- a/app/src/main/java/org/mozilla/fenix/home/recenttabs/view/RecentTabs.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/recenttabs/view/RecentTabs.kt
@ -37,6 +37,8 @@ import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalDensity
+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.text.style.TextOverflow
@ -86,8 +88,6 @@ fun RecentTabs(
                        RecentSearchGroupItem(
                            searchTerm = tab.searchTerm,
                            tabId = tab.tabId,
-                            url = tab.url,
-                            thumbnail = tab.thumbnail,
                            count = tab.count,
                            onSearchGroupClicked = onRecentSearchGroupClicked
                        )
@ -120,7 +120,7 @@ private fun RecentTabItem(
    Card(
        modifier = Modifier
            .fillMaxWidth()
-            .height(116.dp)
+            .height(112.dp)
            .clickable { onRecentTabClick(tabId) },
        shape = RoundedCornerShape(8.dp),
        backgroundColor = FirefoxTheme.colors.surface,
@ -132,10 +132,9 @@ private fun RecentTabItem(
            RecentTabImage(
                url = url,
                tabId = tabId,
-                modifier = Modifier.size(116.dp, 84.dp),
-                icon = thumbnail,
-                contentScale = ContentScale.FillWidth,
-                alignment = Alignment.TopCenter
+                modifier = Modifier.size(108.dp, 80.dp)
+                    .clip(RoundedCornerShape(8.dp)),
+                thumbnail = thumbnail
            )

            Spacer(modifier = Modifier.width(16.dp))
@ -147,9 +146,10 @@ private fun RecentTabItem(
                RecentTabTitle(title = title)

                Row {
-                    RecentTabImage(
+                    RecentTabIcon(
                        url = url,
-                        modifier = Modifier.size(18.dp, 18.dp),
+                        modifier = Modifier.size(18.dp, 18.dp)
+                            .clip(RoundedCornerShape(2.dp)),
                        icon = icon
                    )

@ -167,8 +167,6 @@ private fun RecentTabItem(
 *
 * @param searchTerm The search term for the group.
 * @param tabId The id of the last accessed tab in the group.
- * @param url The loaded URL of the last accessed tab in the group.
- * @param thumbnail The icon of the group.
 * @param count Count of how many tabs belongs to the group.
 * @param onSearchGroupClicked Invoked when the user clicks on a group.
 */
@ -177,15 +175,13 @@ private fun RecentTabItem(
 private fun RecentSearchGroupItem(
    searchTerm: String,
    tabId: String,
-    url: String,
-    thumbnail: Bitmap?,
    count: Int,
    onSearchGroupClicked: (String) -> Unit = {}
 ) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
-            .height(116.dp)
+            .height(112.dp)
            .clickable { onSearchGroupClicked(tabId) },
        shape = RoundedCornerShape(8.dp),
        backgroundColor = FirefoxTheme.colors.surface,
@ -194,12 +190,12 @@ private fun RecentSearchGroupItem(
        Row(
            modifier = Modifier.padding(16.dp)
        ) {
-            RecentTabImage(
-                url = url,
-                modifier = Modifier.size(116.dp, 84.dp),
-                icon = thumbnail,
+            Image(
+                painter = painterResource(id = R.drawable.ic_search_group_thumbnail),
+                contentDescription = null,
+                modifier = Modifier.size(108.dp, 80.dp),
                contentScale = ContentScale.FillWidth,
-                alignment = Alignment.TopCenter
+                alignment = Alignment.Center
            )

            Spacer(modifier = Modifier.width(16.dp))
@ -213,7 +209,9 @@ private fun RecentSearchGroupItem(
                Row {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_all_tabs),
-                        contentDescription = null // decorative element
+                        modifier = Modifier.size(18.dp),
+                        contentDescription = null,
+                        tint = FirefoxTheme.colors.textSecondary
                    )

                    Spacer(modifier = Modifier.width(8.dp))
@ -229,8 +227,11 @@ private fun RecentSearchGroupItem(
 * A recent tab image.
 *
 * @param url The loaded URL of the tab.
- * @param modifier modifier Modifier used to draw the image content.
- * @param icon The icon of the tab. Fallback to loading the icon from the [url] if the [icon]
+ * @param modifier [Modifier] used to draw the image content.
+ * @param tabId The id of the tab.
+ * @param contentScale [ContentScale] used to draw image content.
+ * @param alignment [Alignment] used to draw the image content.
+ * @param thumbnail The icon of the tab. Fallback to loading the icon from the [url] if the [thumbnail]
 * is null.
 */
@Composable
@ -239,6 +240,79 @@ private fun RecentTabImage(
    url: String,
    modifier: Modifier = Modifier,
    tabId: String? = null,
+    thumbnail: Bitmap? = null,
+    contentScale: ContentScale = ContentScale.FillWidth,
+    alignment: Alignment = Alignment.TopCenter
+) {
+    when {
+        thumbnail != null -> {
+            Image(
+                painter = BitmapPainter(thumbnail.asImageBitmap()),
+                contentDescription = null,
+                modifier = modifier,
+                contentScale = contentScale,
+                alignment = alignment
+            )
+        }
+        else -> {
+            Card(
+                modifier = modifier,
+                backgroundColor = colorResource(id = R.color.photonGrey20)
+            ) {
+                components.core.icons.Loader(url) {
+                    Placeholder {
+                        Box(
+                            modifier = Modifier.background(
+                                color = when (isSystemInDarkTheme()) {
+                                    true -> PhotonColors.DarkGrey30
+                                    false -> PhotonColors.LightGrey30
+                                }
+                            )
+                        )
+                    }
+
+                    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 (tabId != null) {
+                    ThumbnailImage(
+                        tabId = tabId,
+                        modifier = modifier,
+                        contentScale = contentScale,
+                        alignment = alignment
+                    )
+                }
+            }
+        }
+    }
+}
+
+/**
+ * A recent tab icon.
+ *
+ * @param url The loaded URL of the tab.
+ * @param modifier [Modifier] used to draw the image content.
+ * @param contentScale [ContentScale] used to draw image content.
+ * @param alignment [Alignment] used to draw the image content.
+ * @param icon The icon of the tab. Fallback to loading the icon from the [url] if the [icon]
+ * is null.
+ */
+@Composable
+private fun RecentTabIcon(
+    url: String,
+    modifier: Modifier = Modifier,
    contentScale: ContentScale = ContentScale.Fit,
    alignment: Alignment = Alignment.Center,
    icon: Bitmap? = null
@ -253,14 +327,6 @@ private fun RecentTabImage(
                alignment = alignment
            )
        }
-        tabId != null -> {
-            ThumbnailImage(
-                tabId = tabId,
-                modifier = modifier,
-                contentScale = contentScale,
-                alignment = alignment
-            )
-        }
        else -> {
            components.core.icons.Loader(url) {
                Placeholder {
@ -278,7 +344,8 @@ private fun RecentTabImage(
                    Image(
                        painter = icon.painter,
                        contentDescription = null,
-                        modifier = modifier
+                        modifier = modifier,
+                        contentScale = ContentScale.Fit
                    )
                }
            }
@ -326,7 +393,7 @@ private fun ThumbnailImage(
    alignment: Alignment
 ) {
    val rememberBitmap = remember(tabId) { mutableStateOf<ImageBitmap?>(null) }
-    val size = LocalDensity.current.run { 116.dp.toPx().toInt() }
+    val size = LocalDensity.current.run { 108.dp.toPx().toInt() }
    val request = ImageLoadRequest(tabId, size)
    val storage = components.core.thumbnailStorage
    val bitmap = rememberBitmap.value
--- a/app/src/main/res/drawable-night/ic_all_tabs.xml
+++ b/app/src/main/res/drawable-night/ic_all_tabs.xml
@ -1,13 +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/. -->
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="18dp"
-    android:height="18dp"
-    android:viewportWidth="18"
-    android:viewportHeight="18">
-  <path
-      android:pathData="M0,2.5C0,1.119 1.119,0 2.5,0H15.5C16.881,0 18,1.119 18,2.5V10.5C18,11.881 16.881,13 15.5,13H2.5C1.119,13 0,11.881 0,10.5V2.5ZM15.7,11.5L16.5,10.7V2.3L15.7,1.5H2.3L1.5,2.3V10.7L2.3,11.5H15.7ZM1.5,15.7L2.3,16.5H15.7L16.5,15.7V14.75C16.5,14.336 16.836,14 17.25,14C17.664,14 18,14.336 18,14.75V15.5C18,16.881 16.881,18 15.5,18H2.5C1.119,18 0,16.881 0,15.5V14.75C0,14.336 0.336,14 0.75,14C1.164,14 1.5,14.336 1.5,14.75V15.7Z"
-      android:fillColor="#FBFBFE"
-      android:fillType="evenOdd"/>
-</vector>
--- a/app/src/main/res/drawable/ic_all_tabs.xml
+++ b/app/src/main/res/drawable/ic_all_tabs.xml
@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
 <!-- 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/. -->
@ -8,6 +9,6 @@
    android:viewportHeight="18">
  <path
      android:pathData="M0,2.5C0,1.119 1.119,0 2.5,0H15.5C16.881,0 18,1.119 18,2.5V10.5C18,11.881 16.881,13 15.5,13H2.5C1.119,13 0,11.881 0,10.5V2.5ZM15.7,11.5L16.5,10.7V2.3L15.7,1.5H2.3L1.5,2.3V10.7L2.3,11.5H15.7ZM1.5,15.7L2.3,16.5H15.7L16.5,15.7V14.75C16.5,14.336 16.836,14 17.25,14C17.664,14 18,14.336 18,14.75V15.5C18,16.881 16.881,18 15.5,18H2.5C1.119,18 0,16.881 0,15.5V14.75C0,14.336 0.336,14 0.75,14C1.164,14 1.5,14.336 1.5,14.75V15.7Z"
-      android:fillColor="#15141A"
+      android:fillColor="?secondaryText"
      android:fillType="evenOdd"/>
 </vector>
--- a/app/src/main/res/drawable/ic_search_group_thumbnail.xml
+++ b/app/src/main/res/drawable/ic_search_group_thumbnail.xml
@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="80dp"
+    android:viewportWidth="108"
+    android:viewportHeight="80">
+  <group>
+    <clip-path
+        android:pathData="M8,0L100,0A8,8 0,0 1,108 8L108,72A8,8 0,0 1,100 80L8,80A8,8 0,0 1,0 72L0,8A8,8 0,0 1,8 0z"/>
+    <path
+        android:pathData="M8,0L100,0A8,8 0,0 1,108 8L108,72A8,8 0,0 1,100 80L8,80A8,8 0,0 1,0 72L0,8A8,8 0,0 1,8 0z">
+      <aapt:attr name="android:fillColor">
+        <gradient
+            android:startY="0"
+            android:startX="108"
+            android:endY="103.313"
+            android:endX="31.4721"
+            android:type="linear">
+          <item android:offset="0" android:color="#FF9059FF"/>
+          <item android:offset="1" android:color="#FF0250BB"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M100,80L8,80A8,8 0,0 1,0 72L0,8A8,8 0,0 1,8 0L100,0A8,8 0,0 1,108 8L108,72A8,8 0,0 1,100 80z"
+        android:strokeAlpha="0.5"
+        android:fillAlpha="0.5">
+      <aapt:attr name="android:fillColor">
+        <gradient
+            android:startY="80"
+            android:startX="54"
+            android:endY="0"
+            android:endX="54"
+            android:type="linear">
+          <item android:offset="0.0104167" android:color="#FF000000"/>
+          <item android:offset="0.567708" android:color="#FF81535C"/>
+          <item android:offset="1" android:color="#00C4C4C4"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M60.55,43.687C62.019,41.645 62.888,39.145 62.888,36.444C62.888,29.584 57.306,24 50.444,24C43.582,24 38,29.584 38,36.444C38,43.305 43.582,48.889 50.444,48.889C53.155,48.889 55.663,48.014 57.709,46.535L58.641,46.524L67.725,55.609C67.985,55.868 68.326,56 68.667,56C69.008,56 69.35,55.87 69.609,55.609C70.13,55.088 70.13,54.244 69.609,53.723L60.532,44.644L60.55,43.687ZM50.444,46.222C45.052,46.222 40.667,41.835 40.667,36.444C40.667,31.054 45.052,26.667 50.444,26.667C55.836,26.667 60.221,31.054 60.221,36.444C60.221,41.835 55.836,46.222 50.444,46.222Z"
+        android:fillColor="#F9F9FB"/>
+  </group>
+</vector>
--- a/app/src/main/res/drawable/recent_bookmark_background.xml
+++ b/app/src/main/res/drawable/recent_bookmark_background.xml
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="?above" />
+    <corners
+        android:bottomLeftRadius="8dp"
+        android:bottomRightRadius="8dp"
+        android:topLeftRadius="8dp"
+        android:topRightRadius="8dp" />
+
+      <stroke
+      android:width="1dp"
+      android:color="?shadow" />
+</shape>
--- a/app/src/main/res/layout/recent_bookmark_item.xml
+++ b/app/src/main/res/layout/recent_bookmark_item.xml
@ -11,17 +11,25 @@
    android:layout_height="@dimen/recent_bookmark_item_height"
    android:padding="4dp">

-    <com.google.android.material.imageview.ShapeableImageView
-        android:id="@+id/favicon_image"
-        style="@style/recentBookmarkFavicon"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:scaleType="centerCrop"
-        android:paddingBottom="8dp"
+    <RelativeLayout
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/recent_bookmark_item_favicon_height"
+        android:background="@drawable/recent_bookmark_background"
        app:layout_constraintBottom_toTopOf="@+id/bookmark_title"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintLeft_toLeftOf="parent">
+
+        <com.google.android.material.imageview.ShapeableImageView
+            android:id="@+id/favicon_image"
+            style="@style/recentBookmarkFavicon"
+            android:layout_width="@dimen/top_sites_favicon_size"
+            android:layout_height="@dimen/top_sites_favicon_size"
+            android:layout_centerHorizontal="true"
+            android:layout_centerVertical="true"
+            android:background="?above" />
+
+    </RelativeLayout>

    <TextView
        android:id="@+id/bookmark_title"
@ -33,8 +41,8 @@
        android:nestedScrollingEnabled="false"
        android:scrollbars="none"
        android:textAppearance="@style/recentBookmarkItemSubTitleText"
+        android:padding="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="Recently Saved bookmark item" />

--- a/app/src/main/res/layout/recent_bookmarks_header.xml
+++ b/app/src/main/res/layout/recent_bookmarks_header.xml
@ -31,7 +31,6 @@
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackground"
        android:contentDescription="@string/recently_saved_show_all_content_description"
-        android:paddingVertical="16dp"
        android:paddingStart="16dp"
        android:paddingEnd="0dp"
        android:gravity="end"
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@ -96,9 +96,9 @@
    <dimen name="home_item_horizontal_margin">16dp</dimen>

    <!-- Home - Recently saved bookmarks -->
-    <dimen name="recent_bookmark_item_height">132dp</dimen>
-    <dimen name="recent_bookmark_item_width">161dp</dimen>
-    <dimen name="recent_bookmark_item_favicon_height">72dp</dimen>
+    <dimen name="recent_bookmark_item_height">136dp</dimen>
+    <dimen name="recent_bookmark_item_width">156dp</dimen>
+    <dimen name="recent_bookmark_item_favicon_height">96dp</dimen>
    <dimen name="recent_bookmark_item_favicon_elevation">0dp</dimen>
    <dimen name="recent_bookmark_item_favicon_corner_size">8dp</dimen>