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

Commit fb8acc99 authored by Danny Wang's avatar Danny Wang
Browse files

Screen Sharing: Update the screen sharing selector UI 

screencast: http://go/scrcast/NjAyOTU2NTc3OTUwOTI0OHxmMmM1MjkzYy1lNg

BUG: 440967325
Test: manual
Flag: com.android.systemui.large_screen_sharing
Change-Id: I07ebd3e0efd009d9705d247b71d97033e7c27519
parent c18ef2fd

packages/SystemUI/src/com/android/systemui/screencapture/sharescreen/largescreen/ui/compose/PreShareUI.kt

+3 −3
Original line number Diff line number Diff line
@@ -18,7 +18,7 @@ package com.android.systemui.screencapture.sharescreen.largescreen.ui.compose 


import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.layout.width

import androidx.compose.runtime.Composable

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier
@@ -37,9 +37,9 @@ fun PreShareUI( 
    recentTaskViewModelFactory: RecentTaskViewModel.Factory,

) {

    Column(

        verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.Top),

        verticalArrangement = Arrangement.spacedBy(16.dp),

        horizontalAlignment = Alignment.CenterHorizontally,

        modifier = Modifier.size(800.dp, 600.dp),

        modifier = Modifier.width(560.dp),

    ) {

        PreShareToolbar(

            preShareToolbarViewModel = preShareToolbarViewModel,

packages/SystemUI/src/com/android/systemui/screencapture/sharescreen/largescreen/ui/compose/ShareContentList.kt

+32 −26
Original line number Diff line number Diff line
@@ -19,9 +19,9 @@ package com.android.systemui.screencapture.sharescreen.largescreen.ui.compose 
import androidx.compose.foundation.Image

import androidx.compose.foundation.background

import androidx.compose.foundation.clickable

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.Spacer

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size
@@ -61,8 +61,12 @@ fun ShareContentList( 
    selectedRecentTaskViewModel: RecentTaskViewModel?,

) {

    val recentTasks by viewModel.recentTasks.collectAsStateWithLifecycle(initialValue = null)



    LazyColumn(modifier = modifier.height(120.dp).width(148.dp)) {

    Surface(

        shape = RoundedCornerShape(20.dp),

        color = MaterialTheme.colorScheme.surfaceBright,

        modifier = modifier.height(224.dp).width(286.dp),

    ) {

        LazyColumn(verticalArrangement = Arrangement.spacedBy(2.dp)) {

            // Use the real list of recent tasks, handling the nullable case.

            recentTasks?.let { tasks ->

                items(items = tasks) { task ->
@@ -85,6 +89,7 @@ fun ShareContentList( 
            }

        }

    }

}



/**

 * A composable that displays a single item in the share content list.
@@ -105,19 +110,21 @@ private fun SelectorItem( 
    val label = currentRecentTaskViewModel.label?.getOrNull()



    Surface(

        shape = RoundedCornerShape(20.dp),

        shape = RoundedCornerShape(4.dp),

        color =

            if (isSelected) MaterialTheme.colorScheme.primary

            else MaterialTheme.colorScheme.surfaceContainer,

        modifier = Modifier.width(148.dp),

    ) {

        Row(

            modifier = Modifier.padding(12.dp).clickable(onClick = onItemSelected),

            modifier =

                Modifier.padding(start = 8.dp, end = 12.dp, top = 8.dp, bottom = 8.dp)

                    .clickable(onClick = onItemSelected),

            verticalAlignment = Alignment.CenterVertically,

            horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start),

        ) {

            Box(

                modifier =

                    Modifier.size(16.dp)

                    Modifier.size(24.dp)

                        .clip(CircleShape)

                        .background(MaterialTheme.colorScheme.surfaceVariant)

            ) {
@@ -125,7 +132,6 @@ private fun SelectorItem( 
                    Image(bitmap = icon.asImageBitmap(), contentDescription = label?.toString())

                }

            }

            Spacer(modifier = Modifier.width(8.dp))

            Text(

                text = label?.toString() ?: "Title",

                style = MaterialTheme.typography.labelMedium,

packages/SystemUI/src/com/android/systemui/screencapture/sharescreen/largescreen/ui/compose/ShareContentSelector.kt

+21 −13
Original line number Diff line number Diff line
@@ -22,7 +22,6 @@ 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.foundation.layout.Spacer

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding
@@ -52,21 +51,31 @@ fun ShareContentSelector( 
) {

    val selectedRecentTaskViewModel = shareContentListViewModel.selectedRecentTaskViewModel



    Surface(color = MaterialTheme.colorScheme.surfaceBright, shape = RoundedCornerShape(28.dp)) {

        Column(modifier = Modifier.padding(8.dp)) {

            Text(text = "Share an app", modifier = Modifier.padding(12.dp, 8.dp).fillMaxWidth())

            Spacer(modifier = Modifier.height(16.dp))

            Row(modifier = Modifier.padding(8.dp)) {

    Surface(color = MaterialTheme.colorScheme.surfaceBright, shape = RoundedCornerShape(20.dp)) {

        Column(

            modifier =

                Modifier.width(560.dp)

                    .padding(start = 10.dp, top = 14.dp, end = 10.dp, bottom = 2.dp),

            verticalArrangement = Arrangement.spacedBy(12.dp),

        ) {

            Text(

                text = "Share an app",

                modifier = Modifier.padding(start = 8.dp, end = 8.dp).height(24.dp).fillMaxWidth(),

                style = MaterialTheme.typography.titleMedium,

            )

            Row(

                horizontalArrangement = Arrangement.spacedBy(16.dp),

                modifier = Modifier.padding(start = 4.dp, end = 4.dp),

            ) {

                // The sharing content item list.

                ShareContentList(

                    viewModel = shareContentListViewModel,

                    recentTaskViewModelFactory = recentTaskViewModelFactory,

                    selectedRecentTaskViewModel = selectedRecentTaskViewModel,

                )

                Spacer(modifier = Modifier.width(10.dp))

                ItemPreview(

                    preview = selectedRecentTaskViewModel?.thumbnail?.getOrNull()?.asImageBitmap(),

                    modifier = Modifier.weight(1f).height(120.dp),

                    modifier = Modifier.weight(1f).height(140.dp),

                )

            }

            DisclaimerText()
@@ -80,7 +89,7 @@ private fun ItemPreview(preview: ImageBitmap?, modifier: Modifier = Modifier) { 
    Box(

        modifier =

            modifier

                .clip(RoundedCornerShape(16.dp))

                .clip(RoundedCornerShape(20.dp))

                .background(MaterialTheme.colorScheme.surfaceVariant),

        contentAlignment = Alignment.Center,

    ) {
@@ -102,8 +111,8 @@ private fun DisclaimerText() { 
            "Disclaimer When you’re sharing your entire screen, anything shown on your screen" +

                " is recorded. So be careful with things like passwords, payment details," +

                " messages, photos, and audio & video.",

        style = MaterialTheme.typography.bodySmall,

        modifier = Modifier.padding(12.dp, 8.dp).fillMaxWidth(),

        style = MaterialTheme.typography.labelMedium,

        modifier = Modifier.padding(start = 8.dp, end = 8.dp).fillMaxWidth(),

    )

}
@@ -115,7 +124,7 @@ private fun AudioSwitch( 
    Row(

        verticalAlignment = Alignment.CenterVertically,

        horizontalArrangement = Arrangement.SpaceBetween,

        modifier = Modifier.padding(12.dp, 0.dp).fillMaxWidth(),

        modifier = Modifier.padding(4.dp, bottom = 12.dp).height(24.dp).fillMaxWidth(),

    ) {

        Text(text = "Share audio", style = MaterialTheme.typography.labelMedium)

        Switch(
@@ -123,7 +132,6 @@ private fun AudioSwitch( 
            onCheckedChange = {

                audioSwitchViewModel.audioSwitchChecked = !audioSwitchViewModel.audioSwitchChecked

            },

            modifier = Modifier.height(24.dp),

            enabled = selectedRecentTaskViewModel != null,

        )

    }