From d4694aef67cb7653e6d2dd3b390b4a8a9f58f511 Mon Sep 17 00:00:00 2001 From: Yuri Schimke Date: Mon, 18 Mar 2024 12:11:13 +0000 Subject: [PATCH] Update check your phone screen layout (#2136) --- auth/composables/api/current.api | 3 +- .../screens/CheckYourPhoneScreen.kt | 133 ++++++++---------- .../screens/CheckYourPhoneScreenTest.kt | 7 +- ...urPhoneScreenTest_checkYourPhoneScreen.png | 4 +- ...enTest_checkYourPhoneScreenWithMessage.png | 4 +- .../VerticalPagerScreenScreenshotTest.kt | 1 - roboscreenshots/api/current.api | 3 +- .../rng/WearDeviceScreenshotTest.kt | 4 +- .../screenshots/rng/WearScreenshotTest.kt | 6 +- .../CheckYourPhoneTest_galaxy_watch_5.png | 4 +- .../CheckYourPhoneTest_galaxy_watch_6.png | 4 +- ...ourPhoneTest_galaxy_watch_6_small_font.png | 4 +- .../CheckYourPhoneTest_large_round.png | 4 +- .../CheckYourPhoneTest_pixel_watch.png | 4 +- ...ckYourPhoneTest_pixel_watch_large_font.png | 4 +- .../CheckYourPhoneTest_small_round.png | 4 +- .../CheckYourPhoneTest_ticwatch_pro_5.png | 4 +- 17 files changed, 95 insertions(+), 102 deletions(-) diff --git a/auth/composables/api/current.api b/auth/composables/api/current.api index df50cc41f9..57d953bc66 100644 --- a/auth/composables/api/current.api +++ b/auth/composables/api/current.api @@ -58,8 +58,7 @@ package com.google.android.horologist.auth.composables.screens { } public final class CheckYourPhoneScreenKt { - method @androidx.compose.runtime.Composable public static void CheckYourPhoneScreen(optional androidx.compose.ui.Modifier modifier); - method @androidx.compose.runtime.Composable public static void CheckYourPhoneScreen(optional androidx.compose.ui.Modifier modifier, String message); + method @androidx.compose.runtime.Composable public static void CheckYourPhoneScreen(optional androidx.compose.ui.Modifier modifier, optional String? message); } public final class SelectAccountScreenKt { diff --git a/auth/composables/src/main/java/com/google/android/horologist/auth/composables/screens/CheckYourPhoneScreen.kt b/auth/composables/src/main/java/com/google/android/horologist/auth/composables/screens/CheckYourPhoneScreen.kt index b70193983b..14bfcb6a92 100644 --- a/auth/composables/src/main/java/com/google/android/horologist/auth/composables/screens/CheckYourPhoneScreen.kt +++ b/auth/composables/src/main/java/com/google/android/horologist/auth/composables/screens/CheckYourPhoneScreen.kt @@ -16,6 +16,8 @@ package com.google.android.horologist.auth.composables.screens +import android.content.res.Configuration +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize @@ -39,52 +41,33 @@ import androidx.wear.compose.material.Text import com.google.android.horologist.auth.composables.R import com.google.android.horologist.compose.material.util.DECORATIVE_ELEMENT_CONTENT_DESCRIPTION -private const val TOP_PADDING_SCREEN_PERCENTAGE = 0.2 +private const val TOP_PADDING_SCREEN_PERCENTAGE = 0.1248f +private const val BOTTOM_PADDING_SCREEN_PERCENTAGE = 0.0624f +private const val SIDE_PADDING_SCREEN_PERCENTAGE = 0.052f +private const val TEXT_PADDING_SCREEN_PERCENTAGE = 0.0416f private val indicatorPadding = 8.dp private val iconSize = 48.dp private val progressBarStrokeWidth = 4.dp -/** - * A screen to request the user to check their paired phone to proceed. - * - * - */ @Composable -public fun CheckYourPhoneScreen( - modifier: Modifier = Modifier, -) { +private fun ProgressCircle(modifier: Modifier) { Box( - modifier = modifier.fillMaxSize(), + modifier = modifier + .size(iconSize) + .clip(CircleShape), ) { - Text( - text = stringResource(id = R.string.horologist_check_your_phone_title), - modifier = Modifier - .fillMaxWidth() - .align(Alignment.Center), - textAlign = TextAlign.Center, + CircularProgressIndicator( + modifier = Modifier.size(iconSize - progressBarStrokeWidth + indicatorPadding), + strokeWidth = progressBarStrokeWidth, ) - - Box( - modifier = modifier - .padding(bottom = 20.dp) - .align(Alignment.BottomCenter) - .size(iconSize) + Icon( + imageVector = Icons.Default.SecurityUpdateGood, + contentDescription = DECORATIVE_ELEMENT_CONTENT_DESCRIPTION, + modifier = Modifier + .align(Alignment.Center) + .size(iconSize - indicatorPadding - 8.dp) .clip(CircleShape), - ) { - CircularProgressIndicator( - modifier = modifier - .size(iconSize - progressBarStrokeWidth + indicatorPadding), - strokeWidth = progressBarStrokeWidth, - ) - Icon( - imageVector = Icons.Default.SecurityUpdateGood, - contentDescription = DECORATIVE_ELEMENT_CONTENT_DESCRIPTION, - modifier = Modifier - .align(Alignment.Center) - .size(iconSize - indicatorPadding - 8.dp) - .clip(CircleShape), - ) - } + ) } } @@ -97,53 +80,61 @@ public fun CheckYourPhoneScreen( @Composable public fun CheckYourPhoneScreen( modifier: Modifier = Modifier, - message: String, + message: String? = null, ) { val configuration = LocalConfiguration.current + + val isLarge = configuration.isLargeScreen + val topPadding = (configuration.screenHeightDp * TOP_PADDING_SCREEN_PERCENTAGE).dp + val bottomPadding = (configuration.screenHeightDp * BOTTOM_PADDING_SCREEN_PERCENTAGE).dp + val sidePadding = (configuration.screenHeightDp * SIDE_PADDING_SCREEN_PERCENTAGE).dp + val textPadding = + if (isLarge) (configuration.screenHeightDp * TEXT_PADDING_SCREEN_PERCENTAGE).dp else 0.dp Column( modifier = modifier .fillMaxSize() - .padding(top = topPadding), + .padding( + top = topPadding, + bottom = bottomPadding, + start = sidePadding, + end = sidePadding, + ), ) { - Text( - text = stringResource(id = R.string.horologist_check_your_phone_title), + Column( modifier = Modifier .fillMaxWidth() - .align(Alignment.CenterHorizontally), - textAlign = TextAlign.Center, - ) - - Text( - text = message, - modifier = Modifier - .padding(top = 20.dp) - .fillMaxWidth() - .align(Alignment.CenterHorizontally), - textAlign = TextAlign.Center, - ) - - Box( - modifier = modifier - .padding(vertical = 20.dp) - .fillMaxWidth() - .size(iconSize) - .clip(CircleShape), - contentAlignment = Alignment.Center, + .weight(1f) + .padding(horizontal = textPadding), + verticalArrangement = Arrangement.Center, ) { - CircularProgressIndicator( - modifier = modifier - .size(iconSize - progressBarStrokeWidth + indicatorPadding), - strokeWidth = progressBarStrokeWidth, - ) - Icon( - imageVector = Icons.Default.SecurityUpdateGood, - contentDescription = DECORATIVE_ELEMENT_CONTENT_DESCRIPTION, + Text( + text = stringResource(id = R.string.horologist_check_your_phone_title), modifier = Modifier - .size(iconSize - indicatorPadding - 8.dp) - .clip(CircleShape), + .fillMaxWidth() + .align(Alignment.CenterHorizontally), + textAlign = TextAlign.Center, ) + + if (message != null) { + Text( + text = message, + modifier = Modifier + .padding(top = 20.dp) + .fillMaxWidth() + .align(Alignment.CenterHorizontally), + textAlign = TextAlign.Center, + ) + } } + + ProgressCircle( + Modifier + .align(Alignment.CenterHorizontally), + ) } } + +/** Whether the device is considered large screen for layout adjustment purposes. */ +internal val Configuration.isLargeScreen: Boolean get() = screenHeightDp > 224 diff --git a/auth/composables/src/test/java/com/google/android/horologist/auth/composables/screens/CheckYourPhoneScreenTest.kt b/auth/composables/src/test/java/com/google/android/horologist/auth/composables/screens/CheckYourPhoneScreenTest.kt index 46d8ec696d..1d2e317999 100644 --- a/auth/composables/src/test/java/com/google/android/horologist/auth/composables/screens/CheckYourPhoneScreenTest.kt +++ b/auth/composables/src/test/java/com/google/android/horologist/auth/composables/screens/CheckYourPhoneScreenTest.kt @@ -19,9 +19,14 @@ package com.google.android.horologist.auth.composables.screens import com.google.android.horologist.screenshots.ScreenshotBaseTest +import com.google.android.horologist.screenshots.ScreenshotTestRule import org.junit.Test -class CheckYourPhoneScreenTest : ScreenshotBaseTest() { +class CheckYourPhoneScreenTest : ScreenshotBaseTest( + params = ScreenshotTestRule.screenshotTestRuleParams { + screenTimeText = {} + }, +) { @Test fun checkYourPhoneScreen() { diff --git a/auth/composables/src/test/snapshots/images/com.google.android.horologist.auth.composables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreen.png b/auth/composables/src/test/snapshots/images/com.google.android.horologist.auth.composables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreen.png index 1d7eed263f..50987a0cf7 100644 --- a/auth/composables/src/test/snapshots/images/com.google.android.horologist.auth.composables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreen.png +++ b/auth/composables/src/test/snapshots/images/com.google.android.horologist.auth.composables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreen.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b25d78979ad72b0f53f950a069d360e8234b182584c519e559dc3a65900cf505 -size 21921 +oid sha256:5ab28fa66c899378faeccf3735f5681797923230b47bcadb078a34824e036758 +size 20290 diff --git a/auth/composables/src/test/snapshots/images/com.google.android.horologist.auth.composables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreenWithMessage.png b/auth/composables/src/test/snapshots/images/com.google.android.horologist.auth.composables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreenWithMessage.png index db07709af0..33b5c7ff29 100644 --- a/auth/composables/src/test/snapshots/images/com.google.android.horologist.auth.composables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreenWithMessage.png +++ b/auth/composables/src/test/snapshots/images/com.google.android.horologist.auth.composables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreenWithMessage.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d2693415bebf281d5c07d4e3723bd8dc457d5c810e2d364d89d0f0ec1eb47130 -size 21837 +oid sha256:9f8b5ce83363051eb20f4b413da7ac6668c3b408ba7d0f4da22dab6da1409fa2 +size 21175 diff --git a/compose-layout/src/test/java/com/google/android/horologist/compose/pager/VerticalPagerScreenScreenshotTest.kt b/compose-layout/src/test/java/com/google/android/horologist/compose/pager/VerticalPagerScreenScreenshotTest.kt index 900cf84342..afb4997fa3 100644 --- a/compose-layout/src/test/java/com/google/android/horologist/compose/pager/VerticalPagerScreenScreenshotTest.kt +++ b/compose-layout/src/test/java/com/google/android/horologist/compose/pager/VerticalPagerScreenScreenshotTest.kt @@ -35,7 +35,6 @@ import org.junit.Test class VerticalPagerScreenScreenshotTest : ScreenshotBaseTest( params = ScreenshotTestRule.screenshotTestRuleParams { screenTimeText = {} - record = ScreenshotTestRule.RecordMode.Record }, ) { diff --git a/roboscreenshots/api/current.api b/roboscreenshots/api/current.api index 5c388c4191..856a71459c 100644 --- a/roboscreenshots/api/current.api +++ b/roboscreenshots/api/current.api @@ -127,6 +127,7 @@ package com.google.android.horologist.screenshots.rng { ctor public WearDeviceScreenshotTest(com.google.android.horologist.screenshots.rng.WearDevice device); method @org.robolectric.ParameterizedRobolectricTestRunner.Parameters public static final java.util.List devices(); method public com.google.android.horologist.screenshots.rng.WearDevice getDevice(); + method public final void runTest(kotlin.jvm.functions.Function0 content); property public com.google.android.horologist.screenshots.rng.WearDevice device; property public float tolerance; field public static final com.google.android.horologist.screenshots.rng.WearDeviceScreenshotTest.Companion Companion; @@ -142,7 +143,7 @@ package com.google.android.horologist.screenshots.rng { method @org.junit.Rule public final androidx.compose.ui.test.junit4.ComposeContentTestRule getComposeRule(); method public abstract com.google.android.horologist.screenshots.rng.WearDevice getDevice(); method public float getTolerance(); - method public void runTest(kotlin.jvm.functions.Function0 content); + method public final void runTest(optional String? suffix, kotlin.jvm.functions.Function0 content); property @org.junit.Rule public final androidx.compose.ui.test.junit4.ComposeContentTestRule composeRule; property public abstract com.google.android.horologist.screenshots.rng.WearDevice device; property public float tolerance; diff --git a/roboscreenshots/src/main/java/com/google/android/horologist/screenshots/rng/WearDeviceScreenshotTest.kt b/roboscreenshots/src/main/java/com/google/android/horologist/screenshots/rng/WearDeviceScreenshotTest.kt index 6b9157bc42..12b65a7920 100644 --- a/roboscreenshots/src/main/java/com/google/android/horologist/screenshots/rng/WearDeviceScreenshotTest.kt +++ b/roboscreenshots/src/main/java/com/google/android/horologist/screenshots/rng/WearDeviceScreenshotTest.kt @@ -24,8 +24,8 @@ import org.robolectric.ParameterizedRobolectricTestRunner public abstract class WearDeviceScreenshotTest(override val device: WearDevice) : WearScreenshotTest() { public override val tolerance: Float = 0.02f - override fun runTest(content: @Composable () -> Unit) { - super.runTest(content) + public fun runTest(content: @Composable () -> Unit) { + runTest(suffix = null, content) } public companion object { diff --git a/roboscreenshots/src/main/java/com/google/android/horologist/screenshots/rng/WearScreenshotTest.kt b/roboscreenshots/src/main/java/com/google/android/horologist/screenshots/rng/WearScreenshotTest.kt index 45d5eb6ba9..d9fe22e107 100644 --- a/roboscreenshots/src/main/java/com/google/android/horologist/screenshots/rng/WearScreenshotTest.kt +++ b/roboscreenshots/src/main/java/com/google/android/horologist/screenshots/rng/WearScreenshotTest.kt @@ -50,7 +50,7 @@ public abstract class WearScreenshotTest { // Allow for individual tolerances to be set on each test, should be between 0.0 and 1.0 public open val tolerance: Float = 0.0f - public open fun runTest(content: @Composable () -> Unit) { + public fun runTest(suffix: String? = null, content: @Composable () -> Unit) { RuntimeEnvironment.setQualifiers("+w${device.dp}dp-h${device.dp}dp") RuntimeEnvironment.setFontScale(device.fontScale) @@ -60,9 +60,7 @@ public abstract class WearScreenshotTest { } } - val suffix = "" - - captureScreenshot(suffix) + captureScreenshot(suffix.orEmpty()) } public fun captureScreenshot(suffix: String) { diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_5.png b/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_5.png index 1aa55c59b2..c9b8cb8678 100644 --- a/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_5.png +++ b/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_5.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:323c76a80ddc67dcacb1bb272f9975eccb934ce3a4f1c9bc144722d5d7b488f9 -size 11595 +oid sha256:844f0a782ad9b49534d431aabcf092f3834877fe547f7f6af3748c68b8c6187d +size 11591 diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_6.png b/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_6.png index 9b7e9f9d7b..5b0a852f00 100644 --- a/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_6.png +++ b/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_6.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:892fefc0a91567201302ce1c9bc59aff49b727fb20c86ea8133740ab03a06ef0 -size 12650 +oid sha256:b007b0e8a68ea290936ba1512a8aa2ac298019176db88e1165117c49d456cf37 +size 12653 diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_6_small_font.png b/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_6_small_font.png index 7894e56990..627a3828ea 100644 --- a/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_6_small_font.png +++ b/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_6_small_font.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:de70c601479790fa165e023e64b8fcb25c2b86913fc01a75d715cdb4269b5ba8 -size 12477 +oid sha256:b8a5f6174d431452d4742a5bfd83a0b2f369e498eec903e3d78751c4823e317b +size 12480 diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_large_round.png b/sample/src/test/screenshots/CheckYourPhoneTest_large_round.png index 07b16a0626..5025c0a078 100644 --- a/sample/src/test/screenshots/CheckYourPhoneTest_large_round.png +++ b/sample/src/test/screenshots/CheckYourPhoneTest_large_round.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0a7946c516ba85afd15544201132de49e19dd68c8d98c5ea35c6a5d22f33ec2e -size 12682 +oid sha256:fdfe80f0fbd6529d6ad25c38c9eef09115a80a7a35ab974d36528147cd04eed3 +size 12687 diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch.png b/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch.png index 013d2e62cb..3623266c04 100644 --- a/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch.png +++ b/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:54d3fd295cc70ea42b9876f72f4fb591d4c4956001db078e3050a45f55c172da -size 11447 +oid sha256:338cab850ced91cd2931d57c0ea64286016c6e77890740d1960d84573071a23f +size 11449 diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch_large_font.png b/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch_large_font.png index 1ba99ab43d..b4ce937e3d 100644 --- a/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch_large_font.png +++ b/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch_large_font.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a11f1c3b86626b07c4343e2f4c7894446f1c3d809bac08a9d704cb0e878f89c5 -size 12305 +oid sha256:225c5f107b459eca633d17e1ee90c1406ef8eeafa8b9d280232b124b87e5dc5f +size 12313 diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_small_round.png b/sample/src/test/screenshots/CheckYourPhoneTest_small_round.png index 013d2e62cb..3623266c04 100644 --- a/sample/src/test/screenshots/CheckYourPhoneTest_small_round.png +++ b/sample/src/test/screenshots/CheckYourPhoneTest_small_round.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:54d3fd295cc70ea42b9876f72f4fb591d4c4956001db078e3050a45f55c172da -size 11447 +oid sha256:338cab850ced91cd2931d57c0ea64286016c6e77890740d1960d84573071a23f +size 11449 diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_ticwatch_pro_5.png b/sample/src/test/screenshots/CheckYourPhoneTest_ticwatch_pro_5.png index 7f77872607..614184279a 100644 --- a/sample/src/test/screenshots/CheckYourPhoneTest_ticwatch_pro_5.png +++ b/sample/src/test/screenshots/CheckYourPhoneTest_ticwatch_pro_5.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3e28fcbfc171b4a44a145aa496680a239cb2b0389db0c00080e2f43cab3c4d53 -size 12850 +oid sha256:e7c85952504c8f4bfbf9af5f48acf93d9a7086b361f983842dc243795b926b97 +size 12864