Merge branch 'migrate-problem-report-view-to-compose-droid-58'

mullvad · Oct 4, 2023 · 53b7f1c · 53b7f1c
2 parents 66059dd + c83c55f
commit 53b7f1c
Show file tree

Hide file tree

Showing 27 changed files with 946 additions and 1,005 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -37,6 +37,8 @@ Line wrap the file at 100 chars.                                              Th
 - Migrate out of time view to compose.
 - Migrate login view to compose.
 - Add Social media to content blockers.
+- Migrate Report Problem view to compose.
+- Migrate View Logs view to compose.
 
 #### Linux
 - Don't block forwarding of traffic when the split tunnel mark (ct mark) is set.

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
@@ -34,6 +34,7 @@ fun ScaffoldWithTopBar(
     topBarColor: Color,
     statusBarColor: Color,
     navigationBarColor: Color,
+    modifier: Modifier = Modifier,
     iconTintColor: Color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaTopBar),
     onSettingsClicked: (() -> Unit)?,
     onAccountClicked: (() -> Unit)?,
@@ -48,6 +49,7 @@ fun ScaffoldWithTopBar(
     }
 
     Scaffold(
+        modifier = modifier,
         topBar = {
             TopBar(
                 backgroundColor = topBarColor,

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scrollbar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scrollbar.kt
@@ -72,19 +72,33 @@ import kotlinx.coroutines.flow.collectLatest
 fun Modifier.drawHorizontalScrollbar(
     state: ScrollState,
     reverseScrolling: Boolean = false
-): Modifier = drawScrollbar(state, Orientation.Horizontal, reverseScrolling)
+): Modifier = composed { drawScrollbar(state, Orientation.Horizontal, BarColor, reverseScrolling) }
 
 fun Modifier.drawVerticalScrollbar(
     state: ScrollState,
     reverseScrolling: Boolean = false
-): Modifier = drawScrollbar(state, Orientation.Vertical, reverseScrolling)
+): Modifier = composed { drawScrollbar(state, Orientation.Vertical, BarColor, reverseScrolling) }
+
+fun Modifier.drawHorizontalScrollbar(
+    state: ScrollState,
+    color: Color,
+    reverseScrolling: Boolean = false
+): Modifier = drawScrollbar(state, Orientation.Horizontal, color, reverseScrolling)
+
+fun Modifier.drawVerticalScrollbar(
+    state: ScrollState,
+    color: Color,
+    reverseScrolling: Boolean = false
+): Modifier = drawScrollbar(state, Orientation.Vertical, color, reverseScrolling)
 
 private fun Modifier.drawScrollbar(
     state: ScrollState,
     orientation: Orientation,
+    color: Color,
     reverseScrolling: Boolean
 ): Modifier =
-    drawScrollbar(orientation, reverseScrolling) { reverseDirection, atEnd, color, alpha ->
+    drawScrollbar(orientation, color, reverseScrolling) { reverseDirection, atEnd, paintColor, alpha
+        ->
         if (state.maxValue > 0) {
             val canvasSize = if (orientation == Orientation.Horizontal) size.width else size.height
             val totalSize = canvasSize + state.maxValue
@@ -94,7 +108,7 @@ private fun Modifier.drawScrollbar(
                 orientation,
                 reverseDirection,
                 atEnd,
-                color,
+                paintColor,
                 alpha,
                 thumbSize,
                 startOffset
@@ -105,19 +119,21 @@ private fun Modifier.drawScrollbar(
 fun Modifier.drawHorizontalScrollbar(
     state: LazyListState,
     reverseScrolling: Boolean = false
-): Modifier = drawScrollbar(state, Orientation.Horizontal, reverseScrolling)
+): Modifier = composed { drawScrollbar(state, Orientation.Horizontal, BarColor, reverseScrolling) }
 
 fun Modifier.drawVerticalScrollbar(
     state: LazyListState,
     reverseScrolling: Boolean = false
-): Modifier = drawScrollbar(state, Orientation.Vertical, reverseScrolling)
+): Modifier = composed { drawScrollbar(state, Orientation.Vertical, BarColor, reverseScrolling) }
 
 private fun Modifier.drawScrollbar(
     state: LazyListState,
     orientation: Orientation,
+    color: Color,
     reverseScrolling: Boolean
 ): Modifier =
-    drawScrollbar(orientation, reverseScrolling) { reverseDirection, atEnd, color, alpha ->
+    drawScrollbar(orientation, color, reverseScrolling) { reverseDirection, atEnd, paintColor, alpha
+        ->
         val layoutInfo = state.layoutInfo
         val viewportSize = layoutInfo.viewportEndOffset - layoutInfo.viewportStartOffset
         val items = layoutInfo.visibleItemsInfo
@@ -137,7 +153,7 @@ private fun Modifier.drawScrollbar(
                 orientation,
                 reverseDirection,
                 atEnd,
-                color,
+                paintColor,
                 alpha,
                 thumbSize,
                 startOffset
@@ -148,9 +164,14 @@ private fun Modifier.drawScrollbar(
 fun Modifier.drawVerticalScrollbar(
     state: LazyGridState,
     spanCount: Int,
-    reverseScrolling: Boolean = false
+    color: Color,
+    reverseScrolling: Boolean = false,
 ): Modifier =
-    drawScrollbar(Orientation.Vertical, reverseScrolling) { reverseDirection, atEnd, color, alpha ->
+    drawScrollbar(Orientation.Vertical, color, reverseScrolling) {
+        reverseDirection,
+        atEnd,
+        paintColor,
+        alpha ->
         val layoutInfo = state.layoutInfo
         val viewportSize = layoutInfo.viewportEndOffset - layoutInfo.viewportStartOffset
         val items = layoutInfo.visibleItemsInfo
@@ -176,7 +197,7 @@ fun Modifier.drawVerticalScrollbar(
                 Orientation.Vertical,
                 reverseDirection,
                 atEnd,
-                color,
+                paintColor,
                 alpha,
                 thumbSize,
                 startOffset
@@ -225,6 +246,7 @@ private fun DrawScope.drawScrollbar(
 
 private fun Modifier.drawScrollbar(
     orientation: Orientation,
+    color: Color,
     reverseScrolling: Boolean,
     onDraw:
         DrawScope.(
@@ -269,8 +291,6 @@ private fun Modifier.drawScrollbar(
         } else reverseScrolling
     val atEnd = if (orientation == Orientation.Vertical) isLtr else true
 
-    val color = BarColor
-
     Modifier.nestedScroll(nestedScrollConnection).drawWithContent {
         drawContent()
         onDraw(reverseDirection, atEnd, color, alpha::value)

diff --git a/...d/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ReportProblemNoEmailDialog.kt b/...d/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ReportProblemNoEmailDialog.kt
@@ -0,0 +1,77 @@
+package net.mullvad.mullvadvpn.compose.dialog
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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 net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.button.ActionButton
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
+
+@Preview
+@Composable
+private fun PreviewReportProblemNoEmailDialog() {
+    AppTheme {
+        ReportProblemNoEmailDialog(
+            onDismiss = {},
+            onConfirm = {},
+        )
+    }
+}
+
+@Composable
+fun ReportProblemNoEmailDialog(onDismiss: () -> Unit, onConfirm: () -> Unit) {
+    AlertDialog(
+        onDismissRequest = { onDismiss() },
+        icon = {
+            Icon(
+                painter = painterResource(id = R.drawable.icon_alert),
+                contentDescription = null,
+                modifier = Modifier.size(Dimens.dialogIconHeight),
+                tint = Color.Unspecified
+            )
+        },
+        text = {
+            Text(
+                text = stringResource(id = R.string.confirm_no_email),
+                modifier = Modifier.fillMaxWidth(),
+                style = MaterialTheme.typography.bodySmall
+            )
+        },
+        dismissButton = {
+            ActionButton(
+                modifier = Modifier.fillMaxWidth(),
+                colors =
+                    ButtonDefaults.buttonColors(
+                        containerColor = MaterialTheme.colorScheme.error,
+                        contentColor = MaterialTheme.colorScheme.onError,
+                    ),
+                onClick = onConfirm,
+                text = stringResource(id = R.string.send_anyway)
+            )
+        },
+        confirmButton = {
+            ActionButton(
+                modifier = Modifier.fillMaxWidth(),
+                colors =
+                    ButtonDefaults.buttonColors(
+                        containerColor = MaterialTheme.colorScheme.primary,
+                        contentColor = MaterialTheme.colorScheme.onPrimary,
+                    ),
+                onClick = { onDismiss() },
+                text = stringResource(id = R.string.back)
+            )
+        },
+        containerColor = MaterialTheme.colorScheme.background
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt
@@ -13,7 +13,6 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
@@ -28,7 +27,6 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
-import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -59,6 +57,7 @@ import net.mullvad.mullvadvpn.compose.state.LoginError
 import net.mullvad.mullvadvpn.compose.state.LoginState
 import net.mullvad.mullvadvpn.compose.state.LoginState.*
 import net.mullvad.mullvadvpn.compose.state.LoginUiState
+import net.mullvad.mullvadvpn.compose.textfield.mullvadWhiteTextFieldColors
 import net.mullvad.mullvadvpn.compose.util.accountTokenVisualTransformation
 import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -195,21 +194,7 @@ private fun LoginContent(
             maxLines = 1,
             visualTransformation = accountTokenVisualTransformation(),
             enabled = uiState.loginState is Idle,
-            colors =
-                TextFieldDefaults.colors(
-                    focusedTextColor = Color.Black,
-                    unfocusedTextColor = Color.Gray,
-                    disabledTextColor = Color.Gray,
-                    errorTextColor = Color.Black,
-                    cursorColor = MaterialTheme.colorScheme.background,
-                    focusedPlaceholderColor = MaterialTheme.colorScheme.background,
-                    unfocusedPlaceholderColor = MaterialTheme.colorScheme.primary,
-                    focusedLabelColor = MaterialTheme.colorScheme.background,
-                    disabledLabelColor = Color.Gray,
-                    unfocusedLabelColor = MaterialTheme.colorScheme.background,
-                    focusedLeadingIconColor = Color.Black,
-                    unfocusedSupportingTextColor = Color.Black,
-                ),
+            colors = mullvadWhiteTextFieldColors(),
             isError = uiState.loginState.isError(),
         )
 
@@ -266,14 +251,13 @@ private fun LoginIcon(loginState: LoginState, modifier: Modifier = Modifier) {
                 }
             is Loading ->
                 CircularProgressIndicator(
-                    modifier = Modifier.size(Dimens.progressIndicatorSize),
+                    modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.onPrimary,
                     strokeWidth = Dimens.loadingSpinnerStrokeWidth,
                     strokeCap = StrokeCap.Round
                 )
             Success ->
                 Image(
-                    modifier = Modifier.offset(-Dimens.smallPadding, -Dimens.smallPadding),
                     painter = painterResource(id = R.drawable.icon_success),
                     contentDescription = stringResource(id = R.string.logged_in_title),
                 )