From 4ccb93216923b2a130f9be3177e33a235bbb6853 Mon Sep 17 00:00:00 2001 From: burakov Date: Fri, 14 Jul 2023 18:44:51 +0000 Subject: [PATCH] [flexiglass] Implementation of the Shade scene UI. This is an initial version that is pending final spec from UX. QS and Notifications will be implemented separately. Bug: 280887022 Test: manually verified on device, see screenshots attached to the bug. Change-Id: Ic187c5a0057f88334bfbcaff3a36694ac57e369a --- .../ui/composable/Notifications.kt | 26 +++++++++-- .../qs/footer/ui/compose/QuickSettings.kt | 26 +++++++++-- .../shade/ui/composable/ShadeScene.kt | 46 +++++++------------ 3 files changed, 63 insertions(+), 35 deletions(-) diff --git a/packages/SystemUI/compose/features/src/com/android/systemui/notifications/ui/composable/Notifications.kt b/packages/SystemUI/compose/features/src/com/android/systemui/notifications/ui/composable/Notifications.kt index ca91b8a21a810..38b751c9445da 100644 --- a/packages/SystemUI/compose/features/src/com/android/systemui/notifications/ui/composable/Notifications.kt +++ b/packages/SystemUI/compose/features/src/com/android/systemui/notifications/ui/composable/Notifications.kt @@ -17,15 +17,19 @@ package com.android.systemui.notifications.ui.composable +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.unit.dp @Composable @@ -34,10 +38,26 @@ fun Notifications( ) { // TODO(b/272779828): implement. Column( - modifier = modifier.fillMaxWidth().defaultMinSize(minHeight = 300.dp).padding(4.dp), + modifier = + modifier + .fillMaxWidth() + .defaultMinSize(minHeight = 300.dp) + .clip(RoundedCornerShape(32.dp)) + .background(MaterialTheme.colorScheme.surface) + .padding(16.dp), ) { - Text("Notifications", modifier = Modifier.align(Alignment.CenterHorizontally)) + Text( + text = "Notifications", + modifier = Modifier.align(Alignment.CenterHorizontally), + style = MaterialTheme.typography.titleLarge, + color = MaterialTheme.colorScheme.onSurface, + ) Spacer(modifier = Modifier.weight(1f)) - Text("Shelf", modifier = Modifier.align(Alignment.CenterHorizontally)) + Text( + text = "Shelf", + modifier = Modifier.align(Alignment.CenterHorizontally), + style = MaterialTheme.typography.titleSmall, + color = MaterialTheme.colorScheme.onSurface, + ) } } diff --git a/packages/SystemUI/compose/features/src/com/android/systemui/qs/footer/ui/compose/QuickSettings.kt b/packages/SystemUI/compose/features/src/com/android/systemui/qs/footer/ui/compose/QuickSettings.kt index 665d6dd0cfa23..1bb341c76e695 100644 --- a/packages/SystemUI/compose/features/src/com/android/systemui/qs/footer/ui/compose/QuickSettings.kt +++ b/packages/SystemUI/compose/features/src/com/android/systemui/qs/footer/ui/compose/QuickSettings.kt @@ -17,15 +17,19 @@ package com.android.systemui.qs.footer.ui.compose +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.unit.dp @Composable @@ -34,10 +38,26 @@ fun QuickSettings( ) { // TODO(b/272780058): implement. Column( - modifier = modifier.fillMaxWidth().defaultMinSize(minHeight = 300.dp).padding(4.dp), + modifier = + modifier + .fillMaxWidth() + .defaultMinSize(minHeight = 300.dp) + .clip(RoundedCornerShape(32.dp)) + .background(MaterialTheme.colorScheme.primary) + .padding(16.dp), ) { - Text("Quick settings", modifier = Modifier.align(Alignment.CenterHorizontally)) + Text( + text = "Quick settings", + modifier = Modifier.align(Alignment.CenterHorizontally), + style = MaterialTheme.typography.titleLarge, + color = MaterialTheme.colorScheme.onPrimary, + ) Spacer(modifier = Modifier.weight(1f)) - Text("QS footer actions", modifier = Modifier.align(Alignment.CenterHorizontally)) + Text( + text = "QS footer actions", + modifier = Modifier.align(Alignment.CenterHorizontally), + style = MaterialTheme.typography.titleSmall, + color = MaterialTheme.colorScheme.onPrimary, + ) } } diff --git a/packages/SystemUI/compose/features/src/com/android/systemui/shade/ui/composable/ShadeScene.kt b/packages/SystemUI/compose/features/src/com/android/systemui/shade/ui/composable/ShadeScene.kt index 20e175160aa6d..27358f53aaf28 100644 --- a/packages/SystemUI/compose/features/src/com/android/systemui/shade/ui/composable/ShadeScene.kt +++ b/packages/SystemUI/compose/features/src/com/android/systemui/shade/ui/composable/ShadeScene.kt @@ -16,18 +16,19 @@ package com.android.systemui.shade.ui.composable +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Row -import androidx.compose.material3.Button -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Text +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import com.android.systemui.dagger.qualifiers.Application +import com.android.systemui.notifications.ui.composable.Notifications +import com.android.systemui.qs.footer.ui.compose.QuickSettings import com.android.systemui.scene.shared.model.Direction import com.android.systemui.scene.shared.model.SceneKey import com.android.systemui.scene.shared.model.SceneModel @@ -62,12 +63,7 @@ class ShadeScene( override fun Content( containerName: String, modifier: Modifier, - ) { - ShadeScene( - viewModel = viewModel, - modifier = modifier, - ) - } + ) = ShadeScene(viewModel, modifier) private fun destinationScenes( up: SceneKey, @@ -84,23 +80,15 @@ private fun ShadeScene( viewModel: ShadeSceneViewModel, modifier: Modifier = Modifier, ) { - // TODO(b/280887022): implement the real UI. - - Box(modifier = modifier) { - Column( - horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier.align(Alignment.Center) - ) { - Text("Shade", style = MaterialTheme.typography.headlineMedium) - Row( - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Button( - onClick = { viewModel.onContentClicked() }, - ) { - Text("Open some content") - } - } - } + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(16.dp), + modifier = + Modifier.fillMaxSize() + .clickable(onClick = { viewModel.onContentClicked() }) + .padding(horizontal = 16.dp, vertical = 48.dp) + ) { + QuickSettings(modifier = modifier.height(160.dp)) + Notifications(modifier = modifier.weight(1f)) } }