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

Commit 840a4d64 authored by Harini Rajan's avatar Harini Rajan Committed by Android (Google) Code Review
Browse files

Merge "UI fixes to match updated Credential Selector UI mocks :... 

Merge "UI fixes to match updated Credential Selector UI mocks : https://figma.com/file/0mJI5JvbFyq9zx9qdsBzjw/3P-App-Sign-in?type=design&node-id=1785-27104&mode=design&t=Z3zL8XJR7w6VAI3n-0" into main
parents 6e4d1c48 ec7c526e

packages/CredentialManager/wear/res/values/colors.xml

0 → 100644
+21 −0
Original line number Diff line number Diff line 
<?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

packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/AccountRow.kt

+7 −17
Original line number Diff line number Diff line
@@ -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)

            )

        }

    }

packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/CredentialsScreenChip.kt

+54 −45
Original line number Diff line number Diff line
@@ -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,26 +48,52 @@ 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()

) {

    val labelParam: (@Composable RowScope.() -> Unit) =

        {

            Text(

        return CredentialsScreenChip(

                    onClick,

                    text = {

                        WearButtonText(

                            text = label,

                overflow = TextOverflow.Ellipsis,

                maxLines = if (secondaryLabel != null) 1 else 2,

                            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()

        }



    val secondaryLabelParam: (@Composable RowScope.() -> Unit)? =

        secondaryLabel?.let {

            {

                Row {

                    Text(

                    WearSecondaryLabel(

                        text = secondaryLabel,

                        overflow = TextOverflow.Ellipsis,

                        maxLines = 1,

                    )



                    if (isAuthenticationEntryLocked)
@@ -78,7 +103,7 @@ fun CredentialsScreenChip( 
                            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

}

packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/PasswordRow.kt

+7 −18
Original line number Diff line number Diff line
@@ -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 = "••••••••••••••"

        )

    }

}

packages/CredentialManager/wear/src/com/android/credentialmanager/ui/components/SignInHeader.kt

+10 −15
Original line number Diff line number Diff line
@@ -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))

    }

}