From 47856c22ce3c4993f69c81f4306a4fd0b55c2836 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Tue, 18 Jun 2024 15:39:43 +0200 Subject: [PATCH] Allow scroll in the "Enter recovery key" screen. #3042 --- .../enter/SecureBackupEnterRecoveryKeyView.kt | 3 +- .../designsystem/atomic/pages/FlowStepPage.kt | 2 + .../atomic/pages/HeaderFooterPage.kt | 64 ++++++++++++++----- 3 files changed, 52 insertions(+), 17 deletions(-) diff --git a/features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/enter/SecureBackupEnterRecoveryKeyView.kt b/features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/enter/SecureBackupEnterRecoveryKeyView.kt index cbb46849a9..952bfaad5f 100644 --- a/features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/enter/SecureBackupEnterRecoveryKeyView.kt +++ b/features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/enter/SecureBackupEnterRecoveryKeyView.kt @@ -55,6 +55,7 @@ fun SecureBackupEnterRecoveryKeyView( FlowStepPage( modifier = modifier, + isScrollable = true, onBackClick = onBackClick, iconStyle = BigIcon.Style.Default(CompoundIcons.KeySolid()), title = stringResource(id = R.string.screen_recovery_key_confirm_title), @@ -70,7 +71,7 @@ private fun Content( state: SecureBackupEnterRecoveryKeyState, ) { RecoveryKeyView( - modifier = Modifier.padding(top = 52.dp), + modifier = Modifier.padding(top = 52.dp, bottom = 32.dp), state = state.recoveryKeyViewState, onClick = null, onChange = { diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/FlowStepPage.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/FlowStepPage.kt index 9218061638..7480f2115d 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/FlowStepPage.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/FlowStepPage.kt @@ -52,6 +52,7 @@ fun FlowStepPage( iconStyle: BigIcon.Style, title: String, modifier: Modifier = Modifier, + isScrollable: Boolean = false, onBackClick: (() -> Unit)? = null, subTitle: String? = null, buttons: @Composable ColumnScope.() -> Unit = {}, @@ -62,6 +63,7 @@ fun FlowStepPage( } HeaderFooterPage( modifier = modifier, + isScrollable = isScrollable, topBar = { TopAppBar( navigationIcon = { diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/HeaderFooterPage.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/HeaderFooterPage.kt index 4dd00a67d9..53b47b7422 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/HeaderFooterPage.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/HeaderFooterPage.kt @@ -22,7 +22,9 @@ import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.consumeWindowInsets import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -39,6 +41,7 @@ import io.element.android.libraries.designsystem.theme.components.Text * @param modifier Classical modifier. * @param paddingValues padding values to apply to the content. * @param containerColor color of the container. Set to [Color.Transparent] if you provide a background in the [modifier]. + * @param isScrollable if the whole content should be scrollable. * @param background optional background component. * @param topBar optional topBar. * @param header optional header. @@ -50,6 +53,7 @@ fun HeaderFooterPage( modifier: Modifier = Modifier, paddingValues: PaddingValues = PaddingValues(20.dp), containerColor: Color = MaterialTheme.colorScheme.background, + isScrollable: Boolean = false, background: @Composable () -> Unit = {}, topBar: @Composable () -> Unit = {}, header: @Composable () -> Unit = {}, @@ -63,25 +67,53 @@ fun HeaderFooterPage( ) { padding -> Box { background() - Column( - modifier = Modifier - .padding(paddingValues = paddingValues) - .padding(padding) - .consumeWindowInsets(padding) - ) { - // Header - header() - // Content + if (isScrollable) { + // Render in a LazyColumn + LazyColumn( + modifier = Modifier + .padding(paddingValues = paddingValues) + .padding(padding) + .consumeWindowInsets(padding) + .imePadding() + ) { + // Header + item { + header() + } + // Content + item { + content() + } + // Footer + item { + Box(modifier = Modifier.padding(horizontal = 16.dp)) { + footer() + } + } + } + } else { + // Render in a Column Column( modifier = Modifier - .weight(1f) - .fillMaxWidth(), + .padding(paddingValues = paddingValues) + .padding(padding) + .consumeWindowInsets(padding) + .imePadding() ) { - content() - } - // Footer - Box(modifier = Modifier.padding(horizontal = 16.dp)) { - footer() + // Header + header() + // Content + Column( + modifier = Modifier + .weight(1f) + .fillMaxWidth(), + ) { + content() + } + // Footer + Box(modifier = Modifier.padding(horizontal = 16.dp)) { + footer() + } } } }