From 5b4e13a82975406c8f188eba187a6fc926d7c295 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20G=C3=B6ransson?= Date: Fri, 27 Oct 2023 09:25:42 +0200 Subject: [PATCH] Fix row paddings and backbutton orientation --- .../component/CopyableObfuscationView.kt | 13 +- .../compose/component/InformationView.kt | 26 +--- .../compose/screen/AccountScreen.kt | 133 +++++++++--------- .../lib/theme/dimensions/Dimensions.kt | 2 + 4 files changed, 83 insertions(+), 91 deletions(-) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt index 379f59857385..a4352147329a 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt @@ -1,7 +1,7 @@ package net.mullvad.mullvadvpn.compose.component import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -18,23 +18,20 @@ import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.button.AnimatedIconButton import net.mullvad.mullvadvpn.lib.common.util.SdkUtils -import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.ui.extension.copyToClipboard @Preview @Composable private fun PreviewCopyableObfuscationView() { - CopyableObfuscationView("1111222233334444") + AppTheme { CopyableObfuscationView("1111222233334444", modifier = Modifier.fillMaxWidth()) } } @Composable -fun CopyableObfuscationView(content: String) { +fun CopyableObfuscationView(content: String, modifier: Modifier = Modifier) { var obfuscationEnabled by remember { mutableStateOf(true) } - Row( - verticalAlignment = CenterVertically, - modifier = Modifier.padding(end = Dimens.sideMargin) - ) { + Row(verticalAlignment = CenterVertically, modifier = modifier) { AccountNumberView( accountNumber = content, obfuscateWithPasswordDots = obfuscationEnabled, diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/InformationView.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/InformationView.kt index bfaaf2bacd00..22ae90e87cd8 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/InformationView.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/InformationView.kt @@ -39,12 +39,7 @@ fun InformationView( minTextSize = MaterialTheme.typography.labelMedium.fontSize, maxTextSize = MaterialTheme.typography.titleSmall.fontSize, maxLines = maxLines, - modifier = - modifier.padding( - start = Dimens.sideMargin, - top = Dimens.smallPadding, - bottom = Dimens.smallPadding - ) + modifier = modifier.padding(vertical = Dimens.smallPadding) ) } else { when (whenMissing) { @@ -55,25 +50,18 @@ fun InformationView( minTextSize = MaterialTheme.typography.labelMedium.fontSize, maxTextSize = MaterialTheme.typography.titleSmall.fontSize, maxLines = maxLines, - modifier = - modifier.padding( - start = Dimens.sideMargin, - top = Dimens.smallPadding, - bottom = Dimens.smallPadding - ) + modifier = modifier.padding(vertical = Dimens.smallPadding) ) } MissingPolicy.HIDE_VIEW -> {} MissingPolicy.SHOW_SPINNER -> { - Row(verticalAlignment = Alignment.CenterVertically, modifier = modifier) { + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = modifier.padding(Dimens.smallPadding) + ) { CircularProgressIndicator( modifier = - Modifier.padding( - start = Dimens.sideMargin, - top = Dimens.smallPadding, - bottom = Dimens.smallPadding - ) - .height(Dimens.loadingSpinnerSizeMedium) + Modifier.height(Dimens.loadingSpinnerSizeMedium) .width(Dimens.loadingSpinnerSizeMedium), color = MaterialTheme.colorScheme.onSecondary ) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt index 683c57987b7e..b35307bbb81b 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt @@ -5,6 +5,8 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon @@ -34,7 +36,7 @@ import net.mullvad.mullvadvpn.compose.button.RedeemVoucherButton import net.mullvad.mullvadvpn.compose.component.CopyableObfuscationView import net.mullvad.mullvadvpn.compose.component.InformationView import net.mullvad.mullvadvpn.compose.component.MissingPolicy -import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton +import net.mullvad.mullvadvpn.compose.component.NavigateBackDownIconButton import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar import net.mullvad.mullvadvpn.compose.dialog.DeviceNameInfoDialog import net.mullvad.mullvadvpn.constant.IS_PLAY_BUILD @@ -44,6 +46,7 @@ import net.mullvad.mullvadvpn.lib.theme.Dimens import net.mullvad.mullvadvpn.util.toExpiryDateString import net.mullvad.mullvadvpn.viewmodel.AccountUiState import net.mullvad.mullvadvpn.viewmodel.AccountViewModel +import org.joda.time.DateTime @OptIn(ExperimentalMaterial3Api::class) @Preview @@ -98,92 +101,94 @@ fun AccountScreen( ScaffoldWithMediumTopBar( appBarTitle = stringResource(id = R.string.settings_account), - navigationIcon = { NavigateBackIconButton(onBackClick) } + navigationIcon = { NavigateBackDownIconButton(onBackClick) } ) { modifier -> Column( - verticalArrangement = Arrangement.Bottom, horizontalAlignment = Alignment.Start, - modifier = modifier.animateContentSize() + verticalArrangement = Arrangement.spacedBy(Dimens.accountRowSpacing), + modifier = modifier.animateContentSize().padding(horizontal = Dimens.sideMargin) ) { - Text( - style = MaterialTheme.typography.labelMedium, - text = stringResource(id = R.string.device_name), - modifier = Modifier.padding(start = Dimens.sideMargin, end = Dimens.sideMargin) - ) + DeviceNameRow(deviceName = uiState.deviceName ?: "") { showDeviceNameInfoDialog = true } - Row(verticalAlignment = Alignment.CenterVertically) { - InformationView( - content = uiState.deviceName ?: "", - whenMissing = MissingPolicy.SHOW_SPINNER - ) - IconButton( - modifier = Modifier.align(Alignment.CenterVertically), - onClick = { showDeviceNameInfoDialog = true } - ) { - Icon( - painter = painterResource(id = R.drawable.icon_info), - contentDescription = null, - tint = MaterialTheme.colorScheme.inverseSurface - ) - } - } + AccountNumberRow(accountNumber = uiState.accountNumber ?: "") - Text( - style = MaterialTheme.typography.labelMedium, - text = stringResource(id = R.string.account_number), - modifier = - Modifier.padding( - start = Dimens.sideMargin, - end = Dimens.sideMargin, - top = Dimens.smallPadding - ) - ) - CopyableObfuscationView(content = uiState.accountNumber ?: "") - Text( - style = MaterialTheme.typography.labelMedium, - text = stringResource(id = R.string.paid_until), - modifier = Modifier.padding(start = Dimens.sideMargin, end = Dimens.sideMargin) - ) - - InformationView( - content = uiState.accountExpiry?.toExpiryDateString() ?: "", - whenMissing = MissingPolicy.SHOW_SPINNER - ) + PaidUntilRow(accountExpiry = uiState.accountExpiry) Spacer(modifier = Modifier.weight(1f)) + if (IS_PLAY_BUILD.not()) { ExternalButton( text = stringResource(id = R.string.manage_account), onClick = onManageAccountClick, - modifier = - Modifier.padding( - start = Dimens.sideMargin, - end = Dimens.sideMargin, - bottom = Dimens.screenVerticalMargin - ) + modifier = Modifier.padding(bottom = Dimens.screenVerticalMargin) ) } RedeemVoucherButton( onClick = onRedeemVoucherClick, - modifier = - Modifier.padding( - start = Dimens.sideMargin, - end = Dimens.sideMargin, - bottom = Dimens.screenVerticalMargin - ), + modifier = Modifier.padding(bottom = Dimens.screenVerticalMargin), isEnabled = true ) NegativeButton( text = stringResource(id = R.string.log_out), onClick = onLogoutClick, - modifier = - Modifier.padding( - start = Dimens.sideMargin, - end = Dimens.sideMargin, - bottom = Dimens.screenVerticalMargin - ) + modifier = Modifier.padding(bottom = Dimens.screenVerticalMargin) + ) + } + } +} + +@Composable +private fun DeviceNameRow(deviceName: String, onInfoClick: () -> Unit) { + Column(modifier = Modifier.fillMaxWidth()) { + Text( + style = MaterialTheme.typography.labelMedium, + text = stringResource(id = R.string.device_name), + ) + + Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) { + InformationView(content = deviceName, whenMissing = MissingPolicy.SHOW_SPINNER) + IconButton(onClick = onInfoClick) { + Icon( + painter = painterResource(id = R.drawable.icon_info), + contentDescription = null, + tint = MaterialTheme.colorScheme.inverseSurface + ) + } + } + } +} + +@Composable +private fun AccountNumberRow(accountNumber: String) { + Column(modifier = Modifier.fillMaxWidth()) { + Text( + style = MaterialTheme.typography.labelMedium, + text = stringResource(id = R.string.account_number), + ) + CopyableObfuscationView( + content = accountNumber, + modifier = Modifier.heightIn(min = Dimens.accountRowMinHeight).fillMaxWidth() + ) + } +} + +@Composable +private fun PaidUntilRow(accountExpiry: DateTime?) { + Column(modifier = Modifier.fillMaxWidth()) { + Text( + style = MaterialTheme.typography.labelMedium, + text = stringResource(id = R.string.paid_until), + ) + + Row( + modifier = Modifier.heightIn(min = Dimens.accountRowMinHeight), + verticalAlignment = Alignment.CenterVertically + ) { + InformationView( + content = accountExpiry?.toExpiryDateString() ?: "", + whenMissing = MissingPolicy.SHOW_SPINNER ) } } diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt index 3bb59368f30e..92cc90b77326 100644 --- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt +++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt @@ -4,6 +4,8 @@ import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp data class Dimensions( + val accountRowMinHeight: Dp = 48.dp, + val accountRowSpacing: Dp = 24.dp, val backButtonSideMargin: Dp = 30.dp, val buttonHeight: Dp = 44.dp, val buttonSeparation: Dp = 18.dp,