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

Commit 83fdddbd authored by Yuchen's avatar Yuchen Committed by Yuchen Sun
Browse files

[expressive design] Update ActionButton. 

Separate button and text.
Also update shape of button.

Test: visual
Bug: 360916599
Flag: EXEMPT bug fix
Change-Id: Ifd470db3a1e32bfc4583cb86a98a968817dd6c0a
parent d24fcb83

packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/button/ActionButtons.kt

+92 −34
Original line number Diff line number Diff line
@@ -18,6 +18,7 @@ package com.android.settingslib.spa.widget.button 


import androidx.compose.foundation.background

import androidx.compose.foundation.interaction.MutableInteractionSource

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.IntrinsicSize
@@ -25,11 +26,14 @@ import androidx.compose.foundation.layout.PaddingValues 
import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.RowScope

import androidx.compose.foundation.layout.fillMaxHeight

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.layout.width

import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.automirrored.outlined.Launch

import androidx.compose.material.icons.outlined.Delete

import androidx.compose.material.icons.outlined.WarningAmber

import androidx.compose.material3.ButtonDefaults
@@ -51,7 +55,7 @@ import com.android.settingslib.spa.framework.theme.SettingsDimension 
import com.android.settingslib.spa.framework.theme.SettingsShape

import com.android.settingslib.spa.framework.theme.SettingsTheme

import com.android.settingslib.spa.framework.theme.divider

import androidx.compose.material.icons.automirrored.outlined.Launch

import com.android.settingslib.spa.framework.theme.isSpaExpressiveEnabled



data class ActionButton(

    val text: String,
@@ -62,6 +66,19 @@ data class ActionButton( 


@Composable

fun ActionButtons(actionButtons: List<ActionButton>) {

    if (isSpaExpressiveEnabled) {

        Row(

            horizontalArrangement = Arrangement.SpaceAround,

            modifier = Modifier

                .padding(SettingsDimension.buttonPadding)

                .height(IntrinsicSize.Min)

                .fillMaxWidth()

        ) {

            for (actionButton in actionButtons) {

                ActionButton(actionButton)

            }

        }

    } else {

        Row(

            Modifier

                .padding(SettingsDimension.buttonPadding)
@@ -74,9 +91,49 @@ fun ActionButtons(actionButtons: List<ActionButton>) { 
            }

        }

    }

}



@Composable

private fun RowScope.ActionButton(actionButton: ActionButton) {

    if (isSpaExpressiveEnabled) {

        Column(horizontalAlignment = Alignment.CenterHorizontally) {

            FilledTonalButton(

                onClick = actionButton.onClick,

                modifier = Modifier

                    .weight(1f)

                    .fillMaxHeight()

                    .clip(RoundedCornerShape(100.dp)),

                enabled = actionButton.enabled,

                // Because buttons could appear, disappear or change positions, reset the interaction source

                // to prevent highlight the wrong button.

                interactionSource = remember(actionButton) { MutableInteractionSource() },

                shape = RectangleShape,

                colors = ButtonDefaults.filledTonalButtonColors(

                    containerColor = MaterialTheme.colorScheme.primaryContainer,

                    contentColor = MaterialTheme.colorScheme.onPrimary,

                    disabledContainerColor = MaterialTheme.colorScheme.surface,

                ),

                contentPadding = PaddingValues(horizontal = 24.dp, vertical = 16.dp),

            ) {

                Icon(

                    imageVector = actionButton.imageVector,

                    contentDescription = null,

                    modifier = Modifier.size(SettingsDimension.itemIconSize),

                )

            }

            Box(

                modifier = Modifier

                    .padding(top = 6.dp),

                contentAlignment = Alignment.Center,

            ) {

                Text(

                    text = actionButton.text,

                    textAlign = TextAlign.Center,

                    style = MaterialTheme.typography.labelMedium,

                )

            }

        }

    } else {

        FilledTonalButton(

            onClick = actionButton.onClick,

            modifier = Modifier
@@ -115,6 +172,7 @@ private fun RowScope.ActionButton(actionButton: ActionButton) { 
            }

        }

    }

}



@Composable

private fun ButtonDivider() {