Add initial compose components

7 files changed, 241 insertions, 0 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
new file mode 100644
index 0000000000..fac8aa8a49
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Button.kt
@@ -0,0 +1,51 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import androidx.compose.foundation.layout.PaddingValues
+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.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
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import net.mullvad.mullvadvpn.R
+
+@Composable
+fun ActionButton(
+    text: String,
+    onClick: () -> Unit,
+    buttonColor: Color,
+    isEnabled: Boolean = true
+) {
+    Button(
+        onClick = onClick,
+        enabled = isEnabled,
+        // Required along with defaultMinSize to control size and padding.
+        contentPadding = PaddingValues(0.dp),
+        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
+        )
+    ) {
+        Text(
+            text = text,
+            textAlign = TextAlign.Center,
+            fontSize = 18.sp,
+            fontWeight = FontWeight.Bold
+        )
+    }
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
new file mode 100644
index 0000000000..67e4a3ec19
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
@@ -0,0 +1,30 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.material.Scaffold
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+
+@Composable
+fun ScaffoldWithTopBar(
+    topBarColor: Color,
+    statusBarColor: Color,
+    navigationBarColor: Color,
+    onSettingsClicked: () -> Unit,
+    content: @Composable (PaddingValues) -> Unit,
+) {
+    val systemUiController = rememberSystemUiController()
+    systemUiController.setStatusBarColor(statusBarColor)
+    systemUiController.setNavigationBarColor(navigationBarColor)
+
+    Scaffold(
+        topBar = {
+            TopBar(
+                backgroundColor = topBarColor,
+                onSettingsClicked = onSettingsClicked
+            )
+        },
+        content = content
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Text.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Text.kt
new file mode 100644
index 0000000000..cfa999194e
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Text.kt
@@ -0,0 +1,54 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import androidx.compose.material.LocalTextStyle
+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.text.TextLayoutResult
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.TextUnit
+
+@Composable
+fun CapsText(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    fontSize: TextUnit = TextUnit.Unspecified,
+    fontStyle: androidx.compose.ui.text.font.FontStyle? = null,
+    fontWeight: FontWeight? = null,
+    fontFamily: FontFamily? = null,
+    letterSpacing: TextUnit = TextUnit.Unspecified,
+    textDecoration: TextDecoration? = null,
+    textAlign: TextAlign? = null,
+    lineHeight: TextUnit = TextUnit.Unspecified,
+    overflow: TextOverflow = TextOverflow.Clip,
+    softWrap: Boolean = true,
+    maxLines: Int = Int.MAX_VALUE,
+    onTextLayout: (TextLayoutResult) -> Unit = {},
+    style: TextStyle = LocalTextStyle.current
+) {
+    Text(
+        text = text.uppercase(),
+        modifier = modifier,
+        color = color,
+        fontSize = fontSize,
+        fontStyle = fontStyle,
+        fontWeight = fontWeight,
+        fontFamily = fontFamily,
+        letterSpacing = letterSpacing,
+        textDecoration = textDecoration,
+        textAlign = textAlign,
+        lineHeight = lineHeight,
+        overflow = overflow,
+        softWrap = softWrap,
+        maxLines = maxLines,
+        onTextLayout = onTextLayout,
+        style = style,
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Theme.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Theme.kt
new file mode 100644
index 0000000000..4cb68f9d17
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Theme.kt
@@ -0,0 +1,13 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+
+@Composable
+fun AppTheme(
+    content: @Composable () -> Unit
+) {
+    MaterialTheme(
+        content = content
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
new file mode 100644
index 0000000000..d44a06b19c
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
@@ -0,0 +1,79 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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.foundation.layout.width
+import androidx.compose.material.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.constraintlayout.compose.ConstraintLayout
+import net.mullvad.mullvadvpn.R
+
+@Composable
+fun TopBar(
+    backgroundColor: Color,
+    onSettingsClicked: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    ConstraintLayout(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(dimensionResource(id = R.dimen.top_bar_height))
+            .background(backgroundColor)
+            .then(modifier),
+    ) {
+        val (logo, appName, settingsIcon) = createRefs()
+
+        Image(
+            painter = painterResource(id = R.drawable.logo_icon),
+            contentDescription = null, // No meaningful user info or action.
+            modifier = Modifier
+                .width(44.dp)
+                .height(44.dp)
+                .constrainAs(logo) {
+                    start.linkTo(parent.start, margin = 16.dp)
+                    top.linkTo(parent.top, margin = 12.dp)
+                    bottom.linkTo(parent.bottom, margin = 12.dp)
+                }
+        )
+
+        CapsText(
+            text = stringResource(id = R.string.app_name),
+            fontWeight = FontWeight.Bold,
+            fontSize = 24.sp,
+            color = colorResource(id = R.color.white80),
+            modifier = Modifier
+                .constrainAs(appName) {
+                    start.linkTo(logo.end, margin = 9.dp)
+                    top.linkTo(parent.top, margin = 12.dp)
+                }
+        )
+
+        Icon(
+            painter = painterResource(R.drawable.icon_settings),
+            contentDescription = stringResource(id = R.string.settings),
+            tint = Color.White,
+
+            modifier = Modifier
+                .clickable { onSettingsClicked() }
+                .fillMaxHeight()
+                .padding(horizontal = 16.dp)
+                .constrainAs(settingsIcon) {
+                    end.linkTo(parent.end)
+                }
+        )
+    }
+}
diff --git a/android/app/src/main/res/layout/fragment_compose.xml b/android/app/src/main/res/layout/fragment_compose.xml
new file mode 100644
index 0000000000..e54d17348c
--- /dev/null
+++ b/android/app/src/main/res/layout/fragment_compose.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".DeviceInactiveFragment">
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/compose_view"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+
+</FrameLayout>
diff --git a/android/app/src/main/res/values/dimensions.xml b/android/app/src/main/res/values/dimensions.xml
index c8e8b2ff33..e3f619db33 100644
--- a/android/app/src/main/res/values/dimensions.xml
+++ b/android/app/src/main/res/values/dimensions.xml
@@ -53,4 +53,5 @@
     <dimen name="switch_thumb_padding">8dp</dimen>
     <dimen name="switch_track_radius">16dp</dimen>
     <dimen name="switch_track_stroke">2dp</dimen>
+    <dimen name="top_bar_height">64dp</dimen>
 </resources>