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

Commit 4d02bcee authored by Chaohui Wang's avatar Chaohui Wang
Browse files

[Spa] Polish UI 

- Update Spinner
- CategoryButton pressed shape
- ActionButtons pressed shape
- Size and Space has different tokens, so split SettingsDimension into
  SettingsSize and SettingsSpace

Bug: 419002002
Flag: EXEMPT bug fix
Test: visual
Change-Id: I6f3f05badaca279b24b898dbce1b680cc87d71d1
parent ffe40e74

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

+2 −16
Original line number Diff line number Diff line
@@ -20,24 +20,12 @@ import androidx.compose.foundation.layout.PaddingValues 
import androidx.compose.ui.unit.dp



object SettingsDimension {

    val extraSmall2 = 4.dp

    val extraSmall3 = 6.dp

    val extraSmall4 = 8.dp

    val extraSmall5 = 10.dp

    val extraSmall6 = 12.dp

    val small1 = 16.dp

    val small4 = 24.dp



    val paddingTiny = 2.dp

    val paddingExtraSmall1 = 6.dp

    val paddingSmall = if (isSpaExpressiveEnabled) 8.dp else 4.dp

    val paddingLarge = 16.dp

    val paddingExtraLarge = 24.dp

    val paddingExtraLarge1 = 28.dp



    val spinnerHorizontalPadding = paddingExtraLarge

    val spinnerVerticalPadding = paddingLarge



    val actionIconSize = 40.dp

    val actionIconPadding = 8.dp
@@ -46,7 +34,8 @@ object SettingsDimension { 
    val itemIconContainerSize = 72.dp

    val itemPaddingStart = if (isSpaExpressiveEnabled) paddingLarge else paddingExtraLarge

    val itemPaddingEnd = paddingLarge

    val itemPaddingVertical = if (isSpaExpressiveEnabled) extraSmall6 else paddingLarge

    val itemPaddingVertical =

        if (isSpaExpressiveEnabled) SettingsSpace.extraSmall6 else paddingLarge

    val itemPadding = PaddingValues(

        start = itemPaddingStart,

        top = itemPaddingVertical,
@@ -100,7 +89,4 @@ object SettingsDimension { 
    val illustrationCornerRadius = 28.dp



    val preferenceMinHeight = 72.dp



    val spinnerOptionMinHeight = 48.dp

    val spinnerIconSize = 20.dp

}

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

+7 −9
Original line number Diff line number Diff line
@@ -16,22 +16,20 @@ 


package com.android.settingslib.spa.framework.theme



import androidx.compose.foundation.shape.CircleShape

import androidx.compose.foundation.shape.CornerSize

import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.ui.unit.dp



object SettingsShape {

    val CornerExtraSmall = RoundedCornerShape(4.dp)



    val CornerFull = CircleShape

    val CornerExtraSmall2 = RoundedCornerShape(4.dp)

    val CornerMedium = RoundedCornerShape(12.dp)

    val CornerLarge1 = RoundedCornerShape(16.dp)

    val CornerLarge2 = RoundedCornerShape(20.dp)

    val CornerExtraLarge1 = RoundedCornerShape(28.dp)



    val CornerMedium2 = RoundedCornerShape(20.dp)



    val CornerLarge = RoundedCornerShape(24.dp)



    val CornerExtraLarge = RoundedCornerShape(28.dp)



    val CornerExtraLarge1 = RoundedCornerShape(40.dp)

    // Legacy tokens below



    val TopCornerMedium2 =

        RoundedCornerShape(CornerSize(20.dp), CornerSize(20.dp), CornerSize(0), CornerSize(0))

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

0 → 100644
+24 −0
Original line number Diff line number Diff line 
/*

 * Copyright (C) 2025 The Android Open Source Project

 *

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *      http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



package com.android.settingslib.spa.framework.theme



import androidx.compose.ui.unit.dp



object SettingsSize {

    val small2 = 20.dp

    val medium3 = 40.dp

}

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

0 → 100644
+34 −0
Original line number Diff line number Diff line 
/*

 * Copyright (C) 2025 The Android Open Source Project

 *

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *      http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



package com.android.settingslib.spa.framework.theme



import androidx.compose.ui.unit.dp



object SettingsSpace {

    val extraSmall1 = 2.dp

    val extraSmall2 = 4.dp

    val extraSmall3 = 6.dp

    val extraSmall4 = 8.dp

    val extraSmall5 = 10.dp

    val extraSmall6 = 12.dp

    val extraSmall7 = 14.dp



    val small1 = 16.dp

    val small2 = 18.dp

    val small3 = 20.dp

    val small4 = 24.dp

}

packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/banner/SettingsBanner.kt

+4 −4
Original line number Diff line number Diff line
@@ -53,8 +53,8 @@ import androidx.compose.ui.unit.dp 
import com.android.settingslib.spa.debug.UiModePreviews

import com.android.settingslib.spa.framework.compose.contentDescription

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

import com.android.settingslib.spa.framework.theme.SettingsShape.CornerExtraLarge

import com.android.settingslib.spa.framework.theme.SettingsShape.CornerExtraSmall

import com.android.settingslib.spa.framework.theme.SettingsShape.CornerExtraLarge1

import com.android.settingslib.spa.framework.theme.SettingsShape.CornerExtraSmall2

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

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

import com.android.settingslib.spa.framework.theme.toSemiBoldWeight
@@ -64,7 +64,7 @@ import com.android.settingslib.spa.widget.ui.SettingsTitle 
@Composable

fun SettingsBanner(content: @Composable ColumnScope.() -> Unit) {

    Card(

        shape = CornerExtraLarge,

        shape = CornerExtraLarge1,

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

        modifier =

            Modifier.fillMaxWidth()
@@ -82,7 +82,7 @@ fun SettingsBannerContent( 
    content: @Composable ColumnScope.() -> Unit,

) {

    Card(

        shape = if (isSpaExpressiveEnabled) CornerExtraLarge else CornerExtraSmall,

        shape = if (isSpaExpressiveEnabled) CornerExtraLarge1 else CornerExtraSmall2,

        colors =

            CardDefaults.cardColors(

                containerColor = containerColor.takeOrElse { MaterialTheme.colorScheme.surface }