From d9776f43eb36baad5515869185c229044c27bbdf Mon Sep 17 00:00:00 2001 From: cocod Date: Tue, 11 Jun 2024 02:15:43 +0000 Subject: [PATCH] Keep Add and Done visible as secondary buttons when a widget is selected In glanceable hub edit mode, show Add and Done buttons as primary button when nothing is selected. Show them as outline button when a widget selected or when reordering. Add basic fade animation to the toolbar buttons. Bug: b/341752442 Fix: b/341752442 Test: manually tap, unselect, reorder widgets Flag: com.android.systemui.communal_hub Change-Id: I933cb1b5587b9909c6034a0d58bbd599cd446b8d --- .../communal/ui/compose/CommunalHub.kt | 140 ++++++++++++------ 1 file changed, 97 insertions(+), 43 deletions(-) diff --git a/packages/SystemUI/compose/features/src/com/android/systemui/communal/ui/compose/CommunalHub.kt b/packages/SystemUI/compose/features/src/com/android/systemui/communal/ui/compose/CommunalHub.kt index eccb0724a8d4..f43064aea7b0 100644 --- a/packages/SystemUI/compose/features/src/com/android/systemui/communal/ui/compose/CommunalHub.kt +++ b/packages/SystemUI/compose/features/src/com/android/systemui/communal/ui/compose/CommunalHub.kt @@ -26,7 +26,6 @@ import android.widget.RemoteViews import androidx.annotation.VisibleForTesting import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibilityScope -import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.animation.core.LinearEasing import androidx.compose.animation.core.Spring import androidx.compose.animation.core.animateFloatAsState @@ -46,6 +45,7 @@ import androidx.compose.foundation.layout.BoxScope import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth @@ -585,24 +585,23 @@ private fun Toolbar( ) .onSizeChanged { setToolbarSize(it) }, ) { - val spacerModifier = Modifier.width(ButtonDefaults.IconSpacing) - - if (!removeEnabled) { - Button( - modifier = Modifier.align(Alignment.CenterStart), - onClick = onOpenWidgetPicker, - colors = filledButtonColors(), - contentPadding = Dimensions.ButtonPadding - ) { - Icon(Icons.Default.Add, stringResource(R.string.hub_mode_add_widget_button_text)) - Spacer(spacerModifier) - Text( - text = stringResource(R.string.hub_mode_add_widget_button_text), - ) - } + ToolbarButton( + isPrimary = !removeEnabled, + modifier = Modifier.align(Alignment.CenterStart), + onClick = onOpenWidgetPicker, + ) { + Icon(Icons.Default.Add, stringResource(R.string.hub_mode_add_widget_button_text)) + Text( + text = stringResource(R.string.hub_mode_add_widget_button_text), + ) } - if (removeEnabled) { + AnimatedVisibility( + modifier = Modifier.align(Alignment.Center), + visible = removeEnabled, + enter = fadeIn(), + exit = fadeOut() + ) { Button( onClick = onRemoveClicked, colors = filledButtonColors(), @@ -610,33 +609,97 @@ private fun Toolbar( modifier = Modifier.graphicsLayer { alpha = removeButtonAlpha } .onGloballyPositioned { setRemoveButtonCoordinates(it) } - .align(Alignment.Center) ) { - RemoveButtonContent(spacerModifier) + Row( + horizontalArrangement = + Arrangement.spacedBy( + ButtonDefaults.IconSpacing, + Alignment.CenterHorizontally + ), + verticalAlignment = Alignment.CenterVertically + ) { + Icon(Icons.Default.Close, stringResource(R.string.button_to_remove_widget)) + Text( + text = stringResource(R.string.button_to_remove_widget), + ) + } } } - if (!removeEnabled) { - Button( - modifier = Modifier.align(Alignment.CenterEnd), - onClick = onEditDone, - colors = filledButtonColors(), - contentPadding = Dimensions.ButtonPadding + ToolbarButton( + isPrimary = !removeEnabled, + modifier = Modifier.align(Alignment.CenterEnd), + onClick = onEditDone, + ) { + Icon( + Icons.Default.Check, + stringResource(id = R.string.hub_mode_editing_exit_button_text) + ) + Text( + text = stringResource(R.string.hub_mode_editing_exit_button_text), + ) + } + } +} + +/** + * Toolbar button that displays as a filled button if primary, and an outline button if secondary. + */ +@Composable +private fun ToolbarButton( + isPrimary: Boolean = true, + onClick: () -> Unit, + modifier: Modifier = Modifier, + content: @Composable RowScope.() -> Unit +) { + val colors = LocalAndroidColorScheme.current + AnimatedVisibility( + visible = isPrimary, + modifier = modifier, + enter = fadeIn(), + exit = fadeOut() + ) { + Button( + onClick = onClick, + colors = filledButtonColors(), + contentPadding = Dimensions.ButtonPadding, + ) { + Row( + horizontalArrangement = + Arrangement.spacedBy(ButtonDefaults.IconSpacing, Alignment.CenterHorizontally), + verticalAlignment = Alignment.CenterVertically ) { - Icon( - Icons.Default.Check, - stringResource(id = R.string.hub_mode_editing_exit_button_text) - ) - Spacer(spacerModifier) - Text( - text = stringResource(R.string.hub_mode_editing_exit_button_text), - ) + content() + } + } + } + + AnimatedVisibility( + visible = !isPrimary, + modifier = modifier, + enter = fadeIn(), + exit = fadeOut() + ) { + OutlinedButton( + onClick = onClick, + colors = + ButtonDefaults.outlinedButtonColors( + contentColor = colors.primary, + ), + border = BorderStroke(width = 2.0.dp, color = colors.primary), + contentPadding = Dimensions.ButtonPadding, + ) { + Row( + horizontalArrangement = + Arrangement.spacedBy(ButtonDefaults.IconSpacing, Alignment.CenterHorizontally), + verticalAlignment = Alignment.CenterVertically + ) { + content() } } } } -@OptIn(ExperimentalAnimationApi::class) @Composable private fun AnimatedVisibilityScope.ButtonToEditWidgets( onClick: () -> Unit, @@ -738,15 +801,6 @@ private fun PopupOnDismissCtaTile(onHidePopup: () -> Unit) { } } -@Composable -private fun RemoveButtonContent(spacerModifier: Modifier) { - Icon(Icons.Default.Close, stringResource(R.string.button_to_remove_widget)) - Spacer(spacerModifier) - Text( - text = stringResource(R.string.button_to_remove_widget), - ) -} - @Composable private fun filledButtonColors(): ButtonColors { val colors = LocalAndroidColorScheme.current