diff options
6 files changed, 58 insertions, 25 deletions
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt index 75888a8579..b9390cd4ef 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt @@ -29,6 +29,7 @@ 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.VerticalDivider import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens import net.mullvad.mullvadvpn.lib.theme.color.Alpha40 @@ -255,12 +256,16 @@ fun RelayLocationCell( ) } if (relay.hasChildren) { + VerticalDivider( + color = MaterialTheme.colorScheme.background, + modifier = Modifier.padding(vertical = Dimens.verticalDividerPadding) + ) ChevronView( isExpanded = expanded.value, modifier = Modifier.fillMaxHeight() .clickable { expanded.value = !expanded.value } - .padding(horizontal = Dimens.mediumPadding) + .padding(horizontal = Dimens.largePadding) .align(Alignment.CenterVertically) ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt index c1c01dc6c1..cd41c3e2a0 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt @@ -1,38 +1,39 @@ package net.mullvad.mullvadvpn.compose.component -import androidx.compose.animation.core.Animatable import androidx.compose.animation.core.LinearEasing -import androidx.compose.animation.core.tween -import androidx.compose.foundation.Image +import androidx.compose.animation.core.TweenSpec +import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.draw.rotate -import androidx.compose.ui.graphics.ColorFilter +import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import net.mullvad.mullvadvpn.R +import net.mullvad.mullvadvpn.lib.theme.color.AlphaChevron @Composable fun ChevronView( modifier: Modifier = Modifier, - colorFilter: ColorFilter? = null, + color: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaChevron), isExpanded: Boolean ) { val resourceId = R.drawable.icon_chevron - val rotation = remember { Animatable(90f + if (isExpanded) 180f else 0f) } - LaunchedEffect(isExpanded) { - rotation.animateTo( - targetValue = 90f + if (isExpanded) 180f else 0f, - animationSpec = tween(100, easing = LinearEasing) + val degree = remember(isExpanded) { if (isExpanded) 270f else 90f } + val animatedRotation = + animateFloatAsState( + targetValue = degree, + label = "", + animationSpec = TweenSpec(100, easing = LinearEasing) ) - } - Image( + Icon( painterResource(id = resourceId), contentDescription = null, - colorFilter = colorFilter, - modifier = modifier.rotate(rotation.value), + tint = color, + modifier = modifier.rotate(animatedRotation.value), ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt index b8f48c4e1a..cd96bae05d 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt @@ -10,7 +10,6 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview @@ -72,14 +71,12 @@ fun LocationInfo( ) ChevronView( isExpanded = isExpanded, - colorFilter = - ColorFilter.tint( - if (isExpanded) { - colorExpanded - } else { - colorCollapsed - } - ), + color = + if (isExpanded) { + colorExpanded + } else { + colorCollapsed + }, modifier = Modifier.padding(horizontal = Dimens.chevronMargin) ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/VerticalDivider.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/VerticalDivider.kt new file mode 100644 index 0000000000..d7e4709b5d --- /dev/null +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/VerticalDivider.kt @@ -0,0 +1,28 @@ +package net.mullvad.mullvadvpn.compose.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.width +import androidx.compose.material3.DividerDefaults +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.platform.LocalDensity +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp + +@Composable +fun VerticalDivider( + modifier: Modifier = Modifier, + thickness: Dp = DividerDefaults.Thickness, + color: Color = DividerDefaults.color, +) { + val targetThickness = + if (thickness == Dp.Hairline) { + (1f / LocalDensity.current.density).dp + } else { + thickness + } + Box(modifier.fillMaxHeight().width(targetThickness).background(color = color)) +} diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt index e2cb7da499..75d8517e23 100644 --- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt +++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt @@ -48,6 +48,7 @@ const val AlphaInactive = 0.4f const val Alpha40 = 0.4f const val AlphaDescription = 0.6f const val AlphaDisconnectButton = 0.6f +const val AlphaChevron = 0.6f const val AlphaScrollbar = 0.6f const val AlphaTopBar = 0.8f const val AlphaInvisible = 0f diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt index 16b2305d6d..61d87e96a6 100644 --- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt +++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt @@ -59,6 +59,7 @@ data class Dimensions( val switchIconSize: Dp = 24.dp, val titleIconSize: Dp = 24.dp, val topBarHeight: Dp = 64.dp, + val verticalDividerPadding: Dp = 12.dp, val verticalSpace: Dp = 20.dp, val verticalSpacer: Dp = 1.dp, ) |