From b7a47eb91ed65cccc049751221aca753902913ca Mon Sep 17 00:00:00 2001 From: David Perez Date: Fri, 9 Aug 2024 14:59:21 -0500 Subject: [PATCH] Add helper method for standardizing margins (#3712) --- .../feature/accountsetup/SetupUnlockScreen.kt | 20 ++++++------- .../ui/auth/feature/welcome/WelcomeScreen.kt | 29 +++++++++++-------- .../platform/base/util/ModifierExtensions.kt | 17 +++++++++++ 3 files changed, 43 insertions(+), 23 deletions(-) diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupUnlockScreen.kt b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupUnlockScreen.kt index 69d22b1b5..20438248f 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupUnlockScreen.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupUnlockScreen.kt @@ -39,6 +39,7 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.x8bit.bitwarden.R import com.x8bit.bitwarden.ui.auth.feature.accountsetup.handlers.SetupUnlockHandler import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect +import com.x8bit.bitwarden.ui.platform.base.util.standardHorizontalMargin import com.x8bit.bitwarden.ui.platform.components.appbar.BitwardenTopAppBar import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledButton import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton @@ -121,9 +122,6 @@ private fun SetupUnlockScreenContent( biometricsManager: BiometricsManager, config: Configuration = LocalConfiguration.current, ) { - val marginHorizontal = remember(config.orientation) { - if (config.isPortrait) 16.dp else 48.dp - } Column( modifier = modifier.verticalScroll(state = rememberScrollState()), ) { @@ -142,7 +140,7 @@ private fun SetupUnlockScreenContent( modifier = Modifier .testTag(tag = "UnlockWithBiometricsSwitch") .fillMaxWidth() - .padding(horizontal = marginHorizontal), + .standardHorizontalMargin(), ) BitwardenUnlockWithPinSwitch( isUnlockWithPasswordEnabled = state.isUnlockWithPasswordEnabled, @@ -151,7 +149,7 @@ private fun SetupUnlockScreenContent( modifier = Modifier .testTag(tag = "UnlockWithPinSwitch") .fillMaxWidth() - .padding(horizontal = marginHorizontal), + .standardHorizontalMargin(), ) Spacer(modifier = Modifier.height(height = 24.dp)) @@ -162,7 +160,7 @@ private fun SetupUnlockScreenContent( modifier = Modifier .testTag(tag = "ContinueButton") .fillMaxWidth() - .padding(horizontal = marginHorizontal), + .standardHorizontalMargin(), ) Spacer(modifier = Modifier.height(height = 12.dp)) @@ -170,7 +168,7 @@ private fun SetupUnlockScreenContent( onConfirmClick = handler.onSetUpLaterClick, modifier = Modifier .fillMaxWidth() - .padding(horizontal = marginHorizontal), + .standardHorizontalMargin(), ) Spacer(modifier = Modifier.height(height = 12.dp)) @@ -216,7 +214,7 @@ private fun ColumnScope.SetupUnlockHeaderPortrait() { painter = rememberVectorPainter(id = R.drawable.account_setup), contentDescription = null, modifier = Modifier - .padding(horizontal = 16.dp) + .standardHorizontalMargin() .size(size = 100.dp) .align(alignment = Alignment.CenterHorizontally), ) @@ -229,7 +227,7 @@ private fun ColumnScope.SetupUnlockHeaderPortrait() { textAlign = TextAlign.Center, modifier = Modifier .fillMaxWidth() - .padding(horizontal = 16.dp), + .standardHorizontalMargin(), ) Spacer(modifier = Modifier.height(height = 8.dp)) @@ -243,7 +241,7 @@ private fun ColumnScope.SetupUnlockHeaderPortrait() { textAlign = TextAlign.Center, modifier = Modifier .fillMaxWidth() - .padding(horizontal = 16.dp), + .standardHorizontalMargin(), ) } @@ -254,7 +252,7 @@ private fun SetupUnlockHeaderLandscape( Row( modifier = modifier .padding(horizontal = 112.dp) - .padding(horizontal = 48.dp), + .standardHorizontalMargin(), ) { Image( painter = rememberVectorPainter(id = R.drawable.account_setup), diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/welcome/WelcomeScreen.kt b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/welcome/WelcomeScreen.kt index 239900b08..43458da61 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/welcome/WelcomeScreen.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/welcome/WelcomeScreen.kt @@ -36,17 +36,24 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.x8bit.bitwarden.R import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect +import com.x8bit.bitwarden.ui.platform.base.util.standardHorizontalMargin import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledButton import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter import com.x8bit.bitwarden.ui.platform.util.isPortrait +/** + * The custom horizontal margin that is specific to this screen. + */ +private val LANDSCAPE_HORIZONTAL_MARGIN: Dp = 128.dp + /** * Top level composable for the welcome screen. */ @@ -107,9 +114,6 @@ private fun WelcomeScreenContent( onLoginClick: () -> Unit, modifier: Modifier = Modifier, ) { - val isLandscape = !LocalConfiguration.current.isPortrait - val horizontalPadding = if (isLandscape) 128.dp else 16.dp - LaunchedEffect(pagerState.currentPage) { onPagerSwipe(pagerState.currentPage) } @@ -121,15 +125,16 @@ private fun WelcomeScreenContent( Spacer(modifier = Modifier.weight(1f)) HorizontalPager(state = pagerState) { index -> - if (isLandscape) { - WelcomeCardLandscape( - state = state.pages[index], - modifier = Modifier.padding(horizontal = horizontalPadding), - ) - } else { + if (LocalConfiguration.current.isPortrait) { WelcomeCardPortrait( state = state.pages[index], - modifier = Modifier.padding(horizontal = horizontalPadding), + modifier = Modifier.standardHorizontalMargin(), + ) + } else { + WelcomeCardLandscape( + state = state.pages[index], + modifier = Modifier + .standardHorizontalMargin(landscape = LANDSCAPE_HORIZONTAL_MARGIN), ) } } @@ -149,7 +154,7 @@ private fun WelcomeScreenContent( label = stringResource(id = R.string.create_account), onClick = onCreateAccountClick, modifier = Modifier - .padding(horizontal = horizontalPadding) + .standardHorizontalMargin(landscape = LANDSCAPE_HORIZONTAL_MARGIN) .fillMaxWidth(), ) @@ -157,7 +162,7 @@ private fun WelcomeScreenContent( label = stringResource(id = R.string.log_in), onClick = onLoginClick, modifier = Modifier - .padding(horizontal = horizontalPadding) + .standardHorizontalMargin(landscape = LANDSCAPE_HORIZONTAL_MARGIN) .padding(bottom = 32.dp), ) diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/base/util/ModifierExtensions.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/base/util/ModifierExtensions.kt index 764858f38..965e37fb8 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/platform/base/util/ModifierExtensions.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/base/util/ModifierExtensions.kt @@ -1,5 +1,6 @@ package com.x8bit.bitwarden.ui.platform.base.util +import androidx.compose.foundation.layout.padding import androidx.compose.material3.DividerDefaults import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme @@ -19,12 +20,14 @@ import androidx.compose.ui.input.key.isShiftPressed import androidx.compose.ui.input.key.key import androidx.compose.ui.input.key.onPreviewKeyEvent import androidx.compose.ui.input.key.type +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalFocusManager import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp import com.x8bit.bitwarden.data.platform.annotation.OmitFromCoverage +import com.x8bit.bitwarden.ui.platform.util.isPortrait /** * Adds a performance-optimized background color specified by the given [topAppBarScrollBehavior] @@ -120,3 +123,17 @@ fun Modifier.tabNavigation(): Modifier { } } } + +/** + * This is a [Modifier] extension for ensuring that the content uses the standard horizontal margin. + */ +@OmitFromCoverage +@Stable +@Composable +fun Modifier.standardHorizontalMargin( + portrait: Dp = 16.dp, + landscape: Dp = 48.dp, +): Modifier { + val config = LocalConfiguration.current + return this.padding(horizontal = if (config.isPortrait) portrait else landscape) +}