Merge "Implement new typography for QS surfaces" into main (ef4b4651) · Commits · e / os / android_frameworks_base

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
		@@ -2560,6 +2560,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),
		)
		}