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

Commit 686aa7b3 authored by Anton Potapov's avatar Anton Potapov
Browse files

Improve panel appearance with max display and font scale 

 - add cutout padding to the panel so it doesn't get under it;
 - marquee texts for when it doesn't fit the screen;
 - scroll the panel content when it doesn't fit the screen;
 - allow buttons to grow to fix upscaled text;

Flag: aconfig new_volume_panel STAGING
Test: manual on phone with different display and text scale
Fixes: 326069811
Change-Id: I05eccd3d22408d3d670faa7060569adc67b834f4
parent 91b5d8c4

packages/SystemUI/compose/core/src/com/android/compose/PlatformSlider.kt

+4 −1
Original line number Diff line number Diff line
@@ -152,7 +152,10 @@ fun PlatformSlider( 
                        modifier =

                            Modifier.fillMaxHeight()

                                .weight(1f)

                                .padding(start = { paddingStart.roundToPx() }),

                                .padding(

                                    start = { paddingStart.roundToPx() },

                                    end = { sliderHeight.roundToPx() / 2 },

                                ),

                        contentAlignment = Alignment.CenterStart,

                    ) {

                        labelComposable(isDragging)

packages/SystemUI/compose/features/src/com/android/systemui/volume/panel/component/bottombar/ui/BottomBarComponent.kt

+7 −7
Original line number Diff line number Diff line
@@ -19,17 +19,17 @@ package com.android.systemui.volume.panel.component.bottombar.ui 
import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.heightIn

import androidx.compose.material3.Button

import androidx.compose.material3.ButtonDefaults

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.OutlinedButton

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.res.stringResource

import androidx.compose.ui.unit.dp

import com.android.compose.PlatformButton

import com.android.compose.PlatformOutlinedButton

import com.android.systemui.res.R

import com.android.systemui.volume.panel.component.bottombar.ui.viewmodel.BottomBarViewModel

import com.android.systemui.volume.panel.dagger.scope.VolumePanelScope
@@ -47,11 +47,11 @@ constructor( 
    @Composable

    override fun VolumePanelComposeScope.Content(modifier: Modifier) {

        Row(

            modifier = modifier.height(if (isLargeScreen) 54.dp else 48.dp).fillMaxWidth(),

            modifier = modifier.heightIn(min = if (isLargeScreen) 54.dp else 48.dp).fillMaxWidth(),

            horizontalArrangement = Arrangement.SpaceBetween,

            verticalAlignment = Alignment.CenterVertically,

        ) {

            PlatformOutlinedButton(

            OutlinedButton(

                onClick = viewModel::onSettingsClicked,

                colors =

                    ButtonDefaults.outlinedButtonColors(
@@ -60,8 +60,8 @@ constructor( 
            ) {

                Text(text = stringResource(R.string.volume_panel_dialog_settings_button))

            }

            PlatformButton(onClick = viewModel::onDoneClicked) {

                Text(text = stringResource(R.string.inline_done_button))

            Button(onClick = viewModel::onDoneClicked) {

                Text(stringResource(R.string.inline_done_button))

            }

        }

    }

packages/SystemUI/compose/features/src/com/android/systemui/volume/panel/component/mediaoutput/ui/composable/MediaOutputComponent.kt

+8 −11
Original line number Diff line number Diff line
@@ -27,6 +27,7 @@ import androidx.compose.animation.scaleOut 
import androidx.compose.animation.slideInVertically

import androidx.compose.animation.slideOutVertically

import androidx.compose.animation.togetherWith

import androidx.compose.foundation.basicMarquee

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column
@@ -46,7 +47,6 @@ import androidx.compose.runtime.collectAsState 
import androidx.compose.runtime.getValue

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

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

import androidx.compose.ui.unit.dp

import com.android.compose.animation.Expandable

import com.android.systemui.common.ui.compose.Icon
@@ -78,8 +78,8 @@ constructor( 
            color = MaterialTheme.colorScheme.surface,

            shape = RoundedCornerShape(28.dp),

            onClick = { viewModel.onBarClick(it) },

        ) {

            Row {

        ) { _ ->

            Row(verticalAlignment = Alignment.CenterVertically) {

                connectedDeviceViewModel?.let { ConnectedDeviceText(it) }



                deviceIconViewModel?.let { ConnectedDeviceIcon(it) }
@@ -90,26 +90,23 @@ constructor( 
    @Composable

    private fun RowScope.ConnectedDeviceText(connectedDeviceViewModel: ConnectedDeviceViewModel) {

        Column(

            modifier =

                Modifier.weight(1f)

                    .padding(start = 24.dp, top = 20.dp, bottom = 20.dp)

                    .fillMaxHeight(),

            modifier = Modifier.weight(1f).padding(start = 24.dp),

            verticalArrangement = Arrangement.spacedBy(4.dp),

        ) {

            Text(

                connectedDeviceViewModel.label.toString(),

                modifier = Modifier.basicMarquee(),

                text = connectedDeviceViewModel.label.toString(),

                style = MaterialTheme.typography.labelMedium,

                color = MaterialTheme.colorScheme.onSurfaceVariant,

                maxLines = 1,

                overflow = TextOverflow.Ellipsis,

            )

            connectedDeviceViewModel.deviceName?.let {

                Text(

                    it.toString(),

                    modifier = Modifier.basicMarquee(),

                    text = it.toString(),

                    style = MaterialTheme.typography.titleMedium,

                    color = MaterialTheme.colorScheme.onSurface,

                    maxLines = 1,

                    overflow = TextOverflow.Ellipsis,

                )

            }

        }

packages/SystemUI/compose/features/src/com/android/systemui/volume/panel/component/volume/ui/composable/ColumnVolumeSliders.kt

+1 −3
Original line number Diff line number Diff line
@@ -36,8 +36,6 @@ import androidx.compose.foundation.layout.Row 
import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.rememberScrollState

import androidx.compose.foundation.verticalScroll

import androidx.compose.material3.Icon

import androidx.compose.material3.IconButton

import androidx.compose.material3.IconButtonDefaults
@@ -70,7 +68,7 @@ fun ColumnVolumeSliders( 
    require(viewModels.isNotEmpty())

    var isExpanded: Boolean by remember(isExpandable) { mutableStateOf(!isExpandable) }

    val transition = updateTransition(isExpanded, label = "CollapsableSliders")

    Column(modifier = modifier.verticalScroll(rememberScrollState())) {

    Column(modifier = modifier) {

        Row(

            modifier = Modifier.fillMaxWidth(),

            horizontalArrangement = Arrangement.spacedBy(8.dp),

packages/SystemUI/compose/features/src/com/android/systemui/volume/panel/component/volume/ui/composable/VolumeSlider.kt

+13 −2
Original line number Diff line number Diff line
@@ -20,6 +20,7 @@ import androidx.compose.animation.AnimatedVisibility 
import androidx.compose.animation.animateContentSize

import androidx.compose.animation.expandVertically

import androidx.compose.animation.shrinkVertically

import androidx.compose.foundation.basicMarquee

import androidx.compose.foundation.layout.Column

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Text
@@ -59,7 +60,12 @@ fun VolumeSlider( 
        colors = sliderColors,

        label = {

            Column(modifier = Modifier.animateContentSize()) {

                Text(state.label, style = MaterialTheme.typography.titleMedium)

                Text(

                    modifier = Modifier.basicMarquee(),

                    text = state.label,

                    style = MaterialTheme.typography.titleMedium,

                    maxLines = 1,

                )



                state.disabledMessage?.let { message ->

                    AnimatedVisibility(
@@ -67,7 +73,12 @@ fun VolumeSlider( 
                        enter = expandVertically { it },

                        exit = shrinkVertically { it },

                    ) {

                        Text(text = message, style = MaterialTheme.typography.bodySmall)

                        Text(

                            modifier = Modifier.basicMarquee(),

                            text = message,

                            style = MaterialTheme.typography.bodySmall,

                            maxLines = 1,

                        )

                    }

                }

            }