Refactor and fix chevron

mullvad · Sep 19, 2024 · b8d3675 · b8d3675
1 parent 7b4ffb6
commit b8d3675
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 34 deletions.
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
@@ -21,7 +21,7 @@ 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.ChevronButton
+import net.mullvad.mullvadvpn.compose.component.ExpandChevronIconButton
 import net.mullvad.mullvadvpn.compose.component.textResource
 import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -107,7 +107,7 @@ private fun ExpandableComposeCellBody(
             }
         }
 
-        ChevronButton(
+        ExpandChevronIconButton(
             isExpanded = isExpanded,
             onExpand = onExpand,
             color = MaterialTheme.colorScheme.onPrimary,

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt
@@ -12,12 +12,12 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.ChevronRight
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 
@@ -67,7 +67,7 @@ fun NavigationComposeCell(
     showWarning: Boolean = false,
     textColor: Color = MaterialTheme.colorScheme.onPrimary,
     bodyView: @Composable () -> Unit = {
-        DefaultNavigationView(chevronContentDescription = title, tint = textColor)
+        ChevronRight(contentDescription = title, tint = textColor)
     },
     isRowEnabled: Boolean = true,
     onClick: () -> Unit,
@@ -112,16 +112,6 @@ internal fun NavigationTitleView(
     )
 }
 
-@Composable
-internal fun DefaultNavigationView(chevronContentDescription: String, tint: Color) {
-    Icon(
-        modifier = Modifier.rotate(-90f),
-        painter = painterResource(id = R.drawable.icon_chevron),
-        contentDescription = chevronContentDescription,
-        tint = tint,
-    )
-}
-
 @Composable
 internal fun DefaultExternalLinkView(chevronContentDescription: String, tint: Color) {
     Icon(
@@ -149,10 +139,7 @@ internal fun NavigationCellBody(
         if (isExternalLink) {
             DefaultExternalLinkView(content, tint = contentColor)
         } else {
-            DefaultNavigationView(
-                chevronContentDescription = contentBodyDescription,
-                tint = contentColor,
-            )
+            ChevronRight(tint = contentColor, contentDescription = contentBodyDescription)
         }
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ObfuscationModeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ObfuscationModeCell.kt
@@ -2,23 +2,25 @@ package net.mullvad.mullvadvpn.compose.cell
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Icon
+import androidx.compose.foundation.layout.width
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.VerticalDivider
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.ChevronRight
 import net.mullvad.mullvadvpn.compose.preview.SelectObfuscationCellPreviewParameterProvider
 import net.mullvad.mullvadvpn.lib.model.Constraint
 import net.mullvad.mullvadvpn.lib.model.ObfuscationMode
@@ -88,15 +90,16 @@ fun ObfuscationModeCell(
             color = MaterialTheme.colorScheme.surface,
             modifier = Modifier.fillMaxHeight().padding(vertical = Dimens.verticalDividerPadding),
         )
-        Icon(
-            painterResource(id = R.drawable.icon_chevron),
-            contentDescription = null,
-            tint = MaterialTheme.colorScheme.onPrimary,
+
+        Box(
             modifier =
-                Modifier.fillMaxHeight()
-                    .clickable { onNavigate() }
-                    .padding(horizontal = Dimens.obfuscationNavigationPadding),
-        )
+                Modifier.width(Dimens.obfuscationNavigationBoxWidth).fillMaxHeight().clickable {
+                    onNavigate()
+                },
+            contentAlignment = Alignment.Center,
+        ) {
+            ChevronRight(tint = MaterialTheme.colorScheme.onPrimary, contentDescription = null)
+        }
     }
 }
 

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
@@ -25,10 +25,19 @@ private fun PreviewChevron() {
     }
 }
 
+@Composable
+@Preview
+private fun PreviewChevronRight() {
+    Column {
+        ChevronLeft(tint = MaterialTheme.colorScheme.onPrimary)
+        ChevronRight(tint = MaterialTheme.colorScheme.onPrimary)
+    }
+}
+
 @Composable
 fun Chevron(modifier: Modifier = Modifier, color: Color, isExpanded: Boolean) {
 
-    val degree = remember(isExpanded) { if (isExpanded) 180f else 0f }
+    val degree = remember(isExpanded) { if (isExpanded) UP_ROTATION else DOWN_ROTATION }
     val animatedRotation =
         animateFloatAsState(
             targetValue = degree,
@@ -45,7 +54,27 @@ fun Chevron(modifier: Modifier = Modifier, color: Color, isExpanded: Boolean) {
 }
 
 @Composable
-fun ChevronButton(
+fun ChevronLeft(modifier: Modifier = Modifier, tint: Color, contentDescription: String? = null) {
+    Icon(
+        painterResource(id = R.drawable.icon_chevron),
+        contentDescription = contentDescription,
+        tint = tint,
+        modifier = modifier.rotate(LEFT_ROTATION),
+    )
+}
+
+@Composable
+fun ChevronRight(modifier: Modifier = Modifier, tint: Color, contentDescription: String? = null) {
+    Icon(
+        painterResource(id = R.drawable.icon_chevron),
+        contentDescription = contentDescription,
+        tint = tint,
+        modifier = modifier.rotate(RIGHT_ROTATION),
+    )
+}
+
+@Composable
+fun ExpandChevronIconButton(
     modifier: Modifier = Modifier,
     color: Color,
     onExpand: (Boolean) -> Unit,
@@ -55,3 +84,8 @@ fun ChevronButton(
         Chevron(isExpanded = isExpanded, color = color)
     }
 }
+
+private const val RIGHT_ROTATION = -90f
+private const val LEFT_ROTATION = 90f
+private const val DOWN_ROTATION = 0f
+private const val UP_ROTATION = 180f
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ApiAccessListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ApiAccessListScreen.kt
@@ -27,8 +27,8 @@ import com.ramcosta.composedestinations.generated.destinations.EditApiAccessMeth
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
-import net.mullvad.mullvadvpn.compose.cell.DefaultNavigationView
 import net.mullvad.mullvadvpn.compose.cell.TwoRowCell
+import net.mullvad.mullvadvpn.compose.component.ChevronRight
 import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar
 import net.mullvad.mullvadvpn.compose.constant.ContentType
@@ -188,9 +188,9 @@ private fun ApiAccessMethodItem(
         titleStyle = MaterialTheme.typography.titleMedium,
         subtitleColor = MaterialTheme.colorScheme.onSurfaceVariant,
         bodyView = {
-            DefaultNavigationView(
-                chevronContentDescription = apiAccessMethodSetting.name.value,
+            ChevronRight(
                 tint = MaterialTheme.colorScheme.onPrimary,
+                contentDescription = apiAccessMethodSetting.name.value,
             )
         },
         onCellClicked = { onApiAccessMethodClick(apiAccessMethodSetting) },

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
@@ -49,7 +49,7 @@ data class Dimensions(
     val notificationBannerStartPadding: Dp = 16.dp,
     val notificationEndIconPadding: Dp = 4.dp,
     val notificationStatusIconSize: Dp = 10.dp,
-    val obfuscationNavigationPadding: Dp = 24.dp,
+    val obfuscationNavigationBoxWidth: Dp = 80.dp,
     val problemReportIconToTitlePadding: Dp = 60.dp,
     val reconnectButtonMinInteractiveComponentSize: Dp = 40.dp,
     val relayCircleSize: Dp = 16.dp,