diff options
13 files changed, 300 insertions, 136 deletions
diff --git a/packages/CredentialManager/wear/res/values/colors.xml b/packages/CredentialManager/wear/res/values/colors.xml new file mode 100644 index 000000000000..bf10bb3d7178 --- /dev/null +++ b/packages/CredentialManager/wear/res/values/colors.xml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + ~ Copyright (C) 2024 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. + --> + +<resources> + <color name="wear_material_almond">#FFFCF7EB</color> + <color name="wear_material_almond_dark">#FF262523</color> +</resources>
\ No newline at end of file diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/AccountRow.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/AccountRow.kt index 8b19e1b659d2..3088fed83c02 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/AccountRow.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/AccountRow.kt @@ -21,35 +21,25 @@ import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp -import androidx.wear.compose.material.MaterialTheme -import androidx.wear.compose.material.Text +import com.android.credentialmanager.common.ui.components.WearDisplayNameText +import com.android.credentialmanager.common.ui.components.WearUsernameText import com.google.android.horologist.compose.tools.WearPreview @Composable fun AccountRow( primaryText: String, secondaryText: String? = null, - modifier: Modifier = Modifier, ) { - Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) { - Text( + Column(modifier = Modifier.padding(bottom = 12.dp), + horizontalAlignment = Alignment.CenterHorizontally) { + WearDisplayNameText( text = primaryText, - color = Color(0xFFE6FF7B), - overflow = TextOverflow.Ellipsis, - maxLines = 1, - style = MaterialTheme.typography.title2 ) if (secondaryText != null) { - Text( + WearUsernameText( text = secondaryText, - modifier = Modifier.padding(top = 7.dp), - color = Color(0xFFCAC5BC), - overflow = TextOverflow.Ellipsis, - maxLines = 2, - style = MaterialTheme.typography.body1, + modifier = Modifier.padding(top = 8.dp) ) } } diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/CredentialsScreenChip.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/CredentialsScreenChip.kt index 8e5a8666621f..18c9f3102409 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/CredentialsScreenChip.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/CredentialsScreenChip.kt @@ -22,12 +22,9 @@ import androidx.compose.foundation.layout.BoxScope import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clipToBounds import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.wear.compose.material.Chip @@ -35,11 +32,13 @@ import androidx.core.graphics.drawable.toBitmap import androidx.wear.compose.material.ChipColors import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.colorResource +import androidx.compose.ui.text.style.TextAlign import androidx.wear.compose.material.ChipDefaults -import androidx.wear.compose.material.Text import com.android.credentialmanager.R +import com.android.credentialmanager.common.ui.components.WearButtonText +import com.android.credentialmanager.common.ui.components.WearSecondaryLabel import com.android.credentialmanager.model.get.AuthenticationEntryInfo -import com.android.credentialmanager.ui.components.CredentialsScreenChip.TOPPADDING /* Used as credential suggestion or user action chip. */ @Composable @@ -49,36 +48,62 @@ fun CredentialsScreenChip( secondaryLabel: String? = null, icon: Drawable? = null, isAuthenticationEntryLocked: Boolean = false, + textAlign: TextAlign = TextAlign.Center, modifier: Modifier = Modifier, - colors: ChipColors = ChipDefaults.secondaryChipColors(), + colors: ChipColors = ChipDefaults.secondaryChipColors() ) { + return CredentialsScreenChip( + onClick, + text = { + WearButtonText( + text = label, + textAlign = textAlign, + maxLines = if (secondaryLabel != null) 1 else 2 + ) + }, + secondaryLabel, + icon, + isAuthenticationEntryLocked, + modifier, + colors + ) +} + + + +/* Used as credential suggestion or user action chip. */ +@Composable +fun CredentialsScreenChip( + onClick: () -> Unit, + text: @Composable () -> Unit, + secondaryLabel: String? = null, + icon: Drawable? = null, + isAuthenticationEntryLocked: Boolean = false, + modifier: Modifier = Modifier, + colors: ChipColors = + ChipDefaults.chipColors(backgroundColor = colorResource(R.color.wear_material_almond)), + ) { val labelParam: (@Composable RowScope.() -> Unit) = { - Text( - text = label, - overflow = TextOverflow.Ellipsis, - maxLines = if (secondaryLabel != null) 1 else 2, - ) + text() } val secondaryLabelParam: (@Composable RowScope.() -> Unit)? = secondaryLabel?.let { { Row { - Text( + WearSecondaryLabel( text = secondaryLabel, - overflow = TextOverflow.Ellipsis, - maxLines = 1, ) if (isAuthenticationEntryLocked) - // TODO(b/324465527) change this to lock icon and correct size once figma mocks are - // updated + // TODO(b/324465527) change this to lock icon and correct size once figma mocks are + // updated Icon( bitmap = checkNotNull(icon?.toBitmap()?.asImageBitmap()), // Decorative purpose only. contentDescription = null, - modifier = Modifier.size(20.dp), + modifier = Modifier.size(10.dp), tint = Color.Unspecified ) } @@ -92,7 +117,7 @@ fun CredentialsScreenChip( bitmap = it, // Decorative purpose only. contentDescription = null, - modifier = Modifier.size(32.dp), + modifier = Modifier.size(24.dp), tint = Color.Unspecified ) } @@ -117,9 +142,6 @@ fun CredentialsScreenChipPreview() { onClick = { }, secondaryLabel = "beckett_bakery@gmail.com", icon = null, - modifier = Modifier - .clipToBounds() - .padding(top = 2.dp) ) } @@ -127,9 +149,8 @@ fun CredentialsScreenChipPreview() { fun SignInOptionsChip(onClick: () -> Unit) { CredentialsScreenChip( label = stringResource(R.string.dialog_sign_in_options_button), + textAlign = TextAlign.Start, onClick = onClick, - modifier = Modifier - .padding(top = TOPPADDING) ) } @@ -142,11 +163,16 @@ fun SignInOptionsChipPreview() { @Composable fun ContinueChip(onClick: () -> Unit) { CredentialsScreenChip( - label = stringResource(R.string.dialog_continue_button), onClick = onClick, - modifier = Modifier - .padding(top = TOPPADDING), - colors = ChipDefaults.primaryChipColors(), + text = { + WearButtonText( + text = stringResource(R.string.dialog_continue_button), + textAlign = TextAlign.Center, + color = colorResource(R.color.wear_material_almond_dark), + ) + }, + colors = + ChipDefaults.chipColors(backgroundColor = colorResource(R.color.wear_material_almond)), ) } @@ -161,21 +187,8 @@ fun DismissChip(onClick: () -> Unit) { CredentialsScreenChip( label = stringResource(R.string.dialog_dismiss_button), onClick = onClick, - modifier = Modifier - .padding(top = TOPPADDING), - ) -} - -@Composable -fun SignInOnPhoneChip(onClick: () -> Unit) { - CredentialsScreenChip( - label = stringResource(R.string.sign_in_on_phone_button), - onClick = onClick, - modifier = Modifier - .padding(top = TOPPADDING), ) } - @Composable fun LockedProviderChip( authenticationEntryInfo: AuthenticationEntryInfo, @@ -191,9 +204,9 @@ fun LockedProviderChip( label = authenticationEntryInfo.title, icon = authenticationEntryInfo.icon, secondaryLabel = secondaryLabel, + textAlign = TextAlign.Start, isAuthenticationEntryLocked = !authenticationEntryInfo.isUnlockedAndEmpty, onClick = onClick, - modifier = Modifier.padding(top = TOPPADDING), ) } @@ -203,7 +216,3 @@ fun DismissChipPreview() { DismissChip({}) } -private object CredentialsScreenChip { - val TOPPADDING = 8.dp -} - diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/PasswordRow.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/PasswordRow.kt index 97900b723bc3..62e1c8501d7a 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/PasswordRow.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/PasswordRow.kt @@ -21,33 +21,22 @@ import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp -import androidx.wear.compose.material.MaterialTheme -import androidx.wear.compose.material.Text +import com.android.credentialmanager.common.ui.components.WearDisplayNameText +import com.android.credentialmanager.common.ui.components.WearUsernameText import com.google.android.horologist.compose.tools.WearPreview @Composable fun PasswordRow( email: String, - modifier: Modifier = Modifier, ) { - Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) { - Text( + Column(modifier = Modifier.padding(bottom = 12.dp), + horizontalAlignment = Alignment.CenterHorizontally) { + WearDisplayNameText( text = email, - color = Color(0xFFE6FF7B), - overflow = TextOverflow.Ellipsis, - maxLines = 2, - style = MaterialTheme.typography.title2 ) - Text( - text = "••••••••••••••", - modifier = Modifier.padding(top = 7.dp), - color = Color(0xFFCAC5BC), - overflow = TextOverflow.Ellipsis, - maxLines = 1, - style = MaterialTheme.typography.body1, + WearUsernameText( + text = "••••••••••••••" ) } } diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/SignInHeader.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/SignInHeader.kt index 423662c30d6e..437a699abcee 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/SignInHeader.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/SignInHeader.kt @@ -18,49 +18,44 @@ package com.android.credentialmanager.ui.components import android.graphics.drawable.Drawable import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.size +import androidx.compose.material3.Icon import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.unit.dp import androidx.core.graphics.drawable.toBitmap -import androidx.wear.compose.material.Text -import androidx.compose.ui.graphics.Color -import androidx.compose.material3.Icon -import androidx.wear.compose.material.MaterialTheme as WearMaterialTheme -import androidx.compose.ui.text.style.TextAlign +import com.android.credentialmanager.common.ui.components.WearTitleText /* Used as header across Credential Selector screens. */ @Composable fun SignInHeader( icon: Drawable?, title: String, - modifier: Modifier = Modifier, ) { Column( - modifier = modifier, + modifier = Modifier, horizontalAlignment = Alignment.CenterHorizontally ) { if (icon != null) { Icon( bitmap = icon.toBitmap().asImageBitmap(), - modifier = Modifier.size(32.dp), + modifier = Modifier.size(24.dp), // Decorative purpose only. contentDescription = null, tint = Color.Unspecified, ) } + Spacer(modifier = Modifier.size(8.dp)) - Text( + WearTitleText( text = title, - textAlign = TextAlign.Center, - modifier = Modifier - .padding(top = 6.dp) - .padding(horizontal = 10.dp), - style = WearMaterialTheme.typography.title3 ) + + Spacer(modifier = Modifier.size(12.dp)) } } diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/Spacers.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/Spacers.kt new file mode 100644 index 000000000000..c87f176bc06c --- /dev/null +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/Spacers.kt @@ -0,0 +1,39 @@ +/* + * Copyright (C) 2024 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.ui.components + +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.size +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp + +/** + * Space beneath all elements of screen + */ +@Composable +fun BottomSpacer() { + Spacer(modifier = Modifier.size(40.dp)) + } + +/** + * Usual space between Credential Screen Chips + */ +@Composable +fun CredentialsScreenChipSpacer() { + Spacer(modifier = Modifier.size(4.dp)) +}
\ No newline at end of file diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/Texts.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/Texts.kt new file mode 100644 index 000000000000..e7a854f2a4d4 --- /dev/null +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/Texts.kt @@ -0,0 +1,111 @@ +/* + * Copyright (C) 2024 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.components + +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextLayoutResult +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.dp +import com.android.compose.theme.LocalAndroidColorScheme +import androidx.wear.compose.material.MaterialTheme as WearMaterialTheme + +@Composable +fun WearTitleText(text: String, modifier: Modifier = Modifier) { + Text( + modifier = modifier.wrapContentSize(), + text = text, + color = LocalAndroidColorScheme.current.onSurface, + textAlign = TextAlign.Center, + style = WearMaterialTheme.typography.title3, + ) +} + +@Composable +fun WearDisplayNameText(text: String, modifier: Modifier = Modifier) { + Text( + modifier = modifier.wrapContentSize(), + text = text, + color = LocalAndroidColorScheme.current.onSurface, + textAlign = TextAlign.Center, + overflow = TextOverflow.Ellipsis, + maxLines = 2, + style = WearMaterialTheme.typography.title2, + ) +} + +@Composable +fun WearUsernameText( + text: String, + modifier: Modifier = Modifier, + onTextLayout: (TextLayoutResult) -> Unit = {}, +) { + Text( + modifier = modifier.padding(start = 8.dp, end = 8.dp).wrapContentSize(), + text = text, + color = LocalAndroidColorScheme.current.onSurfaceVariant, + style = WearMaterialTheme.typography.caption1, + overflow = TextOverflow.Ellipsis, + textAlign = TextAlign.Center, + maxLines = 2, + onTextLayout = onTextLayout, + ) +} + +@Composable +fun WearButtonText( + text: String, + textAlign: TextAlign, + maxLines: Int = 1, + modifier: Modifier = Modifier, + color: Color = LocalAndroidColorScheme.current.onSurface, + onTextLayout: (TextLayoutResult) -> Unit = {}, +) { + Text( + modifier = modifier.wrapContentSize(), + text = text, + color = color, + style = WearMaterialTheme.typography.button, + overflow = TextOverflow.Ellipsis, + textAlign = textAlign, + maxLines = maxLines, + onTextLayout = onTextLayout, + ) +} + +@Composable +fun WearSecondaryLabel( + text: String, + modifier: Modifier = Modifier, + onTextLayout: (TextLayoutResult) -> Unit = {}, +) { + Text( + modifier = modifier.wrapContentSize(), + text = text, + color = LocalAndroidColorScheme.current.onSurfaceVariant, + style = WearMaterialTheme.typography.button, + overflow = TextOverflow.Ellipsis, + textAlign = TextAlign.Start, + maxLines = 1, + onTextLayout = onTextLayout, + ) +} diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/LoadingScreen.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/LoadingScreen.kt index b3ab0c4212db..0b07643056da 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/LoadingScreen.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/LoadingScreen.kt @@ -17,12 +17,9 @@ package com.android.credentialmanager.ui.screens import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier @Composable -fun LoadingScreen( - modifier: Modifier = Modifier -) { +fun LoadingScreen() { // Don't display anything, assuming that there should be minimal latency // to parse the Credential Manager intent and define the state of the // app. If latency is big, then a "loading" screen should be displayed diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/multiple/MultiCredentialsFlattenScreen.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/multiple/MultiCredentialsFlattenScreen.kt index d54103cd66e8..a545e48eec0f 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/multiple/MultiCredentialsFlattenScreen.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/multiple/MultiCredentialsFlattenScreen.kt @@ -15,20 +15,21 @@ */ package com.android.credentialmanager.ui.screens.multiple +import com.android.credentialmanager.ui.components.CredentialsScreenChip import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp -import androidx.wear.compose.material.MaterialTheme -import androidx.wear.compose.material.Text -import com.android.credentialmanager.ui.components.SignInHeader import com.android.credentialmanager.CredentialSelectorUiState.Get.MultipleEntry import com.android.credentialmanager.FlowEngine import com.android.credentialmanager.R +import com.android.credentialmanager.common.ui.components.WearButtonText +import com.android.credentialmanager.common.ui.components.WearDisplayNameText import com.android.credentialmanager.model.get.CredentialEntryInfo -import com.android.credentialmanager.ui.components.CredentialsScreenChip +import com.android.credentialmanager.ui.components.CredentialsScreenChipSpacer import com.google.android.horologist.annotations.ExperimentalHorologistApi import com.google.android.horologist.compose.layout.ScalingLazyColumn import com.google.android.horologist.compose.layout.ScalingLazyColumnState @@ -55,20 +56,18 @@ fun MultiCredentialsFlattenScreen( ) { item { // make this credential specific if all credentials are same - SignInHeader( - icon = null, - title = stringResource(R.string.sign_in_options_title), + WearButtonText( + text = stringResource(R.string.sign_in_options_title), + textAlign = TextAlign.Start, ) } credentialSelectorUiState.accounts.forEach { userNameEntries -> item { - Text( + WearDisplayNameText( text = userNameEntries.userName, - modifier = Modifier - .padding(top = 6.dp) - .padding(horizontal = 10.dp), - style = MaterialTheme.typography.title3 + modifier = Modifier.padding(top = 16.dp, bottom = 8.dp, start = 14.dp, + end = 14.dp) ) } @@ -79,21 +78,20 @@ fun MultiCredentialsFlattenScreen( onClick = { selectEntry(credential, false) }, secondaryLabel = credential.credentialTypeDisplayName, icon = credential.icon, + textAlign = TextAlign.Start ) + + CredentialsScreenChipSpacer() } } } item { - Text( + WearDisplayNameText( text = stringResource(R.string.provider_list_title), - modifier = Modifier - .padding(top = 6.dp) - .padding(horizontal = 10.dp), - style = MaterialTheme.typography.title3 + modifier = Modifier.padding(top = 12.dp, bottom = 8.dp, start = 14.dp, end = 14.dp) ) } - - credentialSelectorUiState.actionEntryList.forEach {actionEntry -> + credentialSelectorUiState.actionEntryList.forEach { actionEntry -> item { CredentialsScreenChip( label = actionEntry.title, @@ -101,9 +99,8 @@ fun MultiCredentialsFlattenScreen( secondaryLabel = null, icon = actionEntry.icon, ) + CredentialsScreenChipSpacer() } } } } - - diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/multiple/MultiCredentialsFoldScreen.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/multiple/MultiCredentialsFoldScreen.kt index 6f32c9906a1d..acf4eca64c0b 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/multiple/MultiCredentialsFoldScreen.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/multiple/MultiCredentialsFoldScreen.kt @@ -16,10 +16,11 @@ package com.android.credentialmanager.ui.screens.multiple +import androidx.compose.foundation.layout.Spacer import com.android.credentialmanager.R import androidx.compose.ui.res.stringResource import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp @@ -35,6 +36,8 @@ import com.google.android.horologist.annotations.ExperimentalHorologistApi import com.google.android.horologist.compose.layout.ScalingLazyColumn import com.google.android.horologist.compose.layout.ScalingLazyColumnState import com.android.credentialmanager.model.CredentialType +import com.android.credentialmanager.ui.components.BottomSpacer +import com.android.credentialmanager.ui.components.CredentialsScreenChipSpacer /** * Screen that shows multiple credentials to select from. @@ -67,8 +70,6 @@ fun MultiCredentialsFoldScreen( SignInHeader( icon = null, title = title, - modifier = Modifier - .padding(top = 6.dp), ) } @@ -80,20 +81,26 @@ fun MultiCredentialsFoldScreen( secondaryLabel = credential.credentialTypeDisplayName, icon = credential.icon, ) + CredentialsScreenChipSpacer() } } credentialSelectorUiState.authenticationEntryList.forEach { authenticationEntryInfo -> item { LockedProviderChip(authenticationEntryInfo) { - selectEntry(authenticationEntryInfo, false) } + selectEntry(authenticationEntryInfo, false) + } + CredentialsScreenChipSpacer() } } item { + Spacer(modifier = Modifier.size(12.dp)) SignInOptionsChip { flowEngine.openSecondaryScreen() } + CredentialsScreenChipSpacer() } item { DismissChip { flowEngine.cancel() } + BottomSpacer() } } } diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/passkey/SinglePasskeyScreen.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/passkey/SinglePasskeyScreen.kt index 56b1c2e3d5a4..de7c1f19e193 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/passkey/SinglePasskeyScreen.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/passkey/SinglePasskeyScreen.kt @@ -29,17 +29,19 @@ import com.android.credentialmanager.model.get.CredentialEntryInfo import com.android.credentialmanager.R import com.android.credentialmanager.ui.components.AccountRow import com.android.credentialmanager.ui.components.ContinueChip +import com.android.credentialmanager.ui.components.CredentialsScreenChipSpacer import com.android.credentialmanager.ui.components.DismissChip import com.android.credentialmanager.ui.components.SignInHeader import com.android.credentialmanager.ui.components.SignInOptionsChip import com.android.credentialmanager.ui.screens.single.SingleAccountScreen import com.google.android.horologist.annotations.ExperimentalHorologistApi import com.google.android.horologist.compose.layout.ScalingLazyColumnState +import com.android.credentialmanager.ui.components.BottomSpacer /** - * Screen that shows sign in with provider credential. + * Screen that shows single passkey credential. * - * @param entry The password entry + * @param entry The passkey entry * @param columnState ScalingLazyColumn configuration to be be applied to SingleAccountScreen * @param modifier styling for composable * @param flowEngine [FlowEngine] that updates ui state for this screen @@ -49,7 +51,6 @@ import com.google.android.horologist.compose.layout.ScalingLazyColumnState fun SinglePasskeyScreen( entry: CredentialEntryInfo, columnState: ScalingLazyColumnState, - modifier: Modifier = Modifier, flowEngine: FlowEngine, ) { SingleAccountScreen( @@ -63,18 +64,20 @@ fun SinglePasskeyScreen( AccountRow( primaryText = checkNotNull(entry.displayName), secondaryText = entry.userName, - modifier = Modifier.padding(top = 10.dp), ) }, columnState = columnState, - modifier = modifier.padding(horizontal = 10.dp) + modifier = Modifier.padding(horizontal = 10.dp) ) { item { val selectEntry = flowEngine.getEntrySelector() Column { ContinueChip { selectEntry(entry, false) } + CredentialsScreenChipSpacer() SignInOptionsChip{ flowEngine.openSecondaryScreen() } + CredentialsScreenChipSpacer() DismissChip { flowEngine.cancel() } + BottomSpacer() } } } diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/password/SinglePasswordScreen.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/password/SinglePasswordScreen.kt index 2ca8ef13c0cf..818723bf52bf 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/password/SinglePasswordScreen.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/password/SinglePasswordScreen.kt @@ -33,11 +33,13 @@ import com.android.credentialmanager.ui.components.SignInHeader import com.android.credentialmanager.ui.components.SignInOptionsChip import com.android.credentialmanager.ui.screens.single.SingleAccountScreen import com.android.credentialmanager.model.get.CredentialEntryInfo +import com.android.credentialmanager.ui.components.BottomSpacer +import com.android.credentialmanager.ui.components.CredentialsScreenChipSpacer import com.google.android.horologist.annotations.ExperimentalHorologistApi import com.google.android.horologist.compose.layout.ScalingLazyColumnState /** - * Screen that shows sign in with provider credential. + * Screen that shows password credential. * * @param entry The password entry. * @param columnState ScalingLazyColumn configuration to be be applied to SingleAccountScreen @@ -49,7 +51,6 @@ import com.google.android.horologist.compose.layout.ScalingLazyColumnState fun SinglePasswordScreen( entry: CredentialEntryInfo, columnState: ScalingLazyColumnState, - modifier: Modifier = Modifier, flowEngine: FlowEngine, ) { val selectEntry = flowEngine.getEntrySelector() @@ -63,17 +64,19 @@ fun SinglePasswordScreen( accountContent = { PasswordRow( email = entry.userName, - modifier = Modifier.padding(top = 10.dp), ) }, columnState = columnState, - modifier = modifier.padding(horizontal = 10.dp) + modifier = Modifier.padding(horizontal = 10.dp) ) { item { Column { ContinueChip { selectEntry(entry, false) } + CredentialsScreenChipSpacer() SignInOptionsChip{ flowEngine.openSecondaryScreen() } + CredentialsScreenChipSpacer() DismissChip { flowEngine.cancel() } + BottomSpacer() } } } diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/signInWithProvider/SignInWithProviderScreen.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/signInWithProvider/SignInWithProviderScreen.kt index 3a86feb4203b..884d9f6e5e16 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/signInWithProvider/SignInWithProviderScreen.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/signInWithProvider/SignInWithProviderScreen.kt @@ -24,7 +24,9 @@ import androidx.compose.ui.unit.dp import com.android.credentialmanager.FlowEngine import com.android.credentialmanager.model.get.CredentialEntryInfo import com.android.credentialmanager.ui.components.AccountRow +import com.android.credentialmanager.ui.components.BottomSpacer import com.android.credentialmanager.ui.components.ContinueChip +import com.android.credentialmanager.ui.components.CredentialsScreenChipSpacer import com.android.credentialmanager.ui.components.DismissChip import com.android.credentialmanager.ui.components.SignInHeader import com.android.credentialmanager.ui.components.SignInOptionsChip @@ -35,7 +37,7 @@ import com.google.android.horologist.compose.layout.ScalingLazyColumnState /** * Screen that shows sign in with provider credential. * - * @param entry The password entry. + * @param entry The custom credential entry. * @param columnState ScalingLazyColumn configuration to be be applied to SingleAccountScreen * @param modifier styling for composable * @param flowEngine [FlowEngine] that updates ui state for this screen @@ -61,12 +63,10 @@ fun SignInWithProviderScreen( AccountRow( primaryText = displayName, secondaryText = entry.userName, - modifier = Modifier.padding(top = 10.dp), ) } else { AccountRow( primaryText = entry.userName, - modifier = Modifier.padding(top = 10.dp), ) } }, @@ -77,8 +77,11 @@ fun SignInWithProviderScreen( val selectEntry = flowEngine.getEntrySelector() Column { ContinueChip { selectEntry(entry, false) } + CredentialsScreenChipSpacer() SignInOptionsChip{ flowEngine.openSecondaryScreen() } + CredentialsScreenChipSpacer() DismissChip { flowEngine.cancel() } + BottomSpacer() } } } |