Ensure the invisible buttons have the correct size.

This commit is contained in:
Benoit Marty 2024-11-07 18:51:17 +01:00 committed by Benoit Marty
parent df3bd31118
commit 2091c5559d
3 changed files with 27 additions and 26 deletions

View file

@ -10,9 +10,7 @@ package io.element.android.features.verifysession.impl.incoming
import androidx.activity.compose.BackHandler import androidx.activity.compose.BackHandler
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -35,6 +33,7 @@ import io.element.android.libraries.designsystem.components.PageTitle
import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Button import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.InvisibleButton
import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TextButton import io.element.android.libraries.designsystem.theme.components.TextButton
import io.element.android.libraries.designsystem.theme.components.TopAppBar import io.element.android.libraries.designsystem.theme.components.TopAppBar
@ -166,8 +165,7 @@ private fun IncomingVerificationBottomMenu(
enabled = false, enabled = false,
showProgress = true, showProgress = true,
) )
// Placeholder so the 1st button keeps its vertical position InvisibleButton()
Spacer(modifier = Modifier.height(40.dp))
} }
} else { } else {
VerificationBottomMenu { VerificationBottomMenu {
@ -194,8 +192,7 @@ private fun IncomingVerificationBottomMenu(
enabled = false, enabled = false,
showProgress = true, showProgress = true,
) )
// Placeholder so the 1st button keeps its vertical position InvisibleButton()
Spacer(modifier = Modifier.height(40.dp))
} }
} else { } else {
VerificationBottomMenu { VerificationBottomMenu {

View file

@ -12,10 +12,8 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -44,6 +42,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Button import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.InvisibleButton
import io.element.android.libraries.designsystem.theme.components.OutlinedButton import io.element.android.libraries.designsystem.theme.components.OutlinedButton
import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TextButton import io.element.android.libraries.designsystem.theme.components.TextButton
@ -282,8 +281,7 @@ private fun VerifySelfSessionBottomMenu(
text = stringResource(CommonStrings.action_start_verification), text = stringResource(CommonStrings.action_start_verification),
onClick = { eventSink(VerifySelfSessionViewEvents.RequestVerification) }, onClick = { eventSink(VerifySelfSessionViewEvents.RequestVerification) },
) )
// Placeholder so the 1st button keeps its vertical position InvisibleButton()
Spacer(modifier = Modifier.height(40.dp))
} }
} }
is Step.Canceled -> { is Step.Canceled -> {
@ -293,8 +291,7 @@ private fun VerifySelfSessionBottomMenu(
text = stringResource(CommonStrings.action_done), text = stringResource(CommonStrings.action_done),
onClick = onCancelClick, onClick = onCancelClick,
) )
// Placeholder so the 1st button keeps its vertical position InvisibleButton()
Spacer(modifier = Modifier.height(40.dp))
} }
} }
is Step.Ready -> { is Step.Ready -> {
@ -320,8 +317,7 @@ private fun VerifySelfSessionBottomMenu(
showProgress = true, showProgress = true,
enabled = false, enabled = false,
) )
// Placeholder so the 1st button keeps its vertical position InvisibleButton()
Spacer(modifier = Modifier.height(40.dp))
} }
} }
is Step.Verifying -> { is Step.Verifying -> {
@ -343,8 +339,7 @@ private fun VerifySelfSessionBottomMenu(
}, },
) )
if (isVerifying) { if (isVerifying) {
// Placeholder so the 1st button keeps its vertical position InvisibleButton()
Spacer(modifier = Modifier.height(40.dp))
} else { } else {
TextButton( TextButton(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
@ -361,8 +356,7 @@ private fun VerifySelfSessionBottomMenu(
text = stringResource(CommonStrings.action_continue), text = stringResource(CommonStrings.action_continue),
onClick = onContinueClick, onClick = onContinueClick,
) )
// Placeholder so the 1st button keeps its vertical position InvisibleButton()
Spacer(modifier = Modifier.height(48.dp))
} }
} }
is Step.Skipped -> return is Step.Skipped -> return

View file

@ -17,6 +17,7 @@ import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
@ -118,6 +119,14 @@ fun TextButton(
leadingIcon = leadingIcon leadingIcon = leadingIcon
) )
@Composable
fun InvisibleButton(
modifier: Modifier = Modifier,
size: ButtonSize = ButtonSize.Large,
) {
Spacer(modifier = modifier.height(size.toMinHeight()))
}
@Composable @Composable
private fun ButtonInternal( private fun ButtonInternal(
text: String, text: String,
@ -131,14 +140,7 @@ private fun ButtonInternal(
showProgress: Boolean = false, showProgress: Boolean = false,
leadingIcon: IconSource? = null, leadingIcon: IconSource? = null,
) { ) {
val minHeight = when (size) { val minHeight = size.toMinHeight()
ButtonSize.Small -> 32.dp
ButtonSize.Medium,
ButtonSize.MediumLowPadding -> 40.dp
ButtonSize.Large,
ButtonSize.LargeLowPadding -> 48.dp
}
val hasStartDrawable = showProgress || leadingIcon != null val hasStartDrawable = showProgress || leadingIcon != null
val contentPadding = when (size) { val contentPadding = when (size) {
@ -253,6 +255,14 @@ private fun ButtonInternal(
} }
} }
private fun ButtonSize.toMinHeight() = when (this) {
ButtonSize.Small -> 32.dp
ButtonSize.Medium,
ButtonSize.MediumLowPadding -> 40.dp
ButtonSize.Large,
ButtonSize.LargeLowPadding -> 48.dp
}
@Immutable @Immutable
sealed interface IconSource { sealed interface IconSource {
val contentDescription: String? val contentDescription: String?