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

Commit b20f6ec0 authored by Tianfan Zhang's avatar Tianfan Zhang
Browse files

Add outer box to expand close button click area. 

Flag: EXEMPT bugfix
Test: local build & test
Bug: 426907893
Change-Id: If99e8fd061e51adf8c82f16ba6e6286d4451f083
parent 16157f75

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

+16 −14
Original line number Diff line number Diff line
@@ -43,13 +43,10 @@ import androidx.compose.foundation.shape.CircleShape 
import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material3.FilledIconButton

import androidx.compose.material3.Icon

import androidx.compose.material3.IconButtonColors

import androidx.compose.material3.IconButtonDefaults

import androidx.compose.material3.LocalMinimumInteractiveComponentSize

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.runtime.CompositionLocalProvider

import androidx.compose.runtime.LaunchedEffect

import androidx.compose.runtime.getValue

import androidx.compose.runtime.mutableStateOf
@@ -70,8 +67,8 @@ import androidx.compose.ui.graphics.graphicsLayer 
import androidx.compose.ui.layout.onGloballyPositioned

import androidx.compose.ui.platform.LocalConfiguration

import androidx.compose.ui.platform.LocalDensity

import androidx.compose.ui.res.stringResource

import androidx.compose.ui.res.painterResource

import androidx.compose.ui.res.stringResource

import androidx.compose.ui.text.font.FontWeight

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

import androidx.compose.ui.unit.Dp
@@ -79,7 +76,6 @@ import androidx.compose.ui.unit.IntSize 
import androidx.compose.ui.unit.dp

import androidx.compose.ui.util.fastForEachIndexed

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.utils.FilterUtils
@@ -211,7 +207,8 @@ fun NavBarPill( 
                    .padding(bottom = 4.dp),

        ) {

            val closeButtonSize = 28.dp

            Spacer(modifier = Modifier.size(closeButtonSize))

            val closeButtonTouchTargetSize = 36.dp

            Spacer(modifier = Modifier.size(closeButtonTouchTargetSize))



            Box {

                Row(
@@ -351,19 +348,24 @@ fun NavBarPill( 
                )

            }



            // Remove default padding and size.

            CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides 0.dp) {

            // Expand the clickable area.

            Box(

                contentAlignment = Alignment.Center,

                modifier =

                    Modifier.size(closeButtonTouchTargetSize)

                        .clickable(

                            onClick = onCloseClick,

                            interactionSource = null,

                            indication = null,

                        ),

            ) {

                // Close button

                FilledIconButton(

                    onClick = onCloseClick,

                    modifier =

                        Modifier.size(closeButtonSize)

                            .clip(CircleShape)

                            .background(MaterialTheme.colorScheme.surfaceContainer),

                    modifier = Modifier.size(closeButtonSize),

                    colors =

                        IconButtonDefaults.filledIconButtonColors(

                            containerColor = Color.Transparent,

                            contentColor = MaterialTheme.colorScheme.onSurface,

                            containerColor = MaterialTheme.colorScheme.surfaceContainer

                        ),

                ) {

                    Icon(

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

+14 −11
Original line number Diff line number Diff line
@@ -44,11 +44,9 @@ import androidx.compose.foundation.shape.RoundedCornerShape 
import androidx.compose.material3.FilledIconButton

import androidx.compose.material3.Icon

import androidx.compose.material3.IconButtonDefaults

import androidx.compose.material3.LocalMinimumInteractiveComponentSize

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.runtime.CompositionLocalProvider

import androidx.compose.runtime.derivedStateOf

import androidx.compose.runtime.getValue

import androidx.compose.runtime.mutableStateOf
@@ -211,7 +209,7 @@ fun ShortPill( 
                verticalAlignment = Alignment.CenterVertically,

                modifier = fadeOutModifier.then(scaleAnimationModifier),

            ) {

                Spacer(modifier = Modifier.size(closeButtonSize))

                Spacer(modifier = Modifier.size(closeButtonTouchTargetSize))



                Box(

                    contentAlignment = Alignment.Center,
@@ -296,10 +294,10 @@ fun ShortPill( 
            with(density) {

                val offsetX =

                    pillContentPosition.x.toDp() + (pillContentSize.width.toDp() / 2) -

                        (closeButtonSize / 2)

                        (closeButtonTouchTargetSize / 2)

                val offsetY =

                    pillContentPosition.y.toDp() + (pillContentSize.height.toDp() / 2) -

                        (closeButtonSize / 2)

                        (closeButtonTouchTargetSize / 2)



                CloseButton(

                    onCloseClick = onCloseClick,
@@ -316,17 +314,20 @@ fun ShortPill( 


@Composable

private fun CloseButton(onCloseClick: () -> Unit, modifier: Modifier = Modifier) {

    // Remove default padding and size.

    CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides 0.dp) {

    // Expand the clickable area.

    Box(

        contentAlignment = Alignment.Center,

        modifier =

            Modifier.size(closeButtonTouchTargetSize)

                .clickable(onClick = onCloseClick, interactionSource = null, indication = null),

    ) {

        // Close button

        FilledIconButton(

            onClick = onCloseClick,

            modifier =

                modifier.clip(CircleShape).background(MaterialTheme.colorScheme.surfaceContainer),

            modifier = modifier,

            colors =

                IconButtonDefaults.filledIconButtonColors(

                    containerColor = Color.Transparent,

                    contentColor = MaterialTheme.colorScheme.onSurface,

                    containerColor = MaterialTheme.colorScheme.surfaceContainer

                ),

        ) {

            Icon(
@@ -364,3 +365,5 @@ private fun Icon(action: ActionViewModel, backgroundColor: Color, modifier: Modi 
                .background(backgroundColor),

    )

}



private val closeButtonTouchTargetSize = 36.dp