[#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
This commit is contained in:
parent
c18160356e
commit
78180ee4e8
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
|
@ -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
|
||||
) {
|
||||
Column(
|
||||
Modifier
|
||||
.padding(top = paddingValues.calculateTopPadding())
|
||||
onAnalyticsSettingsChanged: (Boolean) -> Unit,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
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)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue