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

Commit 3a081dfb authored by Lucas Dupin's avatar Lucas Dupin
Browse files

Polished pill and glow appearance 

- Pill now has inner glow
- Icon outline is only present on MA actionType
- glow was adjusted and dimmed down
- background is solid white or black

Fixes: 418032398
Flag: com.android.systemui.enable_underlay
Test: atest NavBarPillScreenshotTest
Test: atest ShortPillScreenshotTest
Change-Id: Iad601752bd37b6ace6943c52754617a8c283c477
parent 9e2754d1

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

+3 −7
Original line number Diff line number Diff line
@@ -98,7 +98,7 @@ fun ActionList( 
        actions.forEachIndexed { index, action ->

            val scale by

                animateFloatAsState(

                    progress,

                    targetValue = progress,

                    animationSpec =

                        spring(

                            dampingRatio = Spring.DampingRatioNoBouncy,
@@ -107,12 +107,8 @@ fun ActionList( 
                )

            val translation by

                animateFloatAsState(

                    progress,

                    animationSpec =

                        spring(

                            dampingRatio = Spring.DampingRatioMediumBouncy,

                            stiffness = Spring.StiffnessLow,

                        ),

                    targetValue = progress,

                    animationSpec = spring(dampingRatio = 0.6f, stiffness = 220f),

                )



            Chip(

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

+3 −2
Original line number Diff line number Diff line
@@ -54,12 +54,13 @@ fun BackgroundGlow( 
    val density = LocalDensity.current

    val turbulenceDisplacementPx = with(density) { Defaults.TURBULENCE_DISPLACEMENT_DP.dp.toPx() }

    val gradientRadiusPx = with(density) { Defaults.GRADIENT_RADIUS.dp.toPx() }

    val glowHeightInDp = (Defaults.GRADIENT_RADIUS + Defaults.TURBULENCE_SIZE).dp



    val visibleState = remember { MutableTransitionState(false) }

    visibleState.targetState = visible



    val transition = rememberTransition(visibleState)

    val alpha by transition.animateFloat(transitionSpec = { tween(750) }) { if (it) 1f else 0f }

    val alpha by transition.animateFloat(transitionSpec = { tween(750) }) { if (it) 0.55f else 0f }

    val verticalOffset by

        animateIntOffsetAsState(if (expanded) IntOffset.Zero else collapsedOffset, tween(350))
@@ -85,7 +86,7 @@ fun BackgroundGlow( 
    val shaderBrush = remember { ShaderBrush(shader) }



    Box(

        modifier.size(400.dp, 200.dp).alpha(alpha).drawWithCache {

        modifier.size(400.dp, glowHeightInDp).alpha(alpha).drawWithCache {

            onDrawWithContent {

                val offsetX = with(density) { verticalOffset.x.dp.toPx() }

                val offsetY = with(density) { verticalOffset.y.dp.toPx() }

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

+12 −3
Original line number Diff line number Diff line
@@ -20,6 +20,7 @@ import androidx.compose.foundation.Image 
import androidx.compose.foundation.background

import androidx.compose.foundation.border

import androidx.compose.foundation.combinedClickable

import androidx.compose.foundation.isSystemInDarkTheme

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Row
@@ -35,15 +36,17 @@ import androidx.compose.ui.Alignment 
import androidx.compose.ui.Modifier

import androidx.compose.ui.draw.alpha

import androidx.compose.ui.draw.clip

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.text.style.TextOverflow

import androidx.compose.ui.unit.dp

import com.android.compose.ui.graphics.painter.rememberDrawablePainter

import com.android.systemui.ambientcue.ui.viewmodel.ActionType

import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel



@Composable

fun Chip(action: ActionViewModel, modifier: Modifier = Modifier) {

    val outlineColor = MaterialTheme.colorScheme.onBackground

    val backgroundColor = MaterialTheme.colorScheme.background

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

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



    Row(

        horizontalArrangement = Arrangement.spacedBy(8.dp),
@@ -62,7 +65,13 @@ fun Chip(action: ActionViewModel, modifier: Modifier = Modifier) { 
            contentDescription = action.label,

            modifier =

                Modifier.size(24.dp)

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

                    .then(

                        if (action.actionType == ActionType.MR) {

                            Modifier

                        } else {

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

                        }

                    )

                    .clip(CircleShape),

        )

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

+108 −92
Original line number Diff line number Diff line
@@ -25,6 +25,7 @@ import androidx.compose.foundation.Image 
import androidx.compose.foundation.background

import androidx.compose.foundation.border

import androidx.compose.foundation.clickable

import androidx.compose.foundation.isSystemInDarkTheme

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.IntrinsicSize
@@ -46,7 +47,9 @@ import androidx.compose.runtime.remember 
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

import androidx.compose.ui.graphics.graphicsLayer
@@ -63,6 +66,7 @@ import androidx.compose.ui.util.lerp 
import com.android.compose.PlatformIconButton

import com.android.compose.ui.graphics.painter.rememberDrawablePainter

import com.android.systemui.ambientcue.ui.compose.modifier.animatedActionBorder

import com.android.systemui.ambientcue.ui.viewmodel.ActionType

import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel

import com.android.systemui.res.R
@@ -78,8 +82,8 @@ fun NavBarPill( 
) {

    val configuration = LocalConfiguration.current

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

    val outlineColor = MaterialTheme.colorScheme.onBackground

    val backgroundColor = MaterialTheme.colorScheme.background

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

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



    val density = LocalDensity.current

    val collapsedWidthPx = with(density) { navBarWidth.toPx() }
@@ -123,6 +127,7 @@ fun NavBarPill( 
            val closeButtonSize = 28.dp

            Spacer(modifier = Modifier.size(closeButtonSize))



            Box {

                Row(

                    horizontalArrangement = Arrangement.Center,

                    verticalAlignment = Alignment.CenterVertically,
@@ -136,7 +141,7 @@ fun NavBarPill( 
                                visible = visible,

                            )

                            .then(if (expanded) Modifier else Modifier.clickable { onClick() })

                        .padding(3.dp)

                            .padding(2.dp)

                            .onGloballyPositioned { expandedSize = it.size },

                ) {

                    // Should have at most 1 expanded chip
@@ -151,6 +156,16 @@ fun NavBarPill( 
                                if (hasAttribution) Modifier.weight(1f, false)

                                else Modifier.width(IntrinsicSize.Max),

                        ) {

                            val iconBorder =

                                if (action.actionType == ActionType.MR) {

                                    Modifier

                                } else {

                                    Modifier.border(

                                        width = 0.5.dp,

                                        color = MaterialTheme.colorScheme.outline,

                                        shape = CircleShape,

                                    )

                                }

                            if ((actions.size == 1 || hasAttribution) && !expandedChip) {

                                expandedChip = true

                                val hasBackground = actions.size > 1
@@ -161,31 +176,25 @@ fun NavBarPill( 
                                            .clip(RoundedCornerShape(16.dp))

                                            .background(

                                                if (hasBackground) {

                                                MaterialTheme.colorScheme.onSecondary

                                                    MaterialTheme.colorScheme.surfaceContainer

                                                } else {

                                                    Color.Transparent

                                                }

                                            )

                                        .padding(6.dp),

                                            .padding(4.dp),

                                ) {

                                    Image(

                                        painter = rememberDrawablePainter(action.icon),

                                        contentDescription = action.label,

                                        modifier =

                                        Modifier.size(16.dp)

                                            .border(

                                                width = 0.75.dp,

                                                color = MaterialTheme.colorScheme.outline,

                                                shape = CircleShape,

                                            )

                                            .clip(CircleShape),

                                            Modifier.size(16.dp).then(iconBorder).clip(CircleShape),

                                    )

                                    Text(

                                        text = action.label,

                                        style = MaterialTheme.typography.labelMedium,

                                        maxLines = 1,

                                        overflow = TextOverflow.Ellipsis,

                                    color = outlineColor,

                                        color = MaterialTheme.colorScheme.onSurface,

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

                                    )

                                    if (hasAttribution) {
@@ -194,7 +203,7 @@ fun NavBarPill( 
                                            style = MaterialTheme.typography.labelMedium,

                                            maxLines = 1,

                                            overflow = TextOverflow.Ellipsis,

                                        color = outlineColor,

                                            color = MaterialTheme.colorScheme.onSurface,

                                            modifier = Modifier.alpha(0.4f),

                                        )

                                    }
@@ -213,19 +222,26 @@ fun NavBarPill( 
                                                    Modifier

                                                }

                                            )

                                        .padding(3.dp)

                                            .padding(3.5.dp)

                                            .size(16.dp)

                                        .border(

                                            width = 0.75.dp,

                                            color = MaterialTheme.colorScheme.outline,

                                            shape = CircleShape,

                                        )

                                            .then(iconBorder)

                                            .clip(CircleShape),

                                )

                            }

                        }

                    }

                }

                Box(

                    Modifier.matchParentSize()

                        .padding(1.dp)

                        .blur(4.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)

                        .animatedActionBorder(

                            strokeWidth = 1.dp,

                            cornerRadius = 16.dp,

                            visible = visible,

                        )

                )

            }



            PlatformIconButton(

                modifier =

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

+20 −10
Original line number Diff line number Diff line
@@ -26,6 +26,7 @@ import androidx.compose.foundation.Image 
import androidx.compose.foundation.background

import androidx.compose.foundation.border

import androidx.compose.foundation.clickable

import androidx.compose.foundation.isSystemInDarkTheme

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column
@@ -55,6 +56,7 @@ import androidx.compose.ui.util.fastForEach 
import com.android.compose.PlatformIconButton

import com.android.compose.ui.graphics.painter.rememberDrawablePainter

import com.android.systemui.ambientcue.ui.compose.modifier.animatedActionBorder

import com.android.systemui.ambientcue.ui.viewmodel.ActionType

import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel

import com.android.systemui.res.R
@@ -68,8 +70,8 @@ fun ShortPill( 
    onClick: () -> Unit = {},

    onCloseClick: () -> Unit = {},

) {

    val outlineColor = MaterialTheme.colorScheme.onBackground

    val backgroundColor = MaterialTheme.colorScheme.background

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

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

    val minSize = 48.dp

    val closeButtonSize = 28.dp

    val transitionTween: TweenSpec<Float> = tween(250, delayMillis = 200)
@@ -172,14 +174,16 @@ private fun CloseButton( 
    onCloseClick: () -> Unit,

    modifier: Modifier = Modifier,

) {

    val decreasedAlphaBackgroundColor = backgroundColor.copy(alpha = 0.7f)

    PlatformIconButton(

        modifier = modifier.clip(CircleShape).background(backgroundColor).padding(8.dp),

        modifier =

            modifier.clip(CircleShape).background(decreasedAlphaBackgroundColor).padding(8.dp),

        iconResource = R.drawable.ic_close_white_rounded,

        colors =

            IconButtonColors(

                containerColor = backgroundColor,

                containerColor = Color.Transparent,

                contentColor = outlineColor,

                disabledContainerColor = backgroundColor,

                disabledContainerColor = Color.Transparent,

                disabledContentColor = outlineColor,

            ),

        contentDescription =
@@ -195,12 +199,18 @@ private fun Icon(action: ActionViewModel, backgroundColor: Color, modifier: Modi 
        contentDescription = action.label,

        modifier =

            modifier

                .size(18.dp)

                .then(

                    if (action.actionType == ActionType.MR) {

                        Modifier.size(18.dp)

                    } else {

                        Modifier.size(16.dp)

                            .border(

                                width = 0.75.dp,

                                color = MaterialTheme.colorScheme.outline,

                                shape = CircleShape,

                            )

                    }

                )

                .padding(1.dp)

                .clip(CircleShape)

                .background(backgroundColor),