Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix VpnSettingsScreen DPAD navigation #5890

Merged
merged 1 commit into from
Mar 5, 2024
Merged

Fix VpnSettingsScreen DPAD navigation #5890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ package net.mullvad.mullvadvpn.compose.cell

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.Icon
Expand All @@ -13,13 +12,14 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.core.text.HtmlCompat
import net.mullvad.mullvadvpn.R
import net.mullvad.mullvadvpn.compose.component.ChevronView
import net.mullvad.mullvadvpn.compose.component.ChevronButton
import net.mullvad.mullvadvpn.compose.component.textResource
import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
import net.mullvad.mullvadvpn.lib.theme.AppTheme
Expand Down Expand Up @@ -53,6 +53,7 @@ fun ExpandableComposeCell(
val bodyViewModifier = Modifier

BaseCell(
modifier = Modifier.focusProperties { canFocus = false },
title = {
BaseCellTitle(
title = title,
Expand All @@ -64,6 +65,7 @@ fun ExpandableComposeCell(
ExpandableComposeCellBody(
isExpanded = isExpanded,
modifier = bodyViewModifier,
onExpand = onCellClicked,
onInfoClicked = onInfoClicked
)
},
Expand All @@ -75,6 +77,7 @@ fun ExpandableComposeCell(
private fun ExpandableComposeCellBody(
isExpanded: Boolean,
modifier: Modifier,
onExpand: ((Boolean) -> Unit),
onInfoClicked: (() -> Unit)? = null
) {
Row(
Expand All @@ -96,9 +99,9 @@ private fun ExpandableComposeCellBody(
}
}

ChevronView(
ChevronButton(
isExpanded = isExpanded,
modifier = Modifier.size(Dimens.expandableCellChevronSize)
onExpand = onExpand,
)
}
}
Expand Down
2 changes: 2 additions & 0 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
Expand Down Expand Up @@ -45,6 +46,7 @@ fun InformationComposeCell(
val bodyViewModifier = Modifier

BaseCell(
modifier = Modifier.focusProperties { canFocus = false },
title = {
BaseCellTitle(
title = title,
Expand Down
4 changes: 2 additions & 2 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import androidx.compose.ui.graphics.compositeOver
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import net.mullvad.mullvadvpn.R
import net.mullvad.mullvadvpn.compose.component.ChevronView
import net.mullvad.mullvadvpn.compose.component.Chevron
import net.mullvad.mullvadvpn.compose.component.VerticalDivider
import net.mullvad.mullvadvpn.lib.theme.AppTheme
import net.mullvad.mullvadvpn.lib.theme.Dimens
Expand Down Expand Up @@ -258,7 +258,7 @@ fun RelayLocationCell(
color = MaterialTheme.colorScheme.background,
modifier = Modifier.padding(vertical = Dimens.verticalDividerPadding)
)
ChevronView(
Chevron(
isExpanded = expanded.value,
modifier =
Modifier.fillMaxHeight()
Expand Down
5 changes: 3 additions & 2 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
Expand Down Expand Up @@ -118,12 +119,12 @@ private fun SwitchComposeCell(
modifier: Modifier = Modifier,
) {
BaseCell(
modifier = modifier,
modifier = modifier.focusProperties { canFocus = false },
title = titleView,
isRowEnabled = isEnabled,
bodyView = {
SwitchCellView(
onSwitchClicked = null,
onSwitchClicked = onCellClicked,
isEnabled = isEnabled,
isToggled = isToggled,
onInfoClicked = onInfoClicked
Expand Down
18 changes: 15 additions & 3 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.TweenSpec
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
Expand All @@ -15,12 +16,11 @@ import net.mullvad.mullvadvpn.R
import net.mullvad.mullvadvpn.lib.theme.color.AlphaChevron

@Composable
fun ChevronView(
fun Chevron(
modifier: Modifier = Modifier,
color: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaChevron),
isExpanded: Boolean
) {
val resourceId = R.drawable.icon_chevron

val degree = remember(isExpanded) { if (isExpanded) 270f else 90f }
val animatedRotation =
Expand All @@ -31,9 +31,21 @@ fun ChevronView(
)

Icon(
painterResource(id = resourceId),
painterResource(id = R.drawable.icon_chevron),
contentDescription = null,
tint = color,
modifier = modifier.rotate(animatedRotation.value),
)
}

@Composable
fun ChevronButton(
modifier: Modifier = Modifier,
color: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaChevron),
onExpand: (Boolean) -> Unit,
isExpanded: Boolean
) {
IconButton(modifier = modifier, onClick = { onExpand(!isExpanded) }) {
Chevron(isExpanded = isExpanded, color = color)
}
}
2 changes: 1 addition & 1 deletion android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ fun LocationInfo(
},
style = MaterialTheme.typography.labelLarge.copy(fontWeight = FontWeight.SemiBold)
)
ChevronView(
Chevron(
isExpanded = isExpanded,
color =
if (isExpanded) {
Expand Down
Loading