Change AccountView to animate account avatar (39f54273) · Commits · e / os / Mail

feature/navigation/drawer/src/debug/kotlin/app/k9mail/feature/navigation/drawer/ui/account/AccountViewPreview.kt

+9 −15

Original line number	Diff line number	Diff line
		@@ -3,19 +3,16 @@ package app.k9mail.feature.navigation.drawer.ui.account
		import androidx.compose.runtime.Composable
		import androidx.compose.ui.tooling.preview.Preview
		import app.k9mail.core.ui.compose.designsystem.PreviewWithThemes
		import app.k9mail.feature.navigation.drawer.ui.FakeData.DISPLAY_NAME
		import app.k9mail.feature.navigation.drawer.ui.FakeData.EMAIL_ADDRESS
		import app.k9mail.feature.navigation.drawer.ui.FakeData.LONG_TEXT
		import app.k9mail.feature.navigation.drawer.ui.FakeData.DISPLAY_ACCOUNT

		@Composable
		@Preview(showBackground = true)
		internal fun AccountViewPreview() {
		PreviewWithThemes {
		AccountView(
		displayName = DISPLAY_NAME,
		emailAddress = EMAIL_ADDRESS,
		accountColor = 0,
		account = DISPLAY_ACCOUNT,
		onClick = {},
		showAvatar = false,
		)
		}
		}
		@@ -25,10 +22,9 @@ internal fun AccountViewPreview() {
		internal fun AccountViewWithColorPreview() {
		PreviewWithThemes {
		AccountView(
		displayName = DISPLAY_NAME,
		emailAddress = EMAIL_ADDRESS,
		accountColor = 0xFF0000,
		account = DISPLAY_ACCOUNT,
		onClick = {},
		showAvatar = false,
		)
		}
		}
		@@ -38,10 +34,9 @@ internal fun AccountViewWithColorPreview() {
		internal fun AccountViewWithLongDisplayName() {
		PreviewWithThemes {
		AccountView(
		displayName = "$LONG_TEXT $DISPLAY_NAME",
		emailAddress = EMAIL_ADDRESS,
		accountColor = 0,
		account = DISPLAY_ACCOUNT,
		onClick = {},
		showAvatar = false,
		)
		}
		}
		@@ -51,10 +46,9 @@ internal fun AccountViewWithLongDisplayName() {
		internal fun AccountViewWithLongEmailPreview() {
		PreviewWithThemes {
		AccountView(
		displayName = DISPLAY_NAME,
		emailAddress = "$LONG_TEXT@example.com",
		accountColor = 0,
		account = DISPLAY_ACCOUNT,
		onClick = {},
		showAvatar = false,
		)
		}
		}

feature/navigation/drawer/src/main/kotlin/app/k9mail/feature/navigation/drawer/ui/DrawerContent.kt

+2 −3

Original line number	Diff line number	Diff line
		@@ -33,10 +33,9 @@ fun DrawerContent(
		) {
		state.selectedAccount?.let {
		AccountView(
		displayName = it.account.displayName,
		emailAddress = it.account.email,
		accountColor = it.account.chipColor,
		account = it,
		onClick = { onEvent(Event.OnAccountViewClick(it)) },
		showAvatar = state.showAccountSelector,
		)

		DividerHorizontal()

feature/navigation/drawer/src/main/kotlin/app/k9mail/feature/navigation/drawer/ui/account/AccountView.kt

+55 −29

Original line number	Diff line number	Diff line
		package app.k9mail.feature.navigation.drawer.ui.account

		import androidx.compose.animation.AnimatedVisibility
		import androidx.compose.foundation.clickable
		import androidx.compose.foundation.layout.Arrangement
		import androidx.compose.foundation.layout.Box
		import androidx.compose.foundation.layout.Column
		import androidx.compose.foundation.layout.IntrinsicSize
		import androidx.compose.foundation.layout.Row
		import androidx.compose.foundation.layout.defaultMinSize
		import androidx.compose.foundation.layout.fillMaxHeight
		import androidx.compose.foundation.layout.fillMaxWidth
		import androidx.compose.foundation.layout.height
		import androidx.compose.foundation.layout.padding
		import androidx.compose.foundation.layout.width
		import androidx.compose.runtime.Composable
		import androidx.compose.ui.Alignment
		import androidx.compose.ui.Modifier
		import app.k9mail.core.ui.compose.designsystem.atom.Surface
		import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodyLarge
		import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodyMedium
		import app.k9mail.core.ui.compose.theme2.MainTheme
		import app.k9mail.feature.navigation.drawer.domain.entity.DisplayAccount

		@Composable
		fun AccountView(
		displayName: String,
		emailAddress: String,
		accountColor: Int,
		modifier: Modifier = Modifier,
		account: DisplayAccount,
		onClick: () -> Unit,
		showAvatar: Boolean,
		modifier: Modifier = Modifier,
		) {
		Row(
		modifier = Modifier.fillMaxWidth()
		.height(intrinsicSize = IntrinsicSize.Max),
		verticalAlignment = Alignment.CenterVertically,
		) {
		AnimatedVisibility(visible = showAvatar) {
		Surface(
		color = MainTheme.colors.surfaceContainer,
		modifier = Modifier.fillMaxHeight(),
		) {
		Box(
		modifier = Modifier.width(MainTheme.sizes.large),
		contentAlignment = Alignment.Center,
		) {
		AccountAvatar(
		account = account,
		onClick = { },
		)
		}
		}
		}
		Row(
		modifier = modifier
		.fillMaxWidth()
		.height(intrinsicSize = IntrinsicSize.Max)
		.clickable(onClick = onClick)
		.height(intrinsicSize = IntrinsicSize.Max)
		.fillMaxWidth()
		.defaultMinSize(minHeight = MainTheme.sizes.large)
		.padding(
		top = MainTheme.spacings.double,
		start = MainTheme.spacings.double,
		@@ -38,24 +65,23 @@ fun AccountView(
		verticalAlignment = Alignment.CenterVertically,
		) {
		AccountIndicator(
		accountColor = accountColor,
		accountColor = account.account.chipColor,
		modifier = Modifier
		.fillMaxHeight()
		.padding(
		end = MainTheme.spacings.oneHalf,
		),
		.padding(end = MainTheme.spacings.oneHalf),
		)
		Column(
		verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.half),
		) {
		TextBodyLarge(
		text = displayName,
		text = account.account.displayName,
		color = MainTheme.colors.onSurface,
		)
		TextBodyMedium(
		text = emailAddress,
		text = account.account.email,
		color = MainTheme.colors.onSurfaceVariant,
		)
		}
		}
		}
		}