Fixing blocked views on small screen due to the keyboard popping up

Also managed to maintain the ime padding for larger screens that DO want the button moving up.
This commit is contained in:
ThomasSession 2024-06-19 11:22:07 +10:00
parent 5147d059b9
commit 21f7376ea2
4 changed files with 116 additions and 63 deletions

View File

@ -5,11 +5,18 @@ import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -20,10 +27,12 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.flow.emptyFlow
import network.loki.messenger.R
import org.thoughtcrime.securesms.onboarding.ui.ContinueButton
import org.thoughtcrime.securesms.ui.LoadingArcOr
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
import org.thoughtcrime.securesms.ui.base
import org.thoughtcrime.securesms.ui.color.Colors
import org.thoughtcrime.securesms.ui.color.LocalColors
import org.thoughtcrime.securesms.ui.components.AppBar
@ -33,6 +42,7 @@ import org.thoughtcrime.securesms.ui.components.OutlineButton
import org.thoughtcrime.securesms.ui.components.SessionOutlinedTextField
import org.thoughtcrime.securesms.ui.components.SessionTabRow
import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.small
private val TITLES = listOf(R.string.enter_account_id, R.string.qrScan)
@ -66,34 +76,45 @@ private fun EnterAccountId(
callbacks: Callbacks,
onHelp: () -> Unit = {}
) {
Column(
modifier = Modifier
.padding(horizontal = LocalDimensions.current.xxsMargin, vertical = LocalDimensions.current.xsMargin)
.fillMaxHeight(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.xsMargin)
.fillMaxSize()
.verticalScroll(rememberScrollState())
.imePadding()
) {
SessionOutlinedTextField(
text = state.newMessageIdOrOns,
modifier = Modifier
.padding(horizontal = LocalDimensions.current.smallMargin)
.contentDescription("Session id input box"),
placeholder = stringResource(R.string.accountIdOrOnsEnter),
onChange = callbacks::onChange,
onContinue = callbacks::onContinue,
error = state.error?.string(),
)
BorderlessButtonWithIcon(
text = stringResource(R.string.messageNewDescription),
modifier = Modifier
.animateContentSize()
.contentDescription(R.string.AccessibilityId_help_desk_link)
.padding(horizontal = LocalDimensions.current.margin)
.fillMaxWidth(),
color = LocalColors.current.textSecondary,
iconRes = R.drawable.ic_circle_question_mark
) { onHelp() }
Column(
modifier = Modifier.padding(horizontal = LocalDimensions.current.xxsMargin, vertical = LocalDimensions.current.xsMargin),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.xsMargin)
) {
SessionOutlinedTextField(
text = state.newMessageIdOrOns,
modifier = Modifier
.padding(horizontal = LocalDimensions.current.smallMargin)
.contentDescription("Session id input box"),
placeholder = stringResource(R.string.accountIdOrOnsEnter),
onChange = callbacks::onChange,
onContinue = callbacks::onContinue,
error = state.error?.string(),
)
BorderlessButtonWithIcon(
text = stringResource(R.string.messageNewDescription),
modifier = Modifier
.animateContentSize()
.contentDescription(R.string.AccessibilityId_help_desk_link)
.padding(horizontal = LocalDimensions.current.margin)
.fillMaxWidth(),
style = small,
color = LocalColors.current.textSecondary,
iconRes = R.drawable.ic_circle_question_mark
) { onHelp() }
}
Spacer(Modifier.weight(2f))
OutlineButton(
modifier = Modifier

View File

@ -4,12 +4,17 @@ import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
@ -67,43 +72,56 @@ private fun PreviewRecoveryPassword() {
@Composable
private fun RecoveryPassword(state: State, onChange: (String) -> Unit = {}, onContinue: () -> Unit = {}) {
Column {
Column(
modifier = Modifier.padding(horizontal = LocalDimensions.current.largeMargin)
.weight(1f)
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
) {
Spacer(Modifier.weight(1f))
Row {
Spacer(
Modifier
.heightIn(min = LocalDimensions.current.smallItemSpacing)
.weight(1f))
// this is to make sure the spacer above doesn't get compressed to 0
Spacer(modifier = Modifier.height(LocalDimensions.current.smallItemSpacing))
Column(
modifier = Modifier.padding(horizontal = LocalDimensions.current.largeMargin)
) {
Row {
Text(
modifier = Modifier.weight(1f),
text = stringResource(R.string.sessionRecoveryPassword),
style = h4
)
Spacer(Modifier.width(LocalDimensions.current.xxsItemSpacing))
Icon(
modifier = Modifier.align(Alignment.CenterVertically),
painter = painterResource(id = R.drawable.ic_shield_outline),
contentDescription = null,
)
}
Spacer(Modifier.height(LocalDimensions.current.smallItemSpacing))
Text(
stringResource(R.string.sessionRecoveryPassword),
style = h4
stringResource(R.string.activity_link_enter_your_recovery_password_to_load_your_account_if_you_haven_t_saved_it_you_can_find_it_in_your_app_settings),
style = base
)
Spacer(Modifier.width(LocalDimensions.current.xxsItemSpacing))
Icon(
painter = painterResource(id = R.drawable.ic_shield_outline),
contentDescription = null,
Spacer(Modifier.height(LocalDimensions.current.itemSpacing))
SessionOutlinedTextField(
text = state.recoveryPhrase,
modifier = Modifier
.fillMaxWidth()
.contentDescription(R.string.AccessibilityId_recovery_phrase_input),
placeholder = stringResource(R.string.recoveryPasswordEnter),
onChange = onChange,
onContinue = onContinue,
error = state.error
)
}
Spacer(Modifier.height(LocalDimensions.current.smallItemSpacing))
Text(
stringResource(R.string.activity_link_enter_your_recovery_password_to_load_your_account_if_you_haven_t_saved_it_you_can_find_it_in_your_app_settings),
style = base
)
Spacer(Modifier.height(LocalDimensions.current.itemSpacing))
SessionOutlinedTextField(
text = state.recoveryPhrase,
modifier = Modifier
.fillMaxWidth()
.contentDescription(R.string.AccessibilityId_recovery_phrase_input),
placeholder = stringResource(R.string.recoveryPasswordEnter),
onChange = onChange,
onContinue = onContinue,
error = state.error
)
// this is to make sure the spacer below doesn't get compressed to 0
Spacer(modifier = Modifier.height(LocalDimensions.current.smallItemSpacing))
Spacer(Modifier.weight(2f))
}
ContinueButton(modifier = Modifier.align(Alignment.CenterHorizontally), onContinue)
}
ContinueButton(modifier = Modifier.align(Alignment.CenterHorizontally), onContinue)
}
}

View File

@ -2,9 +2,13 @@ package org.thoughtcrime.securesms.onboarding.pickname
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -30,13 +34,21 @@ private fun PreviewDisplayName() {
@Composable
internal fun DisplayName(state: State, onChange: (String) -> Unit = {}, onContinue: () -> Unit = {}) {
Column {
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
) {
Spacer(
Modifier
.heightIn(min = LocalDimensions.current.smallItemSpacing)
.weight(1f))
// this is to make sure the spacer above doesn't get compressed to 0
Spacer(modifier = Modifier.height(LocalDimensions.current.smallItemSpacing))
Column(
modifier = Modifier
.padding(horizontal = LocalDimensions.current.onboardingMargin)
.weight(1f)
modifier = Modifier.padding(horizontal = LocalDimensions.current.largeMargin)
) {
Spacer(modifier = Modifier.weight(1f))
Text(stringResource(state.title), style = h4)
Spacer(Modifier.height(LocalDimensions.current.smallItemSpacing))
Text(
@ -54,10 +66,12 @@ internal fun DisplayName(state: State, onChange: (String) -> Unit = {}, onContin
onContinue = onContinue,
error = state.error?.let { stringResource(it) }
)
Spacer(modifier = Modifier.weight(2f))
}
ContinueButton(Modifier.align(Alignment.CenterHorizontally), onContinue)
// this is to make sure the spacer below doesn't get compressed to 0
Spacer(modifier = Modifier.height(LocalDimensions.current.smallItemSpacing))
Spacer(Modifier.weight(2f))
ContinueButton(modifier = Modifier.align(Alignment.CenterHorizontally), onContinue)
}
}

View File

@ -99,7 +99,7 @@ fun AnnotatedTextWithIcon(
Placeholder(
width = iconSize,
height = iconSize,
placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
)
) {
Icon(