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

Commit 9e01c904 authored by William Xiao's avatar William Xiao
Browse files

Fix hub empty state after hub layout changes 

With the hub layout expanded to 3 rows on mobile, the empty state CTA
tile was aligned at the top of the screen and also did not perform well
with display/font size turned up. This CL does some minimal adjustments
to make the UI acceptable for a11y purposes.

Bug: 431148916
Fixes: 431148916
Test: manual, see bug for before/after comparison
Flag: NONE small UI fix
Change-Id: I8d36cb41065dffed559d194d21b498223e69aea6
parent 89113ab1

packages/SystemUI/compose/features/src/com/android/systemui/communal/ui/compose/CommunalHub.kt

+80 −47
Original line number Diff line number Diff line
@@ -1127,6 +1127,7 @@ private fun BoxScope.CommunalHubLazyGrid( 
@Composable

private fun EmptyStateCta(contentPadding: PaddingValues, viewModel: BaseCommunalViewModel) {

    val colors = MaterialTheme.colorScheme

    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {

        Card(

            modifier = Modifier.height(hubDimensions.GridHeight).padding(contentPadding),

            colors =
@@ -1137,12 +1138,23 @@ private fun EmptyStateCta(contentPadding: PaddingValues, viewModel: BaseCommunal 
            shape = RoundedCornerShape(size = 80.adjustedDp),

        ) {

            Column(

            modifier = Modifier.fillMaxSize().padding(horizontal = 110.adjustedDp),

            verticalArrangement =

                Arrangement.spacedBy(Dimensions.Spacing, Alignment.CenterVertically),

                modifier =

                    Modifier.fillMaxSize().padding(horizontal = hubDimensions.emptyStatePadding),

                verticalArrangement = Arrangement.aligned(Alignment.CenterVertically),

                horizontalAlignment = Alignment.CenterHorizontally,

            ) {

                val titleForEmptyStateCTA = stringResource(R.string.title_for_empty_state_cta)

                val windowSizeCategory = WindowSizeUtils.getWindowSizeCategory(LocalContext.current)

                // On larger screens, allow the text and button to cluster together near the center.

                // On smaller screens, push the button to the bottom of the card for a nicer

                // appearance.

                val modifier =

                    if (windowSizeCategory == WindowSizeUtils.WindowSizeCategory.MOBILE_PORTRAIT) {

                        Modifier.weight(1f).fillMaxSize()

                    } else {

                        Modifier

                    }

                Box(modifier = modifier, contentAlignment = Alignment.Center) {

                    BasicText(

                        text = titleForEmptyStateCTA,

                        style =
@@ -1157,8 +1169,13 @@ private fun EmptyStateCta(contentPadding: PaddingValues, viewModel: BaseCommunal 
                                heading()

                            },

                    )

                }



            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {

                Row(

                    modifier =

                        Modifier.fillMaxWidth().wrapContentHeight().padding(vertical = 24.dp),

                    horizontalArrangement = Arrangement.Center,

                ) {

                    Button(

                        modifier = Modifier.height(56.dp),

                        colors =
@@ -1166,7 +1183,9 @@ private fun EmptyStateCta(contentPadding: PaddingValues, viewModel: BaseCommunal 
                                containerColor = colors.primaryContainer,

                                contentColor = colors.onPrimaryContainer,

                            ),

                    onClick = { viewModel.onOpenWidgetEditor(shouldOpenWidgetPickerOnStart = true) },

                        onClick = {

                            viewModel.onOpenWidgetEditor(shouldOpenWidgetPickerOnStart = true)

                        },

                    ) {

                        Icon(

                            imageVector = Icons.Default.Add,
@@ -1183,6 +1202,7 @@ private fun EmptyStateCta(contentPadding: PaddingValues, viewModel: BaseCommunal 
            }

        }

    }

}



/**

 * Toolbar that contains action buttons to
@@ -2182,6 +2202,19 @@ class Dimensions(val context: Context, val config: Configuration) { 
            }

        }



    val emptyStatePadding: Dp

        get() {

            return if (

                WindowSizeUtils.getWindowSizeCategory(context) == WindowSizeUtils.WindowSizeCategory.MOBILE_PORTRAIT

            ) {

                24.adjustedDp

            } else {

                // Use more padding on large displays to cluster the text near the middle of the

                // screen for readability.

                110.adjustedDp

            }

        }



    companion object {

        val CardHeightFull

            get() = 530.adjustedDp