[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
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 a75aeaf..d6e19a6 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 @@
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 25bc381..e58de64 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.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 @@
WearButtonText(
text = label,
textAlign = textAlign,
- maxLines = if (secondaryLabel != null) 1 else 2
+ maxLines = 2
)
},
secondaryLabel,
@@ -88,7 +89,13 @@
) {
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 @@
Row {
WearSecondaryLabel(
text = secondaryLabel,
+ color = WearMaterialTheme.colors.onSurfaceVariant
)
if (isAuthenticationEntryLocked != null) {
@@ -178,6 +186,7 @@
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 0afef5e..a82360b 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 @@
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,
+ 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,
)
+
+ Spacer(modifier = Modifier.size(8.dp))
}
- Spacer(modifier = Modifier.size(8.dp))
-
- WearTitleText(
- text = title,
- )
-
- 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 282fea0..a7b13ad 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 @@
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 @@
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 @@
@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 36e9792..2af5be8 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.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 @@
@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 @@
secondaryLabel =
credential.credentialTypeDisplayName.ifEmpty {
credential.providerDisplayName
- },
+ },
icon = credential.icon,
textAlign = TextAlign.Start
)
@@ -87,14 +108,25 @@
}
}
}
- 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 @@
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 ce2bad0..38307b0 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 @@
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 @@
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 {
+ SignInOptionsChip { flowEngine.openSecondaryScreen() }
+ }
+ item {
+ DismissChip { flowEngine.cancel() }
+ BottomSpacer()
}
}
- item {
- Spacer(modifier = Modifier.size(8.dp))
+ Spacer(Modifier.weight(0.052f)) // 5.2% side margin
}
-
- item {
- SignInOptionsChip { flowEngine.openSecondaryScreen() }
- }
- item {
- DismissChip { flowEngine.cancel() }
- BottomSpacer()
- }
- }
}
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 e94dd68..17dd962 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 @@
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 03608a4..ce243b0 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 @@
}
},
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 818723b..5bc4796 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 @@
)
},
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 34d6e97..fd0fc8c 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 @@
fun SignInWithProviderScreen(
entry: CredentialEntryInfo,
columnState: ScalingLazyColumnState,
- modifier: Modifier = Modifier,
flowEngine: FlowEngine,
) {
SingleAccountScreen(
@@ -72,7 +68,6 @@
}
},
columnState = columnState,
- modifier = modifier.padding(horizontal = 10.dp)
) {
item {
val selectEntry = flowEngine.getEntrySelector()