Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 5d7d23a9 authored by Michał Brzeziński's avatar Michał Brzeziński Committed by Android (Google) Code Review
Browse files

Merge changes I5618f8fd,Ie5417409 into main 

* changes:
  Adding support for portrait orientation in tutorial screens
  Adding support for portrait orientation in tutorial selection screen
parents 94a0c87d a8d1d38f

packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/ActionTutorialContent.kt

+52 −22
Original line number Diff line number Diff line
@@ -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)
@@ -90,18 +81,57 @@ 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(

packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/TutorialAnimation.kt

+6 −1
Original line number Diff line number Diff line
@@ -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(),

    )

}

packages/SystemUI/src/com/android/systemui/touchpad/tutorial/ui/composable/TutorialSelectionScreen.kt

+84 −31
Original line number Diff line number Diff line
@@ -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(

        val configuration = LocalConfiguration.current

        when (configuration.orientation) {

            Configuration.ORIENTATION_LANDSCAPE -> {

                HorizontalSelectionButtons(

                    onBackTutorialClicked = onBackTutorialClicked,

                    onHomeTutorialClicked = onHomeTutorialClicked,

                    onRecentAppsTutorialClicked = onRecentAppsTutorialClicked,

            modifier = Modifier.padding(60.dp),

                    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,
@@ -93,6 +110,43 @@ private fun TutorialSelectionButtons( 
        horizontalArrangement = Arrangement.spacedBy(20.dp),

        verticalAlignment = Alignment.CenterVertically,

        modifier = modifier,

    ) {

        ThreeTutorialButtons(

            onBackTutorialClicked,

            onHomeTutorialClicked,

            onRecentAppsTutorialClicked,

            modifier = Modifier.weight(1f).fillMaxSize(),

        )

    }

}



@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),
@@ -100,7 +154,7 @@ private fun TutorialSelectionButtons( 
        iconColor = MaterialTheme.colorScheme.onPrimary,

        onClick = onHomeTutorialClicked,

        backgroundColor = MaterialTheme.colorScheme.primary,

            modifier = Modifier.weight(1f),

        modifier = modifier,

    )

    TutorialButton(

        text = stringResource(R.string.touchpad_tutorial_back_gesture_button),
@@ -108,7 +162,7 @@ private fun TutorialSelectionButtons( 
        iconColor = MaterialTheme.colorScheme.onTertiary,

        onClick = onBackTutorialClicked,

        backgroundColor = MaterialTheme.colorScheme.tertiary,

            modifier = Modifier.weight(1f),

        modifier = modifier,

    )

    TutorialButton(

        text = stringResource(R.string.touchpad_tutorial_recent_apps_gesture_button),
@@ -116,10 +170,9 @@ private fun TutorialSelectionButtons( 
        iconColor = MaterialTheme.colorScheme.onSecondary,

        onClick = onRecentAppsTutorialClicked,

        backgroundColor = MaterialTheme.colorScheme.secondary,

            modifier = Modifier.weight(1f),

        modifier = modifier,

    )

}

}



@Composable

private fun TutorialButton(
@@ -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,