commit 6ef7f42ad09ae5c9d5738987443bc1cdf27206cd
parent fe9f1e06a9cc595bb9c1a1bfc7e873c2145c7a6b
Author: Devota Aabel <daabel@mozilla.com>
Date: Fri, 5 Dec 2025 17:12:53 +0000
Bug 2002388- Create reusable HomepageCard for reusing the new homepage card style, and update stories card to use it. r=gl,android-reviewers
Differential Revision: https://phabricator.services.mozilla.com/D274963
Diffstat:
2 files changed, 98 insertions(+), 17 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ListItemTabSurface.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ListItemTabSurface.kt
@@ -4,7 +4,6 @@
package org.mozilla.fenix.compose
-import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
@@ -17,9 +16,6 @@ import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@@ -33,6 +29,8 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import mozilla.components.compose.base.modifier.skeletonLoader
import mozilla.components.compose.base.modifier.thenConditional
+import org.mozilla.fenix.home.topsites.ui.HomepageCard
+import org.mozilla.fenix.home.topsites.ui.homepageCardImageShape
import org.mozilla.fenix.theme.FirefoxTheme
const val ITEM_WIDTH = 305
@@ -66,30 +64,30 @@ fun ListItemTabSurface(
predicate = { onClick != null },
)
- Card(
+ HomepageCard(
modifier = modifier,
- shape = RoundedCornerShape(16.dp),
- border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant),
- colors = CardDefaults.cardColors(containerColor = backgroundColor),
+ backgroundColor = backgroundColor,
) {
Row(
- modifier = Modifier.fillMaxHeight()
+ modifier = Modifier
+ .fillMaxHeight()
.padding(contentPadding),
verticalAlignment = Alignment.CenterVertically,
) {
- val (imageWidth, imageHeight) = IMAGE_SIZE.dp to IMAGE_SIZE.dp
- val imageModifier = Modifier
- .size(imageWidth, imageHeight)
- .clip(RoundedCornerShape(16.dp))
-
Image(
url = imageUrl,
- modifier = imageModifier,
+ modifier = Modifier.size(IMAGE_SIZE.dp)
+ .clip(homepageCardImageShape),
private = false,
- targetSize = imageWidth,
+ targetSize = IMAGE_SIZE.dp,
contentScale = imageContentScale,
placeholder = {
- Box(modifier = Modifier.size(IMAGE_SIZE.dp).skeletonLoader())
+ Box(
+ modifier = Modifier
+ .size(IMAGE_SIZE.dp)
+ .clip(homepageCardImageShape)
+ .skeletonLoader(),
+ )
},
)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/topsites/ui/HomepageCard.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/topsites/ui/HomepageCard.kt
@@ -0,0 +1,83 @@
+/* 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.home.topsites.ui
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardColors
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.CardElevation
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.dp
+
+private val homepageCardRadius = 16.dp
+private val homepageCardImageRadius = 12.dp
+
+private val homepageCardShape = RoundedCornerShape(homepageCardRadius)
+val homepageCardImageShape = RoundedCornerShape(homepageCardImageRadius)
+
+/**
+ * Card for use on the homepage, with the default style including a border and rounded corner shape.
+ *
+ * @param backgroundColor [Color] to be applied to the background of this card.
+ * @param modifier [Modifier] to be applied to this card.
+ * @param shape [Shape] to be applied to this card.
+ * @param elevation [CardElevation] to be applied to this card.
+ * @param border [BorderStroke] to be applied to this card.
+ * @param content The composable content to display on the card.
+ */
+@Composable
+internal fun HomepageCard(
+ backgroundColor: Color,
+ modifier: Modifier = Modifier,
+ shape: Shape = homepageCardShape,
+ elevation: CardElevation = CardDefaults.cardElevation(),
+ border: BorderStroke? = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant),
+ content: @Composable ColumnScope.() -> Unit,
+) {
+ HomepageCard(
+ modifier = modifier,
+ shape = shape,
+ colors = CardDefaults.cardColors(containerColor = backgroundColor),
+ elevation = elevation,
+ border = border,
+ content = content,
+ )
+}
+
+/**
+ * Card for use on the homepage, with the default style including a border and rounded corner shape.
+ *
+ * @param modifier [Modifier] to be applied to this card.
+ * @param shape [Shape] to be applied to this card.
+ * @param colors [CardColors] to be applied to this card.
+ * @param elevation [CardElevation] to be applied to this card.
+ * @param border [BorderStroke] to be applied to this card.
+ * @param content The content displayed on the card.
+ */
+@Composable
+internal fun HomepageCard(
+ modifier: Modifier = Modifier,
+ shape: Shape = homepageCardShape,
+ colors: CardColors = CardDefaults.cardColors(),
+ elevation: CardElevation = CardDefaults.cardElevation(),
+ border: BorderStroke? = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant),
+ content: @Composable ColumnScope.() -> Unit,
+) {
+ Card(
+ modifier = modifier,
+ shape = shape,
+ colors = colors,
+ elevation = elevation,
+ border = border,
+ content = content,
+ )
+}
