diff options
Diffstat (limited to 'mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt')
| -rw-r--r-- | mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt | 82 |
1 files changed, 57 insertions, 25 deletions
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt index 9cf00e248a..4e8663c81a 100644 --- a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt +++ b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt @@ -12,7 +12,9 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Icon import androidx.compose.material.Text @@ -24,24 +26,28 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import mozilla.components.service.fxa.manager.AccountState +import mozilla.components.service.fxa.manager.AccountState.Authenticated +import mozilla.components.service.fxa.manager.AccountState.Authenticating +import mozilla.components.service.fxa.manager.AccountState.AuthenticationProblem +import mozilla.components.service.fxa.manager.AccountState.NotAuthenticated import mozilla.components.service.fxa.store.Account import org.mozilla.fenix.R -import org.mozilla.fenix.components.accounts.AccountState -import org.mozilla.fenix.components.accounts.AccountState.AUTHENTICATED -import org.mozilla.fenix.components.accounts.AccountState.NEEDS_REAUTHENTICATION -import org.mozilla.fenix.components.accounts.AccountState.NO_ACCOUNT +import org.mozilla.fenix.compose.Image import org.mozilla.fenix.compose.annotation.LightDarkPreview import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme private val BUTTON_HEIGHT = 56.dp private val BUTTON_SHAPE = RoundedCornerShape(size = 8.dp) +private val ICON_SHAPE = RoundedCornerShape(size = 24.dp) +private val AVATAR_SIZE = 24.dp @Composable internal fun MozillaAccountMenuButton( account: Account?, accountState: AccountState, - onSignInButtonClick: () -> Unit, + onClick: () -> Unit, modifier: Modifier = Modifier, ) { Row( @@ -51,13 +57,13 @@ internal fun MozillaAccountMenuButton( shape = BUTTON_SHAPE, ) .clip(shape = BUTTON_SHAPE) - .clickable { onSignInButtonClick() } + .clickable { onClick() } .defaultMinSize(minHeight = BUTTON_HEIGHT), verticalAlignment = Alignment.CenterVertically, ) { Spacer(modifier = Modifier.width(4.dp)) - AvatarIcon() + AvatarIcon(account) Column( modifier = Modifier @@ -65,7 +71,7 @@ internal fun MozillaAccountMenuButton( .weight(1f), ) { when (accountState) { - NO_ACCOUNT -> { + NotAuthenticated -> { Text( text = stringResource(id = R.string.browser_menu_sign_in), color = FirefoxTheme.colors.textSecondary, @@ -81,7 +87,7 @@ internal fun MozillaAccountMenuButton( ) } - NEEDS_REAUTHENTICATION -> { + AuthenticationProblem -> { Text( text = stringResource(id = R.string.browser_menu_sign_back_in_to_sync), color = FirefoxTheme.colors.textSecondary, @@ -91,13 +97,13 @@ internal fun MozillaAccountMenuButton( Text( text = stringResource(id = R.string.browser_menu_syncing_paused_caption), - color = FirefoxTheme.colors.textWarning, + color = FirefoxTheme.colors.textCritical, maxLines = 2, style = FirefoxTheme.typography.caption, ) } - AUTHENTICATED -> { + Authenticated -> { Text( text = account?.displayName ?: account?.email ?: stringResource(id = R.string.browser_menu_account_settings), @@ -106,14 +112,16 @@ internal fun MozillaAccountMenuButton( style = FirefoxTheme.typography.headline7, ) } + + is Authenticating -> Unit } } - if (accountState == NEEDS_REAUTHENTICATION) { + if (accountState == AuthenticationProblem) { Icon( painter = painterResource(R.drawable.mozac_ic_warning_fill_24), contentDescription = null, - tint = FirefoxTheme.colors.iconWarning, + tint = FirefoxTheme.colors.iconCritical, ) Spacer(modifier = Modifier.width(8.dp)) @@ -122,14 +130,14 @@ internal fun MozillaAccountMenuButton( } @Composable -private fun AvatarIcon() { +private fun FallbackAvatarIcon() { Icon( painter = painterResource(id = R.drawable.mozac_ic_avatar_circle_24), contentDescription = null, modifier = Modifier .background( color = FirefoxTheme.colors.layer2, - shape = RoundedCornerShape(size = 24.dp), + shape = ICON_SHAPE, ) .padding(all = 4.dp), tint = FirefoxTheme.colors.iconSecondary, @@ -137,6 +145,30 @@ private fun AvatarIcon() { } @Composable +private fun AvatarIcon(account: Account?) { + val avatarUrl = account?.avatar?.url + + if (avatarUrl != null) { + Image( + url = avatarUrl, + modifier = Modifier + .background( + color = FirefoxTheme.colors.layer2, + shape = ICON_SHAPE, + ) + .padding(all = 4.dp) + .size(AVATAR_SIZE) + .clip(CircleShape), + targetSize = AVATAR_SIZE, + placeholder = { FallbackAvatarIcon() }, + fallback = { FallbackAvatarIcon() }, + ) + } else { + FallbackAvatarIcon() + } +} + +@Composable private fun MenuHeaderPreviewContent() { Column( modifier = Modifier @@ -146,14 +178,14 @@ private fun MenuHeaderPreviewContent() { ) { MozillaAccountMenuButton( account = null, - accountState = NO_ACCOUNT, - onSignInButtonClick = {}, + accountState = NotAuthenticated, + onClick = {}, ) MozillaAccountMenuButton( account = null, - accountState = NEEDS_REAUTHENTICATION, - onSignInButtonClick = {}, + accountState = AuthenticationProblem, + onClick = {}, ) MozillaAccountMenuButton( @@ -165,8 +197,8 @@ private fun MenuHeaderPreviewContent() { currentDeviceId = null, sessionToken = null, ), - accountState = AUTHENTICATED, - onSignInButtonClick = {}, + accountState = Authenticated, + onClick = {}, ) MozillaAccountMenuButton( @@ -178,8 +210,8 @@ private fun MenuHeaderPreviewContent() { currentDeviceId = null, sessionToken = null, ), - accountState = AUTHENTICATED, - onSignInButtonClick = {}, + accountState = Authenticated, + onClick = {}, ) MozillaAccountMenuButton( @@ -191,8 +223,8 @@ private fun MenuHeaderPreviewContent() { currentDeviceId = null, sessionToken = null, ), - accountState = AUTHENTICATED, - onSignInButtonClick = {}, + accountState = Authenticated, + onClick = {}, ) } } |