Merge changes I5618f8fd,Ie5417409 into main

* changes:
  Adding support for portrait orientation in tutorial screens
  Adding support for portrait orientation in tutorial selection screen

3 files changed, 142 insertions, 54 deletions

diff --git a/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/ActionTutorialContent.kt b/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/ActionTutorialContent.kt
index 3d2baee9b936..edc7c1d6361f 100644
--- a/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/ActionTutorialContent.kt
+++ b/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/ActionTutorialContent.kt
@@ -16,8 +16,8 @@
 
 package com.android.systemui.inputdevice.tutorial.ui.composable
 
+import android.content.res.Configuration
 import androidx.annotation.RawRes
-import androidx.annotation.StringRes
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.foundation.background
@@ -36,6 +36,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.android.systemui.inputdevice.tutorial.ui.composable.TutorialActionState.Finished
@@ -66,23 +67,13 @@ fun ActionTutorialContent(
                 .safeDrawingPadding()
                 .padding(start = 48.dp, top = 100.dp, end = 48.dp, bottom = 8.dp),
     ) {
-        Row(modifier = Modifier.fillMaxWidth().weight(1f)) {
-            TutorialDescription(
-                titleTextId =
-                    if (actionState is Finished) config.strings.titleSuccessResId
-                    else config.strings.titleResId,
-                titleColor = config.colors.title,
-                bodyTextId =
-                    if (actionState is Finished) config.strings.bodySuccessResId
-                    else config.strings.bodyResId,
-                modifier = Modifier.weight(1f),
-            )
-            Spacer(modifier = Modifier.width(76.dp))
-            TutorialAnimation(
-                actionState,
-                config,
-                modifier = Modifier.weight(1f).padding(top = 8.dp),
-            )
+        when (LocalConfiguration.current.orientation) {
+            Configuration.ORIENTATION_LANDSCAPE -> {
+                HorizontalDescriptionAndAnimation(actionState, config, Modifier.weight(1f))
+            }
+            else -> {
+                VerticalDescriptionAndAnimation(actionState, config, Modifier.weight(1f))
+            }
         }
         AnimatedVisibility(visible = actionState is Finished, enter = fadeIn()) {
             DoneButton(onDoneButtonClicked = onDoneButtonClicked)
@@ -91,17 +82,56 @@ fun ActionTutorialContent(
 }
 
 @Composable
+private fun HorizontalDescriptionAndAnimation(
+    actionState: TutorialActionState,
+    config: TutorialScreenConfig,
+    modifier: Modifier = Modifier,
+) {
+    Row(modifier = modifier.fillMaxWidth()) {
+        TutorialDescription(actionState, config, modifier = Modifier.weight(1f))
+        Spacer(modifier = Modifier.width(70.dp))
+        TutorialAnimation(actionState, config, modifier = Modifier.weight(1f))
+    }
+}
+
+@Composable
+private fun VerticalDescriptionAndAnimation(
+    actionState: TutorialActionState,
+    config: TutorialScreenConfig,
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier = modifier.fillMaxWidth().padding(horizontal = 40.dp, vertical = 40.dp)) {
+        Spacer(modifier = Modifier.weight(0.1f))
+        TutorialDescription(
+            actionState,
+            config,
+            modifier =
+                Modifier.weight(0.2f)
+                    // extra padding to better align with animation which has embedded padding
+                    .padding(horizontal = 15.dp),
+        )
+        Spacer(modifier = Modifier.width(70.dp))
+        TutorialAnimation(actionState, config, modifier = Modifier.weight(1f))
+    }
+}
+
+@Composable
 fun TutorialDescription(
-    @StringRes titleTextId: Int,
-    titleColor: Color,
-    @StringRes bodyTextId: Int,
+    actionState: TutorialActionState,
+    config: TutorialScreenConfig,
     modifier: Modifier = Modifier,
 ) {
+    val (titleTextId, bodyTextId) =
+        if (actionState is Finished) {
+            config.strings.titleSuccessResId to config.strings.bodySuccessResId
+        } else {
+            config.strings.titleResId to config.strings.bodyResId
+        }
     Column(verticalArrangement = Arrangement.Top, modifier = modifier) {
         Text(
             text = stringResource(id = titleTextId),
             style = MaterialTheme.typography.displayLarge,
-            color = titleColor,
+            color = config.colors.title,
         )
         Spacer(modifier = Modifier.height(16.dp))
         Text(
diff --git a/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/TutorialAnimation.kt b/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/TutorialAnimation.kt
index 720c01fc7056..2be619bac998 100644
--- a/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/TutorialAnimation.kt
+++ b/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/TutorialAnimation.kt
@@ -24,11 +24,13 @@ import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.node.Ref
 import androidx.compose.ui.util.lerp
@@ -49,7 +51,7 @@ fun TutorialAnimation(
     config: TutorialScreenConfig,
     modifier: Modifier = Modifier,
 ) {
-    Box(modifier = modifier.fillMaxWidth()) {
+    Box(contentAlignment = Alignment.Center, modifier = modifier.fillMaxWidth()) {
         AnimatedContent(
             targetState = actionState::class,
             transitionSpec = {
@@ -97,6 +99,7 @@ private fun EducationAnimation(
         composition = composition,
         progress = { progress },
         dynamicProperties = animationProperties,
+        modifier = Modifier.fillMaxSize(),
     )
 }
 
@@ -112,6 +115,7 @@ private fun SuccessAnimation(
         composition = composition,
         progress = { progress },
         dynamicProperties = animationProperties,
+        modifier = Modifier.fillMaxSize(),
     )
 }
 
@@ -142,6 +146,7 @@ private fun InProgressAnimation(
         composition = composition,
         progress = { lerp(start = startProgress, stop = endProgress, fraction = progress) },
         dynamicProperties = animationProperties,
+        modifier = Modifier.fillMaxSize(),
     )
 }
 
diff --git a/packages/SystemUI/src/com/android/systemui/touchpad/tutorial/ui/composable/TutorialSelectionScreen.kt b/packages/SystemUI/src/com/android/systemui/touchpad/tutorial/ui/composable/TutorialSelectionScreen.kt
index c2093114c98f..d371acf86a28 100644
--- a/packages/SystemUI/src/com/android/systemui/touchpad/tutorial/ui/composable/TutorialSelectionScreen.kt
+++ b/packages/SystemUI/src/com/android/systemui/touchpad/tutorial/ui/composable/TutorialSelectionScreen.kt
@@ -16,15 +16,16 @@
 
 package com.android.systemui.touchpad.tutorial.ui.composable
 
+import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
@@ -40,6 +41,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.input.pointer.pointerInteropFilter
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
@@ -60,6 +62,7 @@ fun TutorialSelectionScreen(
         modifier =
             Modifier.background(color = MaterialTheme.colorScheme.surfaceContainer)
                 .fillMaxSize()
+                .safeDrawingPadding()
                 .pointerInteropFilter(
                     onTouchEvent = { event ->
                         // Because of window flag we're intercepting 3 and 4-finger swipes.
@@ -69,12 +72,26 @@ fun TutorialSelectionScreen(
                     }
                 ),
     ) {
-        TutorialSelectionButtons(
-            onBackTutorialClicked = onBackTutorialClicked,
-            onHomeTutorialClicked = onHomeTutorialClicked,
-            onRecentAppsTutorialClicked = onRecentAppsTutorialClicked,
-            modifier = Modifier.padding(60.dp),
-        )
+        val configuration = LocalConfiguration.current
+        when (configuration.orientation) {
+            Configuration.ORIENTATION_LANDSCAPE -> {
+                HorizontalSelectionButtons(
+                    onBackTutorialClicked = onBackTutorialClicked,
+                    onHomeTutorialClicked = onHomeTutorialClicked,
+                    onRecentAppsTutorialClicked = onRecentAppsTutorialClicked,
+                    modifier = Modifier.weight(1f).padding(60.dp),
+                )
+            }
+            else -> {
+                VerticalSelectionButtons(
+                    onBackTutorialClicked = onBackTutorialClicked,
+                    onHomeTutorialClicked = onHomeTutorialClicked,
+                    onRecentAppsTutorialClicked = onRecentAppsTutorialClicked,
+                    modifier = Modifier.weight(1f).padding(60.dp),
+                )
+            }
+        }
+        // because other composables have weight 1, Done button will be positioned first
         DoneButton(
             onDoneButtonClicked = onDoneButtonClicked,
             modifier = Modifier.padding(horizontal = 60.dp),
@@ -83,7 +100,7 @@ fun TutorialSelectionScreen(
 }
 
 @Composable
-private fun TutorialSelectionButtons(
+private fun HorizontalSelectionButtons(
     onBackTutorialClicked: () -> Unit,
     onHomeTutorialClicked: () -> Unit,
     onRecentAppsTutorialClicked: () -> Unit,
@@ -94,34 +111,70 @@ private fun TutorialSelectionButtons(
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier,
     ) {
-        TutorialButton(
-            text = stringResource(R.string.touchpad_tutorial_home_gesture_button),
-            icon = ImageVector.vectorResource(id = R.drawable.touchpad_tutorial_home_icon),
-            iconColor = MaterialTheme.colorScheme.onPrimary,
-            onClick = onHomeTutorialClicked,
-            backgroundColor = MaterialTheme.colorScheme.primary,
-            modifier = Modifier.weight(1f),
+        ThreeTutorialButtons(
+            onBackTutorialClicked,
+            onHomeTutorialClicked,
+            onRecentAppsTutorialClicked,
+            modifier = Modifier.weight(1f).fillMaxSize(),
         )
-        TutorialButton(
-            text = stringResource(R.string.touchpad_tutorial_back_gesture_button),
-            icon = Icons.AutoMirrored.Outlined.ArrowBack,
-            iconColor = MaterialTheme.colorScheme.onTertiary,
-            onClick = onBackTutorialClicked,
-            backgroundColor = MaterialTheme.colorScheme.tertiary,
-            modifier = Modifier.weight(1f),
-        )
-        TutorialButton(
-            text = stringResource(R.string.touchpad_tutorial_recent_apps_gesture_button),
-            icon = ImageVector.vectorResource(id = R.drawable.touchpad_tutorial_recents_icon),
-            iconColor = MaterialTheme.colorScheme.onSecondary,
-            onClick = onRecentAppsTutorialClicked,
-            backgroundColor = MaterialTheme.colorScheme.secondary,
-            modifier = Modifier.weight(1f),
+    }
+}
+
+@Composable
+private fun VerticalSelectionButtons(
+    onBackTutorialClicked: () -> Unit,
+    onHomeTutorialClicked: () -> Unit,
+    onRecentAppsTutorialClicked: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(20.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = modifier,
+    ) {
+        ThreeTutorialButtons(
+            onBackTutorialClicked,
+            onHomeTutorialClicked,
+            onRecentAppsTutorialClicked,
+            modifier = Modifier.weight(1f).fillMaxSize(),
         )
     }
 }
 
 @Composable
+private fun ThreeTutorialButtons(
+    onBackTutorialClicked: () -> Unit,
+    onHomeTutorialClicked: () -> Unit,
+    onRecentAppsTutorialClicked: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    TutorialButton(
+        text = stringResource(R.string.touchpad_tutorial_home_gesture_button),
+        icon = ImageVector.vectorResource(id = R.drawable.touchpad_tutorial_home_icon),
+        iconColor = MaterialTheme.colorScheme.onPrimary,
+        onClick = onHomeTutorialClicked,
+        backgroundColor = MaterialTheme.colorScheme.primary,
+        modifier = modifier,
+    )
+    TutorialButton(
+        text = stringResource(R.string.touchpad_tutorial_back_gesture_button),
+        icon = Icons.AutoMirrored.Outlined.ArrowBack,
+        iconColor = MaterialTheme.colorScheme.onTertiary,
+        onClick = onBackTutorialClicked,
+        backgroundColor = MaterialTheme.colorScheme.tertiary,
+        modifier = modifier,
+    )
+    TutorialButton(
+        text = stringResource(R.string.touchpad_tutorial_recent_apps_gesture_button),
+        icon = ImageVector.vectorResource(id = R.drawable.touchpad_tutorial_recents_icon),
+        iconColor = MaterialTheme.colorScheme.onSecondary,
+        onClick = onRecentAppsTutorialClicked,
+        backgroundColor = MaterialTheme.colorScheme.secondary,
+        modifier = modifier,
+    )
+}
+
+@Composable
 private fun TutorialButton(
     text: String,
     icon: ImageVector,
@@ -134,7 +187,7 @@ private fun TutorialButton(
         onClick = onClick,
         shape = RoundedCornerShape(16.dp),
         colors = ButtonDefaults.buttonColors(containerColor = backgroundColor),
-        modifier = modifier.aspectRatio(0.66f),
+        modifier = modifier,
     ) {
         Column(
             verticalArrangement = Arrangement.Center,