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

Commit 96452180 authored by burakov's avatar burakov
Browse files

[Dual Shade] Quick settings UI fixes: 

1) Show the regular status bar, without a large clock (expanded header).
2) Do not constrain the QS shade height.
3) Do not draw an addition outline around the brightness slider.
4) Scroll the brightness slider together with the tiles grid.
5) Fix some paddings.

Fix: 384903506
Test: Manually tested by opening the quick settings shade on a folded
and unfolded device.
Flag: com.android.systemui.dual_shade

Change-Id: I34475cab386d88f43ef6e8b4316b216c1a26ca99
parent cde52311

packages/SystemUI/compose/features/src/com/android/systemui/qs/ui/composable/QuickSettingsShadeOverlay.kt

+42 −40
Original line number Diff line number Diff line
@@ -27,17 +27,17 @@ import androidx.compose.foundation.layout.Column 
import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.requiredHeightIn

import androidx.compose.foundation.layout.requiredHeight

import androidx.compose.foundation.rememberScrollState

import androidx.compose.foundation.verticalScroll

import androidx.compose.runtime.Composable

import androidx.compose.runtime.getValue

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.unit.dp

import androidx.lifecycle.compose.collectAsStateWithLifecycle

import com.android.compose.animation.scene.ContentScope

import com.android.compose.animation.scene.SceneScope

import com.android.compose.animation.scene.UserAction

import com.android.compose.animation.scene.UserActionResult

import com.android.systemui.battery.BatteryMeterViewController
@@ -46,20 +46,18 @@ import com.android.systemui.compose.modifiers.sysuiResTag 
import com.android.systemui.dagger.SysUISingleton

import com.android.systemui.lifecycle.rememberViewModel

import com.android.systemui.notifications.ui.composable.SnoozeableHeadsUpNotificationSpace

import com.android.systemui.plugins.qs.TileDetailsViewModel

import com.android.systemui.qs.composefragment.ui.GridAnchor

import com.android.systemui.qs.flags.QsDetailedView

import com.android.systemui.qs.panels.ui.compose.EditMode

import com.android.systemui.qs.panels.ui.compose.TileDetails

import com.android.systemui.qs.panels.ui.compose.TileGrid

import com.android.systemui.qs.panels.ui.compose.toolbar.Toolbar

import com.android.systemui.qs.ui.composable.QuickSettingsShade.Dimensions.GridMaxHeight

import com.android.systemui.qs.ui.viewmodel.QuickSettingsContainerViewModel

import com.android.systemui.qs.ui.viewmodel.QuickSettingsShadeOverlayActionsViewModel

import com.android.systemui.qs.ui.viewmodel.QuickSettingsShadeOverlayContentViewModel

import com.android.systemui.scene.shared.model.Overlays

import com.android.systemui.scene.ui.composable.Overlay

import com.android.systemui.shade.ui.composable.ExpandedShadeHeader

import com.android.systemui.shade.ui.composable.CollapsedShadeHeader

import com.android.systemui.shade.ui.composable.OverlayShade

import com.android.systemui.statusbar.notification.stack.ui.view.NotificationScrollView

import com.android.systemui.statusbar.notification.stack.ui.viewmodel.NotificationsPlaceholderViewModel
@@ -105,12 +103,11 @@ constructor( 
            onScrimClicked = viewModel::onScrimClicked,

        ) {

            Column {

                ExpandedShadeHeader(

                CollapsedShadeHeader(

                    viewModelFactory = viewModel.shadeHeaderViewModelFactory,

                    createTintedIconManager = tintedIconManagerFactory::create,

                    createBatteryMeterViewController = batteryMeterViewControllerFactory::create,

                    statusBarIconController = statusBarIconController,

                    modifier = Modifier.padding(QuickSettingsShade.Dimensions.Padding),

                )



                ShadeBody(viewModel = viewModel.quickSettingsContainerViewModel)
@@ -127,7 +124,7 @@ constructor( 
    }

}



// A sealed interface to represent the possible states of the `ShadeBody`

// The possible states of the `ShadeBody`.

sealed interface ShadeBodyState {

    data object Editing : ShadeBodyState
@@ -136,23 +133,19 @@ sealed interface ShadeBodyState { 
    data object Default : ShadeBodyState

}



// Function to map the current state of the `ShadeBody`

fun checkQsState(isEditing: Boolean, tileDetails: TileDetailsViewModel?): ShadeBodyState {

    if (isEditing) {

        return ShadeBodyState.Editing

    } else if (tileDetails != null && QsDetailedView.isEnabled) {

        return ShadeBodyState.TileDetails

    }

    return ShadeBodyState.Default

}



@Composable

fun SceneScope.ShadeBody(viewModel: QuickSettingsContainerViewModel) {

fun ContentScope.ShadeBody(viewModel: QuickSettingsContainerViewModel) {

    val isEditing by viewModel.editModeViewModel.isEditing.collectAsStateWithLifecycle()

    val tileDetails = viewModel.detailsViewModel.activeTileDetails

    val tileDetails =

        if (QsDetailedView.isEnabled) viewModel.detailsViewModel.activeTileDetails else null



    AnimatedContent(

        targetState = checkQsState(isEditing, tileDetails),

        targetState =

            when {

                isEditing -> ShadeBodyState.Editing

                tileDetails != null -> ShadeBodyState.TileDetails

                else -> ShadeBodyState.Default

            },

        transitionSpec = { fadeIn(tween(500)) togetherWith fadeOut(tween(500)) },

    ) { state ->

        when (state) {
@@ -178,34 +171,43 @@ fun SceneScope.ShadeBody(viewModel: QuickSettingsContainerViewModel) { 


/** Column containing Brightness and QS tiles. */

@Composable

fun SceneScope.QuickSettingsLayout(

fun ContentScope.QuickSettingsLayout(

    viewModel: QuickSettingsContainerViewModel,

    modifier: Modifier = Modifier,

) {

    Column(

        verticalArrangement = Arrangement.spacedBy(QuickSettingsShade.Dimensions.Padding),

        horizontalAlignment = Alignment.CenterHorizontally,

        modifier =

            modifier

                .fillMaxWidth()

        modifier = modifier

            .padding(

                start = QuickSettingsShade.Dimensions.Padding,

                end = QuickSettingsShade.Dimensions.Padding,

                    bottom = QuickSettingsShade.Dimensions.Padding / 2,

                bottom = QuickSettingsShade.Dimensions.Padding,

            ),

    ) {

        Toolbar(viewModel.toolbarViewModelFactory)

        Toolbar(

            modifier =

                Modifier.fillMaxWidth().requiredHeight(QuickSettingsShade.Dimensions.ToolbarHeight),

            toolbarViewModelFactory = viewModel.toolbarViewModelFactory,

        )

        Column(

            verticalArrangement = Arrangement.spacedBy(QuickSettingsShade.Dimensions.Padding),

            modifier = Modifier.fillMaxWidth().verticalScroll(rememberScrollState()),

        ) {

            BrightnessSliderContainer(

                viewModel = viewModel.brightnessSliderViewModel,

                containerColor = Color.Transparent,

                modifier =

                Modifier.fillMaxWidth().height(QuickSettingsShade.Dimensions.BrightnessSliderHeight),

                    Modifier.fillMaxWidth()

                        .height(QuickSettingsShade.Dimensions.BrightnessSliderHeight),

            )

        Box(

            modifier =

                Modifier.requiredHeightIn(max = GridMaxHeight).verticalScroll(rememberScrollState())

        ) {

            Box {

                GridAnchor()

            TileGrid(viewModel = viewModel.tileGridViewModel, modifier = Modifier.fillMaxWidth())

                TileGrid(

                    viewModel = viewModel.tileGridViewModel,

                    modifier = Modifier.fillMaxWidth(),

                )

            }

        }

    }

}
@@ -214,7 +216,7 @@ object QuickSettingsShade { 


    object Dimensions {

        val Padding = 16.dp

        val ToolbarHeight = 48.dp

        val BrightnessSliderHeight = 64.dp

        val GridMaxHeight = 420.dp

    }

}

packages/SystemUI/src/com/android/systemui/qs/composefragment/ui/GridAnchor.kt

+2 −2
Original line number Diff line number Diff line
@@ -19,7 +19,7 @@ package com.android.systemui.qs.composefragment.ui 
import androidx.compose.foundation.layout.Spacer

import androidx.compose.runtime.Composable

import androidx.compose.ui.Modifier

import com.android.compose.animation.scene.SceneScope

import com.android.compose.animation.scene.ContentScope

import com.android.systemui.qs.shared.ui.ElementKeys



/**
@@ -27,7 +27,7 @@ import com.android.systemui.qs.shared.ui.ElementKeys 
 * able to have relative anchor translation of elements that appear in QS.

 */

@Composable

fun SceneScope.GridAnchor(modifier: Modifier = Modifier) {

fun ContentScope.GridAnchor(modifier: Modifier = Modifier) {

    // The size of this anchor does not matter, as the tiles don't change size on expansion.

    Spacer(modifier.element(ElementKeys.GridAnchor))

}

packages/SystemUI/src/com/android/systemui/qs/panels/ui/compose/toolbar/Toolbar.kt

+1 −7
Original line number Diff line number Diff line
@@ -18,12 +18,9 @@ package com.android.systemui.qs.panels.ui.compose.toolbar 


import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.Spacer

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.requiredHeight

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.compose.modifiers.sysuiResTag

import com.android.systemui.lifecycle.rememberViewModel

import com.android.systemui.qs.footer.ui.compose.IconButton
@@ -33,10 +30,7 @@ import com.android.systemui.qs.panels.ui.viewmodel.toolbar.ToolbarViewModel 
fun Toolbar(toolbarViewModelFactory: ToolbarViewModel.Factory, modifier: Modifier = Modifier) {

    val viewModel = rememberViewModel("Toolbar") { toolbarViewModelFactory.create() }



    Row(

        modifier = modifier.fillMaxWidth().requiredHeight(48.dp),

        verticalAlignment = Alignment.CenterVertically,

    ) {

    Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {

        viewModel.userSwitcherViewModel?.let {

            IconButton(it, Modifier.sysuiResTag("multi_user_switch"))

        }