diff options
8 files changed, 31 insertions, 42 deletions
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt index 022fb38256..ff8771452d 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt @@ -21,7 +21,7 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.dp +import net.mullvad.mullvadvpn.compose.component.SpacedColumn import net.mullvad.mullvadvpn.compose.theme.AppTheme import net.mullvad.mullvadvpn.compose.theme.Dimens @@ -29,7 +29,7 @@ import net.mullvad.mullvadvpn.compose.theme.Dimens @Composable fun PreviewBaseCell() { AppTheme { - Column { + SpacedColumn { BaseCell( title = { BaseCellTitle( @@ -38,7 +38,6 @@ fun PreviewBaseCell() { ) } ) - Spacer(modifier = Modifier.height(1.dp)) BaseCell( title = { BaseCellTitle( @@ -65,10 +64,6 @@ internal fun BaseCell( startPadding: Dp = Dimens.cellStartPadding, endPadding: Dp = Dimens.cellEndPadding ) { - val cellHeight = Dimens.cellHeight - val cellVerticalSpacing = Dimens.cellLabelVerticalPadding - val subtitleVerticalSpacing = Dimens.cellFooterTopPadding - Column(modifier = Modifier.fillMaxWidth().wrapContentHeight().background(background)) { val rowModifier = Modifier.let { @@ -81,7 +76,7 @@ internal fun BaseCell( horizontalArrangement = Arrangement.Start, modifier = rowModifier - .height(cellHeight) + .height(Dimens.cellHeight) .fillMaxWidth() .padding(start = startPadding, end = endPadding) ) { @@ -101,9 +96,9 @@ internal fun BaseCell( .background(MaterialTheme.colorScheme.secondary) .padding( start = startPadding, - top = subtitleVerticalSpacing, + top = Dimens.cellFooterTopPadding, end = endPadding, - bottom = cellVerticalSpacing + bottom = Dimens.cellLabelVerticalPadding ) .fillMaxWidth() .wrapContentHeight() diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt index 17a8065693..8e73679652 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt @@ -21,8 +21,8 @@ import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.component.ChevronView import net.mullvad.mullvadvpn.compose.component.HtmlText import net.mullvad.mullvadvpn.compose.component.textResource -import net.mullvad.mullvadvpn.compose.theme.AlphaActive import net.mullvad.mullvadvpn.compose.theme.AlphaInactive +import net.mullvad.mullvadvpn.compose.theme.AlphaVisible import net.mullvad.mullvadvpn.compose.theme.MullvadWhite import net.mullvad.mullvadvpn.compose.theme.MullvadWhite60 @@ -46,7 +46,7 @@ fun ExpandableComposeCell( onCellClicked: (Boolean) -> Unit = {}, onInfoClicked: (() -> Unit)? = null ) { - val titleModifier = Modifier.alpha(if (isEnabled) AlphaActive else AlphaInactive) + val titleModifier = Modifier.alpha(if (isEnabled) AlphaVisible else AlphaInactive) val bodyViewModifier = Modifier BaseCell( diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt index 32ccd1365d..21a3af926e 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt @@ -17,8 +17,8 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.theme.AlphaActive import net.mullvad.mullvadvpn.compose.theme.AlphaInactive +import net.mullvad.mullvadvpn.compose.theme.AlphaVisible import net.mullvad.mullvadvpn.compose.theme.MullvadBlue import net.mullvad.mullvadvpn.compose.theme.MullvadWhite @@ -41,7 +41,7 @@ fun InformationComposeCell( onCellClicked: () -> Unit = {}, onInfoClicked: (() -> Unit)? = null ) { - val titleModifier = Modifier.alpha(if (isEnabled) AlphaActive else AlphaInactive) + val titleModifier = Modifier.alpha(if (isEnabled) AlphaVisible else AlphaInactive) val bodyViewModifier = Modifier BaseCell( diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt index e49f65f9b8..95272acf11 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt @@ -1,9 +1,6 @@ package net.mullvad.mullvadvpn.compose.cell import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme @@ -15,8 +12,10 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.dp import net.mullvad.mullvadvpn.R +import net.mullvad.mullvadvpn.compose.component.SpacedColumn +import net.mullvad.mullvadvpn.compose.theme.AlphaInvisible +import net.mullvad.mullvadvpn.compose.theme.AlphaVisible import net.mullvad.mullvadvpn.compose.theme.AppTheme import net.mullvad.mullvadvpn.compose.theme.Dimens @@ -24,9 +23,8 @@ import net.mullvad.mullvadvpn.compose.theme.Dimens @Composable private fun PreviewSelectableCell() { AppTheme { - Column(Modifier.background(MaterialTheme.colorScheme.background)) { + SpacedColumn(Modifier.background(MaterialTheme.colorScheme.background)) { SelectableCell(title = "Selected", isSelected = true) - Spacer(modifier = Modifier.height(1.dp)) SelectableCell(title = "Not Selected", isSelected = false) } } @@ -44,20 +42,14 @@ fun SelectableCell( tint = MaterialTheme.colorScheme.onPrimary, modifier = Modifier.padding(end = Dimens.selectableCellTextMargin) - .alpha( - if (isSelected) { - 1f - } else { - 0f - } - ) + .alpha(if (isSelected) AlphaVisible else AlphaInvisible) ) }, titleStyle: TextStyle = MaterialTheme.typography.labelLarge, startPadding: Dp = Dimens.cellStartPadding, selectedColor: Color = MaterialTheme.colorScheme.surface, backgroundColor: Color = MaterialTheme.colorScheme.secondaryContainer, - onCellClicked: () -> Unit = {}, + onCellClicked: () -> Unit = {} ) { BaseCell( onCellClicked = onCellClicked, diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt index afbf04ec33..531af3ef46 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt @@ -1,10 +1,7 @@ package net.mullvad.mullvadvpn.compose.cell import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentWidth @@ -23,6 +20,7 @@ import androidx.core.text.HtmlCompat import androidx.core.text.HtmlCompat.FROM_HTML_MODE_COMPACT import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.component.CellSwitch +import net.mullvad.mullvadvpn.compose.component.SpacedColumn import net.mullvad.mullvadvpn.compose.component.textResource import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString import net.mullvad.mullvadvpn.compose.theme.AppTheme @@ -32,7 +30,7 @@ import net.mullvad.mullvadvpn.compose.theme.Dimens @Composable private fun PreviewSwitchComposeCell() { AppTheme { - Column { + SpacedColumn { HeaderSwitchComposeCell( title = "Checkbox Title", isEnabled = true, @@ -40,7 +38,6 @@ private fun PreviewSwitchComposeCell() { onCellClicked = {}, onInfoClicked = {} ) - Spacer(modifier = Modifier.height(1.dp)) HeaderSwitchComposeCell( title = "Checkbox Title", isEnabled = true, @@ -49,7 +46,6 @@ private fun PreviewSwitchComposeCell() { onInfoClicked = {}, subtitle = "Subtitle" ) - Spacer(modifier = Modifier.height(1.dp)) NormalSwitchComposeCell( title = "Checkbox Item", isEnabled = true, diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/SpacedColumn.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/SpacedColumn.kt index 350cb6b80c..7a78d66ac1 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/SpacedColumn.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/SpacedColumn.kt @@ -1,4 +1,4 @@ -package net.mullvad.mullvadvpn.compose.cell +package net.mullvad.mullvadvpn.compose.component import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column @@ -7,13 +7,18 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.dp +import net.mullvad.mullvadvpn.compose.theme.Dimens @Composable fun SpacedColumn( - spacing: Dp = 1.dp, + modifier: Modifier = Modifier, + spacing: Dp = Dimens.listItemDivider, alignment: Alignment.Vertical = Alignment.Bottom, content: @Composable ColumnScope.() -> Unit ) { - Column(verticalArrangement = Arrangement.spacedBy(spacing, alignment), content = content) + Column( + modifier = modifier, + verticalArrangement = Arrangement.spacedBy(spacing, alignment), + content = content + ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt index 2c0adcf4cf..49fe9a1b26 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt @@ -21,8 +21,8 @@ import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp -import net.mullvad.mullvadvpn.compose.theme.AlphaActive import net.mullvad.mullvadvpn.compose.theme.AlphaInactive +import net.mullvad.mullvadvpn.compose.theme.AlphaVisible import net.mullvad.mullvadvpn.compose.theme.MullvadGreen import net.mullvad.mullvadvpn.compose.theme.MullvadRed import net.mullvad.mullvadvpn.compose.theme.MullvadWhite @@ -81,7 +81,7 @@ fun CellSwitch( // Track drawRoundRect( color = thumbColor, - alpha = if (isEnabled) AlphaActive else AlphaInactive, + alpha = if (isEnabled) AlphaVisible else AlphaInactive, cornerRadius = CornerRadius(x = 15.dp.toPx(), y = 15.dp.toPx()), style = Stroke( @@ -94,7 +94,7 @@ fun CellSwitch( // Thumb drawCircle( color = if (isChecked) thumbCheckedTrackColor else thumbUncheckedTrackColor, - alpha = if (isEnabled) AlphaActive else AlphaInactive, + alpha = if (isEnabled) AlphaVisible else AlphaInactive, radius = thumbRadius.toPx(), center = Offset( diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt index 77e82280bb..0efd386e50 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt @@ -21,5 +21,6 @@ val MullvadWhite40 = Color(0x66FFFFFF) val MullvadWhite60 = Color(0x99FFFFFF) val MullvadWhite80 = Color(0xCCFFFFFF) -const val AlphaActive = 1f +const val AlphaVisible = 1f const val AlphaInactive = 0.4f +const val AlphaInvisible = 0f |