From b3b11250e0682125403f5891d5b521bd44c53483 Mon Sep 17 00:00:00 2001 From: t-p-white Date: Tue, 6 Jun 2023 13:54:36 +0100 Subject: [PATCH] Bug 1821724 - Pocket column alignment fixed for all orientations --- .../org/mozilla/fenix/compose/ListItemTabLarge.kt | 5 +++- .../fenix/compose/ListItemTabLargePlaceholder.kt | 2 +- .../fenix/home/pocket/PocketStoriesComposables.kt | 27 +++++++++++++++++++++- 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt index 9e6c562d497b..889372625fe9 100644 --- a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt +++ b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt @@ -28,6 +28,9 @@ import androidx.compose.ui.unit.sp import org.mozilla.fenix.compose.annotation.LightDarkPreview import org.mozilla.fenix.theme.FirefoxTheme +const val ITEM_WIDTH = 328 +const val ITEM_HEIGHT = 116 + /** * Default layout of a large tab shown in a list taking String arguments for title and caption. * Has the following structure: @@ -138,7 +141,7 @@ fun ListItemTabSurface( onClick: (() -> Unit)? = null, tabDetails: @Composable () -> Unit, ) { - var modifier = Modifier.size(328.dp, 116.dp) + var modifier = Modifier.size(ITEM_WIDTH.dp, ITEM_HEIGHT.dp) if (onClick != null) modifier = modifier.then(Modifier.clickable { onClick() }) Card( diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLargePlaceholder.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLargePlaceholder.kt index 31055da797e5..2e867c9da8b8 100644 --- a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLargePlaceholder.kt +++ b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLargePlaceholder.kt @@ -46,7 +46,7 @@ fun ListItemTabLargePlaceholder( ) { Card( modifier = Modifier - .size(328.dp, 116.dp) + .size(ITEM_WIDTH.dp, ITEM_HEIGHT.dp) .clickable { onClick() }, shape = RoundedCornerShape(8.dp), backgroundColor = FirefoxTheme.colors.layer2, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt index 653c2ad043a7..93efab52ee6f 100644 --- a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt +++ b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt @@ -6,6 +6,7 @@ package org.mozilla.fenix.home.pocket +import android.content.res.Configuration import android.graphics.Rect import android.net.Uri import androidx.annotation.FloatRange @@ -39,6 +40,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.LayoutCoordinates import androidx.compose.ui.layout.boundsInWindow import androidx.compose.ui.layout.onGloballyPositioned +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.platform.LocalView @@ -58,6 +60,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.IntSize import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.max import kotlinx.coroutines.delay import mozilla.components.service.pocket.PocketStory import mozilla.components.service.pocket.PocketStory.PocketRecommendedStory @@ -67,6 +70,7 @@ import mozilla.components.service.pocket.PocketStory.PocketSponsoredStoryShim import org.mozilla.fenix.R import org.mozilla.fenix.compose.ClickableSubstringLink import org.mozilla.fenix.compose.EagerFlingBehavior +import org.mozilla.fenix.compose.ITEM_WIDTH import org.mozilla.fenix.compose.ListItemTabLarge import org.mozilla.fenix.compose.ListItemTabLargePlaceholder import org.mozilla.fenix.compose.ListItemTabSurface @@ -271,12 +275,20 @@ fun PocketStories( val listState = rememberLazyListState() val flingBehavior = EagerFlingBehavior(lazyRowState = listState) + val configuration = LocalConfiguration.current + val screenWidth = configuration.screenWidthDp.dp + + val endPadding = + remember { mutableStateOf(endPadding(configuration, screenWidth, contentPadding)) } + // Force recomposition as padding is not consistently updated when orientation has changed. + endPadding.value = endPadding(configuration, screenWidth, contentPadding) + LazyRow( modifier = Modifier.semantics { testTagsAsResourceId = true testTag = "pocket.stories" }, - contentPadding = PaddingValues(horizontal = contentPadding), + contentPadding = PaddingValues(start = contentPadding, end = endPadding.value), state = listState, flingBehavior = flingBehavior, horizontalArrangement = Arrangement.spacedBy(8.dp), @@ -330,6 +342,19 @@ fun PocketStories( } } +private fun endPadding(configuration: Configuration, screenWidth: Dp, contentPadding: Dp) = + if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) { + alignColumnToTitlePadding(screenWidth = screenWidth, contentPadding = contentPadding) + } else { + contentPadding + } + +/** + * If the column item is wider than the [screenWidth] default to the [contentPadding]. + */ +private fun alignColumnToTitlePadding(screenWidth: Dp, contentPadding: Dp) = + max(screenWidth - (ITEM_WIDTH.dp + contentPadding), contentPadding) + /** * Add a callback for when this Composable is "shown" on the screen. * This checks whether the composable has at least [threshold] ratio of it's total area drawn inside -- 2.11.4.GIT