Add new external link settings cell

Modify navigation cell to support showing extra information.

3 files changed, 97 insertions, 14 deletions

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
index 7b1ee8ee46..cd087f0b9f 100644
--- 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
@@ -1,58 +1,134 @@
 package net.mullvad.mullvadvpn.compose.cell
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 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.dimensionResource
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.sp
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.theme.Dimens
 
 @Preview
 @Composable
 private fun PreviewNavigationCell() {
-    NavigationComposeCell(title = "Navigation sample", onClick = {})
+    NavigationComposeCell(
+        title = "Navigation sample",
+        bodyView = {
+            NavigationCellBody(
+                contentBodyDescription = "",
+                content = "content body",
+                contentColor = MaterialTheme.colorScheme.error,
+            )
+        },
+        onClick = {},
+        showWarning = true
+    )
+}
+
+@Preview
+@Composable
+private fun PreviewExternalLinkComposeCell() {
+    NavigationComposeCell(
+        title = "External link sample",
+        bodyView = {
+            NavigationCellBody(
+                contentBodyDescription = "content body",
+                content = "content body",
+                contentColor = MaterialTheme.colorScheme.onSecondary,
+                isExternalLink = true
+            )
+        },
+        onClick = {},
+        showWarning = false
+    )
 }
 
 @Composable
 fun NavigationComposeCell(
     title: String,
     modifier: Modifier = Modifier,
+    showWarning: Boolean = false,
     bodyView: @Composable () -> Unit = { DefaultNavigationView(chevronContentDescription = title) },
     onClick: () -> Unit
 ) {
     BaseCell(
         onCellClicked = onClick,
-        title = { NavigationTitleView(title = title, modifier = modifier) },
+        title = {
+            NavigationTitleView(title = title, modifier = modifier, showWarning = showWarning)
+        },
         bodyView = { bodyView() }
     )
 }
 
 @Composable
-private fun NavigationTitleView(title: String, modifier: Modifier = Modifier) {
-    val textMediumSize = dimensionResource(id = R.dimen.text_medium_plus).value.sp
+internal fun NavigationTitleView(
+    title: String,
+    modifier: Modifier = Modifier,
+    showWarning: Boolean = false
+) {
+    if (showWarning) {
+        Image(
+            painter = painterResource(id = R.drawable.icon_alert),
+            modifier = Modifier.padding(end = Dimens.smallPadding),
+            contentDescription = stringResource(id = R.string.update_available)
+        )
+    }
     Text(
         text = title,
-        textAlign = TextAlign.Center,
-        fontWeight = FontWeight.Bold,
-        fontSize = textMediumSize,
-        color = Color.White,
-        modifier = modifier.wrapContentWidth(align = Alignment.End).wrapContentHeight()
+        style = MaterialTheme.typography.titleMedium,
+        color = MaterialTheme.colorScheme.onPrimary
     )
 }
 
 @Composable
-private fun DefaultNavigationView(chevronContentDescription: String) {
+internal fun DefaultNavigationView(chevronContentDescription: String) {
     Image(
         painter = painterResource(id = R.drawable.icon_chevron),
         contentDescription = chevronContentDescription
     )
 }
+
+@Composable
+internal fun DefaultExternalLinkView(chevronContentDescription: String) {
+    Image(
+        painter = painterResource(id = R.drawable.icon_extlink),
+        contentDescription = chevronContentDescription
+    )
+}
+
+@Composable
+internal fun NavigationCellBody(
+    content: String,
+    contentBodyDescription: String,
+    modifier: Modifier = Modifier,
+    contentColor: Color = MaterialTheme.colorScheme.onSecondary,
+    isExternalLink: Boolean = false
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier.wrapContentWidth().wrapContentHeight()
+    ) {
+        Text(
+            text = content.uppercase(),
+            style = MaterialTheme.typography.labelMedium,
+            color = contentColor
+        )
+        Spacer(modifier = Modifier.width(Dimens.sideMargin))
+        if (isExternalLink) {
+            DefaultExternalLinkView(content)
+        } else {
+            DefaultNavigationView(chevronContentDescription = contentBodyDescription)
+        }
+    }
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt
index 0d038fe10e..8c949531ff 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt
@@ -10,6 +10,8 @@ data class Dimensions(
     val cellHeight: Dp = 52.dp,
     val cellLabelVerticalPadding: Dp = 14.dp,
     val cellStartPadding: Dp = 22.dp,
+    val cellTopPadding: Dp = 6.dp,
+    val cellVerticalSpacing: Dp = 14.dp,
     val cityRowPadding: Dp = 34.dp,
     val countryRowPadding: Dp = 18.dp,
     val customPortBoxMinWidth: Dp = 80.dp,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/extension/ContextExtensions.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/extension/ContextExtensions.kt
index ecaa995e4a..2ebff31c5e 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/extension/ContextExtensions.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/extension/ContextExtensions.kt
@@ -48,3 +48,8 @@ fun Context.resolveAlwaysOnVpnPackageName(): String? {
         null
     }
 }
+
+fun Context.openLink(uri: Uri) {
+    val intent = Intent(Intent.ACTION_VIEW, uri)
+    startActivity(intent)
+}