Add content blockers to the ui

Co-authored-by: Albin <albin@mullvad.net>

2 files changed, 193 insertions, 0 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
new file mode 100644
index 0000000000..3a27adf2a9
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
@@ -0,0 +1,111 @@
+package net.mullvad.mullvadvpn.compose.cell
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.material.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.ChevronView
+import net.mullvad.mullvadvpn.compose.component.HtmlText
+import net.mullvad.mullvadvpn.compose.component.textResource
+import net.mullvad.mullvadvpn.compose.theme.AlphaActive
+import net.mullvad.mullvadvpn.compose.theme.AlphaInactive
+import net.mullvad.mullvadvpn.compose.theme.MullvadWhite
+import net.mullvad.mullvadvpn.compose.theme.MullvadWhite60
+
+@Preview
+@Composable
+private fun PreviewExpandedEnabledExpandableComposeCell() {
+    ExpandableComposeCell(
+        title = "Expandable row title",
+        isExpanded = true,
+        isEnabled = true,
+        onCellClicked = {},
+        onInfoClicked = {}
+    )
+}
+
+@Composable
+fun ExpandableComposeCell(
+    title: String,
+    isExpanded: Boolean,
+    isEnabled: Boolean = true,
+    onCellClicked: (Boolean) -> Unit = {},
+    onInfoClicked: (() -> Unit)? = null
+) {
+    val titleModifier = Modifier.alpha(if (isEnabled) AlphaActive else AlphaInactive)
+    val bodyViewModifier = Modifier
+
+    BaseCell(
+        title = { SwitchCellTitle(title = title, modifier = titleModifier) },
+        bodyView = {
+            ExpandableComposeCellBody(
+                isExpanded = isExpanded,
+                modifier = bodyViewModifier,
+                onInfoClicked = onInfoClicked
+            )
+        },
+        onCellClicked = { onCellClicked(!isExpanded) }
+    )
+}
+
+@Composable
+private fun ExpandableComposeCellBody(
+    isExpanded: Boolean,
+    modifier: Modifier,
+    onInfoClicked: (() -> Unit)? = null
+) {
+    val horizontalPadding = dimensionResource(id = R.dimen.medium_padding)
+    val verticalPadding = 13.dp
+    Row(
+        modifier = modifier.wrapContentWidth().wrapContentHeight(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (onInfoClicked != null) {
+            Icon(
+                modifier =
+                    Modifier.clickable { onInfoClicked() }
+                        .padding(
+                            start = horizontalPadding,
+                            end = horizontalPadding,
+                            top = verticalPadding,
+                            bottom = verticalPadding
+                        )
+                        .align(Alignment.CenterVertically),
+                painter = painterResource(id = R.drawable.icon_info),
+                contentDescription = null,
+                tint = MullvadWhite
+            )
+        }
+
+        ChevronView(isExpanded)
+    }
+}
+
+@Composable
+fun ContentBlockersDisableModeCellSubtitle(modifier: Modifier) {
+    val textSize = dimensionResource(id = R.dimen.text_small).value
+
+    HtmlText(
+        htmlFormattedString =
+            textResource(
+                id = R.string.dns_content_blockers_subtitle,
+                stringResource(id = R.string.enable_custom_dns)
+            ),
+        textSize = textSize,
+        textColor = MullvadWhite60.toArgb(),
+        modifier = modifier
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AdvancedSettingScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AdvancedSettingScreen.kt
index c8acdf5f6c..73a3c8af82 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AdvancedSettingScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AdvancedSettingScreen.kt
@@ -3,8 +3,10 @@ package net.mullvad.mullvadvpn.compose.screen
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
@@ -14,6 +16,10 @@ import androidx.compose.material.Divider
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -25,8 +31,10 @@ import me.onebone.toolbar.ScrollStrategy
 import me.onebone.toolbar.rememberCollapsingToolbarScaffoldState
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.cell.BaseCell
+import net.mullvad.mullvadvpn.compose.cell.ContentBlockersDisableModeCellSubtitle
 import net.mullvad.mullvadvpn.compose.cell.CustomDnsCellSubtitle
 import net.mullvad.mullvadvpn.compose.cell.DnsCell
+import net.mullvad.mullvadvpn.compose.cell.ExpandableComposeCell
 import net.mullvad.mullvadvpn.compose.cell.MtuComposeCell
 import net.mullvad.mullvadvpn.compose.cell.NavigationComposeCell
 import net.mullvad.mullvadvpn.compose.cell.SwitchComposeCell
@@ -117,6 +125,7 @@ fun AdvancedSettingScreen(
     }
 
     val lazyListState = rememberLazyListState()
+    var expandContentBlockersState by remember { mutableStateOf(false) }
     val biggerPadding = 54.dp
     val topPadding = 6.dp
 
@@ -164,6 +173,79 @@ fun AdvancedSettingScreen(
                 }
 
                 itemWithDivider {
+                    ExpandableComposeCell(
+                        title = stringResource(R.string.dns_content_blockers_title),
+                        isExpanded = !expandContentBlockersState,
+                        onInfoClicked = {},
+                        onCellClicked = { expandContentBlockersState = !expandContentBlockersState }
+                    )
+                }
+
+                if (expandContentBlockersState) {
+                    itemWithDivider {
+                        SwitchComposeCell(
+                            title = stringResource(R.string.block_ads_title),
+                            isEnabled = true,
+                            isToggled = false,
+                            onCellClicked = {},
+                            background = MullvadBlue20
+                        )
+                    }
+                    itemWithDivider {
+                        SwitchComposeCell(
+                            title = stringResource(R.string.block_trackers_title),
+                            isEnabled = true,
+                            isToggled = false,
+                            onCellClicked = {},
+                            background = MullvadBlue20
+                        )
+                    }
+                    itemWithDivider {
+                        SwitchComposeCell(
+                            title = stringResource(R.string.block_malware_title),
+                            isEnabled = true,
+                            isToggled = false,
+                            onCellClicked = {},
+                            onInfoClicked = {},
+                            background = MullvadBlue20
+                        )
+                    }
+                    itemWithDivider {
+                        SwitchComposeCell(
+                            title = stringResource(R.string.block_gambling_title),
+                            isEnabled = true,
+                            isToggled = false,
+                            onCellClicked = {},
+                            background = MullvadBlue20
+                        )
+                    }
+                    itemWithDivider {
+                        SwitchComposeCell(
+                            title = stringResource(R.string.block_adult_content_title),
+                            isEnabled = true,
+                            isToggled = false,
+                            onCellClicked = {},
+                            background = MullvadBlue20
+                        )
+                    }
+                }
+
+                if (uiState.isCustomDnsEnabled) {
+                    item {
+                        ContentBlockersDisableModeCellSubtitle(
+                            Modifier.background(MullvadDarkBlue)
+                                .padding(
+                                    start = cellHorizontalSpacing,
+                                    top = topPadding,
+                                    end = cellHorizontalSpacing,
+                                    bottom = cellVerticalSpacing,
+                                )
+                        )
+                    }
+                }
+
+                item {
+                    Spacer(modifier = Modifier.height(cellVerticalSpacing))
                     SwitchComposeCell(
                         title = stringResource(R.string.enable_custom_dns),
                         isEnabled = true,