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

Commit d8201006 authored by Fabián Kozynski's avatar Fabián Kozynski
Browse files

Implement new typography for QS surfaces 

Also:
* fix a string (Edit tiles)
* alignment of tiles text in Edit Mode and hyphenation

Test: manual
Fixes: 393610030
Fixes: 385277061
Flag: com.android.systemui.qs_ui_refactor_compose_fragment

Change-Id: I95ac036bd489b36f596c1293a5a30b5428f8e9e3
parent d7cd85e5

packages/SystemUI/compose/features/src/com/android/systemui/qs/footer/ui/compose/FooterActions.kt

+10 −4
Original line number Diff line number Diff line
@@ -38,6 +38,7 @@ import androidx.compose.foundation.layout.size 
import androidx.compose.foundation.shape.CircleShape

import androidx.compose.foundation.shape.CornerSize

import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi

import androidx.compose.material3.Icon

import androidx.compose.material3.LocalContentColor

import androidx.compose.material3.MaterialTheme
@@ -81,6 +82,7 @@ import com.android.systemui.common.shared.model.Icon 
import com.android.systemui.common.ui.compose.Icon

import com.android.systemui.compose.modifiers.sysuiResTag

import com.android.systemui.qs.flags.QSComposeFragment

import com.android.systemui.qs.flags.QsInCompose

import com.android.systemui.qs.footer.ui.viewmodel.FooterActionsButtonViewModel

import com.android.systemui.qs.footer.ui.viewmodel.FooterActionsForegroundServicesButtonViewModel

import com.android.systemui.qs.footer.ui.viewmodel.FooterActionsSecurityButtonViewModel
@@ -388,6 +390,7 @@ private fun NewChangesDot(modifier: Modifier = Modifier) { 
}



/** A larger button with an icon, some text and an optional dot (to indicate new changes). */

@OptIn(ExperimentalMaterial3ExpressiveApi::class)

@Composable

private fun TextButton(

    icon: Icon,
@@ -422,10 +425,13 @@ private fun TextButton( 
            Text(

                text,

                Modifier.weight(1f),

                style = MaterialTheme.typography.bodyMedium,

                // TODO(b/242040009): Remove this letter spacing. We should only use the M3 text

                // styles without modifying them.

                letterSpacing = 0.01.em,

                style =

                    if (QsInCompose.isEnabled) {

                        MaterialTheme.typography.labelLarge

                    } else {

                        MaterialTheme.typography.bodyMedium

                    },

                letterSpacing = if (QsInCompose.isEnabled) 0.em else 0.01.em,

                color = colorAttr(R.attr.onShadeInactiveVariant),

                maxLines = 1,

                overflow = TextOverflow.Ellipsis,

packages/SystemUI/res/values/strings.xml

+3 −0
Original line number Diff line number Diff line
@@ -2558,6 +2558,9 @@ 
    <!-- Button to edit the tile ordering of quick settings [CHAR LIMIT=60] -->

    <string name="qs_edit">Edit</string>



    <!-- Title for QS Edit mode screen [CHAR LIMIT=30] -->

    <string name="qs_edit_tiles">Edit tiles</string>



    <!-- SysUI Tuner: Options for how clock is displayed [CHAR LIMIT=NONE] -->

    <string name="tuner_time">Time</string>

packages/SystemUI/src/com/android/systemui/qs/panels/ui/compose/infinitegrid/CommonTile.kt

+4 −2
Original line number Diff line number Diff line
@@ -39,6 +39,7 @@ import androidx.compose.foundation.layout.size 
import androidx.compose.foundation.layout.width

import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.foundation.text.BasicText

import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi

import androidx.compose.material3.MaterialTheme

import androidx.compose.runtime.Composable

import androidx.compose.runtime.DisposableEffect
@@ -173,6 +174,7 @@ fun LargeTileContent( 
    }

}



@OptIn(ExperimentalMaterial3ExpressiveApi::class)

@Composable

fun LargeTileLabels(

    label: String,
@@ -188,7 +190,7 @@ fun LargeTileLabels( 
    Column(verticalArrangement = Arrangement.Center, modifier = modifier.fillMaxHeight()) {

        TileLabel(

            text = label,

            style = MaterialTheme.typography.labelLarge,

            style = MaterialTheme.typography.titleSmallEmphasized,

            color = { animatedLabelColor },

            isVisible = isVisible,

        )
@@ -196,7 +198,7 @@ fun LargeTileLabels( 
            TileLabel(

                secondaryLabel ?: "",

                color = { animatedSecondaryLabelColor },

                style = MaterialTheme.typography.bodyMedium,

                style = MaterialTheme.typography.labelMedium,

                isVisible = isVisible,

                modifier =

                    Modifier.thenIf(

packages/SystemUI/src/com/android/systemui/qs/panels/ui/compose/infinitegrid/EditTile.kt

+22 −6
Original line number Diff line number Diff line
@@ -65,6 +65,7 @@ import androidx.compose.material.icons.filled.Add 
import androidx.compose.material.icons.filled.Clear

import androidx.compose.material3.ButtonDefaults

import androidx.compose.material3.ExperimentalMaterial3Api

import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi

import androidx.compose.material3.Icon

import androidx.compose.material3.IconButton

import androidx.compose.material3.LocalContentColor
@@ -109,11 +110,11 @@ import androidx.compose.ui.semantics.contentDescription 
import androidx.compose.ui.semantics.customActions

import androidx.compose.ui.semantics.semantics

import androidx.compose.ui.semantics.stateDescription

import androidx.compose.ui.text.style.Hyphens

import androidx.compose.ui.text.style.TextAlign

import androidx.compose.ui.text.style.TextOverflow

import androidx.compose.ui.unit.Dp

import androidx.compose.ui.unit.dp

import androidx.compose.ui.unit.sp

import androidx.compose.ui.util.fastMap

import com.android.compose.gesture.effect.rememberOffsetOverscrollEffectFactory

import com.android.compose.modifiers.height
@@ -165,7 +166,7 @@ import kotlinx.coroutines.launch 


object TileType



@OptIn(ExperimentalMaterial3Api::class)

@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)

@Composable

private fun EditModeTopBar(onStopEditing: () -> Unit, onReset: (() -> Unit)?) {

    val primaryContainerColor = MaterialTheme.colorScheme.primaryContainer
@@ -177,7 +178,8 @@ private fun EditModeTopBar(onStopEditing: () -> Unit, onReset: (() -> Unit)?) { 
            ),

        title = {

            Text(

                text = stringResource(id = R.string.qs_edit),

                text = stringResource(id = R.string.qs_edit_tiles),

                style = MaterialTheme.typography.titleLargeEmphasized,

                modifier = Modifier.padding(start = 24.dp),

            )

        },
@@ -204,7 +206,10 @@ private fun EditModeTopBar(onStopEditing: () -> Unit, onReset: (() -> Unit)?) { 
                            contentColor = MaterialTheme.colorScheme.onPrimary,

                        ),

                ) {

                    Text(stringResource(id = com.android.internal.R.string.reset))

                    Text(

                        text = stringResource(id = com.android.internal.R.string.reset),

                        style = MaterialTheme.typography.labelLarge,

                    )

                }

            }

        },
@@ -212,6 +217,7 @@ private fun EditModeTopBar(onStopEditing: () -> Unit, onReset: (() -> Unit)?) { 
    )

}



@OptIn(ExperimentalMaterial3ExpressiveApi::class)

@Composable

fun DefaultEditTileGrid(

    listState: EditTileListState,
@@ -283,7 +289,9 @@ fun DefaultEditTileGrid( 
                                }

                            }

                        } else {

                            Text(text = stringResource(id = R.string.drag_to_rearrange_tiles))

                            EditGridCenteredText(

                                text = stringResource(id = R.string.drag_to_rearrange_tiles)

                            )

                        }

                    }

                }
@@ -400,6 +408,11 @@ private fun EditGridHeader( 
    }

}



@Composable

private fun EditGridCenteredText(text: String, modifier: Modifier = Modifier) {

    Text(text = text, style = MaterialTheme.typography.titleSmall, modifier = modifier)

}



@Composable

private fun RemoveTileTarget(onClick: () -> Unit) {

    Row(
@@ -486,6 +499,7 @@ private fun CurrentTilesGrid( 
    }

}



@OptIn(ExperimentalMaterial3ExpressiveApi::class)

@Composable

private fun AvailableTileGrid(

    tiles: List<AvailableTileGridCell>,
@@ -524,7 +538,7 @@ private fun AvailableTileGrid( 
                ) {

                    Text(

                        text = category.label.load() ?: "",

                        fontSize = 20.sp,

                        style = MaterialTheme.typography.titleMediumEmphasized,

                        color = MaterialTheme.colorScheme.onSurface,

                        modifier = Modifier.fillMaxWidth().padding(start = 8.dp, bottom = 16.dp),

                    )
@@ -737,6 +751,7 @@ private fun TileGridCell( 
    }

}



@OptIn(ExperimentalMaterial3ExpressiveApi::class)

@Composable

private fun AvailableTileGridCell(

    cell: AvailableTileGridCell,
@@ -803,6 +818,7 @@ private fun AvailableTileGridCell( 
                color = colors.label,

                overflow = TextOverflow.Ellipsis,

                textAlign = TextAlign.Center,

                style = MaterialTheme.typography.labelMedium.copy(hyphens = Hyphens.Auto),

                modifier = Modifier.align(Alignment.TopCenter),

            )

        }