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

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

Update some UX style and apply dynamic color 

screenshot:https://screencast.googleplex.com/cast/NjEyMjc0NTM0NDU1NzA1NnwyZTJiOWYxNS04OQ
Test: deployed locally

Bug: 253157211
Change-Id: Ibaea5299d2892289bd326fb83984bd0f732015ff
parent c3aa424c

packages/CredentialManager/src/com/android/credentialmanager/common/material/ModalBottomSheet.kt

+3 −2
Original line number Diff line number Diff line
@@ -62,6 +62,7 @@ import com.android.credentialmanager.R 
import com.android.credentialmanager.common.material.ModalBottomSheetValue.Expanded

import com.android.credentialmanager.common.material.ModalBottomSheetValue.HalfExpanded

import com.android.credentialmanager.common.material.ModalBottomSheetValue.Hidden

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

import kotlinx.coroutines.CancellationException

import kotlinx.coroutines.launch

import kotlin.math.max
@@ -318,7 +319,7 @@ fun ModalBottomSheetLayout( 
        rememberModalBottomSheetState(Hidden),

    sheetShape: Shape = MaterialTheme.shapes.large,

    sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,

    sheetBackgroundColor: Color = MaterialTheme.colorScheme.surface,

    sheetBackgroundColor: Color = ModalBottomSheetDefaults.scrimColor,

    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),

    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,

    content: @Composable () -> Unit
@@ -476,5 +477,5 @@ object ModalBottomSheetDefaults { 
     */

    val scrimColor: Color

        @Composable

        get() = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.32f)

        get() = LocalAndroidColorScheme.current.colorSurfaceHighlight

}
 
 No newline at end of file

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

+19 −11
Original line number Diff line number Diff line 
@file:OptIn(ExperimentalMaterial3Api::class)



package com.android.credentialmanager.createflow



import android.credentials.Credential.TYPE_PASSWORD_CREDENTIAL
@@ -19,6 +21,7 @@ import androidx.compose.material3.SuggestionChip 
import androidx.compose.material3.Text

import androidx.compose.material3.TextButton

import androidx.compose.material3.TopAppBar

import androidx.compose.material3.TopAppBarDefaults

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.filled.ArrowBack

import androidx.compose.material.icons.outlined.NewReleases
@@ -40,6 +43,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.ui.theme.EntryShape

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



@OptIn(ExperimentalMaterial3Api::class)
@@ -91,7 +95,7 @@ fun CreatePasskeyScreen( 
      }

    },

    scrimColor = MaterialTheme.colorScheme.scrim,

    sheetShape = MaterialTheme.shapes.medium,

    sheetShape = EntryShape.TopRoundedCorner,

  ) {}

  LaunchedEffect(state.currentValue) {

    if (state.currentValue == ModalBottomSheetValue.Hidden) {
@@ -100,6 +104,7 @@ fun CreatePasskeyScreen( 
  }

}



@OptIn(ExperimentalMaterial3Api::class)

@Composable

fun ConfirmationCard(

  onConfirm: () -> Unit,
@@ -179,7 +184,7 @@ fun ProviderSelectionCard( 
        color = Color.Transparent

      )

      Card(

        shape = MaterialTheme.shapes.large,

        shape = EntryShape.FullRoundedCorner,

        modifier = Modifier

          .padding(horizontal = 24.dp)

          .align(alignment = Alignment.CenterHorizontally),
@@ -243,14 +248,16 @@ fun MoreOptionsSelectionCard( 
              Icons.Filled.ArrowBack,

              stringResource(R.string.accessibility_back_arrow_button))

          }

        }

        },

        colors = TopAppBarDefaults.smallTopAppBarColors

          (containerColor = Color.Transparent),

      )

      Divider(

         thickness = 8.dp,

         color = Color.Transparent

      )

      Card(

        shape = MaterialTheme.shapes.large,

        shape = EntryShape.FullRoundedCorner,

        modifier = Modifier

          .padding(horizontal = 24.dp)

          .align(alignment = Alignment.CenterHorizontally)
@@ -362,7 +369,7 @@ fun ProviderRow(providerInfo: ProviderInfo, onProviderSelected: (String) -> Unit 
            // TODO: add description.

            contentDescription = "")

    },

    shape = MaterialTheme.shapes.large,

    shape = EntryShape.FullRoundedCorner,

    label = {

      Text(

        text = providerInfo.displayName,
@@ -391,7 +398,8 @@ fun CreationSelectionCard( 
        bitmap = providerInfo.icon.toBitmap().asImageBitmap(),

        contentDescription = null,

        tint = Color.Unspecified,

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

        modifier = Modifier.align(alignment = Alignment.CenterHorizontally)

          .padding(all = 24.dp).size(32.dp)

      )

      Text(

        text = when (requestDisplayInfo.type) {
@@ -425,7 +433,7 @@ fun CreationSelectionCard( 
        )

      }

      Card(

        shape = MaterialTheme.shapes.large,

        shape = EntryShape.FullRoundedCorner,

        modifier = Modifier

          .padding(horizontal = 24.dp)

          .align(alignment = Alignment.CenterHorizontally),
@@ -499,7 +507,7 @@ fun PrimaryCreateOptionRow( 
        bitmap = createOptionInfo.credentialTypeIcon.toBitmap().asImageBitmap(),

        contentDescription = null)

    },

    shape = MaterialTheme.shapes.large,

    shape = EntryShape.FullRoundedCorner,

    label = {

      Column() {

        Text(
@@ -532,7 +540,7 @@ fun MoreOptionsInfoRow( 
                bitmap = providerInfo.icon.toBitmap().asImageBitmap(),

                contentDescription = null)

        },

        shape = MaterialTheme.shapes.large,

        shape = EntryShape.FullRoundedCorner,

        label = {

          Column() {

              Text(
@@ -603,7 +611,7 @@ fun MoreOptionsDisabledProvidersRow( 
        modifier = Modifier.padding(start = 16.dp)

      )

    },

    shape = MaterialTheme.shapes.large,

    shape = EntryShape.FullRoundedCorner,

    label = {

      Column() {

        Text(
@@ -637,7 +645,7 @@ fun RemoteEntryRow( 
        modifier = Modifier.padding(start = 18.dp)

      )

    },

    shape = MaterialTheme.shapes.large,

    shape = EntryShape.FullRoundedCorner,

    label = {

      Column() {

        Text(

packages/CredentialManager/src/com/android/credentialmanager/ui/theme/AndroidColorScheme.kt

0 → 100644
+50 −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.ui.theme



import android.annotation.ColorInt

import android.content.Context

import androidx.compose.runtime.staticCompositionLocalOf

import androidx.compose.ui.graphics.Color

import com.android.internal.R



/** CompositionLocal used to pass [AndroidColorScheme] down the tree. */

val LocalAndroidColorScheme =

    staticCompositionLocalOf<AndroidColorScheme> {

        throw IllegalStateException(

            "No AndroidColorScheme configured. Make sure to use LocalAndroidColorScheme in a " +

                    "Composable surrounded by a CredentialSelectorTheme {}."

        )

    }



/**

 * The Android color scheme.

 *

 * Important: Use M3 colors from MaterialTheme.colorScheme whenever possible instead. In the future,

 * most of the colors in this class will be removed in favor of their M3 counterpart.

 */

class AndroidColorScheme internal constructor(context: Context) {



    val colorSurfaceHighlight = getColor(context, R.attr.colorSurfaceHighlight)



    private fun getColor(context: Context, attr: Int): Color {

        val ta = context.obtainStyledAttributes(intArrayOf(attr))

        @ColorInt val color = ta.getColor(0, 0)

        ta.recycle()

        return Color(color)

    }

}

packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Shape.kt

+5 −0
Original line number Diff line number Diff line
@@ -9,3 +9,8 @@ val Shapes = Shapes( 
  medium = RoundedCornerShape(20.dp),

  large = RoundedCornerShape(0.dp)

)



object EntryShape {

  val TopRoundedCorner = RoundedCornerShape(28.dp, 28.dp, 0.dp, 0.dp)

  val FullRoundedCorner = RoundedCornerShape(28.dp, 28.dp, 28.dp, 28.dp)

}

packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Theme.kt

+24 −24
Original line number Diff line number Diff line
@@ -2,37 +2,37 @@ package com.android.credentialmanager.ui.theme 


import androidx.compose.foundation.isSystemInDarkTheme

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.lightColorScheme

import androidx.compose.material3.darkColorScheme

import androidx.compose.material3.dynamicDarkColorScheme

import androidx.compose.material3.dynamicLightColorScheme

import androidx.compose.runtime.Composable



private val AppDarkColorScheme = darkColorScheme(

  primary = Purple200,

  secondary = Purple700,

  tertiary = Teal200

)



private val AppLightColorScheme = lightColorScheme(

  primary = Purple500,

  secondary = Purple700,

  tertiary = Teal200

)

import androidx.compose.runtime.CompositionLocalProvider

import androidx.compose.ui.platform.LocalContext



@Composable

fun CredentialSelectorTheme(

  darkTheme: Boolean = isSystemInDarkTheme(),

  content: @Composable () -> Unit

) {

  val AppColorScheme = if (darkTheme) {

    AppDarkColorScheme

  val context = LocalContext.current



  val colorScheme =

    if (darkTheme) {

      dynamicDarkColorScheme(context)

    } else {

    AppLightColorScheme

      dynamicLightColorScheme(context)

    }

  val androidColorScheme = AndroidColorScheme(context)

  val typography = Typography



  MaterialTheme(

    colorScheme = AppColorScheme,

    typography = Typography,

    shapes = Shapes,

    content = content

  )

    colorScheme,

    typography = typography,

    shapes = Shapes

  ) {

    CompositionLocalProvider(

      LocalAndroidColorScheme provides androidColorScheme,

    ) {

      content()

    }

  }

}