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

Commit bf286eca authored by Qinmei Du's avatar Qinmei Du
Browse files

Update more options screen according to the design

screenshot: https://screenshot.googleplex.com/5iUFTNXofBJnEpj

Test: deployed locally

Bug: 253157211
Change-Id: Iab0308ef566c6c8292cb3d796576d537a6dc733e
parent 3ef0cc30
Loading
Loading
Loading
Loading
+6 −4
Original line number Diff line number Diff line
@@ -15,14 +15,16 @@
  <string name="choose_create_option_password_title">Save your password to <xliff:g id="providerInfoDisplayName">%1$s</xliff:g>?</string>
  <string name="choose_create_option_sign_in_title">Save your sign-in info to <xliff:g id="providerInfoDisplayName">%1$s</xliff:g>?</string>
  <string name="choose_sign_in_title">Use saved sign in</string>
  <string name="create_passkey_at">Create passkey at</string>
  <string name="create_passkey_in">Create passkey in</string>
  <string name="save_password_to">Save password to</string>
  <string name="save_sign_in_to">Save sign-in to</string>
  <string name="use_provider_for_all_title">Use <xliff:g id="providerInfoDisplayName">%1$s</xliff:g> for all your sign-ins?</string>
  <string name="set_as_default">Set as default</string>
  <string name="use_once">Use once</string>
  <string name="choose_create_option_description">You can use saved <xliff:g id="type">%1$s</xliff:g> on any device. It will be saved to <xliff:g id="providerInfoDisplayName">%2$s</xliff:g> for <xliff:g id="createInfoDisplayName">%3$s</xliff:g></string>
  <string name="more_options_title_multiple_options"><xliff:g id="providerInfoDisplayName">%1$s</xliff:g> for <xliff:g id="createInfoTitle">%2$s</xliff:g></string>
  <string name="more_options_title_one_option"><xliff:g id="providerInfoDisplayName">%1$s</xliff:g></string>
  <string name="more_options_usage_data"><xliff:g id="passwordsNumber">%1$s</xliff:g> passwords and <xliff:g id="passkeyssNumber">%2$s</xliff:g> passkeys saved</string>
  <string name="more_options_usage_passwords_passkeys"><xliff:g id="passwordsNumber">%1$s</xliff:g> passwords, <xliff:g id="passkeysNumber">%2$s</xliff:g> passkeys</string>
  <string name="more_options_usage_passwords"><xliff:g id="passwordsNumber">%1$s</xliff:g> passwords</string>
  <string name="more_options_usage_passkeys"><xliff:g id="passkeysNumber">%1$s</xliff:g> passkeys</string>
  <string name="passkeys">passkeys</string>
  <string name="passwords">passwords</string>
  <string name="sign_ins">sign-ins</string>
+4 −4
Original line number Diff line number Diff line
@@ -34,12 +34,12 @@ open class EntryInfo (
class CreateOptionInfo(
  entryKey: String,
  entrySubkey: String,
  val userProviderDisplayName: String,
  val userProviderDisplayName: String?,
  val credentialTypeIcon: Drawable,
  val profileIcon: Drawable,
  val passwordCount: Int,
  val passkeyCount: Int,
  val totalCredentialCount: Int,
  val passwordCount: Int?,
  val passkeyCount: Int?,
  val totalCredentialCount: Int?,
  val lastUsedTimeMillis: Long?,
) : EntryInfo(entryKey, entrySubkey)

+68 −40
Original line number Diff line number Diff line
@@ -73,6 +73,7 @@ fun CreatePasskeyScreen(
          onMoreOptionsSelected = viewModel::onMoreOptionsSelected
        )
        CreateScreenState.MORE_OPTIONS_SELECTION -> MoreOptionsSelectionCard(
            requestDisplayInfo = uiState.requestDisplayInfo,
            providerList = uiState.providers,
            onBackButtonSelected = viewModel::onBackButtonSelected,
            onOptionSelected = viewModel::onMoreOptionsRowSelected
@@ -209,6 +210,7 @@ fun ProviderSelectionCard(
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MoreOptionsSelectionCard(
  requestDisplayInfo: RequestDisplayInfo,
  providerList: List<ProviderInfo>,
  onBackButtonSelected: () -> Unit,
  onOptionSelected: (ActiveEntry) -> Unit
@@ -218,7 +220,11 @@ fun MoreOptionsSelectionCard(
      TopAppBar(
        title = {
          Text(
            text = stringResource(R.string.string_more_options),
            text = when (requestDisplayInfo.type) {
              TYPE_PUBLIC_KEY_CREDENTIAL -> stringResource(R.string.create_passkey_in)
              TYPE_PASSWORD_CREDENTIAL -> stringResource(R.string.save_password_to)
              else -> stringResource(R.string.save_sign_in_to)
            },
            style = MaterialTheme.typography.titleMedium
          )
        },
@@ -231,15 +237,9 @@ fun MoreOptionsSelectionCard(
        }
      )
      Divider(
         thickness = 24.dp,
         thickness = 8.dp,
         color = Color.Transparent
      )
      Text(
        text = stringResource(R.string.create_passkey_at),
        style = MaterialTheme.typography.bodyLarge,
        modifier = Modifier.padding(horizontal = 28.dp),
        textAlign = TextAlign.Center
      )
      Card(
        shape = MaterialTheme.shapes.large,
        modifier = Modifier
@@ -249,7 +249,6 @@ fun MoreOptionsSelectionCard(
        LazyColumn(
          verticalArrangement = Arrangement.spacedBy(2.dp)
        ) {
          // TODO: change the order according to usage frequency
          providerList.forEach { providerInfo ->
            providerInfo.createOptions.forEach { createOptionInfo ->
              item {
@@ -385,6 +384,7 @@ fun CreationSelectionCard(
        style = MaterialTheme.typography.bodyMedium,
        modifier = Modifier.align(alignment = Alignment.CenterHorizontally)
      )
      if (createOptionInfo.userProviderDisplayName != null) {
        Text(
          text = stringResource(
            R.string.choose_create_option_description,
@@ -399,6 +399,7 @@ fun CreationSelectionCard(
          style = MaterialTheme.typography.bodyLarge,
          modifier = Modifier.padding(all = 24.dp).align(alignment = Alignment.CenterHorizontally)
        )
      }
      Card(
        shape = MaterialTheme.shapes.large,
        modifier = Modifier
@@ -504,30 +505,57 @@ fun MoreOptionsInfoRow(
        onClick = onOptionSelected,
        icon = {
            Image(modifier = Modifier.size(24.dp, 24.dp).padding(start = 10.dp),
                bitmap = createOptionInfo.profileIcon.toBitmap().asImageBitmap(),
                // painter = painterResource(R.drawable.ic_passkey),
                // TODO: add description.
                contentDescription = "")
                bitmap = createOptionInfo.credentialTypeIcon.toBitmap().asImageBitmap(),
                contentDescription = stringResource(R.string.createOptionInfo_icon_description))
        },
        shape = MaterialTheme.shapes.large,
        label = {
          Column() {
              Text(
                text =
                if (providerInfo.createOptions.size > 1)
                {stringResource(R.string.more_options_title_multiple_options,
                  providerInfo.displayName, createOptionInfo.userProviderDisplayName)} else {
                  stringResource(R.string.more_options_title_one_option,
                    providerInfo.displayName)},
                  text = providerInfo.displayName,
                  style = MaterialTheme.typography.titleLarge,
                  modifier = Modifier.padding(top = 16.dp)
              )
            if (createOptionInfo.userProviderDisplayName != null) {
              Text(
                text = stringResource(R.string.more_options_usage_data,
                  createOptionInfo.passwordCount, createOptionInfo.passkeyCount),
                text = createOptionInfo.userProviderDisplayName,
                style = MaterialTheme.typography.bodyMedium)
            }
            if (createOptionInfo.passwordCount != null && createOptionInfo.passkeyCount != null) {
              Text(
                text =
                  stringResource(
                    R.string.more_options_usage_passwords_passkeys,
                    createOptionInfo.passwordCount,
                    createOptionInfo.passkeyCount
                  ),
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(bottom = 16.dp)
              )
            } else if (createOptionInfo.passwordCount != null) {
              Text(
                text =
                stringResource(
                  R.string.more_options_usage_passwords,
                  createOptionInfo.passwordCount
                ),
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(bottom = 16.dp)
              )
            } else if (createOptionInfo.passkeyCount != null) {
              Text(
                text =
                stringResource(
                  R.string.more_options_usage_passkeys,
                  createOptionInfo.passkeyCount
                ),
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(bottom = 16.dp)
              )
            } else if (createOptionInfo.totalCredentialCount != null) {
              // TODO: Handle the case when there is total count
              // but no passwords and passkeys after design is set
            }
          }
        }
    )
+1 −1
Original line number Diff line number Diff line
@@ -26,7 +26,7 @@ import android.graphics.drawable.Icon
 * TODO: move to jetpack.
 */
class SaveEntryUi(
  val userProviderAccountName: CharSequence,
  val userProviderAccountName: CharSequence?,
  val credentialTypeIcon: Icon?,
  val profileIcon: Icon?,
  val passwordCount: Int?,