From 78180ee4e84f9a56c6000bc99bcf062584699ff7 Mon Sep 17 00:00:00 2001 From: Honza Rychnovsky Date: Tue, 14 Mar 2023 08:00:36 +0100 Subject: [PATCH] [#790] Fix Settings screen layout * [#790] Fix Settings screen layout - SwitchWithLabel moved to ui-design-lib - Internally switched from Row to ConstraintLayout - Used paddings, which after creating and applying of Design system #611 will be refactored - Moved Modifier definitions to the caller side, when possible --- ui-design-lib/build.gradle.kts | 1 + .../ui/design/component/SwitchWithLabel.kt | 71 +++++++++++++++++++ .../ui/screen/settings/view/SettingsView.kt | 66 +++++------------ 3 files changed, 88 insertions(+), 50 deletions(-) create mode 100644 ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/SwitchWithLabel.kt diff --git a/ui-design-lib/build.gradle.kts b/ui-design-lib/build.gradle.kts index ad212fb9..96017107 100644 --- a/ui-design-lib/build.gradle.kts +++ b/ui-design-lib/build.gradle.kts @@ -29,6 +29,7 @@ android { dependencies { implementation(libs.androidx.annotation) + implementation(libs.androidx.constraintlayout) implementation(libs.androidx.core) implementation(libs.androidx.splash) implementation(libs.bundles.androidx.compose.core) diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/SwitchWithLabel.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/SwitchWithLabel.kt new file mode 100644 index 00000000..f40b3836 --- /dev/null +++ b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/SwitchWithLabel.kt @@ -0,0 +1,71 @@ +package co.electriccoin.zcash.ui.design.component + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.width +import androidx.compose.material3.Switch +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.semantics.Role +import androidx.constraintlayout.compose.ConstraintLayout +import androidx.constraintlayout.compose.Dimension +import co.electriccoin.zcash.ui.design.theme.ZcashTheme + +@Composable +fun SwitchWithLabel( + label: String, + state: Boolean, + onStateChange: (Boolean) -> Unit, + modifier: Modifier = Modifier +) { + val interactionSource = remember { MutableInteractionSource() } + + ConstraintLayout( + modifier = modifier + .clickable( + interactionSource = interactionSource, + indication = null, // disable ripple + role = Role.Switch, + onClick = { onStateChange(!state) } + ) + .fillMaxWidth() + ) { + val (text, spacer, switchButton) = createRefs() + Body( + text = label, + modifier = Modifier.constrainAs(text) { + top.linkTo(parent.top) + bottom.linkTo(parent.top) + start.linkTo(parent.start) + end.linkTo(spacer.start) + width = Dimension.fillToConstraints + } + ) + Spacer( + modifier = Modifier + .width(ZcashTheme.paddings.padding) + .constrainAs(spacer) { + top.linkTo(parent.top) + bottom.linkTo(parent.top) + start.linkTo(text.end) + end.linkTo(switchButton.start) + } + ) + Switch( + checked = state, + onCheckedChange = { + onStateChange(it) + }, + modifier = Modifier.constrainAs(switchButton) { + top.linkTo(parent.top) + bottom.linkTo(parent.top) + start.linkTo(spacer.end) + end.linkTo(parent.end) + width = Dimension.wrapContent + } + ) + } +} diff --git a/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/settings/view/SettingsView.kt b/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/settings/view/SettingsView.kt index 62eccede..f368dbd6 100644 --- a/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/settings/view/SettingsView.kt +++ b/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/settings/view/SettingsView.kt @@ -1,12 +1,6 @@ package co.electriccoin.zcash.ui.screen.settings.view -import androidx.compose.foundation.clickable -import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ArrowBack @@ -17,26 +11,21 @@ import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.Scaffold -import androidx.compose.material3.Switch import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource -import androidx.compose.ui.semantics.Role import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import co.electriccoin.zcash.ui.R -import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT -import co.electriccoin.zcash.ui.design.component.Body import co.electriccoin.zcash.ui.design.component.GradientSurface +import co.electriccoin.zcash.ui.design.component.SwitchWithLabel import co.electriccoin.zcash.ui.design.theme.ZcashTheme +import co.electriccoin.zcash.ui.design.theme.ZcashTheme.paddings @Preview("Settings") @Composable @@ -80,13 +69,16 @@ fun Settings( ) }) { paddingValues -> SettingsMainContent( - paddingValues, isBackgroundSyncEnabled = isBackgroundSyncEnabled, isKeepScreenOnDuringSyncEnabled = isKeepScreenOnDuringSyncEnabled, isAnalyticsEnabled = isAnalyticsEnabled, onBackgroundSyncSettingsChanged = onBackgroundSyncSettingsChanged, onIsKeepScreenOnDuringSyncSettingsChanged = onIsKeepScreenOnDuringSyncSettingsChanged, - onAnalyticsSettingsChanged = onAnalyticsSettingsChanged + onAnalyticsSettingsChanged = onAnalyticsSettingsChanged, + modifier = Modifier.padding( + top = paddingValues.calculateTopPadding() + paddings.padding, + bottom = paddings.padding + ) ) } } @@ -146,58 +138,32 @@ private fun TroubleshootingMenu( @Composable @Suppress("LongParameterList") private fun SettingsMainContent( - paddingValues: PaddingValues, isBackgroundSyncEnabled: Boolean, isKeepScreenOnDuringSyncEnabled: Boolean, isAnalyticsEnabled: Boolean, onBackgroundSyncSettingsChanged: (Boolean) -> Unit, onIsKeepScreenOnDuringSyncSettingsChanged: (Boolean) -> Unit, - onAnalyticsSettingsChanged: (Boolean) -> Unit + onAnalyticsSettingsChanged: (Boolean) -> Unit, + modifier: Modifier = Modifier ) { - Column( - Modifier - .padding(top = paddingValues.calculateTopPadding()) - ) { + Column(modifier = modifier) { SwitchWithLabel( label = stringResource(id = R.string.settings_enable_background_sync), state = isBackgroundSyncEnabled, - onStateChange = { onBackgroundSyncSettingsChanged(!isBackgroundSyncEnabled) } + onStateChange = { onBackgroundSyncSettingsChanged(!isBackgroundSyncEnabled) }, + modifier = Modifier.padding(paddings.padding) ) SwitchWithLabel( label = stringResource(id = R.string.settings_enable_keep_screen_on), state = isKeepScreenOnDuringSyncEnabled, - onStateChange = { onIsKeepScreenOnDuringSyncSettingsChanged(!isKeepScreenOnDuringSyncEnabled) } + onStateChange = { onIsKeepScreenOnDuringSyncSettingsChanged(!isKeepScreenOnDuringSyncEnabled) }, + modifier = Modifier.padding(paddings.padding) ) SwitchWithLabel( label = stringResource(id = R.string.settings_enable_analytics), state = isAnalyticsEnabled, - onStateChange = { onAnalyticsSettingsChanged(!isAnalyticsEnabled) } - ) - } -} - -@Composable -private fun SwitchWithLabel(label: String, state: Boolean, onStateChange: (Boolean) -> Unit) { - val interactionSource = remember { MutableInteractionSource() } - Row( - modifier = Modifier - .clickable( - interactionSource = interactionSource, - indication = null, // disable ripple - role = Role.Switch, - onClick = { onStateChange(!state) } - ) - .padding(8.dp) - .fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically - ) { - Body(text = label) - Spacer(modifier = Modifier.fillMaxWidth(MINIMAL_WEIGHT)) - Switch( - checked = state, - onCheckedChange = { - onStateChange(it) - } + onStateChange = { onAnalyticsSettingsChanged(!isAnalyticsEnabled) }, + modifier = Modifier.padding(paddings.padding) ) } }