diff options
author | 2024-07-23 22:12:02 +0000 | |
---|---|---|
committer | 2024-07-31 18:45:23 +0000 | |
commit | c81e5cd73c983a55256afc17ecbaf127ee638d37 (patch) | |
tree | 0f8c321ed5a850f1e84873788fa5f20b17809c79 | |
parent | 4a12a946dd984d26e0e5547e59707e418068a626 (diff) |
[UX fixes] Text alignment: https://hsv.googleplex.com/5891097690636288
No useless manage sign-ins title: https://hsv.googleplex.com/6199286827057152
Button color fix: https://hsv.googleplex.com/6672594588663808
Convert margins from dp to percentage and increase max lines to 2:
Screens with Percentages Margins + other Teamfood UI bug fixes :
Sign in options page: https://hsv.googleplex.com/4613594028179456, https://hsv.googleplex.com/5418564180770816
Choose a sign in: https://hsv.googleplex.com/4982413338869760
Single passkey screen: https://hsv.googleplex.com/5974787426877440
After maxLines set to 2 and alignment in chips fixed: https://hsv.googleplex.com/5014505334505472
Flag: EXEMPT bugfix
Bug: 355236535, 355246297, 356047923, 337068075, 356048574
Test: Manual observation
Change-Id: I6bafdd679a9fe9a73019280b5af14c92d9ec740b
10 files changed, 161 insertions, 111 deletions
diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/WearApp.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/WearApp.kt index a75aeaff0c48..d6e19a6193fd 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/WearApp.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/WearApp.kt @@ -104,7 +104,6 @@ fun WearApp( scrollable(Screen.MultipleCredentialsScreenFlatten.route) { MultiCredentialsFlattenScreen( credentialSelectorUiState = (remember { uiState } as MultipleEntry), - columnState = it.columnState, flowEngine = flowEngine, ) } 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 25bc38133e38..e58de64a25e3 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 @@ -19,10 +19,11 @@ import androidx.wear.compose.material.MaterialTheme as WearMaterialTheme import androidx.compose.foundation.layout.Row import androidx.compose.material3.Icon import android.graphics.drawable.Drawable +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.Arrangement 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.material.icons.Icons import androidx.compose.material.icons.outlined.Lock import androidx.compose.material.icons.outlined.LockOpen @@ -62,7 +63,7 @@ fun CredentialsScreenChip( WearButtonText( text = label, textAlign = textAlign, - maxLines = if (secondaryLabel != null) 1 else 2 + maxLines = 2 ) }, secondaryLabel, @@ -88,7 +89,13 @@ fun CredentialsScreenChip( ) { val labelParam: (@Composable RowScope.() -> Unit) = { - text() + var horizontalArrangement = Arrangement.Start + if (icon == null) { + horizontalArrangement = Arrangement.Center + } + Row(horizontalArrangement = horizontalArrangement, modifier = modifier.fillMaxWidth()) { + text() + } } val secondaryLabelParam: (@Composable RowScope.() -> Unit)? = @@ -97,6 +104,7 @@ fun CredentialsScreenChip( Row { WearSecondaryLabel( text = secondaryLabel, + color = WearMaterialTheme.colors.onSurfaceVariant ) if (isAuthenticationEntryLocked != null) { @@ -178,6 +186,7 @@ fun ContinueChip(onClick: () -> Unit) { WearButtonText( text = stringResource(R.string.dialog_continue_button), textAlign = TextAlign.Center, + color = WearMaterialTheme.colors.surface, ) }, colors = ChipDefaults.primaryChipColors(), 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 0afef5eba85e..a82360b31cbe 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 @@ -16,9 +16,11 @@ package com.android.credentialmanager.ui.components +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import android.graphics.drawable.Drawable import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.material3.Icon import androidx.compose.runtime.Composable @@ -36,26 +38,30 @@ fun SignInHeader( icon: Drawable?, title: String, ) { - Column( - modifier = Modifier, - horizontalAlignment = Alignment.CenterHorizontally - ) { - if (icon != null) { - Icon( - bitmap = icon.toBitmap().asImageBitmap(), - modifier = Modifier.size(24.dp), - // Decorative purpose only. - contentDescription = null, - tint = Color.Unspecified, - ) - } - Spacer(modifier = Modifier.size(8.dp)) + Row { + Spacer(Modifier.weight(0.073f)) // 7.3% side margin + Column( + modifier = Modifier.weight(0.854f).fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally + ) { + if (icon != null) { + Icon( + bitmap = icon.toBitmap().asImageBitmap(), + modifier = Modifier.size(24.dp), + // Decorative purpose only. + contentDescription = null, + tint = Color.Unspecified, + ) + } + Spacer(modifier = Modifier.size(8.dp)) - WearTitleText( - text = title, - ) + WearTitleText( + text = title, + ) - Spacer(modifier = Modifier.size(8.dp)) + Spacer(modifier = Modifier.size(8.dp)) + } + Spacer(Modifier.weight(0.073f)) // 7.3% side margin } } 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 index 282fea0d7218..a7b13add8692 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/Texts.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/Texts.kt @@ -16,6 +16,7 @@ package com.android.credentialmanager.common.ui.components +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.material3.Text @@ -43,7 +44,7 @@ fun WearDisplayNameText(text: String, modifier: Modifier = Modifier) { Text( modifier = modifier.wrapContentSize(), text = text, - color = WearMaterialTheme.colors.onSurfaceVariant, + color = WearMaterialTheme.colors.onSurface, textAlign = TextAlign.Center, overflow = TextOverflow.Ellipsis, maxLines = 2, @@ -60,7 +61,7 @@ fun WearUsernameText( Text( modifier = modifier.padding(start = 8.dp, end = 8.dp).wrapContentSize(), text = text, - color = WearMaterialTheme.colors.onSurfaceVariant, + color = WearMaterialTheme.colors.onSurface, style = WearMaterialTheme.typography.caption1, overflow = TextOverflow.Ellipsis, textAlign = textAlign, @@ -91,12 +92,13 @@ fun WearButtonText( @Composable fun WearSecondaryLabel( text: String, - modifier: Modifier = Modifier, + color: Color = WearMaterialTheme.colors.onSurface, + modifier: Modifier = Modifier ) { Text( - modifier = modifier.wrapContentSize(), + modifier = modifier.fillMaxSize(), text = text, - color = WearMaterialTheme.colors.onSurfaceVariant, + color = color, style = WearMaterialTheme.typography.caption1, overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Start, 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 36e97929e883..2af5be844af5 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,14 +15,18 @@ */ package com.android.credentialmanager.ui.screens.multiple -import com.android.credentialmanager.ui.components.CredentialsScreenChip +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import com.android.credentialmanager.ui.components.CredentialsScreenChip +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.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp +import androidx.compose.ui.Alignment import com.android.credentialmanager.CredentialSelectorUiState.Get.MultipleEntry import com.android.credentialmanager.FlowEngine import com.android.credentialmanager.R @@ -32,13 +36,13 @@ import com.android.credentialmanager.model.get.CredentialEntryInfo 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 +import com.google.android.horologist.compose.layout.rememberColumnState +import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults /** * Screen that shows multiple credentials to select from, grouped by accounts * * @param credentialSelectorUiState The app bar view model. - * @param columnState ScalingLazyColumn configuration to be be applied * @param modifier styling for composable * @param flowEngine [FlowEngine] that updates ui state for this screen */ @@ -46,28 +50,45 @@ import com.google.android.horologist.compose.layout.ScalingLazyColumnState @Composable fun MultiCredentialsFlattenScreen( credentialSelectorUiState: MultipleEntry, - columnState: ScalingLazyColumnState, flowEngine: FlowEngine, ) { val selectEntry = flowEngine.getEntrySelector() - ScalingLazyColumn( - columnState = columnState, - modifier = Modifier.fillMaxSize(), - ) { + Row { + Spacer(Modifier.weight(0.052f)) // 5.2% side margin + ScalingLazyColumn( + columnState = rememberColumnState( + ScalingLazyColumnDefaults.belowTimeText(horizontalAlignment = Alignment.Start), + ), + modifier = Modifier.weight(0.896f).fillMaxSize(), // 5.2% side margin + ) { + item { - // make this credential specific if all credentials are same - WearButtonText( - text = stringResource(R.string.sign_in_options_title), - textAlign = TextAlign.Start, - ) + Row { + Spacer(Modifier.weight(0.073f)) // 7.3% side margin + WearButtonText( + text = stringResource(R.string.sign_in_options_title), + textAlign = TextAlign.Center, + modifier = Modifier.weight(0.854f).fillMaxSize(), + ) + Spacer(Modifier.weight(0.073f)) // 7.3% side margin + } } credentialSelectorUiState.accounts.forEach { userNameEntries -> item { - WearSecondaryLabel( - text = userNameEntries.userName, - modifier = Modifier.padding(top = 12.dp, bottom = 4.dp) - ) + Row { + Spacer(Modifier.weight(0.0624f)) // 6.24% side margin + WearSecondaryLabel( + text = userNameEntries.userName, + modifier = Modifier.padding( + top = 12.dp, + bottom = 4.dp, + start = 0.dp, + end = 0.dp + ).fillMaxWidth(0.87f) + ) + Spacer(Modifier.weight(0.0624f)) // 6.24% side margin + } } userNameEntries.sortedCredentialEntryList.forEach { credential: CredentialEntryInfo -> @@ -78,7 +99,7 @@ fun MultiCredentialsFlattenScreen( secondaryLabel = credential.credentialTypeDisplayName.ifEmpty { credential.providerDisplayName - }, + }, icon = credential.icon, textAlign = TextAlign.Start ) @@ -87,14 +108,25 @@ fun MultiCredentialsFlattenScreen( } } } - item { - WearSecondaryLabel( - text = stringResource(R.string.provider_list_title), - modifier = Modifier.padding(top = 12.dp, bottom = 4.dp) - ) - } - credentialSelectorUiState.actionEntryList.forEach { actionEntry -> + + if (credentialSelectorUiState.actionEntryList.isNotEmpty()) { item { + Row { + Spacer(Modifier.weight(0.0624f)) // 6.24% side margin + WearSecondaryLabel( + text = stringResource(R.string.provider_list_title), + modifier = Modifier.padding( + top = 12.dp, + bottom = 4.dp, + start = 0.dp, + end = 0.dp + ).fillMaxWidth(0.87f) + ) + Spacer(Modifier.weight(0.0624f)) // 6.24% side margin + } + } + credentialSelectorUiState.actionEntryList.forEach { actionEntry -> + item { CredentialsScreenChip( label = actionEntry.title, onClick = { selectEntry(actionEntry, false) }, @@ -102,7 +134,10 @@ fun MultiCredentialsFlattenScreen( icon = actionEntry.icon, ) CredentialsScreenChipSpacer() + } } } } + Spacer(Modifier.weight(0.052f)) // 5.2% side margin + } } 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 ce2bad0f71ad..38307b0daee6 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,12 @@ package com.android.credentialmanager.ui.screens.multiple -import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.Row +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.foundation.layout.fillMaxSize import com.android.credentialmanager.R import androidx.compose.ui.res.stringResource -import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier @@ -53,29 +55,31 @@ fun MultiCredentialsFoldScreen( flowEngine: FlowEngine, ) { val selectEntry = flowEngine.getEntrySelector() - ScalingLazyColumn( - columnState = columnState, - modifier = Modifier.fillMaxSize(), - ) { - // flatten all credentials into one - val credentials = credentialSelectorUiState.sortedEntries - item { - var title = stringResource(R.string.choose_sign_in_title) - if (credentials.isNotEmpty()) { - if (credentials.all { it.credentialType == CredentialType.PASSKEY }) { - title = stringResource(R.string.choose_passkey_title) - } else if (credentials.all { it.credentialType == CredentialType.PASSWORD }) { - title = stringResource(R.string.choose_password_title) + Row { + Spacer(Modifier.weight(0.052f)) // 5.2% side margin + ScalingLazyColumn( + columnState = columnState, + modifier = Modifier.weight(0.896f).fillMaxSize(), + ) { + // flatten all credentials into one + val credentials = credentialSelectorUiState.sortedEntries + item { + var title = stringResource(R.string.choose_sign_in_title) + if (credentials.isNotEmpty()) { + if (credentials.all { it.credentialType == CredentialType.PASSKEY }) { + title = stringResource(R.string.choose_passkey_title) + } else if (credentials.all { it.credentialType == CredentialType.PASSWORD }) { + title = stringResource(R.string.choose_password_title) + } } - } - SignInHeader( - icon = credentialSelectorUiState.icon, - title = title, - ) - } + SignInHeader( + icon = credentialSelectorUiState.icon, + title = title, + ) + } - credentials.forEach { credential: CredentialEntryInfo -> + credentials.forEach { credential: CredentialEntryInfo -> item { CredentialsScreenChip( label = credential.userName, @@ -85,29 +89,32 @@ fun MultiCredentialsFoldScreen( credential.providerDisplayName }, icon = credential.icon, + textAlign = TextAlign.Start ) CredentialsScreenChipSpacer() } } - credentialSelectorUiState.authenticationEntryList.forEach { authenticationEntryInfo -> - item { - LockedProviderChip(authenticationEntryInfo) { - selectEntry(authenticationEntryInfo, false) + credentialSelectorUiState.authenticationEntryList.forEach { authenticationEntryInfo -> + item { + LockedProviderChip(authenticationEntryInfo) { + selectEntry(authenticationEntryInfo, false) + } + CredentialsScreenChipSpacer() } - CredentialsScreenChipSpacer() } - } - item { - Spacer(modifier = Modifier.size(8.dp)) - } + item { + Spacer(modifier = Modifier.size(8.dp)) + } - item { - SignInOptionsChip { flowEngine.openSecondaryScreen() } + item { + SignInOptionsChip { flowEngine.openSecondaryScreen() } + } + item { + DismissChip { flowEngine.cancel() } + BottomSpacer() + } } - item { - DismissChip { flowEngine.cancel() } - BottomSpacer() + Spacer(Modifier.weight(0.052f)) // 5.2% side margin } - } } diff --git a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/SingleAccountScreen.kt b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/SingleAccountScreen.kt index e94dd6829792..17dd962b68e0 100644 --- a/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/SingleAccountScreen.kt +++ b/packages/CredentialManager/wear/src/com/android/credentialmanager/ui/screens/single/SingleAccountScreen.kt @@ -18,6 +18,8 @@ package com.android.credentialmanager.ui.screens.single +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier @@ -31,15 +33,18 @@ fun SingleAccountScreen( headerContent: @Composable () -> Unit, accountContent: @Composable () -> Unit, columnState: ScalingLazyColumnState, - modifier: Modifier = Modifier, content: ScalingLazyListScope.() -> Unit, ) { - ScalingLazyColumn( - columnState = columnState, - modifier = modifier.fillMaxSize(), - ) { - item { headerContent() } - item { accountContent() } - content() + Row { + Spacer(Modifier.weight(0.052f)) // 5.2% side margin + ScalingLazyColumn( + columnState = columnState, + modifier = Modifier.weight(0.896f).fillMaxSize(), + ) { + item { headerContent() } + item { accountContent() } + content() + } + Spacer(Modifier.weight(0.052f)) // 5.2% side margin } }
\ No newline at end of file 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 03608a48beb6..ce243b062892 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 @@ -19,11 +19,8 @@ package com.android.credentialmanager.ui.screens.single.passkey import androidx.compose.foundation.layout.Column -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.unit.dp import com.android.credentialmanager.FlowEngine import com.android.credentialmanager.model.get.CredentialEntryInfo import com.android.credentialmanager.R @@ -75,7 +72,6 @@ fun SinglePasskeyScreen( } }, columnState = columnState, - modifier = Modifier.padding(horizontal = 10.dp) ) { item { val selectEntry = flowEngine.getEntrySelector() 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 818723bf52bf..5bc47961df98 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 @@ -19,11 +19,8 @@ package com.android.credentialmanager.ui.screens.single.password import androidx.compose.foundation.layout.Column -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.unit.dp import com.android.credentialmanager.FlowEngine import com.android.credentialmanager.R import com.android.credentialmanager.ui.components.PasswordRow @@ -67,7 +64,6 @@ fun SinglePasswordScreen( ) }, columnState = columnState, - modifier = Modifier.padding(horizontal = 10.dp) ) { item { Column { 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 34d6e977533e..fd0fc8cce16c 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 @@ -17,10 +17,7 @@ package com.android.credentialmanager.ui.screens.single.signInWithProvider import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -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 @@ -47,7 +44,6 @@ import com.google.android.horologist.compose.layout.ScalingLazyColumnState fun SignInWithProviderScreen( entry: CredentialEntryInfo, columnState: ScalingLazyColumnState, - modifier: Modifier = Modifier, flowEngine: FlowEngine, ) { SingleAccountScreen( @@ -72,7 +68,6 @@ fun SignInWithProviderScreen( } }, columnState = columnState, - modifier = modifier.padding(horizontal = 10.dp) ) { item { val selectEntry = flowEngine.getEntrySelector() |