[CredManUi] Style fixes

1. System bar colors to the spec described in the bug
2. Scrim color to lighter

Bug: 271478093
Test: manual (see bug for screenshot)
Change-Id: I424378881481909f4ae103cf518ce48e91806e20
This commit is contained in:
Helen Qin
2023-03-02 22:42:51 +00:00
parent f285d70f0c
commit 00b417eaec
7 changed files with 56 additions and 10 deletions

View File

@@ -20,6 +20,7 @@ android_app {
},
static_libs: [
"PlatformComposeCore",
"androidx.activity_activity-compose",
"androidx.appcompat_appcompat",
"androidx.compose.animation_animation-core",

View File

@@ -5,7 +5,5 @@
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:navigationBarColor">@android:color/transparent</item>
</style>
</resources>

View File

@@ -306,10 +306,6 @@ fun rememberModalBottomSheetState(
* @param sheetContentColor The preferred content color provided by the bottom sheet to its
* children. Defaults to the matching content color for [sheetBackgroundColor], or if that is not
* a color from the theme, this will keep the same content color set above the bottom sheet.
* @param scrimColor The color of the scrim that is applied to the rest of the screen when the
* bottom sheet is visible. If the color passed is [Color.Unspecified], then a scrim will no
* longer be applied and the bottom sheet will not block interaction with the rest of the screen
* when visible.
* @param content The content of rest of the screen.
*/
@Composable
@@ -322,7 +318,6 @@ fun ModalBottomSheetLayout(
sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
sheetBackgroundColor: Color = MaterialTheme.colorScheme.surface,
sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
content: @Composable () -> Unit
) {
val scope = rememberCoroutineScope()
@@ -332,7 +327,7 @@ fun ModalBottomSheetLayout(
Box(Modifier.fillMaxSize()) {
content()
Scrim(
color = scrimColor,
color = ModalBottomSheetDefaults.scrimColor,
onDismiss = {
if (sheetState.confirmStateChange(Hidden)) {
scope.launch { sheetState.hide() }
@@ -505,5 +500,5 @@ object ModalBottomSheetDefaults {
*/
val scrimColor: Color
@Composable
get() = MaterialTheme.colorScheme.scrim
get() = MaterialTheme.colorScheme.scrim.copy(alpha = .32f)
}

View File

@@ -43,7 +43,6 @@ fun ModalBottomSheet(
modifier = Modifier.background(Color.Transparent),
sheetState = state,
sheetContent = sheetContent,
scrimColor = MaterialTheme.colorScheme.scrim.copy(alpha = 0.8f),
sheetShape = EntryShape.TopRoundedCorner,
) {}
LaunchedEffect(state.currentValue) {

View File

@@ -0,0 +1,42 @@
/*
* Copyright (C) 2023 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.android.credentialmanager.common.ui
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.android.compose.SystemUiController
import com.android.credentialmanager.common.material.ModalBottomSheetDefaults
@Composable
fun setTransparentSystemBarsColor(sysUiController: SystemUiController) {
sysUiController.setSystemBarsColor(color = Color.Transparent, darkIcons = false)
}
@Composable
fun setBottomSheetSystemBarsColor(sysUiController: SystemUiController) {
sysUiController.setStatusBarColor(
color = ModalBottomSheetDefaults.scrimColor,
darkIcons = false
)
sysUiController.setNavigationBarColor(
color = MaterialTheme.colorScheme.surfaceColorAtElevation(
ElevationTokens.Level1
),
darkIcons = false
)
}

View File

@@ -31,6 +31,7 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.core.graphics.drawable.toBitmap
import com.android.compose.rememberSystemUiController
import com.android.credentialmanager.CredentialSelectorViewModel
import com.android.credentialmanager.R
import com.android.credentialmanager.common.BaseEntry
@@ -51,6 +52,7 @@ import com.android.credentialmanager.common.ui.MoreOptionTopAppBar
import com.android.credentialmanager.common.ui.SheetContainerCard
import com.android.credentialmanager.common.ui.PasskeyBenefitRow
import com.android.credentialmanager.common.ui.HeadlineText
import com.android.credentialmanager.common.ui.setBottomSheetSystemBarsColor
@Composable
fun CreateCredentialScreen(
@@ -58,6 +60,8 @@ fun CreateCredentialScreen(
createCredentialUiState: CreateCredentialUiState,
providerActivityLauncher: ManagedActivityResultLauncher<IntentSenderRequest, ActivityResult>
) {
val sysUiController = rememberSystemUiController()
setBottomSheetSystemBarsColor(sysUiController)
ModalBottomSheet(
sheetContent = {
// Hide the sheet content as opposed to the whole bottom sheet to maintain the scrim

View File

@@ -39,6 +39,7 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.core.graphics.drawable.toBitmap
import com.android.compose.rememberSystemUiController
import com.android.credentialmanager.CredentialSelectorViewModel
import com.android.credentialmanager.R
import com.android.credentialmanager.common.BaseEntry
@@ -57,6 +58,8 @@ import com.android.credentialmanager.common.ui.SnackbarActionText
import com.android.credentialmanager.common.ui.HeadlineText
import com.android.credentialmanager.common.ui.CredentialListSectionHeader
import com.android.credentialmanager.common.ui.Snackbar
import com.android.credentialmanager.common.ui.setTransparentSystemBarsColor
import com.android.credentialmanager.common.ui.setBottomSheetSystemBarsColor
@Composable
fun GetCredentialScreen(
@@ -64,13 +67,16 @@ fun GetCredentialScreen(
getCredentialUiState: GetCredentialUiState,
providerActivityLauncher: ManagedActivityResultLauncher<IntentSenderRequest, ActivityResult>
) {
val sysUiController = rememberSystemUiController()
if (getCredentialUiState.currentScreenState == GetScreenState.REMOTE_ONLY) {
setTransparentSystemBarsColor(sysUiController)
RemoteCredentialSnackBarScreen(
onClick = viewModel::getFlowOnMoreOptionOnSnackBarSelected,
onCancel = viewModel::onUserCancel,
)
} else if (getCredentialUiState.currentScreenState
== GetScreenState.UNLOCKED_AUTH_ENTRIES_ONLY) {
setTransparentSystemBarsColor(sysUiController)
EmptyAuthEntrySnackBarScreen(
authenticationEntryList =
getCredentialUiState.providerDisplayInfo.authenticationEntryList,
@@ -78,6 +84,7 @@ fun GetCredentialScreen(
onLastLockedAuthEntryNotFound = viewModel::onLastLockedAuthEntryNotFoundError,
)
} else {
setBottomSheetSystemBarsColor(sysUiController)
ModalBottomSheet(
sheetContent = {
// Hide the sheet content as opposed to the whole bottom sheet to maintain the scrim