Update check your phone screen layout (#2136)

google · Mar 18, 2024 · d4694ae · d4694ae
1 parent b9e9860
commit d4694ae
Show file tree

Hide file tree

Showing 17 changed files with 95 additions and 102 deletions.
diff --git 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/.../main/java/com/google/android/horologist/auth/composables/screens/CheckYourPhoneScreen.kt b/.../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.
- *
- * <img src="https://media.githubusercontent.com/media/google/horologist/main/docs/auth-composables/check_your_phone_screen.png"  height="120" width="120"/>
- */
 @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/...t/java/com/google/android/horologist/auth/composables/screens/CheckYourPhoneScreenTest.kt b/...t/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/...gist.auth.composables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreen.png b/...gist.auth.composables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreen.png
diff --git a/...omposables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreenWithMessage.png b/...omposables.screens_CheckYourPhoneScreenTest_checkYourPhoneScreenWithMessage.png
diff --git a/...est/java/com/google/android/horologist/compose/pager/VerticalPagerScreenScreenshotTest.kt b/...est/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
@@ -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<com.google.android.horologist.screenshots.rng.WearDevice> devices();
     method public com.google.android.horologist.screenshots.rng.WearDevice getDevice();
+    method public final void runTest(kotlin.jvm.functions.Function0<kotlin.Unit> 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<kotlin.Unit> content);
+    method public final void runTest(optional String? suffix, kotlin.jvm.functions.Function0<kotlin.Unit> 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/...s/src/main/java/com/google/android/horologist/screenshots/rng/WearDeviceScreenshotTest.kt b/...s/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/...enshots/src/main/java/com/google/android/horologist/screenshots/rng/WearScreenshotTest.kt b/...enshots/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
diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_6.png b/sample/src/test/screenshots/CheckYourPhoneTest_galaxy_watch_6.png
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
diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_large_round.png b/sample/src/test/screenshots/CheckYourPhoneTest_large_round.png
diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch.png b/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch.png
diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch_large_font.png b/sample/src/test/screenshots/CheckYourPhoneTest_pixel_watch_large_font.png
diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_small_round.png b/sample/src/test/screenshots/CheckYourPhoneTest_small_round.png
diff --git a/sample/src/test/screenshots/CheckYourPhoneTest_ticwatch_pro_5.png b/sample/src/test/screenshots/CheckYourPhoneTest_ticwatch_pro_5.png