Simplify chevron animation and fix alpha

mullvad · Oct 30, 2023 · a9ec09a · a9ec09a
1 parent 7e9bb04
commit a9ec09a
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -58,6 +58,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,
 )