From 2091c5559dfce983ebc15d398af80f2973df1467 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Thu, 7 Nov 2024 18:51:17 +0100 Subject: [PATCH] Ensure the invisible buttons have the correct size. --- .../impl/incoming/IncomingVerificationView.kt | 9 +++---- .../impl/outgoing/VerifySelfSessionView.kt | 18 +++++-------- .../designsystem/theme/components/Button.kt | 26 +++++++++++++------ 3 files changed, 27 insertions(+), 26 deletions(-) diff --git a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/incoming/IncomingVerificationView.kt b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/incoming/IncomingVerificationView.kt index e8f098f848..3d6adf28cd 100644 --- a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/incoming/IncomingVerificationView.kt +++ b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/incoming/IncomingVerificationView.kt @@ -10,9 +10,7 @@ package io.element.android.features.verifysession.impl.incoming import androidx.activity.compose.BackHandler import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.material3.ExperimentalMaterial3Api 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.PreviewsDayNight 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.TextButton import io.element.android.libraries.designsystem.theme.components.TopAppBar @@ -166,8 +165,7 @@ private fun IncomingVerificationBottomMenu( enabled = false, showProgress = true, ) - // Placeholder so the 1st button keeps its vertical position - Spacer(modifier = Modifier.height(40.dp)) + InvisibleButton() } } else { VerificationBottomMenu { @@ -194,8 +192,7 @@ private fun IncomingVerificationBottomMenu( enabled = false, showProgress = true, ) - // Placeholder so the 1st button keeps its vertical position - Spacer(modifier = Modifier.height(40.dp)) + InvisibleButton() } } else { VerificationBottomMenu { diff --git a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/outgoing/VerifySelfSessionView.kt b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/outgoing/VerifySelfSessionView.kt index d60986e1cb..e1e22eda33 100644 --- a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/outgoing/VerifySelfSessionView.kt +++ b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/outgoing/VerifySelfSessionView.kt @@ -12,10 +12,8 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row -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.padding import androidx.compose.material3.ExperimentalMaterial3Api 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.theme.components.Button 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.Text import io.element.android.libraries.designsystem.theme.components.TextButton @@ -282,8 +281,7 @@ private fun VerifySelfSessionBottomMenu( text = stringResource(CommonStrings.action_start_verification), onClick = { eventSink(VerifySelfSessionViewEvents.RequestVerification) }, ) - // Placeholder so the 1st button keeps its vertical position - Spacer(modifier = Modifier.height(40.dp)) + InvisibleButton() } } is Step.Canceled -> { @@ -293,8 +291,7 @@ private fun VerifySelfSessionBottomMenu( text = stringResource(CommonStrings.action_done), onClick = onCancelClick, ) - // Placeholder so the 1st button keeps its vertical position - Spacer(modifier = Modifier.height(40.dp)) + InvisibleButton() } } is Step.Ready -> { @@ -320,8 +317,7 @@ private fun VerifySelfSessionBottomMenu( showProgress = true, enabled = false, ) - // Placeholder so the 1st button keeps its vertical position - Spacer(modifier = Modifier.height(40.dp)) + InvisibleButton() } } is Step.Verifying -> { @@ -343,8 +339,7 @@ private fun VerifySelfSessionBottomMenu( }, ) if (isVerifying) { - // Placeholder so the 1st button keeps its vertical position - Spacer(modifier = Modifier.height(40.dp)) + InvisibleButton() } else { TextButton( modifier = Modifier.fillMaxWidth(), @@ -361,8 +356,7 @@ private fun VerifySelfSessionBottomMenu( text = stringResource(CommonStrings.action_continue), onClick = onContinueClick, ) - // Placeholder so the 1st button keeps its vertical position - Spacer(modifier = Modifier.height(48.dp)) + InvisibleButton() } } is Step.Skipped -> return diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt index 01182343f8..9f49bca0bb 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt @@ -17,6 +17,7 @@ import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer 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.size @@ -118,6 +119,14 @@ fun TextButton( leadingIcon = leadingIcon ) +@Composable +fun InvisibleButton( + modifier: Modifier = Modifier, + size: ButtonSize = ButtonSize.Large, +) { + Spacer(modifier = modifier.height(size.toMinHeight())) +} + @Composable private fun ButtonInternal( text: String, @@ -131,14 +140,7 @@ private fun ButtonInternal( showProgress: Boolean = false, leadingIcon: IconSource? = null, ) { - val minHeight = when (size) { - ButtonSize.Small -> 32.dp - ButtonSize.Medium, - ButtonSize.MediumLowPadding -> 40.dp - ButtonSize.Large, - ButtonSize.LargeLowPadding -> 48.dp - } - + val minHeight = size.toMinHeight() val hasStartDrawable = showProgress || leadingIcon != null 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 sealed interface IconSource { val contentDescription: String?