Add toggle button for split tunneling

Co-Authored-By: Boban Sijuk <[email protected]>
mullvad · Feb 7, 2024 · f73477d · f73477d
1 parent 1b80203
commit f73477d
Show file tree

Hide file tree

Showing 10 changed files with 343 additions and 129 deletions.
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt
@@ -41,8 +41,18 @@ private fun PreviewTunnelingCell() {
             modifier =
                 Modifier.background(color = MaterialTheme.colorScheme.background).padding(20.dp)
         ) {
-            SplitTunnelingCell(title = "Mullvad VPN", packageName = "", isSelected = false)
-            SplitTunnelingCell(title = "Mullvad VPN", packageName = "", isSelected = true)
+            SplitTunnelingCell(
+                title = "Mullvad VPN",
+                packageName = "",
+                isSelected = false,
+                enabled = true
+            )
+            SplitTunnelingCell(
+                title = "Mullvad VPN",
+                packageName = "",
+                isSelected = true,
+                enabled = true
+            )
         }
     }
 }
@@ -52,6 +62,7 @@ fun SplitTunnelingCell(
     title: String,
     packageName: String?,
     isSelected: Boolean,
+    enabled: Boolean,
     modifier: Modifier = Modifier,
     backgroundColor: Color =
         MaterialTheme.colorScheme.primary
@@ -110,6 +121,7 @@ fun SplitTunnelingCell(
         },
         onCellClicked = onCellClicked,
         background = backgroundColor,
-        modifier = modifier
+        modifier = modifier,
+        isRowEnabled = enabled
     )
 }
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
@@ -148,6 +148,51 @@ fun ScaffoldWithMediumTopBar(
     )
 }
 
+@Composable
+@OptIn(ExperimentalMaterial3Api::class)
+fun ScaffoldWithMediumTopBar(
+    appBarTitle: String,
+    modifier: Modifier = Modifier,
+    navigationIcon: @Composable () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    switch: @Composable RowScope.() -> Unit = {},
+    lazyListState: LazyListState = rememberLazyListState(),
+    scrollbarColor: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
+    snackbarHostState: SnackbarHostState = remember { SnackbarHostState() },
+    content: @Composable (modifier: Modifier, lazyListState: LazyListState) -> Unit
+) {
+    val appBarState = rememberTopAppBarState()
+    val canScroll = lazyListState.canScrollForward || lazyListState.canScrollBackward
+    val scrollBehavior =
+        TopAppBarDefaults.exitUntilCollapsedScrollBehavior(appBarState, canScroll = { canScroll })
+    Scaffold(
+        modifier = modifier.fillMaxSize().nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            MullvadMediumTopBarWithSwitch(
+                title = appBarTitle,
+                navigationIcon = navigationIcon,
+                actions,
+                switch,
+                scrollBehavior = scrollBehavior
+            )
+        },
+        snackbarHost = {
+            SnackbarHost(
+                snackbarHostState,
+                snackbar = { snackbarData -> MullvadSnackbar(snackbarData = snackbarData) }
+            )
+        },
+        content = {
+            content(
+                Modifier.fillMaxSize()
+                    .padding(it)
+                    .drawVerticalScrollbar(state = lazyListState, color = scrollbarColor),
+                lazyListState
+            )
+        }
+    )
+}
+
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ScaffoldWithMediumTopBar(

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
@@ -237,6 +237,46 @@ fun MullvadMediumTopBar(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MullvadMediumTopBarWithSwitch(
+    title: String,
+    navigationIcon: @Composable () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    switch: @Composable RowScope.() -> Unit = {},
+    scrollBehavior: TopAppBarScrollBehavior? = null
+) {
+    MediumTopAppBar(
+        title = {
+            Row(
+                modifier = Modifier.padding(end = Dimens.mediumPadding),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.Top
+            ) {
+                Text(
+                    text = title,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.weight(1f)
+                )
+
+                if (scrollBehavior?.state?.collapsedFraction == 0f) {
+                    switch()
+                }
+            }
+        },
+        navigationIcon = navigationIcon,
+        scrollBehavior = scrollBehavior,
+        colors =
+            TopAppBarDefaults.mediumTopAppBarColors(
+                containerColor = MaterialTheme.colorScheme.background,
+                scrolledContainerColor = MaterialTheme.colorScheme.background,
+                actionIconContentColor = MaterialTheme.colorScheme.onPrimary.copy(AlphaTopBar),
+            ),
+        actions = actions
+    )
+}
+
 @Preview
 @Composable
 private fun PreviewMullvadTopBarWithLongDeviceName() {