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

Commit 8ecae983 authored by Helen Qin's avatar Helen Qin
Browse files

Imporved the styles. 

1. Get rid of the purple top status bar.
2. Rounded entries and got rid of solid borders.
3. Make the get flow to adopt some more M3 styles that the create flow has
   already adopted.

Get flow recording: http://shortn/_k5RXjjL50m
Create flow recording: http://shortn/_WLqmfxKOTd

Bug: 253157237
Bug: 254102161
Test: Local Deployment

Change-Id: I2920ac17a1df98da971168c50da28da483c51aa3
parent 3073637d

packages/CredentialManager/res/values/themes.xml

+2 −1
Original line number Diff line number Diff line
@@ -2,11 +2,12 @@ 
<resources>



  <style name="Theme.CredentialSelector" parent="@android:style/ThemeOverlay.Material">

    <item name="android:statusBarColor">@color/purple_700</item>

    <item name="android:statusBarColor">@android:color/transparent</item>

    <item name="android:windowContentOverlay">@null</item>

    <item name="android:windowNoTitle">true</item>

    <item name="android:windowBackground">@android:color/transparent</item>

    <item name="android:windowIsTranslucent">true</item>

    <item name="android:colorBackgroundCacheHint">@null</item>

    <item name="fontFamily">google-sans</item>

  </style>

</resources>
 
 No newline at end of file

packages/CredentialManager/src/com/android/credentialmanager/common/ui/Entry.kt

0 → 100644
+68 −0
Original line number Diff line number Diff line 
/*

 * Copyright (C) 2022 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.foundation.layout.fillMaxWidth

import androidx.compose.material3.ExperimentalMaterial3Api

import androidx.compose.material3.SuggestionChip

import androidx.compose.material3.SuggestionChipDefaults

import androidx.compose.runtime.Composable

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Color

import com.android.credentialmanager.ui.theme.EntryShape

import com.android.credentialmanager.ui.theme.LocalAndroidColorScheme



@OptIn(ExperimentalMaterial3Api::class)

@Composable

fun Entry(

    onClick: () -> Unit,

    label: @Composable () -> Unit,

    modifier: Modifier = Modifier,

    icon: @Composable (() -> Unit)? = null,

) {

    SuggestionChip(

        modifier = modifier.fillMaxWidth(),

        onClick = onClick,

        shape = EntryShape.FullSmallRoundedCorner,

        label = label,

        icon = icon,

        border = null,

        colors = SuggestionChipDefaults.suggestionChipColors(

            containerColor = LocalAndroidColorScheme.current.colorSurface,

        ),

    )

}



@OptIn(ExperimentalMaterial3Api::class)

@Composable

fun TransparentBackgroundEntry(

    onClick: () -> Unit,

    label: @Composable () -> Unit,

    modifier: Modifier = Modifier,

    icon: @Composable (() -> Unit)? = null,

) {

    SuggestionChip(

        modifier = modifier.fillMaxWidth(),

        onClick = onClick,

        label = label,

        icon = icon,

        border = null,

        colors = SuggestionChipDefaults.suggestionChipColors(

            containerColor = Color.Transparent,

        ),

    )

}
 
 No newline at end of file

packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateCredentialComponents.kt

+12 −23
Original line number Diff line number Diff line
@@ -17,7 +17,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api 
import androidx.compose.material3.Icon

import androidx.compose.material3.IconButton

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.SuggestionChip

import androidx.compose.material3.Text

import androidx.compose.material3.TextButton

import androidx.compose.material3.TopAppBar
@@ -43,6 +42,7 @@ import com.android.credentialmanager.common.material.ModalBottomSheetValue 
import com.android.credentialmanager.common.material.rememberModalBottomSheetState

import com.android.credentialmanager.common.ui.CancelButton

import com.android.credentialmanager.common.ui.ConfirmButton

import com.android.credentialmanager.common.ui.Entry

import com.android.credentialmanager.ui.theme.EntryShape

import com.android.credentialmanager.jetpack.developer.PublicKeyCredential.Companion.TYPE_PUBLIC_KEY_CREDENTIAL
@@ -184,7 +184,7 @@ fun ProviderSelectionCard( 
        color = Color.Transparent

      )

      Card(

        shape = EntryShape.FullRoundedCorner,

        shape = MaterialTheme.shapes.medium,

        modifier = Modifier

          .padding(horizontal = 24.dp)

          .align(alignment = Alignment.CenterHorizontally),
@@ -257,7 +257,7 @@ fun MoreOptionsSelectionCard( 
         color = Color.Transparent

      )

      Card(

        shape = EntryShape.FullRoundedCorner,

        shape = MaterialTheme.shapes.medium,

        modifier = Modifier

          .padding(horizontal = 24.dp)

          .align(alignment = Alignment.CenterHorizontally)
@@ -356,20 +356,17 @@ fun MoreOptionsRowIntroCard( 
  }

}



@OptIn(ExperimentalMaterial3Api::class)

@Composable

fun ProviderRow(providerInfo: ProviderInfo, onProviderSelected: (String) -> Unit) {

  SuggestionChip(

    modifier = Modifier.fillMaxWidth(),

  Entry(

    onClick = {onProviderSelected(providerInfo.name)},

    icon = {

      Image(modifier = Modifier.size(24.dp, 24.dp).padding(start = 10.dp),

      Image(modifier = Modifier.size(32.dp).padding(start = 10.dp),

            bitmap = providerInfo.icon.toBitmap().asImageBitmap(),

            // painter = painterResource(R.drawable.ic_passkey),

            // TODO: add description.

            contentDescription = "")

    },

    shape = EntryShape.FullRoundedCorner,

    label = {

      Text(

        text = providerInfo.displayName,
@@ -433,7 +430,7 @@ fun CreationSelectionCard( 
        )

      }

      Card(

        shape = EntryShape.FullRoundedCorner,

        shape = MaterialTheme.shapes.medium,

        modifier = Modifier

          .padding(horizontal = 24.dp)

          .align(alignment = Alignment.CenterHorizontally),
@@ -499,15 +496,13 @@ fun PrimaryCreateOptionRow( 
  createOptionInfo: CreateOptionInfo,

  onOptionSelected: () -> Unit

) {

  SuggestionChip(

    modifier = Modifier.fillMaxWidth(),

  Entry(

    onClick = onOptionSelected,

    icon = {

      Image(modifier = Modifier.size(24.dp, 24.dp).padding(start = 10.dp),

      Image(modifier = Modifier.size(32.dp).padding(start = 10.dp),

        bitmap = createOptionInfo.credentialTypeIcon.toBitmap().asImageBitmap(),

        contentDescription = null)

    },

    shape = EntryShape.FullRoundedCorner,

    label = {

      Column() {

        // TODO: Add the function to hide/view password when the type is create password
@@ -542,15 +537,13 @@ fun MoreOptionsInfoRow( 
  createOptionInfo: CreateOptionInfo,

  onOptionSelected: () -> Unit

) {

  SuggestionChip(

        modifier = Modifier.fillMaxWidth(),

  Entry(

        onClick = onOptionSelected,

        icon = {

            Image(modifier = Modifier.size(32.dp, 32.dp).padding(start = 16.dp),

            Image(modifier = Modifier.size(32.dp).padding(start = 16.dp),

                bitmap = providerInfo.icon.toBitmap().asImageBitmap(),

                contentDescription = null)

        },

        shape = EntryShape.FullRoundedCorner,

        label = {

          Column() {

              Text(
@@ -611,8 +604,7 @@ fun MoreOptionsDisabledProvidersRow( 
  disabledProviders: List<ProviderInfo>,

  onDisabledPasswordManagerSelected: () -> Unit,

) {

  SuggestionChip(

    modifier = Modifier.fillMaxWidth(),

  Entry(

    onClick = onDisabledPasswordManagerSelected,

    icon = {

      Icon(
@@ -621,7 +613,6 @@ fun MoreOptionsDisabledProvidersRow( 
        modifier = Modifier.padding(start = 16.dp)

      )

    },

    shape = EntryShape.FullRoundedCorner,

    label = {

      Column() {

        Text(
@@ -644,8 +635,7 @@ fun MoreOptionsDisabledProvidersRow( 
fun RemoteEntryRow(

  onRemoteEntrySelected: () -> Unit,

) {

  SuggestionChip(

    modifier = Modifier.fillMaxWidth(),

  Entry(

    onClick = onRemoteEntrySelected,

    icon = {

      Icon(
@@ -655,7 +645,6 @@ fun RemoteEntryRow( 
        modifier = Modifier.padding(start = 18.dp)

      )

    },

    shape = EntryShape.FullRoundedCorner,

    label = {

      Column() {

        Text(

packages/CredentialManager/src/com/android/credentialmanager/getflow/GetCredentialComponents.kt

+49 −28
Original line number Diff line number Diff line
@@ -25,6 +25,7 @@ import androidx.compose.foundation.layout.Row 
import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.layout.wrapContentHeight

import androidx.compose.foundation.lazy.LazyColumn

import androidx.compose.foundation.lazy.items

import androidx.compose.material3.Card
@@ -33,7 +34,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api 
import androidx.compose.material3.Icon

import androidx.compose.material3.IconButton

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.SuggestionChip

import androidx.compose.material3.Text

import androidx.compose.material3.TopAppBar

import androidx.compose.material3.TopAppBarDefaults
@@ -46,6 +46,7 @@ import androidx.compose.ui.Modifier 
import androidx.compose.ui.graphics.Color

import androidx.compose.ui.graphics.asImageBitmap

import androidx.compose.ui.res.stringResource

import androidx.compose.ui.text.style.TextAlign

import androidx.compose.ui.unit.dp

import androidx.core.graphics.drawable.toBitmap

import com.android.credentialmanager.R
@@ -53,6 +54,8 @@ import com.android.credentialmanager.common.material.ModalBottomSheetLayout 
import com.android.credentialmanager.common.material.ModalBottomSheetValue

import com.android.credentialmanager.common.material.rememberModalBottomSheetState

import com.android.credentialmanager.common.ui.CancelButton

import com.android.credentialmanager.common.ui.Entry

import com.android.credentialmanager.common.ui.TransparentBackgroundEntry

import com.android.credentialmanager.jetpack.developer.PublicKeyCredential



@Composable
@@ -107,6 +110,9 @@ fun PrimarySelectionCard( 
  Card() {

    Column() {

      Text(

        modifier = Modifier.padding(all = 24.dp),

        textAlign = TextAlign.Center,

        style = MaterialTheme.typography.headlineSmall,

        text = stringResource(

          if (sortedUserNameToCredentialEntryList.size == 1) {

            if (sortedUserNameToCredentialEntryList.first().sortedCredentialEntryList
@@ -117,12 +123,10 @@ fun PrimarySelectionCard( 
          } else R.string.get_dialog_title_choose_sign_in_for,

          requestDisplayInfo.appDomainName

        ),

        style = MaterialTheme.typography.titleMedium,

        modifier = Modifier.padding(all = 24.dp).align(alignment = Alignment.CenterHorizontally)

      )



      Card(

        shape = MaterialTheme.shapes.large,

        shape = MaterialTheme.shapes.medium,

        modifier = Modifier

          .padding(horizontal = 24.dp)

          .align(alignment = Alignment.CenterHorizontally)
@@ -254,12 +258,17 @@ fun ActionChips( 
    modifier = Modifier.padding(vertical = 8.dp)

  )

  // TODO: tweak padding.

  Card(

    modifier = Modifier.fillMaxWidth().wrapContentHeight(),

    shape = MaterialTheme.shapes.medium,

  ) {

    Column(verticalArrangement = Arrangement.spacedBy(2.dp)) {

      actionChips.forEach {

        ActionEntryRow(it, onEntrySelected)

      }

    }

  }

}



@Composable

fun LockedCredentials(
@@ -271,10 +280,20 @@ fun LockedCredentials( 
    style = MaterialTheme.typography.labelLarge,

    modifier = Modifier.padding(vertical = 8.dp)

  )

  Card(

    modifier = Modifier.fillMaxWidth().wrapContentHeight(),

    shape = MaterialTheme.shapes.medium,

  ) {

    Column(

      modifier = Modifier.fillMaxWidth().wrapContentHeight(),

      verticalArrangement = Arrangement.spacedBy(2.dp),

    ) {

      authenticationEntryList.forEach {

        AuthenticationEntryRow(it, onEntrySelected)

      }

    }

  }

}



@Composable

fun PerUserNameCredentials(
@@ -287,10 +306,20 @@ fun PerUserNameCredentials( 
    style = MaterialTheme.typography.labelLarge,

    modifier = Modifier.padding(vertical = 8.dp)

  )

  Card(

    modifier = Modifier.fillMaxWidth().wrapContentHeight(),

    shape = MaterialTheme.shapes.medium,

  ) {

    Column(

      modifier = Modifier.fillMaxWidth().wrapContentHeight(),

      verticalArrangement = Arrangement.spacedBy(2.dp),

    ) {

      perUserNameCredentialEntryList.sortedCredentialEntryList.forEach {

        CredentialEntryRow(it, onEntrySelected)

      }

    }

  }

}



@OptIn(ExperimentalMaterial3Api::class)

@Composable
@@ -298,16 +327,14 @@ fun CredentialEntryRow( 
  credentialEntryInfo: CredentialEntryInfo,

  onEntrySelected: (EntryInfo) -> Unit,

) {

  SuggestionChip(

    modifier = Modifier.fillMaxWidth(),

  Entry(

    onClick = {onEntrySelected(credentialEntryInfo)},

    icon = {

      Image(modifier = Modifier.size(24.dp, 24.dp).padding(start = 10.dp),

      Image(modifier = Modifier.padding(start = 10.dp).size(32.dp),

        bitmap = credentialEntryInfo.icon.toBitmap().asImageBitmap(),

        // TODO: add description.

        contentDescription = "")

    },

    shape = MaterialTheme.shapes.large,

    label = {

      Column() {

        // TODO: fix the text values.
@@ -338,16 +365,14 @@ fun AuthenticationEntryRow( 
  authenticationEntryInfo: AuthenticationEntryInfo,

  onEntrySelected: (EntryInfo) -> Unit,

) {

  SuggestionChip(

    modifier = Modifier.fillMaxWidth(),

  Entry(

    onClick = {onEntrySelected(authenticationEntryInfo)},

    icon = {

      Image(modifier = Modifier.size(24.dp, 24.dp).padding(start = 10.dp),

      Image(modifier = Modifier.padding(start = 10.dp).size(32.dp),

        bitmap = authenticationEntryInfo.icon.toBitmap().asImageBitmap(),

        // TODO: add description.

        contentDescription = "")

    },

    shape = MaterialTheme.shapes.large,

    label = {

      Column() {

        // TODO: fix the text values.
@@ -372,16 +397,13 @@ fun ActionEntryRow( 
  actionEntryInfo: ActionEntryInfo,

  onEntrySelected: (EntryInfo) -> Unit,

) {

  SuggestionChip(

    modifier = Modifier.fillMaxWidth(),

    onClick = { onEntrySelected(actionEntryInfo) },

  TransparentBackgroundEntry(

    icon = {

      Image(modifier = Modifier.size(24.dp, 24.dp).padding(start = 10.dp),

      Image(modifier = Modifier.padding(start = 10.dp).size(32.dp),

        bitmap = actionEntryInfo.icon.toBitmap().asImageBitmap(),

        // TODO: add description.

        contentDescription = "")

    },

    shape = MaterialTheme.shapes.large,

    label = {

      Column() {

        Text(
@@ -395,17 +417,16 @@ fun ActionEntryRow( 
          )

        }

      }

    }

    },

    onClick = { onEntrySelected(actionEntryInfo) },

  )

}



@OptIn(ExperimentalMaterial3Api::class)

@Composable

fun SignInAnotherWayRow(onSelect: () -> Unit) {

  SuggestionChip(

    modifier = Modifier.fillMaxWidth(),

  Entry(

    onClick = onSelect,

    shape = MaterialTheme.shapes.large,

    label = {

      Text(

        text = stringResource(R.string.get_dialog_use_saved_passkey_for),

packages/CredentialManager/src/com/android/credentialmanager/getflow/GetModel.kt

+0 −2
Original line number Diff line number Diff line
@@ -64,8 +64,6 @@ class CredentialEntryInfo( 
  val lastUsedTimeMillis: Long?,

) : EntryInfo(providerId, entryKey, entrySubkey)



// TODO: handle sub credential type values like password obfuscation.



class AuthenticationEntryInfo(

  providerId: String,

  entryKey: String,