Ensure the invisible buttons have the correct size.
This commit is contained in:
parent
df3bd31118
commit
2091c5559d
3 changed files with 27 additions and 26 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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?
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue