diff options
Diffstat (limited to 'android')
3 files changed, 84 insertions, 0 deletions
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt new file mode 100644 index 0000000000..0443a7267e --- /dev/null +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt @@ -0,0 +1,65 @@ +package net.mullvad.mullvadvpn.compose.component + +import androidx.compose.foundation.Image +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.FilterChip +import androidx.compose.material3.FilterChipDefaults +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.lib.theme.AppTheme +import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue +import net.mullvad.mullvadvpn.lib.theme.shape.chipShape + +@Preview +@Composable +private fun PreviewMullvadFilterChip() { + AppTheme { + MullvadFilterChip( + text = stringResource(id = R.string.number_of_providers), + onRemoveClick = {} + ) + } +} + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun MullvadFilterChip(text: String, onRemoveClick: () -> Unit) { + FilterChip( + modifier = Modifier.padding(vertical = Dimens.chipVerticalPadding), + shape = MaterialTheme.shapes.chipShape, + colors = FilterChipDefaults.filterChipColors(containerColor = MullvadBlue), + border = + FilterChipDefaults.filterChipBorder( + borderColor = Color.Transparent, + disabledBorderColor = Color.Transparent + ), + selected = false, + onClick = {}, + label = { + Text( + text = text, + color = MaterialTheme.colorScheme.onPrimary, + style = MaterialTheme.typography.labelMedium + ) + Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing)) + Image( + painter = painterResource(id = R.drawable.icon_close), + contentDescription = null, + modifier = Modifier.size(Dimens.smallIconSize).clickable { onRemoveClick() } + ) + } + ) +} diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt index f0eea30fa6..7022607416 100644 --- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt +++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt @@ -18,7 +18,10 @@ data class Dimensions( val cellStartPadding: Dp = 22.dp, val cellTopPadding: Dp = 6.dp, val cellVerticalSpacing: Dp = 14.dp, + val checkBoxSize: Dp = 24.dp, val chevronMargin: Dp = 4.dp, + val chipSpace: Dp = 8.dp, + val chipVerticalPadding: Dp = 4.dp, val circularProgressBarLargeSize: Dp = 44.dp, val circularProgressBarLargeStrokeWidth: Dp = 6.dp, val circularProgressBarMediumSize: Dp = 32.dp, @@ -32,6 +35,7 @@ data class Dimensions( val dialogIconHeight: Dp = 44.dp, val dialogIconSize: Dp = 48.dp, val expandableCellChevronSize: Dp = 30.dp, + val filterTittlePadding: Dp = 4.dp, val iconFailSuccessTopMargin: Dp = 30.dp, val iconHeight: Dp = 44.dp, val indentedCellStartPadding: Dp = 38.dp, @@ -58,9 +62,11 @@ data class Dimensions( val searchFieldHeight: Dp = 42.dp, val searchFieldHorizontalPadding: Dp = 22.dp, val searchIconSize: Dp = 24.dp, + val selectFilterTitlePadding: Dp = 12.dp, val selectLocationTitlePadding: Dp = 12.dp, val selectableCellTextMargin: Dp = 12.dp, val sideMargin: Dp = 22.dp, + val smallIconSize: Dp = 16.dp, val smallPadding: Dp = 8.dp, val spacingAboveButton: Dp = 22.dp, val successIconVerticalPadding: Dp = 26.dp, diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/shape/Shape.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/shape/Shape.kt new file mode 100644 index 0000000000..501cb72946 --- /dev/null +++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/shape/Shape.kt @@ -0,0 +1,13 @@ +package net.mullvad.mullvadvpn.lib.theme.shape + +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Shapes +import androidx.compose.runtime.Composable +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.unit.dp + +val Shapes.chipShape: Shape + @Composable + get() { + return RoundedCornerShape(8.dp) + } |