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

Commit 9da9ecc6 authored by shirleyqian's avatar shirleyqian
Browse files

Edu tooltip polish. 

1. Add close button.
2. Add spacing between title and content.
3. Add a corner radius for the arrow in the bottom.

Bug: 429199668
Test: local
Flag: com.android.systemui.enable_underlay
Change-Id: I629de231948cdab9c933e7bf083783707b45d1b3
parent d37a9688

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/AmbientCueContainer.kt

+1 −0
Original line number Original line Diff line number Diff line
@@ -268,6 +268,7 @@ private fun NavBarAmbientCue( 
            }

            }

        },

        },

        onCloseClick = { viewModel.hide() },

        onCloseClick = { viewModel.hide() },

        onCloseEducation = { viewModel.disableFirstTimeHint() },

    )

    )

}

}

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/FirstTimeEducation.kt

+20 −2
Original line number Original line Diff line number Diff line
@@ -20,6 +20,9 @@ import androidx.compose.foundation.layout.Arrangement 
import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.layout.widthIn

import androidx.compose.material3.Icon

import androidx.compose.material3.IconButton

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Text

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.runtime.Composable
@@ -32,7 +35,11 @@ import com.android.systemui.ambientcue.ui.compose.modifier.eduBalloon 
import com.android.systemui.res.R

import com.android.systemui.res.R





@Composable

@Composable

fun FirstTimeEducation(horizontalAlignment: Alignment.Horizontal, modifier: Modifier = Modifier) {

fun FirstTimeEducation(

    horizontalAlignment: Alignment.Horizontal,

    modifier: Modifier = Modifier,

    onCloseClick: () -> Unit,

) {

    val backgroundColor = MaterialTheme.colorScheme.surfaceBright

    val backgroundColor = MaterialTheme.colorScheme.surfaceBright

    Row(

    Row(

        verticalAlignment = Alignment.Top,

        verticalAlignment = Alignment.Top,
@@ -45,7 +52,10 @@ fun FirstTimeEducation(horizontalAlignment: Alignment.Horizontal, modifier: Modi 
                stringResource(R.string.ambientcue_first_time_edu_icon_description),

                stringResource(R.string.ambientcue_first_time_edu_icon_description),

            modifier = Modifier.size(56.dp),

            modifier = Modifier.size(56.dp),

        )

        )

        Column {

        Column(

            verticalArrangement = Arrangement.spacedBy(8.dp),

            modifier = Modifier.widthIn(max = 204.dp),

        ) {

            Text(

            Text(

                text = stringResource(R.string.ambientcue_first_time_edu_title),

                text = stringResource(R.string.ambientcue_first_time_edu_title),

                style = MaterialTheme.typography.titleMedium,

                style = MaterialTheme.typography.titleMedium,
@@ -57,5 +67,13 @@ fun FirstTimeEducation(horizontalAlignment: Alignment.Horizontal, modifier: Modi 
                color = MaterialTheme.colorScheme.onSurfaceVariant,

                color = MaterialTheme.colorScheme.onSurfaceVariant,

            )

            )

        }

        }

        IconButton(onClick = onCloseClick, modifier = modifier.size(24.dp)) {

            Icon(

                painter = painterResource(R.drawable.ic_close_white),

                contentDescription =

                    stringResource(id = R.string.underlay_close_button_content_description),

                tint = MaterialTheme.colorScheme.primary,

            )

        }

    }

    }

}
 
}

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/NavBarPill.kt

+2 −1
Original line number Original line Diff line number Diff line
@@ -93,6 +93,7 @@ fun NavBarPill( 
    showEducation: Boolean = false,

    showEducation: Boolean = false,

    onClick: () -> Unit = {},

    onClick: () -> Unit = {},

    onCloseClick: () -> Unit = {},

    onCloseClick: () -> Unit = {},

    onCloseEducation: () -> Unit = {},

) {

) {

    val maxPillWidth = 248.dp

    val maxPillWidth = 248.dp

    val backgroundColor = if (isSystemInDarkTheme()) Color.Black else Color.White

    val backgroundColor = if (isSystemInDarkTheme()) Color.Black else Color.White
@@ -187,7 +188,7 @@ fun NavBarPill( 
            },

            },

    ) {

    ) {

        if (visible && !expanded && showEducation) {

        if (visible && !expanded && showEducation) {

            FirstTimeEducation(Alignment.CenterHorizontally)

            FirstTimeEducation(Alignment.CenterHorizontally, onCloseClick = onCloseEducation)

        }

        }

        Row(

        Row(

            horizontalArrangement = Arrangement.spacedBy(6.dp),

            horizontalArrangement = Arrangement.spacedBy(6.dp),

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/modifier/EduBalloon.kt

+19 −2
Original line number Original line Diff line number Diff line
@@ -29,6 +29,7 @@ import androidx.compose.ui.graphics.Color 
import androidx.compose.ui.graphics.Path

import androidx.compose.ui.graphics.Path

import androidx.compose.ui.graphics.drawscope.translate

import androidx.compose.ui.graphics.drawscope.translate

import androidx.compose.ui.unit.dp

import androidx.compose.ui.unit.dp

import kotlin.math.sqrt





@Composable

@Composable

fun Modifier.eduBalloon(

fun Modifier.eduBalloon(
@@ -41,6 +42,7 @@ fun Modifier.eduBalloon( 
            val oneDp = with(density) { 1.dp.toPx() }

            val oneDp = with(density) { 1.dp.toPx() }

            val translationX = with(density) { 6.dp.toPx() }

            val translationX = with(density) { 6.dp.toPx() }

            val translationY = with(density) { 10.dp.toPx() }

            val translationY = with(density) { 10.dp.toPx() }

            val cornerRadius = with(density) { 2.dp.toPx() }





            val center =

            val center =

                when (horizontalAlignment) {

                when (horizontalAlignment) {
@@ -54,7 +56,22 @@ fun Modifier.eduBalloon( 
                    path =

                    path =

                        Path().apply {

                        Path().apply {

                            moveTo(-translationX, 0f)

                            moveTo(-translationX, 0f)

                            lineTo(0f, translationY)

                            // Calculate the tangent point coordinates.

                            val arrowLegLength =

                                sqrt(translationX * translationX + translationY * translationY)

                            val tangentPointX = translationY * cornerRadius / arrowLegLength

                            val tangentPointY =

                                translationY - translationX * tangentPointX / translationY

                            lineTo(-tangentPointX, tangentPointY)

                            // Draw a curve connecting the two tangent points via a control point,

                            // forming the rounded tip of the arrow.

                            quadraticTo(

                                0f,

                                translationY + cornerRadius -

                                    (arrowLegLength - cornerRadius) / translationX,

                                tangentPointX,

                                tangentPointY,

                            )

                            lineTo(translationX, 0f)

                            lineTo(translationX, 0f)

                        },

                        },

                    color = backgroundColor,

                    color = backgroundColor,
@@ -62,7 +79,7 @@ fun Modifier.eduBalloon( 
            }

            }

        }

        }

        .clip(RoundedCornerShape(28.dp))

        .clip(RoundedCornerShape(28.dp))

        .widthIn(max = 296.dp)

        .widthIn(max = 348.dp)

        .background(backgroundColor)

        .background(backgroundColor)

        .padding(16.dp)

        .padding(16.dp)

}
 
}

packages/SystemUI/src/com/android/systemui/ambientcue/ui/viewmodel/AmbientCueViewModel.kt

+2 −2
Original line number Original line Diff line number Diff line
@@ -27,8 +27,8 @@ import androidx.compose.ui.graphics.toComposeRect 
import androidx.core.content.edit

import androidx.core.content.edit

import com.android.app.tracing.coroutines.coroutineScopeTraced

import com.android.app.tracing.coroutines.coroutineScopeTraced

import com.android.systemui.Dumpable

import com.android.systemui.Dumpable

import com.android.systemui.ambientcue.shared.logger.AmbientCueLogger

import com.android.systemui.ambientcue.domain.interactor.AmbientCueInteractor

import com.android.systemui.ambientcue.domain.interactor.AmbientCueInteractor

import com.android.systemui.ambientcue.shared.logger.AmbientCueLogger

import com.android.systemui.dagger.qualifiers.Application

import com.android.systemui.dagger.qualifiers.Application

import com.android.systemui.domain.interactor.SharedPreferencesInteractor

import com.android.systemui.domain.interactor.SharedPreferencesInteractor

import com.android.systemui.dump.DumpManager

import com.android.systemui.dump.DumpManager
@@ -283,7 +283,7 @@ constructor( 
        }

        }

    }

    }





    private fun disableFirstTimeHint() {

    fun disableFirstTimeHint() {

        if (showFirstTimeEducation) {

        if (showFirstTimeEducation) {

            sharedPreferences.value?.edit {

            sharedPreferences.value?.edit {

                Log.i(TAG, "suppressing first time tooltip")

                Log.i(TAG, "suppressing first time tooltip")