[#372] Improve scrolling on Onboarding

* [#372] Improve scrolling on Onboarding

- Closes #372
- All screens were checked
- The Onboarding screen behavior on very small screens improved
- Tested with Split screen OS feature to emulate a very small screen

* Fixed status and navigation bars height
This commit is contained in:
Honza Rychnovský 2024-04-23 08:45:27 +02:00 committed by GitHub
parent 6ef9d9f02e
commit dd371348eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 32 additions and 8 deletions

View File

@ -31,10 +31,26 @@ fun screenHeight(cacheKey: Any = true): ScreenHeight {
val contentHeightPx = with(density) { configuration.screenHeightDp.dp.roundToPx() }
Twig.debug { "Screen content height in pixels: $contentHeightPx" }
val statusBarHeight = statusBars.getTop(density).dp
// TODO [#1382]: Analyse zero status and navigation bars height
// TODO [#1382]: https://github.com/Electric-Coin-Company/zashi-android/issues/1382
val statusBarHeight =
statusBars.getTop(density).dp.run {
if (value <= 0f) {
48.dp
} else {
this
}
}
Twig.debug { "Status bar height: $statusBarHeight" }
val navigationBarHeight = navigationBars.getBottom(density).dp
val navigationBarHeight =
navigationBars.getBottom(density).dp.run {
if (value <= 0f) {
88.dp
} else {
this
}
}
Twig.debug { "Navigation bar height: $navigationBarHeight" }
val contentHeight = (contentHeightPx / density.density.roundToInt()).dp
@ -56,7 +72,15 @@ data class ScreenHeight(
val systemStatusBarHeight: Dp,
val systemNavigationBarHeight: Dp
) {
fun overallScreenHeight() = contentHeight + systemBarsHeight()
fun overallScreenHeight(): Dp {
return (contentHeight + systemBarsHeight()).also {
Twig.debug { "Screen overall height: $it" }
}
}
fun systemBarsHeight() = systemStatusBarHeight + systemNavigationBarHeight
fun systemBarsHeight(): Dp {
return (systemStatusBarHeight + systemNavigationBarHeight).also {
Twig.debug { "System bars height: $this" }
}
}
}

View File

@ -115,7 +115,7 @@ fun ShortOnboarding(
Modifier
.padding(
top = paddingValues.calculateTopPadding() + ZcashTheme.dimens.spacingHuge,
bottom = paddingValues.calculateBottomPadding(),
bottom = paddingValues.calculateBottomPadding() + ZcashTheme.dimens.spacingDefault,
start = ZcashTheme.dimens.screenHorizontalSpacingBig,
end = ZcashTheme.dimens.screenHorizontalSpacingBig
)
@ -168,7 +168,7 @@ private fun OnboardingMainContent(
},
)
Column(
modifier = modifier,
modifier = modifier.then(Modifier.verticalScroll(rememberScrollState())),
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
@ -205,7 +205,7 @@ private fun OnboardingMainContent(
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingLarge))
Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingDefault))
SecondaryButton(
onImportWallet,
@ -242,7 +242,7 @@ fun AnimatedImage(
modifier =
Modifier
.fillMaxHeight()
.height(screenHeight.overallScreenHeight()),
.height(screenHeight.overallScreenHeight() + ZcashTheme.dimens.spacingHuge),
contentDescription = null
)
Image(