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

Commit 6c3f7a1d authored by Yuchen's avatar Yuchen
Browse files

[Expressive design] Update SPA Appbar. 

Update container color.
Update back icon size.
Screenshot: https://screenshot.googleplex.com/9KqVsoj2uv7Pv5a

Bug: 349681531
Flag: EXEMPT migration
Test: visual
Change-Id: I94e98d00819926ba584d15d4df6540142e602361
parent ae9c64be

packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/framework/theme/SettingsDimension.kt

+2 −3
Original line number Diff line number Diff line
@@ -33,9 +33,8 @@ object SettingsDimension { 
    val spinnerHorizontalPadding = paddingExtraLarge

    val spinnerVerticalPadding = paddingLarge



    val actionIconWidth = 32.dp

    val actionIconHeight = 40.dp

    val actionIconPadding = 4.dp

    val actionIconSize = 40.dp

    val actionIconPadding = 8.dp



    val itemIconSize = 24.dp

    val itemIconContainerSizeSmall = 40.dp

packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/scaffold/Actions.kt

+16 −21
Original line number Diff line number Diff line
@@ -57,14 +57,13 @@ private fun BackAction(contentDescription: String, onClick: () -> Unit) { 
        onClick = onClick,

        modifier =

            if (isSpaExpressiveEnabled)

            Modifier

                .padding(

                    start = SettingsDimension.paddingLarge,

                Modifier.padding(

                        start = SettingsDimension.paddingExtraSmall5,

                        end = SettingsDimension.paddingSmall,

                        top = SettingsDimension.paddingExtraSmall,

                        bottom = SettingsDimension.paddingExtraSmall,

                    )

                .size(SettingsDimension.actionIconWidth, SettingsDimension.actionIconHeight)

                    .size(SettingsDimension.actionIconSize)

                    .clip(SettingsShape.CornerExtraLarge)

            else Modifier,

    ) {
@@ -73,11 +72,7 @@ private fun BackAction(contentDescription: String, onClick: () -> Unit) { 
            contentDescription = contentDescription,

            modifier =

                if (isSpaExpressiveEnabled)

                Modifier

                    .size(

                        SettingsDimension.actionIconWidth,

                        SettingsDimension.actionIconHeight,

                    )

                    Modifier.size(SettingsDimension.actionIconSize)

                        .clip(SettingsShape.CornerExtraLarge)

                        .background(MaterialTheme.colorScheme.surfaceContainerHighest)

                        .padding(SettingsDimension.actionIconPadding)

packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/scaffold/CustomizedAppBar.kt

+34 −16
Original line number Diff line number Diff line
@@ -142,7 +142,8 @@ private fun Title(title: String, maxLines: Int = Int.MAX_VALUE) { 
    Text(

        text = title,

        modifier =

            Modifier.padding(

            Modifier

                .padding(

                    start =

                    if (isSpaExpressiveEnabled) SettingsDimension.paddingExtraSmall

                    else SettingsDimension.itemPaddingAround,
@@ -156,6 +157,15 @@ private fun Title(title: String, maxLines: Int = Int.MAX_VALUE) { 


@Composable

private fun topAppBarColors() =

    if (isSpaExpressiveEnabled)

        TopAppBarColors(

            containerColor = MaterialTheme.colorScheme.surfaceContainer,

            scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainer,

            navigationIconContentColor = MaterialTheme.colorScheme.onSurface,

            titleContentColor = MaterialTheme.colorScheme.onSurface,

            actionIconContentColor = MaterialTheme.colorScheme.primary,

        )

    else

        TopAppBarColors(

            containerColor = MaterialTheme.colorScheme.settingsBackground,

            scrolledContainerColor = MaterialTheme.colorScheme.surfaceVariant,
@@ -257,14 +267,16 @@ private fun SingleRowTopAppBar( 
    // Compose a Surface with a TopAppBarLayout content.

    Box(

        modifier =

            Modifier.drawBehind { drawRect(color = colors.scrolledContainerColor) }

            Modifier

                .drawBehind { drawRect(color = colors.scrolledContainerColor) }

                .semantics { isTraversalGroup = true }

                .pointerInput(Unit) {}

    ) {

        val height = LocalDensity.current.run { ContainerHeight.toPx() }

        TopAppBarLayout(

            modifier =

                Modifier.windowInsetsPadding(windowInsets)

                Modifier

                    .windowInsetsPadding(windowInsets)

                    // clip after padding so we don't show the title over the inset area

                    .clipToBounds(),

            heightPx = height,
@@ -387,7 +399,8 @@ private fun TwoRowsTopAppBar( 
        Column {

            TopAppBarLayout(

                modifier =

                    Modifier.windowInsetsPadding(windowInsets)

                    Modifier

                        .windowInsetsPadding(windowInsets)

                        // clip after padding so we don't show the title over the inset area

                        .clipToBounds(),

                heightPx = pinnedHeightPx,
@@ -495,14 +508,17 @@ private fun TopAppBarLayout( 
) {

    Layout(

        {

            Box(Modifier.layoutId("navigationIcon").padding(start = TopAppBarHorizontalPadding)) {

            Box(Modifier

                .layoutId("navigationIcon")

                .padding(start = TopAppBarHorizontalPadding)) {

                CompositionLocalProvider(

                    LocalContentColor provides navigationIconContentColor,

                    content = navigationIcon,

                )

            }

            Box(

                Modifier.layoutId("title")

                Modifier

                    .layoutId("title")

                    .padding(horizontal = TopAppBarHorizontalPadding)

                    .then(if (hideTitleSemantics) Modifier.clearAndSetSemantics {} else Modifier)

                    .graphicsLayer { alpha = titleAlpha() }
@@ -521,7 +537,9 @@ private fun TopAppBarLayout( 
                    )

                }

            }

            Box(Modifier.layoutId("actionIcons").padding(end = TopAppBarHorizontalPadding)) {

            Box(Modifier

                .layoutId("actionIcons")

                .padding(end = TopAppBarHorizontalPadding)) {

                CompositionLocalProvider(

                    LocalContentColor provides actionIconContentColor,

                    content = actions,