Add and update device compose components

5 files changed, 162 insertions, 17 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Button.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Button.kt
index fac8aa8a49..dc2068c5e5 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Button.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Button.kt
@@ -5,11 +5,10 @@ import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.material.Button
-import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.ButtonColors
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
@@ -21,7 +20,8 @@ import net.mullvad.mullvadvpn.R
 fun ActionButton(
     text: String,
     onClick: () -> Unit,
-    buttonColor: Color,
+    colors: ButtonColors,
+    modifier: Modifier = Modifier,
     isEnabled: Boolean = true
 ) {
     Button(
@@ -29,17 +29,14 @@ fun ActionButton(
         enabled = isEnabled,
         // Required along with defaultMinSize to control size and padding.
         contentPadding = PaddingValues(0.dp),
-        modifier = Modifier
+        modifier = modifier
             .height(dimensionResource(id = R.dimen.button_height))
             .defaultMinSize(
                 minWidth = 0.dp,
                 minHeight = dimensionResource(id = R.dimen.button_height)
             )
             .fillMaxWidth(),
-        colors = ButtonDefaults.buttonColors(
-            backgroundColor = buttonColor,
-            contentColor = Color.White
-        )
+        colors = colors
     ) {
         Text(
             text = text,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/HtmlText.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/HtmlText.kt
new file mode 100644
index 0000000000..81d212df84
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/HtmlText.kt
@@ -0,0 +1,25 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import android.text.Spanned
+import android.util.TypedValue
+import android.widget.TextView
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.viewinterop.AndroidView
+
+@Composable
+fun HtmlText(
+    htmlFormattedText: Spanned,
+    textSize: Float,
+    modifier: Modifier = Modifier
+) {
+    AndroidView(
+        modifier = modifier,
+        factory = { context ->
+            TextView(context).apply {
+                setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize)
+            }
+        },
+        update = { it.text = htmlFormattedText }
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
new file mode 100644
index 0000000000..887237374b
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
@@ -0,0 +1,106 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.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.graphics.painter.Painter
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.model.Device
+
+@Composable
+fun DeviceList(
+    devices: List<Device>,
+    onItemClicked: (Device) -> Unit
+) {
+    Column(
+        modifier = Modifier.verticalScroll(ScrollState(0))
+    ) {
+        devices.forEach { device ->
+            DeviceRow(device.name) {
+                onItemClicked(device)
+            }
+        }
+    }
+}
+
+@Composable
+fun DeviceRow(
+    name: String,
+    painter: Painter? = null,
+    onItemClicked: () -> Unit
+) {
+    val itemColor = colorResource(id = R.color.blue)
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 1.dp)
+            .height(50.dp)
+            .background(itemColor)
+            .clickable {
+                onItemClicked()
+            },
+    ) {
+        Text(
+            text = name,
+            fontSize = 18.sp,
+            color = Color.White,
+            modifier = Modifier
+                .padding(
+                    horizontal = 16.dp
+                )
+                .align(Alignment.CenterStart)
+        )
+
+        if (painter != null) {
+            Image(
+                painter = painter,
+                contentDescription = "Remove",
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .padding(horizontal = 12.dp)
+            )
+        }
+    }
+}
+
+@Composable
+fun <T> ItemList(
+    items: List<T>,
+    itemText: (T) -> String,
+    onItemClicked: (T) -> Unit,
+    itemPainter: Painter? = null,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .then(
+                Modifier
+                    .verticalScroll(
+                        rememberScrollState()
+                    )
+            )
+    ) {
+        items.forEach { item ->
+            DeviceRow(itemText.invoke(item), itemPainter) {
+                onItemClicked(item)
+            }
+        }
+    }
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ReadOnlyComposables.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ReadOnlyComposables.kt
new file mode 100644
index 0000000000..af685e5e5c
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ReadOnlyComposables.kt
@@ -0,0 +1,16 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import android.text.Spanned
+import androidx.annotation.StringRes
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.ui.platform.LocalContext
+import androidx.core.text.HtmlCompat
+
+@Composable
+@ReadOnlyComposable
+fun textResource(@StringRes id: Int, vararg formatArgs: Any): Spanned {
+    return LocalContext.current.resources.getString(id, *formatArgs).let { text ->
+        HtmlCompat.fromHtml(text, HtmlCompat.FROM_HTML_MODE_COMPACT)
+    }
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
index d1ae33d0e5..fc58c2685f 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -96,18 +97,18 @@ fun DeviceRevokedScreen(
                     width = Dimension.fillToConstraints
                 }
         ) {
-            val buttonColor = colorResource(
-                if (state == DeviceRevokedUiState.SECURED) {
-                    R.color.red60
-                } else {
-                    R.color.blue
-                }
-            )
-
             ActionButton(
                 text = stringResource(id = R.string.go_to_login),
                 onClick = { deviceRevokedViewModel.onGoToLoginClicked() },
-                buttonColor = buttonColor
+                colors = ButtonDefaults.buttonColors(
+                    backgroundColor = colorResource(
+                        if (state == DeviceRevokedUiState.SECURED) {
+                            R.color.red60
+                        } else {
+                            R.color.blue
+                        }
+                    )
+                )
             )
         }
     }