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
Loading
Loading
Loading
Loading
+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
+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)
+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,