Add new filter cell and checkbox cell

Co-Authored-By: Boban Sijuk <49131853+boki91@users.noreply.github.com>

2 files changed, 165 insertions, 0 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt
new file mode 100644
index 0000000000..5c6157e032
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt
@@ -0,0 +1,83 @@
+package net.mullvad.mullvadvpn.compose.cell
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.CheckboxDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.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.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadGreen
+
+@Preview
+@Composable
+private fun PreviewCheckboxCell() {
+    AppTheme { CheckboxCell(providerName = "", checked = false, onCheckedChange = {}) }
+}
+
+@Composable
+internal fun CheckboxCell(
+    modifier: Modifier = Modifier,
+    providerName: String,
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    background: Color = MaterialTheme.colorScheme.secondaryContainer,
+    startPadding: Dp = Dimens.cellStartPadding,
+    endPadding: Dp = Dimens.cellEndPadding,
+    minHeight: Dp = Dimens.cellHeight
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier =
+            modifier
+                .clickable { onCheckedChange(!checked) }
+                .defaultMinSize(minHeight = minHeight)
+                .fillMaxWidth()
+                .background(background)
+                .padding(start = startPadding, end = endPadding)
+    ) {
+        Box(
+            modifier =
+                Modifier.size(Dimens.checkBoxSize)
+                    .background(Color.White, MaterialTheme.shapes.small)
+        ) {
+            Checkbox(
+                modifier = Modifier.fillMaxSize(),
+                checked = checked,
+                onCheckedChange = onCheckedChange,
+                colors =
+                    CheckboxDefaults.colors(
+                        checkedColor = Color.Transparent,
+                        uncheckedColor = Color.Transparent,
+                        checkmarkColor = MullvadGreen
+                    ),
+            )
+        }
+
+        Spacer(modifier = Modifier.size(Dimens.mediumPadding))
+
+        Text(
+            text = providerName,
+            style = MaterialTheme.typography.labelLarge,
+            color = MaterialTheme.colorScheme.onSecondary,
+            modifier =
+                Modifier.weight(1f)
+                    .padding(top = Dimens.mediumPadding, bottom = Dimens.mediumPadding)
+        )
+    }
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/FilterCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/FilterCell.kt
new file mode 100644
index 0000000000..6566a9f30e
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/FilterCell.kt
@@ -0,0 +1,82 @@
+package net.mullvad.mullvadvpn.compose.cell
+
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.MullvadFilterChip
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.model.Ownership
+
+@Preview
+@Composable
+private fun PreviewFilterCell() {
+    AppTheme {
+        FilterCell(
+            ownershipFilter = Ownership.MullvadOwned,
+            selectedProviderFilter = 3,
+            removeOwnershipFilter = {},
+            removeProviderFilter = {}
+        )
+    }
+}
+
+@Composable
+fun FilterCell(
+    ownershipFilter: Ownership?,
+    selectedProviderFilter: Int?,
+    removeOwnershipFilter: () -> Unit,
+    removeProviderFilter: () -> Unit
+) {
+    val scrollState = rememberScrollState()
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier =
+            Modifier.horizontalScroll(scrollState)
+                .padding(
+                    horizontal = Dimens.searchFieldHorizontalPadding,
+                    vertical = Dimens.selectLocationTitlePadding
+                )
+                .fillMaxWidth(),
+    ) {
+        Text(
+            modifier = Modifier.padding(end = Dimens.filterTittlePadding),
+            text = stringResource(id = R.string.filtered),
+            color = MaterialTheme.colorScheme.onPrimary,
+            style = MaterialTheme.typography.labelMedium
+        )
+
+        if (selectedProviderFilter != null) {
+            MullvadFilterChip(
+                text = stringResource(id = R.string.number_of_providers, selectedProviderFilter),
+                onRemoveClick = removeProviderFilter
+            )
+            Spacer(modifier = Modifier.size(Dimens.chipSpace))
+        }
+
+        if (ownershipFilter != null) {
+            MullvadFilterChip(
+                text = stringResource(ownershipFilter.stringResources()),
+                onRemoveClick = removeOwnershipFilter
+            )
+        }
+    }
+}
+
+private fun Ownership.stringResources(): Int =
+    when (this) {
+        Ownership.MullvadOwned -> R.string.owned
+        Ownership.Rented -> R.string.rented
+    }