Make sure HeaderFooterPage can contents be scrolled (#4704)

Co-authored-by: ElementBot <android@element.io>
This commit is contained in:
Jorge Martin Espinosa 2025-06-02 14:28:46 +02:00 committed by GitHub
parent df62dd1dd5
commit e02053d85e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
57 changed files with 153 additions and 112 deletions

View file

@ -7,11 +7,24 @@
package io.element.android.features.securebackup.impl.enter
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.isImeVisible
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.relocation.BringIntoViewRequester
import androidx.compose.foundation.relocation.bringIntoViewRequester
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
@ -25,6 +38,9 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.ui.strings.CommonStrings
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import kotlin.time.Duration.Companion.milliseconds
@Composable
fun SecureBackupEnterRecoveryKeyView(
@ -55,12 +71,30 @@ fun SecureBackupEnterRecoveryKeyView(
}
}
@OptIn(ExperimentalFoundationApi::class, ExperimentalLayoutApi::class)
@Composable
private fun Content(
state: SecureBackupEnterRecoveryKeyState,
) {
val bringIntoViewRequester = remember { BringIntoViewRequester() }
var isFocused by remember { mutableStateOf(false) }
val isImeVisible = WindowInsets.isImeVisible
val coroutineScope = rememberCoroutineScope()
LaunchedEffect(isImeVisible, isFocused) {
// When the keyboard is shown, we want to scroll the text field into view
if (isImeVisible && isFocused) {
coroutineScope.launch {
// Delay to ensure the keyboard is fully shown
delay(100.milliseconds)
bringIntoViewRequester.bringIntoView()
}
}
}
RecoveryKeyView(
modifier = Modifier.padding(top = 52.dp, bottom = 32.dp),
modifier = Modifier
.onFocusChanged { isFocused = it.isFocused }
.bringIntoViewRequester(bringIntoViewRequester)
.padding(top = 52.dp, bottom = 32.dp),
state = state.recoveryKeyViewState,
onClick = null,
onChange = {

View file

@ -13,9 +13,11 @@ import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
@ -63,6 +65,7 @@ fun FlowStepPage(
}
},
title = {},
colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent)
)
},
header = {

View file

@ -9,12 +9,14 @@ package io.element.android.libraries.designsystem.atomic.pages
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.calculateEndPadding
import androidx.compose.foundation.layout.calculateStartPadding
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
@ -94,17 +96,19 @@ fun HeaderFooterPage(
.run {
if (isScrollable) {
verticalScroll(rememberScrollState())
// Make sure the scrollable content takes the full available height
.height(IntrinsicSize.Max)
} else {
Modifier
}
}
// Apply insets here so if the content is scrollable it can get below the top app bar if needed
.padding(contentInsetsPadding)
.weight(1f),
.weight(1f, fill = true),
) {
// Header
header()
Box(modifier = Modifier.weight(1f)) {
Box {
content()
}
}
@ -112,7 +116,7 @@ fun HeaderFooterPage(
// Footer
Box(
modifier = Modifier
.padding(horizontal = 16.dp)
.padding(start = 16.dp, end = 16.dp, top = 16.dp)
.fillMaxWidth()
.padding(footerInsetsPadding)
) {

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:255709a0c6b3ffe337e5a3ce657e350539d9278a2a1c7994ac40752a0bffecff
size 82449
oid sha256:236ed0a010eb4ad4ca28b474a269fe919dc2a329132c42f02092a31bdf7d84a1
size 83154

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:232fcbe898588450577fca29090873626c2df7cc4afba91a87d3956d29f0afbc
size 81150
oid sha256:39a70a38c06be96a7d9acee023b3d26fb03b374a981185e5c2a2d217fdbed1fb
size 81825

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:82812d497f41b7e34d00cf2fadbde22115200539fcb25660dd9f9c9378093f0e
size 75610
oid sha256:6b29e98607174bd4f8c64e582c8e012a95565a97601ade537375cf0515585592
size 76228

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:26f4a151850c4c21ed57d0a1d36ea72aece585ed5ec6d54303edbeaa91d06df9
size 73959
oid sha256:f10da703d90ac9bc99c7145eea93598e209f1c674fc918ce69df8875bddbf736
size 74353

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3b5294950885cb417983db822b7615dfd0c4988c0eef7eceb466b751c0834020
size 68101
oid sha256:e6aa9ee5920f74d5a5fef6e2a0c81ef8e0480a428161a33283c55dfeb17d39ef
size 68963

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c6ea578f8aa88e306f50407c48cc08243e147635bd5e94f13c4f054ff02ed380
size 59199
oid sha256:f36c7ded0fb9e543dd367bc7ae676463d36cd3aa449af8eeffe98966a96dd847
size 59960

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fbdd42f8092b3bf8fc58ea012972a77444bff2200585fc4d9e0765453e98c251
size 29425
oid sha256:fc93b58449602518d7fd6e14334bba0793a5692f478367e825b75c6ca9de685a
size 29451

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c35203dccee8ae4c1f7257d54ce84394fcc1b433a1dbd3ca66f8989eb776edf1
size 28789
oid sha256:8cbdba568da3e23a836524fbde2d431268d6ce27408a3490fa3bf1407a2862e0
size 28729

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3d98408bf12d027294336036bc931a71e8445ea64fbe24382e28f5c9ab571e2f
size 14771
oid sha256:ee07c8d10b22fde6ba769ffb9f4165dc361a736f406462971e675fe49f937c4f
size 14601

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fe810ba7c5afd8c6453c0798dfd57dbdb32ef3db486a2346b391616c67384ab7
size 19865
oid sha256:82d2a63343a1888fea014a660839b258e384dedb5172878f50513543fac908a1
size 19675

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d46119857cf8c5ae5f08306e70ff1da7bbf2439f1823cd0d4dae7543ebf117c3
size 26383
oid sha256:6926b4809939097a505ce1864dabcf5ca50461269b89118154b5e692317aec9f
size 26204

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e6ff5f8f48d4976f3765816f81b540d7100599cf536613c47e39e00ab5c87cbb
size 32549
oid sha256:0cf8d0e215067d3c6bab9f7e7669ca4639b896f7dc418631dd9959fb99452ca7
size 32385

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d133a357d0de55f21240136477f7e1f878195b77e60aa555f8ffb1c39799a5a3
size 14055
oid sha256:cb9fc1376b91a4aa5a591100bf98fa15a138d26f5d43ee22c48a61a89943ff9f
size 13974

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e9c1deea2ce90a44dac812217fa8f49f290bae023146b883dac9ae3040a4242f
size 18969
oid sha256:bf7a6a0f41ee301fb203c25c4636d7ce96d15e76eb536c7573e7792657dcd459
size 18892

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:daf8aeeb87942d65602cb24d4c58a4165a43cacc7c5c98f8032e28551bb71845
size 25245
oid sha256:3f1929531fee3dc938cda1f865260c83569cd5980ba5da5b7a0b3b6285085aed
size 25160

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:35e7dd1dd561f3e2a32b55732d81054036703957a93186a24664423bb7343454
size 31212
oid sha256:e77dc96ffab18d00cdced2486407f3d70d0213a9f2937672c12e6d920364b17e
size 31129

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d0a50e8f002b7866579ad058d1d71621e85c00282cca4b5ddb1ecd5d3fb0bfcd
size 57245
oid sha256:d49a60535fa260b6a920fe1765b0a4e6277a4a513eba5a35f2992f69576bf121
size 63448

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:91759024a0698ea4d4fd05fada6125fae5f86978d26e86d3cb088f57424772cc
size 49470
oid sha256:45471081e7c479fec9279dcba2e8a65f283bde610c006f387581280a489dec1c
size 54422

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:db0eb360bed04c1169be840fa15429a180b9812b0f38b903639de70cc0eb6369
size 56370
oid sha256:b235d43a2d760c978c2fad9ca3cb6d9c84991563b70bb79852da00ddb1a04d6f
size 62362

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:11213aea7ceb0eab52a27ecff95075e3b15508bcfeca04bad88326cbb3989f9f
size 47362
oid sha256:310bf9cce0143135a94b16704fca319db26607976c2d78bfc2896f85b67c62bb
size 52199

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6cdf434a3f63224c6d164f6e153d846b26644b270a63df01808ac9577883d7fe
size 56501
oid sha256:3d5aec2ca7aa00c9a3b4a21e6589497b784d90676ffe94999efd245916de2f8d
size 54310

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6cdf434a3f63224c6d164f6e153d846b26644b270a63df01808ac9577883d7fe
size 56501
oid sha256:3d5aec2ca7aa00c9a3b4a21e6589497b784d90676ffe94999efd245916de2f8d
size 54310

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:eeb6b4d6b8ae5e34c9621302dc04bde9086d3857f1928d360d16f64c24e8bb3e
size 50287
oid sha256:56d784b2a9bd8c36845ad0d559ccb0fc38d93b281efa9f50590be375177ecc52
size 48492

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:05e2c93413dfef1dfbad559ea4a7321ce3cec076d05d448e28474bde66e3fff4
size 54646
oid sha256:fd0e7f92b0a307db669342b7880f14fbc2adc0b70a6cd7445771af95a9386f9e
size 52397

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:05e2c93413dfef1dfbad559ea4a7321ce3cec076d05d448e28474bde66e3fff4
size 54646
oid sha256:fd0e7f92b0a307db669342b7880f14fbc2adc0b70a6cd7445771af95a9386f9e
size 52397

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:24fa75a0c3fcdc535bc96a3bce8dc2edd9fbcfd9cb3663f7b454394611bef94b
size 47571
oid sha256:16fc4591af9f0fc19aa2aa6d2e9d44cf87176797a8f9540605ec265744f9fb28
size 45864

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6cdf434a3f63224c6d164f6e153d846b26644b270a63df01808ac9577883d7fe
size 56501
oid sha256:3d5aec2ca7aa00c9a3b4a21e6589497b784d90676ffe94999efd245916de2f8d
size 54310

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6cdf434a3f63224c6d164f6e153d846b26644b270a63df01808ac9577883d7fe
size 56501
oid sha256:3d5aec2ca7aa00c9a3b4a21e6589497b784d90676ffe94999efd245916de2f8d
size 54310

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:eeb6b4d6b8ae5e34c9621302dc04bde9086d3857f1928d360d16f64c24e8bb3e
size 50287
oid sha256:56d784b2a9bd8c36845ad0d559ccb0fc38d93b281efa9f50590be375177ecc52
size 48492

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:05e2c93413dfef1dfbad559ea4a7321ce3cec076d05d448e28474bde66e3fff4
size 54646
oid sha256:fd0e7f92b0a307db669342b7880f14fbc2adc0b70a6cd7445771af95a9386f9e
size 52397

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:05e2c93413dfef1dfbad559ea4a7321ce3cec076d05d448e28474bde66e3fff4
size 54646
oid sha256:fd0e7f92b0a307db669342b7880f14fbc2adc0b70a6cd7445771af95a9386f9e
size 52397

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:24fa75a0c3fcdc535bc96a3bce8dc2edd9fbcfd9cb3663f7b454394611bef94b
size 47571
oid sha256:16fc4591af9f0fc19aa2aa6d2e9d44cf87176797a8f9540605ec265744f9fb28
size 45864

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ec003b496dd46394a0d7e261ca7d1f29c67539bb342ffc63c70f29429a4c9383
size 56106
oid sha256:fbad1b9aeb93d87860738982345be39484cd5fdc8cc6dd2772f5b21580d7f75f
size 55827

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:04e95499c071791b6abe8f22c29ec81f21f92b913ae24965f6455c8bcff3ac86
size 55164
oid sha256:5e7c5fdb23b2e6406e07cc518f03e6e49acae68f7b91dc2626ea7c34e1875a57
size 54829

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:89bbdbeef7d2d331e95907a4c1b9d34764c3ea39b8bb63a4f42fb210515de75b
size 46713
oid sha256:88f616a97acfe8c98705843ebbe5222d8d7068c64345a63594bff10b27b56e0b
size 46485

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a71a88e65140d150cbe50d116e13119dcb9bd96191832ac482f423f284c55246
size 47048
oid sha256:79fe88714a2e3d9a738de0e457220170716adf88e85eeef8e3a460facacac8ee
size 46823

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:531de4a36c2fd9b52e7f29fcde221bd8897178bbfb7cbf5b5640acbee4439d1a
size 40396
oid sha256:0e42383bf5dda6a4511cb915c40f76fee54670158c848d4ee1b125c57eea290b
size 40166

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:74b41a474f1c26e668b05c9b9da5313739fc23e2679d7f58d17326499fd8a8f3
size 40733
oid sha256:ef4fa260df2194e4deefd4e3d9d57779afcbbc6cd56ddb4d699afa6fbac94cd8
size 40502

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9cc1a6ed77d4bdca2154e6a98294a970071f48bbd986bfb175a5ed0f0360d3a2
size 31534
oid sha256:a599d61446db401ad156139758917b54f702d765d24f20fce246674e6dd05cc3
size 31555

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fc7264ee36a36ac79f9c52ab24f2cdccecf149aee3b36f1f03121b5a98ac7aa8
size 45556
oid sha256:fddc479ceef787049b0e4af3ce61f6efbf67f7dccd81c3d6c17fcc7cea9c1127
size 45383

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:adbb4b7a7297bf7e586d663dc665cedc2f7dba0e841a3f93d09d3be27e3527fd
size 45919
oid sha256:16bcb5d1d66aa3b5bb8e574e67f47e87c4beee9cc8795c4ac24ea68c57d32dbb
size 45750

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d1f6072fb62c959e9685f915c3985c58b9bcc2c630d6bc9a4370f4b2d88a374c
size 39645
oid sha256:8f99c623fc13c336ee3138741275a4fd42677d92d8357e37d6b9ae4cb75b22e1
size 39450

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:82460b85ca35f30990ab76a78e635e6783f8ce39524e3f9fd6ffe5b7caab0a14
size 40012
oid sha256:c8be233702d5b478db8358053da7cfc3712028f1b0b31287b839cb2a2dab3866
size 39831

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f92d9cf0b0ea928325a8e64ffe32bd0484f9cb4130cd9815a2ea6997e2d5852c
size 30675
oid sha256:093b5ba8be120cf9f93cd3448aac328c1a8ba191d45e48f514f12879e9d3d5ae
size 30702

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:89bbdbeef7d2d331e95907a4c1b9d34764c3ea39b8bb63a4f42fb210515de75b
size 46713
oid sha256:88f616a97acfe8c98705843ebbe5222d8d7068c64345a63594bff10b27b56e0b
size 46485

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a71a88e65140d150cbe50d116e13119dcb9bd96191832ac482f423f284c55246
size 47048
oid sha256:79fe88714a2e3d9a738de0e457220170716adf88e85eeef8e3a460facacac8ee
size 46823

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:531de4a36c2fd9b52e7f29fcde221bd8897178bbfb7cbf5b5640acbee4439d1a
size 40396
oid sha256:0e42383bf5dda6a4511cb915c40f76fee54670158c848d4ee1b125c57eea290b
size 40166

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9cc1a6ed77d4bdca2154e6a98294a970071f48bbd986bfb175a5ed0f0360d3a2
size 31534
oid sha256:a599d61446db401ad156139758917b54f702d765d24f20fce246674e6dd05cc3
size 31555

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fc7264ee36a36ac79f9c52ab24f2cdccecf149aee3b36f1f03121b5a98ac7aa8
size 45556
oid sha256:fddc479ceef787049b0e4af3ce61f6efbf67f7dccd81c3d6c17fcc7cea9c1127
size 45383

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:adbb4b7a7297bf7e586d663dc665cedc2f7dba0e841a3f93d09d3be27e3527fd
size 45919
oid sha256:16bcb5d1d66aa3b5bb8e574e67f47e87c4beee9cc8795c4ac24ea68c57d32dbb
size 45750

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d1f6072fb62c959e9685f915c3985c58b9bcc2c630d6bc9a4370f4b2d88a374c
size 39645
oid sha256:8f99c623fc13c336ee3138741275a4fd42677d92d8357e37d6b9ae4cb75b22e1
size 39450

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f92d9cf0b0ea928325a8e64ffe32bd0484f9cb4130cd9815a2ea6997e2d5852c
size 30675
oid sha256:093b5ba8be120cf9f93cd3448aac328c1a8ba191d45e48f514f12879e9d3d5ae
size 30702

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fe7673f9923f190509d7beaac799dab5f40a18aa6272efb15b568a1f61384d69
size 15553
oid sha256:57cbf6294c2eed21f53d79adccceb2cc066c391a5ab1df76e39a1a5336318789
size 15604

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f38933d81b950a4e38fb8bb137cc9d7c16d23f774d2994c70e1e5899facbd19d
size 15128
oid sha256:d28135979475db962fd91c63ed2a7f6d2cf24232b14755f961812a55c0ec4587
size 15207