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

Commit 06599b18 authored by William Xiao's avatar William Xiao
Browse files

Update widget editing highlight to match specs 

This change moves the widget highlight underneath the widget and
offsets it to have some padding between the highlight and the
widget. We draw the highlight outside the bounds of the widget so that
we don't have to adjust all of the lazy grid dimensions.

Bug: 332596951
Bug: 349204822
Fix: 332596951
Fix: 349204822
Flag: com.android.systemui.communal_hub
Test: manually tested on device, also verified the highlight is not
      focusable with talkback on
Change-Id: Icfac603c3582f79b835015f408c2780c55256cee
parent c7c4057c

packages/SystemUI/compose/features/src/com/android/systemui/communal/ui/compose/CommunalHub.kt

+25 −8
Original line number Original line Diff line number Diff line
@@ -97,10 +97,15 @@ import androidx.compose.runtime.setValue 
import androidx.compose.ui.Alignment

import androidx.compose.ui.Alignment

import androidx.compose.ui.ExperimentalComposeUiApi

import androidx.compose.ui.ExperimentalComposeUiApi

import androidx.compose.ui.Modifier

import androidx.compose.ui.Modifier

import androidx.compose.ui.draw.drawBehind

import androidx.compose.ui.geometry.CornerRadius

import androidx.compose.ui.geometry.Offset

import androidx.compose.ui.geometry.Offset

import androidx.compose.ui.geometry.Size

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.graphics.ColorFilter

import androidx.compose.ui.graphics.ColorFilter

import androidx.compose.ui.graphics.ColorMatrix

import androidx.compose.ui.graphics.ColorMatrix

import androidx.compose.ui.graphics.SolidColor

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

import androidx.compose.ui.graphics.graphicsLayer

import androidx.compose.ui.graphics.graphicsLayer

import androidx.compose.ui.input.pointer.pointerInput

import androidx.compose.ui.input.pointer.pointerInput

import androidx.compose.ui.layout.LayoutCoordinates

import androidx.compose.ui.layout.LayoutCoordinates
@@ -136,7 +141,6 @@ import com.android.internal.R.dimen.system_app_widget_background_radius 
import com.android.systemui.communal.domain.model.CommunalContentModel

import com.android.systemui.communal.domain.model.CommunalContentModel

import com.android.systemui.communal.shared.model.CommunalContentSize

import com.android.systemui.communal.shared.model.CommunalContentSize

import com.android.systemui.communal.shared.model.CommunalScenes

import com.android.systemui.communal.shared.model.CommunalScenes

import com.android.systemui.communal.ui.compose.Dimensions.CardOutlineWidth

import com.android.systemui.communal.ui.compose.extensions.allowGestures

import com.android.systemui.communal.ui.compose.extensions.allowGestures

import com.android.systemui.communal.ui.compose.extensions.detectLongPressGesture

import com.android.systemui.communal.ui.compose.extensions.detectLongPressGesture

import com.android.systemui.communal.ui.compose.extensions.firstItemAtOffset

import com.android.systemui.communal.ui.compose.extensions.firstItemAtOffset
@@ -820,13 +824,26 @@ private fun CommunalContent( 




/** Creates an empty card used to highlight a particular spot on the grid. */

/** Creates an empty card used to highlight a particular spot on the grid. */

@Composable

@Composable

fun HighlightedItem(modifier: Modifier = Modifier) {

fun HighlightedItem(modifier: Modifier = Modifier, alpha: Float = 1.0f) {

    Card(

    val brush = SolidColor(LocalAndroidColorScheme.current.primaryFixed)

        modifier = modifier,

    Box(

        colors = CardDefaults.cardColors(containerColor = Color.Transparent),

        modifier =

        border = BorderStroke(CardOutlineWidth, LocalAndroidColorScheme.current.tertiaryFixed),

            // drawBehind lets us draw outside the bounds of the widgets so that we don't need to

        shape = RoundedCornerShape(16.dp)

            // resize grid items to account for the border.

    ) {}

            modifier.drawBehind {

                // 8dp of padding between the widget and the highlight on every side.

                val padding = 8.dp.toPx()

                drawRoundRect(

                    brush,

                    alpha = alpha,

                    topLeft = Offset(-padding, -padding),

                    size =

                        Size(width = size.width + padding * 2, height = size.height + padding * 2),

                    cornerRadius = CornerRadius(37.dp.toPx()),

                    style = Stroke(width = 3.dp.toPx())

                )

            }

    )

}

}





/** Presents a CTA tile at the end of the grid, to customize the hub. */

/** Presents a CTA tile at the end of the grid, to customize the hub. */

packages/SystemUI/compose/features/src/com/android/systemui/communal/ui/compose/GridDragDropState.kt

+14 −24
Original line number Original line Diff line number Diff line
@@ -16,10 +16,9 @@ 




package com.android.systemui.communal.ui.compose

package com.android.systemui.communal.ui.compose





import androidx.compose.animation.AnimatedVisibility

import androidx.compose.animation.core.Spring

import androidx.compose.animation.core.animateFloatAsState

import androidx.compose.animation.core.animateFloatAsState

import androidx.compose.animation.fadeIn

import androidx.compose.animation.core.spring

import androidx.compose.animation.fadeOut

import androidx.compose.foundation.ExperimentalFoundationApi

import androidx.compose.foundation.ExperimentalFoundationApi

import androidx.compose.foundation.gestures.detectDragGesturesAfterLongPress

import androidx.compose.foundation.gestures.detectDragGesturesAfterLongPress

import androidx.compose.foundation.gestures.scrollBy

import androidx.compose.foundation.gestures.scrollBy
@@ -34,13 +33,10 @@ import androidx.compose.runtime.mutableStateOf 
import androidx.compose.runtime.remember

import androidx.compose.runtime.remember

import androidx.compose.runtime.rememberCoroutineScope

import androidx.compose.runtime.rememberCoroutineScope

import androidx.compose.runtime.setValue

import androidx.compose.runtime.setValue

import androidx.compose.ui.ExperimentalComposeUiApi

import androidx.compose.ui.Modifier

import androidx.compose.ui.Modifier

import androidx.compose.ui.geometry.Offset

import androidx.compose.ui.geometry.Offset

import androidx.compose.ui.graphics.graphicsLayer

import androidx.compose.ui.graphics.graphicsLayer

import androidx.compose.ui.input.pointer.pointerInput

import androidx.compose.ui.input.pointer.pointerInput

import androidx.compose.ui.input.pointer.pointerInteropFilter

import androidx.compose.ui.semantics.clearAndSetSemantics

import androidx.compose.ui.unit.IntOffset

import androidx.compose.ui.unit.IntOffset

import androidx.compose.ui.unit.toOffset

import androidx.compose.ui.unit.toOffset

import androidx.compose.ui.unit.toSize

import androidx.compose.ui.unit.toSize
@@ -107,8 +103,7 @@ internal constructor( 
        get() =

        get() =

            draggingItemLayoutInfo?.let { item ->

            draggingItemLayoutInfo?.let { item ->

                draggingItemInitialOffset + draggingItemDraggedDelta - item.offset.toOffset()

                draggingItemInitialOffset + draggingItemDraggedDelta - item.offset.toOffset()

            }

            } ?: Offset.Zero

                ?: Offset.Zero





    private val draggingItemLayoutInfo: LazyGridItemInfo?

    private val draggingItemLayoutInfo: LazyGridItemInfo?

        get() = state.layoutInfo.visibleItemsInfo.firstOrNull { it.index == draggingItemIndex }

        get() = state.layoutInfo.visibleItemsInfo.firstOrNull { it.index == draggingItemIndex }
@@ -238,7 +233,6 @@ fun Modifier.dragContainer( 
}

}





/** Wrap LazyGrid item with additional modifier needed for drag and drop. */

/** Wrap LazyGrid item with additional modifier needed for drag and drop. */

@OptIn(ExperimentalComposeUiApi::class)

@ExperimentalFoundationApi

@ExperimentalFoundationApi

@Composable

@Composable

fun LazyGridItemScope.DraggableItem(

fun LazyGridItemScope.DraggableItem(
@@ -270,22 +264,18 @@ fun LazyGridItemScope.DraggableItem( 
            Modifier.animateItemPlacement()

            Modifier.animateItemPlacement()

        }

        }





    // Animate the highlight alpha manually as alpha modifier (and AnimatedVisibility) clips the

    // widget to bounds, which cuts off the highlight as we are drawing outside the widget bounds.

    val alpha by

        animateFloatAsState(

            targetValue =

                if ((dragging || selected) && !dragDropState.isDraggingToRemove) 1f else 0f,

            animationSpec = spring(stiffness = Spring.StiffnessMediumLow),

            label = "Widget outline alpha"

        )



    Box(modifier) {

    Box(modifier) {

        HighlightedItem(Modifier.matchParentSize(), alpha = alpha)

        Box(draggingModifier) { content(dragging) }

        Box(draggingModifier) { content(dragging) }

        AnimatedVisibility(

            modifier =

                Modifier.matchParentSize()

                    // Avoid taking focus away from the content when using explore-by-touch with

                    // accessibility tools.

                    .clearAndSetSemantics {}

                    // Do not consume motion events in the highlighted item and pass them down to

                    // the content.

                    .pointerInteropFilter { false },

            visible = (dragging || selected) && !dragDropState.isDraggingToRemove,

            enter = fadeIn(),

            exit = fadeOut()

        ) {

            HighlightedItem(Modifier.matchParentSize())

        }

    }

    }

}
 
}