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

Commit a8d1d38f authored by Michal Brzezinski's avatar Michal Brzezinski
Browse files

Adding support for portrait orientation in tutorial screens 

If we're in landscape description and animation are positioned horizontally and otherwise vertically.
Note this change doesn't remove enforcing landscape orientation from AndroidManifest so for now it's still letterboxed in portrait.

Bug: 376020472
Test: screenshots
Flag: com.android.systemui.shared.new_touchpad_gestures_tutorial
Change-Id: I5618f8fd485e54614d739efc228d733afdef71b0
parent ed5ddb0a

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(),

    )

}