Ensure the invisible buttons have the correct size.

bmarty · bmarty · commit 8b21efa32a4a · 2024-11-07T18:51:44.000+01:00
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
@@ -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
@@ -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
@@ -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?

Original file line number	Diff line number	Diff line change
`@@ -12,10 +12,8 @@ import androidx.compose.foundation.clickable`
`12`	`12`	`import androidx.compose.foundation.layout.Arrangement`
`13`	`13`	`import androidx.compose.foundation.layout.Box`
`14`	`14`	`import androidx.compose.foundation.layout.Row`
`15`		`-import androidx.compose.foundation.layout.Spacer`
`16`	`15`	`import androidx.compose.foundation.layout.fillMaxSize`
`17`	`16`	`import androidx.compose.foundation.layout.fillMaxWidth`
`18`		`-import androidx.compose.foundation.layout.height`
`19`	`17`	`import androidx.compose.foundation.layout.padding`
`20`	`18`	`import androidx.compose.material3.ExperimentalMaterial3Api`
`21`	`19`	`import androidx.compose.runtime.Composable`
`@@ -44,6 +42,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreview`
`44`	`42`	`import io.element.android.libraries.designsystem.preview.PreviewsDayNight`
`45`	`43`	`import io.element.android.libraries.designsystem.theme.components.Button`
`46`	`44`	`import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator`
	`45`	`+import io.element.android.libraries.designsystem.theme.components.InvisibleButton`
`47`	`46`	`import io.element.android.libraries.designsystem.theme.components.OutlinedButton`
`48`	`47`	`import io.element.android.libraries.designsystem.theme.components.Text`
`49`	`48`	`import io.element.android.libraries.designsystem.theme.components.TextButton`
`@@ -282,8 +281,7 @@ private fun VerifySelfSessionBottomMenu(`
`282`	`281`	`text = stringResource(CommonStrings.action_start_verification),`
`283`	`282`	`onClick = { eventSink(VerifySelfSessionViewEvents.RequestVerification) },`
`284`	`283`	`)`
`285`		`- // Placeholder so the 1st button keeps its vertical position`
`286`		`- Spacer(modifier = Modifier.height(40.dp))`
	`284`	`+ InvisibleButton()`
`287`	`285`	`}`
`288`	`286`	`}`
`289`	`287`	`is Step.Canceled -> {`
`@@ -293,8 +291,7 @@ private fun VerifySelfSessionBottomMenu(`
`293`	`291`	`text = stringResource(CommonStrings.action_done),`
`294`	`292`	`onClick = onCancelClick,`
`295`	`293`	`)`
`296`		`- // Placeholder so the 1st button keeps its vertical position`
`297`		`- Spacer(modifier = Modifier.height(40.dp))`
	`294`	`+ InvisibleButton()`
`298`	`295`	`}`
`299`	`296`	`}`
`300`	`297`	`is Step.Ready -> {`
`@@ -320,8 +317,7 @@ private fun VerifySelfSessionBottomMenu(`
`320`	`317`	`showProgress = true,`
`321`	`318`	`enabled = false,`
`322`	`319`	`)`
`323`		`- // Placeholder so the 1st button keeps its vertical position`
`324`		`- Spacer(modifier = Modifier.height(40.dp))`
	`320`	`+ InvisibleButton()`
`325`	`321`	`}`
`326`	`322`	`}`
`327`	`323`	`is Step.Verifying -> {`
`@@ -343,8 +339,7 @@ private fun VerifySelfSessionBottomMenu(`
`343`	`339`	`},`
`344`	`340`	`)`
`345`	`341`	`if (isVerifying) {`
`346`		`- // Placeholder so the 1st button keeps its vertical position`
`347`		`- Spacer(modifier = Modifier.height(40.dp))`
	`342`	`+ InvisibleButton()`
`348`	`343`	`} else {`
`349`	`344`	`TextButton(`
`350`	`345`	`modifier = Modifier.fillMaxWidth(),`
`@@ -361,8 +356,7 @@ private fun VerifySelfSessionBottomMenu(`
`361`	`356`	`text = stringResource(CommonStrings.action_continue),`
`362`	`357`	`onClick = onContinueClick,`
`363`	`358`	`)`
`364`		`- // Placeholder so the 1st button keeps its vertical position`
`365`		`- Spacer(modifier = Modifier.height(48.dp))`
	`359`	`+ InvisibleButton()`
`366`	`360`	`}`
`367`	`361`	`}`
`368`	`362`	`is Step.Skipped -> return`