diff options
| -rw-r--r-- | packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/ActionTutorialContent.kt | 60 |
1 files changed, 41 insertions, 19 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 c40adfe6baf8..08e0a9d52faa 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 @@ -33,6 +33,7 @@ import androidx.compose.foundation.layout.safeDrawingPadding import androidx.compose.foundation.layout.width import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text +import androidx.compose.material3.windowsizeclass.WindowHeightSizeClass import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue @@ -45,11 +46,13 @@ import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp +import com.android.compose.windowsizeclass.LocalWindowSizeClass import com.android.systemui.inputdevice.tutorial.ui.composable.TutorialActionState.Error import com.android.systemui.inputdevice.tutorial.ui.composable.TutorialActionState.Finished import com.android.systemui.inputdevice.tutorial.ui.composable.TutorialActionState.InProgress import com.android.systemui.inputdevice.tutorial.ui.composable.TutorialActionState.InProgressAfterError import com.android.systemui.inputdevice.tutorial.ui.composable.TutorialActionState.NotStarted +import com.android.systemui.keyboard.shortcut.ui.composable.hasCompactWindowSize sealed interface TutorialActionState { data object NotStarted : TutorialActionState @@ -82,18 +85,25 @@ fun ActionTutorialContent( ) { Column( verticalArrangement = Arrangement.Center, - modifier = - Modifier.fillMaxSize() - .background(config.colors.background) - .safeDrawingPadding() - .padding(start = 48.dp, top = 100.dp, end = 48.dp, bottom = 8.dp), + modifier = Modifier.fillMaxSize().background(config.colors.background).safeDrawingPadding(), ) { + val isCompactWindow = hasCompactWindowSize() when (LocalConfiguration.current.orientation) { Configuration.ORIENTATION_LANDSCAPE -> { - HorizontalDescriptionAndAnimation(actionState, config, Modifier.weight(1f)) + HorizontalDescriptionAndAnimation( + actionState, + config, + isCompactWindow, + Modifier.weight(1f), + ) } else -> { - VerticalDescriptionAndAnimation(actionState, config, Modifier.weight(1f)) + VerticalDescriptionAndAnimation( + actionState, + config, + isCompactWindow, + Modifier.weight(1f), + ) } } val buttonAlpha by animateFloatAsState(if (actionState is Finished) 1f else 0f) @@ -109,11 +119,15 @@ fun ActionTutorialContent( private fun HorizontalDescriptionAndAnimation( actionState: TutorialActionState, config: TutorialScreenConfig, + isCompactWindow: Boolean, modifier: Modifier = Modifier, ) { - Row(modifier = modifier.fillMaxWidth()) { - TutorialDescription(actionState, config, modifier = Modifier.weight(1f)) - Spacer(modifier = Modifier.width(70.dp)) + Row( + modifier = + modifier.fillMaxWidth().padding(start = 48.dp, top = 100.dp, end = 48.dp, bottom = 8.dp) + ) { + TutorialDescription(actionState, config, isCompactWindow, modifier = Modifier.weight(1f)) + Spacer(modifier = Modifier.width(24.dp)) TutorialAnimation(actionState, config, modifier = Modifier.weight(1f)) } } @@ -122,20 +136,25 @@ private fun HorizontalDescriptionAndAnimation( private fun VerticalDescriptionAndAnimation( actionState: TutorialActionState, config: TutorialScreenConfig, + isCompactWindow: Boolean, modifier: Modifier = Modifier, ) { - Column(modifier = modifier.fillMaxWidth().padding(horizontal = 40.dp, vertical = 40.dp)) { - Spacer(modifier = Modifier.weight(0.1f)) + val horizontalPadding = if (isCompactWindow) 24.dp else 96.dp + // Represents the majority of tablets in portrait - we need extra spacer at the top and bottom + val isTablet = LocalWindowSizeClass.current.heightSizeClass == WindowHeightSizeClass.Expanded + Column( + modifier = + modifier.fillMaxWidth().padding(start = 0.dp, top = 100.dp, end = 0.dp, bottom = 8.dp) + ) { + if (isTablet) Spacer(modifier = Modifier.weight(0.3f)) TutorialDescription( actionState, config, - modifier = - Modifier.weight(0.2f) - // extra padding to better align with animation which has embedded padding - .padding(horizontal = 15.dp), + isCompactWindow, + modifier = Modifier.weight(1f).padding(horizontal = horizontalPadding), ) - Spacer(modifier = Modifier.width(70.dp)) - TutorialAnimation(actionState, config, modifier = Modifier.weight(1f)) + TutorialAnimation(actionState, config, modifier = Modifier.weight(1.8f).fillMaxWidth()) + if (isTablet) Spacer(modifier = Modifier.weight(0.3f)) } } @@ -143,6 +162,7 @@ private fun VerticalDescriptionAndAnimation( fun TutorialDescription( actionState: TutorialActionState, config: TutorialScreenConfig, + isCompactWindow: Boolean, modifier: Modifier = Modifier, ) { val focusRequester = remember { FocusRequester() } @@ -159,7 +179,9 @@ fun TutorialDescription( Column(verticalArrangement = Arrangement.Top, modifier = modifier) { Text( text = stringResource(id = titleTextId), - style = MaterialTheme.typography.displayLarge, + style = + if (isCompactWindow) MaterialTheme.typography.headlineLarge + else MaterialTheme.typography.displayMedium, color = config.colors.title, modifier = Modifier.focusRequester(focusRequester).focusable(), ) |