commit bc3b51afc6bd17fd9f7fc21491ed64be021ef865
parent 059eda0de09f31a9ef28002d20d77acdd6b24435
Author: RebecaTudor <rebecatudor273@gmail.com>
Date: Thu, 9 Oct 2025 07:08:50 +0000
Bug 1984056 - Update onboarding redesign to match Figma landscape r=android-reviewers,anpopa,gmalekpour
For devices that are in landscape and don't have large screens,
the page card should fill the screen.
Differential Revision: https://phabricator.services.mozilla.com/D267746
Diffstat:
1 file changed, 26 insertions(+), 7 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/OnboardingScreenRedesign.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/OnboardingScreenRedesign.kt
@@ -275,10 +275,11 @@ private fun OnboardingContent(
val isLargeScreen = LocalContext.current.isLargeScreenSize()
val isLandscape = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
- val pagerWidth = pageContentWidth(boxWithConstraintsScope, isLargeScreen)
- val pagerHeight = pageContentHeight(boxWithConstraintsScope, isLargeScreen)
+ val pagerWidth = pageContentWidth(boxWithConstraintsScope, isLargeScreen, isLandscape)
+ val pagerHeight = pageContentHeight(boxWithConstraintsScope, isLargeScreen, isLandscape)
val pagePeekWidth = ((maxWidth - pagerWidth) / 2).coerceAtLeast(8.dp)
+ val paddingValue = if (!isLargeScreen && isLandscape) 0.dp else pagePeekWidth
if (!isNonLargeScreenLandscape(isLargeScreen, isLandscape)) {
Image(
@@ -297,7 +298,7 @@ private fun OnboardingContent(
.fillMaxWidth()
.height(pagerHeight)
.nestedScroll(nestedScrollConnection),
- contentPadding = PaddingValues(horizontal = pagePeekWidth),
+ contentPadding = PaddingValues(horizontal = paddingValue),
pageSize = PageSize.Fill,
beyondViewportPageCount = 2,
pageSpacing = pageSpacing(isLargeScreen, pagePeekWidth),
@@ -416,22 +417,40 @@ private object PageContentLayout {
const val WIDTH_RATIO = 0.85f
const val TABLET_WIDTH_RATIO = 0.35f
const val TABLET_HEIGHT_RATIO = 0.50f
+ const val HEIGHT_RATIO_LANDSCAPE_NON_LARGE_SCREEN = 1f
+ const val WIDTH_RATIO_LANDSCAPE_NON_LARGE_SCREEN = 1f
}
-private fun pageContentHeight(scope: BoxWithConstraintsScope, isLargeScreen: Boolean): Dp {
+private fun pageContentHeight(
+ scope: BoxWithConstraintsScope,
+ isLargeScreen: Boolean,
+ isLandscape: Boolean,
+): Dp {
val minHeight =
if (isLargeScreen) PageContentLayout.MIN_HEIGHT_TABLET_DP else PageContentLayout.MIN_HEIGHT_DP
val heightRatio =
- if (isLargeScreen) PageContentLayout.TABLET_HEIGHT_RATIO else PageContentLayout.HEIGHT_RATIO
+ when {
+ isLargeScreen -> PageContentLayout.TABLET_HEIGHT_RATIO
+ !isLargeScreen && isLandscape -> PageContentLayout.HEIGHT_RATIO_LANDSCAPE_NON_LARGE_SCREEN
+ else -> PageContentLayout.HEIGHT_RATIO
+ }
return scope.maxHeight.times(heightRatio).coerceAtLeast(minHeight)
}
-private fun pageContentWidth(scope: BoxWithConstraintsScope, isLargeScreen: Boolean): Dp {
+private fun pageContentWidth(
+ scope: BoxWithConstraintsScope,
+ isLargeScreen: Boolean,
+ isLandscape: Boolean,
+): Dp {
val minWidth =
if (isLargeScreen) PageContentLayout.MIN_WIDTH_TABLET_DP else PageContentLayout.MIN_WIDTH_DP
val widthRatio =
- if (isLargeScreen) PageContentLayout.TABLET_WIDTH_RATIO else PageContentLayout.WIDTH_RATIO
+ when {
+ isLargeScreen -> PageContentLayout.TABLET_WIDTH_RATIO
+ !isLargeScreen && isLandscape -> PageContentLayout.WIDTH_RATIO_LANDSCAPE_NON_LARGE_SCREEN
+ else -> PageContentLayout.WIDTH_RATIO
+ }
return scope.maxWidth.times(widthRatio).coerceAtLeast(minWidth)
}