diff options
Diffstat (limited to 'android')
5 files changed, 157 insertions, 30 deletions
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt index bc46f93e03..babeee68e8 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt @@ -5,51 +5,94 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.absolutePadding +import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.Text +import androidx.compose.material3.MaterialTheme 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.res.colorResource -import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource -import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp import androidx.constraintlayout.compose.ConstraintLayout import net.mullvad.mullvadvpn.R +import net.mullvad.mullvadvpn.compose.theme.Dimens +import net.mullvad.mullvadvpn.compose.theme.typeface.listItemText + +@Preview +@Composable +fun PreviewListItem() { + Column { + ListItem(text = "No icon not loading", isLoading = false, onClick = {}) + ListItem(text = "No icon is loading", isLoading = true, onClick = {}) + ListItem( + text = "With icon is loading", + isLoading = true, + iconResourceId = R.drawable.icon_close, + onClick = {} + ) + ListItem( + text = "With icon not loading", + isLoading = false, + iconResourceId = R.drawable.icon_close, + onClick = {} + ) + } +} + +@Preview +@Composable +fun PreviewChangeListItem() { + ChangeListItem(text = "ChangeListItem") +} @Composable fun ListItem( text: String, + height: Dp = Dimens.listItemHeight, isLoading: Boolean, @DrawableRes iconResourceId: Int? = null, onClick: () -> Unit ) { - val itemColor = colorResource(id = R.color.blue) - Box( modifier = - Modifier.fillMaxWidth().padding(vertical = 1.dp).height(50.dp).background(itemColor), + Modifier.fillMaxWidth() + .padding(vertical = Dimens.listItemDivider) + .wrapContentHeight() + .defaultMinSize(minHeight = height) + .background(MaterialTheme.colorScheme.primary), ) { - Text( - text = text, - fontSize = 18.sp, - color = Color.White, - modifier = Modifier.padding(horizontal = 16.dp).align(Alignment.CenterStart) - ) + Column( + modifier = + Modifier.padding(horizontal = Dimens.mediumPadding, vertical = Dimens.smallPadding) + .align(Alignment.CenterStart) + ) { + Text( + text = text, + style = MaterialTheme.typography.listItemText, + color = MaterialTheme.colorScheme.onPrimary + ) + } - Box(modifier = Modifier.align(Alignment.CenterEnd).padding(horizontal = 12.dp)) { + Box( + modifier = + Modifier.align(Alignment.CenterEnd) + .padding(horizontal = Dimens.loadingSpinnerPadding) + ) { if (isLoading) { CircularProgressIndicator( - strokeWidth = 3.dp, - color = Color.White, - modifier = Modifier.height(24.dp).width(24.dp) + strokeWidth = Dimens.loadingSpinnerStrokeWidth, + color = MaterialTheme.colorScheme.onPrimary, + modifier = + Modifier.height(Dimens.loadingSpinnerSize).width(Dimens.loadingSpinnerSize) ) } else if (iconResourceId != null) { Image( @@ -64,9 +107,10 @@ fun ListItem( @Composable fun ChangeListItem(text: String) { + val smallPadding = Dimens.smallPadding + ConstraintLayout { val (bullet, changeLog) = createRefs() - val smallPadding = dimensionResource(id = R.dimen.small_padding) Box( modifier = Modifier.constrainAs(bullet) { @@ -74,19 +118,27 @@ fun ChangeListItem(text: String) { start.linkTo(parent.absoluteLeft) } ) { - Text(text = "•", fontSize = 14.sp, color = Color.White) + Text( + text = "•", + style = MaterialTheme.typography.bodyMedium, + color = MaterialTheme.colorScheme.onPrimary + ) } Box( modifier = - Modifier.absolutePadding(left = dimensionResource(id = R.dimen.medium_padding)) - .constrainAs(changeLog) { - top.linkTo(parent.top) - bottom.linkTo(parent.bottom, margin = smallPadding) - start.linkTo(parent.start) - end.linkTo(parent.end) - } + Modifier.absolutePadding(left = Dimens.mediumPadding).constrainAs(changeLog) { + top.linkTo(parent.top) + bottom.linkTo(parent.bottom, margin = smallPadding) + start.linkTo(parent.start) + end.linkTo(parent.end) + } ) { - Text(text = text, fontSize = 14.sp, color = Color.White, modifier = Modifier) + Text( + text = text, + style = MaterialTheme.typography.bodyMedium, + color = MaterialTheme.colorScheme.onPrimary, + modifier = Modifier + ) } } } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Theme.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Theme.kt index d1de017412..f3654b7d9f 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Theme.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Theme.kt @@ -3,16 +3,26 @@ package net.mullvad.mullvadvpn.compose.theme import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Shapes +import androidx.compose.material3.Typography import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.remember +import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.unit.dp +import net.mullvad.mullvadvpn.compose.theme.dimensions.Dimensions +import net.mullvad.mullvadvpn.compose.theme.dimensions.defaultDimensions + +// Add our own definitions here +private val MullvadTypography = Typography() private val MullvadColorPalette = lightColorScheme( primary = MullvadBlue, secondary = MullvadDarkBlue, tertiary = MullvadRed, - onSurfaceVariant = MullvadWhite + onSurfaceVariant = MullvadWhite, + onPrimary = MullvadWhite ) val Shapes = @@ -22,9 +32,30 @@ val Shapes = large = RoundedCornerShape(0.dp) ) +val Dimens: Dimensions + @Composable get() = LocalAppDimens.current + +@Composable +fun ProvideDimens(dimensions: Dimensions, content: @Composable () -> Unit) { + val dimensionSet = remember { dimensions } + CompositionLocalProvider(LocalAppDimens provides dimensionSet, content = content) +} + +private val LocalAppDimens = staticCompositionLocalOf { defaultDimensions } + @Composable fun AppTheme(content: @Composable () -> Unit) { val colors = MullvadColorPalette + val typography = MullvadTypography + // Set dimensions and type scale based on configurations here + val dimensions = defaultDimensions - MaterialTheme(colorScheme = colors, shapes = Shapes, content = content) + ProvideDimens(dimensions = dimensions) { + MaterialTheme( + colorScheme = colors, + shapes = Shapes, + typography = typography, + content = content + ) + } } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt new file mode 100644 index 0000000000..ac45241776 --- /dev/null +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt @@ -0,0 +1,17 @@ +package net.mullvad.mullvadvpn.compose.theme.dimensions + +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp + +data class Dimensions( + val mediumPadding: Dp = 16.dp, + val smallPadding: Dp = 8.dp, + val listItemDivider: Dp = 1.dp, + val listItemHeight: Dp = 50.dp, + val loadingSpinnerSize: Dp = 24.dp, + val loadingSpinnerStrokeWidth: Dp = 3.dp, + val loadingSpinnerPadding: Dp = 12.dp +) + +val defaultDimensions = Dimensions() +// Add more configurations here if needed diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/TypeScale.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/TypeScale.kt new file mode 100644 index 0000000000..17faaa2455 --- /dev/null +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/TypeScale.kt @@ -0,0 +1,9 @@ +package net.mullvad.mullvadvpn.compose.theme.typeface + +import androidx.compose.ui.unit.sp + +// Do not use these font sizes directly. Instead use the styles defined in Typeface and/or the +// standard styles in the material theme +internal object TypeScale { + val TextMediumPlus = 18.sp +} diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/Typeface.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/Typeface.kt new file mode 100644 index 0000000000..c76aacf73b --- /dev/null +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/Typeface.kt @@ -0,0 +1,18 @@ +package net.mullvad.mullvadvpn.compose.theme.typeface + +import androidx.compose.material3.Typography +import androidx.compose.runtime.Composable +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.TextUnit + +// Add text styles not in the material theme here +val Typography.listItemText: TextStyle + @Composable + get() { + return TextStyle( + fontWeight = FontWeight.Normal, + letterSpacing = TextUnit.Unspecified, + fontSize = TypeScale.TextMediumPlus + ) + } |