From dd31899a5a3231e832cb9b88d1af4fadca3c22c9 Mon Sep 17 00:00:00 2001 From: Jorge Martin Espinosa Date: Fri, 31 Mar 2023 10:51:49 +0200 Subject: [PATCH] Set a fixed number of emojis per row. (#271) --- features/verifysession/impl/build.gradle.kts | 1 - .../impl/VerifySelfSessionView.kt | 51 +++++++++++-------- ...ewDarkPreview_0_null_2,NEXUS_5,1.0,en].png | 4 +- ...ewDarkPreview_0_null_3,NEXUS_5,1.0,en].png | 4 +- ...wLightPreview_0_null_2,NEXUS_5,1.0,en].png | 4 +- ...wLightPreview_0_null_3,NEXUS_5,1.0,en].png | 4 +- 6 files changed, 38 insertions(+), 30 deletions(-) diff --git a/features/verifysession/impl/build.gradle.kts b/features/verifysession/impl/build.gradle.kts index 3aca74afed..e09158ebeb 100644 --- a/features/verifysession/impl/build.gradle.kts +++ b/features/verifysession/impl/build.gradle.kts @@ -43,7 +43,6 @@ dependencies { implementation(projects.libraries.elementresources) implementation(projects.libraries.uiStrings) implementation(projects.libraries.statemachine) - implementation(libs.accompanist.flowlayout) api(projects.features.verifysession.api) testImplementation(libs.test.junit) 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 5a4324581a..9403c8eab1 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,9 +28,8 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.systemBarsPadding -import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.foundation.verticalScroll import androidx.compose.material3.MaterialTheme import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable @@ -43,13 +42,12 @@ import androidx.compose.ui.composed import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.Dp 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.libraries.architecture.Async import io.element.android.libraries.designsystem.ElementTextStyles import io.element.android.libraries.designsystem.components.button.ButtonWithProgress @@ -60,6 +58,7 @@ import io.element.android.libraries.designsystem.theme.components.CircularProgre 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.libraries.matrix.api.verification.VerificationEmoji import io.element.android.features.verifysession.impl.VerifySelfSessionState.VerificationStep as FlowStep import io.element.android.libraries.ui.strings.R as StringR @@ -186,28 +185,38 @@ internal fun ContentWaiting(modifier: Modifier = Modifier) { @Composable internal fun ContentVerifying(verificationFlowStep: FlowStep.Verifying, modifier: Modifier = Modifier) { - FlowRow( - modifier = modifier - .fillMaxWidth() - .verticalScroll(rememberScrollState()), - mainAxisAlignment = MainAxisAlignment.Center, - mainAxisSpacing = 32.dp, - crossAxisSpacing = 40.dp - ) { - for (entry in verificationFlowStep.emojiList) { - Column(horizontalAlignment = Alignment.CenterHorizontally) { - Text(entry.code, fontSize = 34.sp) - Spacer(modifier = Modifier.height(16.dp)) - Text( - entry.name, - style = ElementTextStyles.Regular.bodyMD, - color = MaterialTheme.colorScheme.secondary, - ) + // We want each row to have up to 4 emojis + val rows = verificationFlowStep.emojiList.chunked(4) + Column(modifier = modifier.fillMaxWidth()) { + for ((rowIndex, emojis) in rows.withIndex()) { + // Vertical spacing between rows + if (rowIndex > 0) { + Spacer(modifier = Modifier.height(40.dp)) + } + Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) { + for (emoji in emojis) { + EmojiItemView(emoji = emoji, modifier = Modifier.widthIn(max = 60.dp)) + } } } } } +@Composable +internal fun EmojiItemView(emoji: VerificationEmoji, modifier: Modifier = Modifier) { + Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = modifier) { + Text(emoji.code, fontSize = 34.sp) + Spacer(modifier = Modifier.height(16.dp)) + Text( + emoji.name, + style = ElementTextStyles.Regular.bodyMD, + color = MaterialTheme.colorScheme.secondary, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + } +} + @Composable internal fun BottomMenu(screenState: VerifySelfSessionState, goBack: () -> Unit) { val verificationViewState = screenState.verificationFlowStep diff --git a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewDarkPreview_0_null_2,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewDarkPreview_0_null_2,NEXUS_5,1.0,en].png index e26725efa6..356c37f5f5 100644 --- a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewDarkPreview_0_null_2,NEXUS_5,1.0,en].png +++ b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewDarkPreview_0_null_2,NEXUS_5,1.0,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:07bdafae7df342f2c7e1edc5dc0a37192dbed12d2c5933493aae3a3cac3b6bf9 -size 60781 +oid sha256:d8b4602bcc8c94d97593890a75fd57a254a06284a23a40b01003de52f124bf1a +size 60972 diff --git a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewDarkPreview_0_null_3,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewDarkPreview_0_null_3,NEXUS_5,1.0,en].png index 40939da666..fd2f7d95b6 100644 --- a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewDarkPreview_0_null_3,NEXUS_5,1.0,en].png +++ b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewDarkPreview_0_null_3,NEXUS_5,1.0,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5ac87ed5df471c7b001e39e97e5c00301f0a49ce0427c7c0d4db18484e3f79ba -size 61373 +oid sha256:c5fb6945209cce3babc0da3741844c6aaca60c1219ceee868b0c1ac1ec791d20 +size 61551 diff --git a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewLightPreview_0_null_2,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewLightPreview_0_null_2,NEXUS_5,1.0,en].png index e88c405092..0c2897b1ac 100644 --- a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewLightPreview_0_null_2,NEXUS_5,1.0,en].png +++ b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewLightPreview_0_null_2,NEXUS_5,1.0,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2501fb6f5abfe267171b88c5f522efb73666243828a3e8d7bfaa1a31e54bd278 -size 59284 +oid sha256:da2d7805db951c695d328cf856a7816ce5b02f67b81853d7bc7b88e651b493bb +size 59493 diff --git a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewLightPreview_0_null_3,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewLightPreview_0_null_3,NEXUS_5,1.0,en].png index c6d612a504..1a74267a35 100644 --- a/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewLightPreview_0_null_3,NEXUS_5,1.0,en].png +++ b/tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewLightPreview_0_null_3,NEXUS_5,1.0,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:158ebaf8b90aac46a90ee6a70a0fab90f3bb8bf791aa1a180349d7d64e3d0847 -size 59712 +oid sha256:33540a80556d31ea3df29e6806cd45c1051678dd75d974c795a12f0d6634a6fe +size 59913