diff --git a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/VerifySelfSessionView.kt b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/VerifySelfSessionView.kt index d2d424d8b1..1c838625da 100644 --- a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/VerifySelfSessionView.kt +++ b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/VerifySelfSessionView.kt @@ -28,7 +28,6 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll @@ -48,18 +47,18 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.google.accompanist.flowlayout.FlowRow import com.google.accompanist.flowlayout.MainAxisAlignment -import io.element.android.features.verifysession.impl.VerifySelfSessionState.VerificationStep as FlowStep import io.element.android.libraries.architecture.Async import io.element.android.libraries.designsystem.ElementTextStyles +import io.element.android.libraries.designsystem.components.button.ButtonWithProgress import io.element.android.libraries.designsystem.preview.ElementPreviewDark import io.element.android.libraries.designsystem.preview.ElementPreviewLight import io.element.android.libraries.designsystem.theme.LocalColors import io.element.android.libraries.designsystem.theme.components.Button -import io.element.android.libraries.designsystem.theme.components.ButtonCircularProgressIndicator import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Surface import io.element.android.libraries.designsystem.theme.components.Text +import io.element.android.features.verifysession.impl.VerifySelfSessionState.VerificationStep as FlowStep import io.element.android.libraries.ui.strings.R as StringR @Composable @@ -165,7 +164,7 @@ internal fun HeaderContent(verificationFlowStep: FlowStep, modifier: Modifier = @Composable internal fun Content(flowState: FlowStep, modifier: Modifier = Modifier) { - Column (modifier){ + Column(modifier) { Spacer(Modifier.height(56.dp)) when (flowState) { FlowStep.Initial, FlowStep.Canceled, FlowStep.Completed -> Unit @@ -238,7 +237,9 @@ internal fun BottomMenu(screenState: VerifySelfSessionState, goBack: () -> Unit) } val negativeButtonCallback: () -> Unit = when (verificationViewState) { - is FlowStep.Verifying -> { { eventSink(VerifySelfSessionViewEvents.DeclineVerification) } } + is FlowStep.Verifying -> { + { eventSink(VerifySelfSessionViewEvents.DeclineVerification) } + } else -> goBack } @@ -248,15 +249,20 @@ internal fun BottomMenu(screenState: VerifySelfSessionState, goBack: () -> Unit) .padding(horizontal = 20.dp), horizontalAlignment = Alignment.CenterHorizontally ) { - Button( - modifier = Modifier.fillMaxWidth(), - onClick = { positiveButtonEvent?.let { eventSink(it) } } - ) { - if (isVerifying) { - ButtonCircularProgressIndicator() - Spacer(Modifier.width(10.dp)) + if (isVerifying) { + ButtonWithProgress( + modifier = Modifier.fillMaxWidth(), + onClick = { positiveButtonEvent?.let { eventSink(it) } } + ) { + positiveButtonTitle?.let { Text(stringResource(it)) } + } + } else { + Button( + modifier = Modifier.fillMaxWidth(), + onClick = { positiveButtonEvent?.let { eventSink(it) } } + ) { + positiveButtonTitle?.let { Text(stringResource(it)) } } - positiveButtonTitle?.let { Text(stringResource(it)) } } Spacer(modifier = Modifier.height(16.dp)) TextButton( diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/ButtonWithProgress.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/ButtonWithProgress.kt new file mode 100644 index 0000000000..061be835ee --- /dev/null +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/ButtonWithProgress.kt @@ -0,0 +1,92 @@ +/* + * Copyright (c) 2023 New Vector Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package io.element.android.libraries.designsystem.components.button + +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.progressSemantics +import androidx.compose.material3.ButtonColors +import androidx.compose.material3.ButtonElevation +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight +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.ElementButtonDefaults +import io.element.android.libraries.designsystem.theme.components.Text + +@Composable +fun ButtonWithProgress( + onClick: () -> Unit, + modifier: Modifier = Modifier, + enabled: Boolean = true, + shape: Shape = ElementButtonDefaults.shape, + colors: ButtonColors = ElementButtonDefaults.buttonColors(), + elevation: ButtonElevation? = ElementButtonDefaults.buttonElevation(), + border: BorderStroke? = null, + contentPadding: PaddingValues = ElementButtonDefaults.ContentPadding, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + content: @Composable RowScope.() -> Unit +) { + Button( + onClick = onClick, + modifier = modifier, + enabled = enabled, + shape = shape, + colors = colors, + elevation = elevation, + border = border, + contentPadding = contentPadding, + interactionSource = interactionSource, + ) { + CircularProgressIndicator( + modifier = Modifier + .progressSemantics() + .size(18.dp), + color = MaterialTheme.colorScheme.onPrimary, + strokeWidth = 2.dp, + ) + Spacer(Modifier.width(10.dp)) + content() + } +} + +@Preview +@Composable +internal fun ButtonWithProgressLightPreview() = ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun ButtonWithProgressDarkPreview() = ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + ButtonWithProgress(onClick = {}) { + Text(text = "Button with progress") + } +} diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/CircularProgressIndicator.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/CircularProgressIndicator.kt index 6cb2cc7243..0050eb97b1 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/CircularProgressIndicator.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/CircularProgressIndicator.kt @@ -18,9 +18,6 @@ package io.element.android.libraries.designsystem.theme.components import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.size -import androidx.compose.foundation.progressSemantics -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.ProgressIndicatorDefaults import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier @@ -79,18 +76,3 @@ private fun ContentToPreview() { ) } } - -@Composable -fun ButtonCircularProgressIndicator( - modifier: Modifier = Modifier, - color: Color = MaterialTheme.colorScheme.onPrimary, - strokeWidth: Dp = 2.dp, -) { - CircularProgressIndicator( - modifier = modifier - .progressSemantics() - .size(18.dp), - color = color, - strokeWidth = strokeWidth, - ) -} diff --git a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.components.button_null_DefaultGroup_ButtonWithProgressDarkPreview_0_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.components.button_null_DefaultGroup_ButtonWithProgressDarkPreview_0_null,NEXUS_5,1.0,en].png new file mode 100644 index 0000000000..c423d547ee --- /dev/null +++ b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.components.button_null_DefaultGroup_ButtonWithProgressDarkPreview_0_null,NEXUS_5,1.0,en].png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:01f7d29ebcba189d7b662c4427faeed01edcc60818e73437274520c2993e225b +size 9827 diff --git a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.components.button_null_DefaultGroup_ButtonWithProgressLightPreview_0_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.components.button_null_DefaultGroup_ButtonWithProgressLightPreview_0_null,NEXUS_5,1.0,en].png new file mode 100644 index 0000000000..9df07ee60c --- /dev/null +++ b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.components.button_null_DefaultGroup_ButtonWithProgressLightPreview_0_null,NEXUS_5,1.0,en].png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6371d2ea1465a5410e9b54f7bba662e3b8b334aacddcdf7b78d304f0ed580ddb +size 10315