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

Commit 6fe60e56 authored by Lucas Dupin's avatar Lucas Dupin
Browse files

UX Polish 

Polished outline animation and colors, adjuested some paddings, and most
notably, removed the attribution from NavBarPill

Bug: 422231781
Test: atest NavBarPillScreenshotTest
Test: atest ShortPillScreenshotTest
Flag: com.android.systemui.enable_underlay
Change-Id: I55328192e8212c8b8e612070d0c05cb237bf6bea
parent 3c1ffcc1

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

+1 −1
Original line number Diff line number Diff line
@@ -232,5 +232,5 @@ private const val NAV_BAR_PILL_LARGE_WIDTH_DP = NAV_BAR_LARGE_WIDTH_DP + 4 


private const val NAV_BAR_HEIGHT_DP = 24 // R.dimen.taskbar_stashed_size from Launcher

private const val SHORT_PILL_ACTIONS_VERTICAL_PADDING = 38

private const val NAV_BAR_ACTIONS_PADDING = NAV_BAR_HEIGHT_DP + 22

private const val NAV_BAR_ACTIONS_PADDING = NAV_BAR_HEIGHT_DP + 12

private const val ACTIONS_HORIZONTAL_PADDING = 32

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

+1 −1
Original line number Diff line number Diff line
@@ -68,7 +68,7 @@ fun Chip(action: ActionViewModel, modifier: Modifier = Modifier) { 
                        if (action.actionType == ActionType.MR) {

                            Modifier

                        } else {

                            Modifier.border(0.75.dp, MaterialTheme.colorScheme.outline, CircleShape)

                            Modifier.border(1.dp, MaterialTheme.colorScheme.outline, CircleShape)

                        }

                    )

                    .clip(CircleShape),

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

+6 −18
Original line number Diff line number Diff line
@@ -48,7 +48,6 @@ import androidx.compose.runtime.setValue 
import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.draw.BlurredEdgeTreatment

import androidx.compose.ui.draw.alpha

import androidx.compose.ui.draw.blur

import androidx.compose.ui.draw.clip

import androidx.compose.ui.graphics.Color
@@ -82,7 +81,6 @@ fun NavBarPill( 
) {

    val configuration = LocalConfiguration.current

    val maxPillWidth = (configuration.screenWidthDp * 0.65f).dp

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

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



    val density = LocalDensity.current
@@ -121,7 +119,7 @@ fun NavBarPill( 
            }

    ) {

        Row(

            horizontalArrangement = Arrangement.spacedBy(8.dp),

            horizontalArrangement = Arrangement.spacedBy(6.dp),

            verticalAlignment = Alignment.CenterVertically,

        ) {

            val closeButtonSize = 28.dp
@@ -170,7 +168,7 @@ fun NavBarPill( 
                                expandedChip = true

                                val hasBackground = actions.size > 1

                                Row(

                                    horizontalArrangement = Arrangement.spacedBy(4.dp),

                                    horizontalArrangement = Arrangement.spacedBy(6.dp),

                                    modifier =

                                        Modifier.padding(end = 3.dp)

                                            .clip(RoundedCornerShape(16.dp))
@@ -197,16 +195,6 @@ fun NavBarPill( 
                                        color = MaterialTheme.colorScheme.onSurface,

                                        modifier = Modifier.widthIn(0.dp, maxPillWidth * 0.5f),

                                    )

                                    if (hasAttribution) {

                                        Text(

                                            text = action.attribution!!,

                                            style = MaterialTheme.typography.labelMedium,

                                            maxLines = 1,

                                            overflow = TextOverflow.Ellipsis,

                                            color = MaterialTheme.colorScheme.onSurfaceVariant,

                                            modifier = Modifier.alpha(0.4f),

                                        )

                                    }

                                }

                            } else {

                                Image(
@@ -222,7 +210,7 @@ fun NavBarPill( 
                                                    Modifier

                                                }

                                            )

                                            .padding(3.5.dp)

                                            .padding(3.dp)

                                            .size(16.dp)

                                            .then(iconBorder)

                                            .clip(CircleShape),
@@ -247,15 +235,15 @@ fun NavBarPill( 
                modifier =

                    Modifier.size(closeButtonSize)

                        .clip(CircleShape)

                        .background(backgroundColor.copy(alpha = 0.7f))

                        .background(MaterialTheme.colorScheme.surfaceContainer)

                        .padding(6.dp),

                iconResource = R.drawable.ic_close_white_rounded,

                colors =

                    IconButtonColors(

                        containerColor = Color.Transparent,

                        contentColor = outlineColor,

                        contentColor = MaterialTheme.colorScheme.onSurface,

                        disabledContainerColor = Color.Transparent,

                        disabledContentColor = outlineColor,

                        disabledContentColor = MaterialTheme.colorScheme.onSurface,

                    ),

                contentDescription =

                    stringResource(id = R.string.underlay_close_button_content_description),

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

+8 −9
Original line number Diff line number Diff line
@@ -20,7 +20,6 @@ import androidx.compose.animation.core.Animatable 
import androidx.compose.animation.core.LinearEasing

import androidx.compose.animation.core.tween

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.dynamicDarkColorScheme

import androidx.compose.runtime.Composable

import androidx.compose.runtime.LaunchedEffect

import androidx.compose.runtime.remember
@@ -35,7 +34,6 @@ import androidx.compose.ui.graphics.Color 
import androidx.compose.ui.graphics.TileMode

import androidx.compose.ui.graphics.drawscope.Stroke

import androidx.compose.ui.graphics.toArgb

import androidx.compose.ui.platform.LocalContext

import androidx.compose.ui.platform.LocalDensity

import androidx.compose.ui.unit.Dp

import com.android.systemui.ambientcue.ui.utils.AiColorUtils.boostChroma
@@ -58,7 +56,7 @@ fun Modifier.animatedActionBorder( 
    val strokeAnimStartColor =

        Color(boostChroma(MaterialTheme.colorScheme.tertiaryContainer.toArgb()))

    val strokeAnimMiddleColor =

        Color(boostChroma(dynamicDarkColorScheme(LocalContext.current).primary.toArgb()))

        Color(boostChroma(MaterialTheme.colorScheme.primaryFixedDim.toArgb()))

    val strokeAnimEndColor = Color(boostChroma(MaterialTheme.colorScheme.primary.toArgb()))



    // Trigger animations when the composable enters the composition
@@ -67,10 +65,11 @@ fun Modifier.animatedActionBorder( 
            launch {

                rotationAngle.snapTo(Constants.INITIAL_ROTATION_DEGREES)

                rotationAngle.animateTo(

                    targetValue = Constants.INITIAL_ROTATION_DEGREES + 360f,

                    targetValue = Constants.INITIAL_ROTATION_DEGREES + 180f,

                    animationSpec =

                        tween(

                            durationMillis = Constants.ROTATION_DURATION_MILLIS,

                            delayMillis = Constants.FADE_DURATION_MILLIS,

                            easing = LinearEasing,

                        ),

                )
@@ -137,11 +136,11 @@ fun Modifier.animatedActionBorder( 
}



private object Constants {

    const val INITIAL_ROTATION_DEGREES: Float = 20f // Start rotation at 20 degrees

    const val GRADIENT_START_FRACTION = 0.2f

    const val GRADIENT_MIDDLE_FRACTION = 0.5f

    const val GRADIENT_END_FRACTION = 0.8f

    const val INITIAL_ROTATION_DEGREES: Float = 45f

    const val GRADIENT_START_FRACTION = 0.1f

    const val GRADIENT_MIDDLE_FRACTION = 0.4f

    const val GRADIENT_END_FRACTION = 0.6f

    const val ROTATION_DURATION_MILLIS: Int = 1500

    const val FADE_DURATION_MILLIS: Int = 500

    const val FADE_DELAY_MILLIS: Int = 1000

    const val FADE_DELAY_MILLIS: Int = 1500

}

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

+1 −1
Original line number Diff line number Diff line
@@ -26,7 +26,7 @@ object AiColorUtils { 
        val outColor = FloatArray(3)

        ColorUtils.colorToM3HCT(color, outColor)

        val chroma = outColor[1]

        if (chroma <= 5) {

        if (chroma <= 3) {

            return color

        }

        return ColorUtils.M3HCTToColor(outColor[0], 120f, outColor[2])