From d58fe8d6b4e66704639d8cf32a9c9ecdf6b9fab5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20G=C3=B6ransson?= Date: Tue, 28 Nov 2023 10:36:02 +0100 Subject: [PATCH 1/4] Convert info icon to IconButton --- .../compose/cell/ExpandableComposeCell.kt | 22 +++++--------- .../compose/cell/InformationComposeCell.kt | 26 +++++++---------- .../compose/cell/SwitchComposeCell.kt | 29 ++++++++----------- .../lib/theme/dimensions/Dimensions.kt | 1 + 4 files changed, 32 insertions(+), 46 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 index 347dcef5fb4c..6deb2070dcfb 100644 --- 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 @@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -82,20 +83,13 @@ private fun ExpandableComposeCellBody( verticalAlignment = Alignment.CenterVertically ) { if (onInfoClicked != null) { - Icon( - modifier = - Modifier.clickable { onInfoClicked() } - .padding( - start = Dimens.mediumPadding, - end = Dimens.mediumPadding, - top = Dimens.infoButtonVerticalPadding, - bottom = Dimens.infoButtonVerticalPadding - ) - .align(Alignment.CenterVertically), - painter = painterResource(id = R.drawable.icon_info), - contentDescription = null, - tint = MaterialTheme.colorScheme.onPrimary - ) + IconButton(modifier = Modifier.padding(horizontal = Dimens.miniPadding).align(Alignment.CenterVertically), onClick = onInfoClicked) { + Icon( + painter = painterResource(id = R.drawable.icon_info), + contentDescription = null, + tint = MaterialTheme.colorScheme.onPrimary + ) + } } ChevronView( diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt index d9e3c9f770d9..ddd286ee6824 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt @@ -1,11 +1,11 @@ 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.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -14,7 +14,6 @@ import androidx.compose.ui.draw.alpha import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.lib.theme.Dimens import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive @@ -62,26 +61,23 @@ fun InformationComposeCell( @Composable private fun InformationComposeCellBody(modifier: Modifier, onInfoClicked: (() -> Unit)? = null) { - val verticalPadding = 13.dp Row( modifier = modifier.wrapContentWidth().wrapContentHeight(), verticalAlignment = Alignment.CenterVertically ) { if (onInfoClicked != null) { - Icon( + IconButton( + onClick = onInfoClicked, modifier = - Modifier.clickable { onInfoClicked() } - .padding( - start = Dimens.mediumPadding, - end = Dimens.mediumPadding, - top = verticalPadding, - bottom = verticalPadding - ) + Modifier.padding(horizontal = Dimens.miniPadding) .align(Alignment.CenterVertically), - painter = painterResource(id = R.drawable.icon_info), - contentDescription = null, - tint = MullvadWhite - ) + ) { + Icon( + painter = painterResource(id = R.drawable.icon_info), + contentDescription = null, + tint = MullvadWhite + ) + } } } } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt index 28a8bcdfd0a8..5d38b97d8096 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt @@ -1,12 +1,12 @@ package net.mullvad.mullvadvpn.compose.cell -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -17,7 +17,6 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.dp import androidx.core.text.HtmlCompat import androidx.core.text.HtmlCompat.FROM_HTML_MODE_COMPACT import net.mullvad.mullvadvpn.R @@ -144,27 +143,23 @@ fun SwitchCellView( onSwitchClicked: ((Boolean) -> Unit)? = null, onInfoClicked: (() -> Unit)? = null ) { - val horizontalPadding = Dimens.mediumPadding - val verticalPadding = 13.dp Row( modifier = modifier.wrapContentWidth().wrapContentHeight(), verticalAlignment = Alignment.CenterVertically ) { if (onInfoClicked != null) { - Icon( + IconButton( 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 = MaterialTheme.colorScheme.onPrimary - ) + Modifier.align(Alignment.CenterVertically) + .padding(horizontal = Dimens.miniPadding), + onClick = onInfoClicked + ) { + Icon( + painter = painterResource(id = R.drawable.icon_info), + contentDescription = null, + tint = MaterialTheme.colorScheme.onPrimary + ) + } } MullvadSwitch(checked = isToggled, enabled = isEnabled, onCheckedChange = onSwitchClicked) 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 702260741695..c9eb73e9ad91 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 @@ -65,6 +65,7 @@ data class Dimensions( val selectFilterTitlePadding: Dp = 12.dp, val selectLocationTitlePadding: Dp = 12.dp, val selectableCellTextMargin: Dp = 12.dp, + val miniPadding: Dp = 4.dp, val sideMargin: Dp = 22.dp, val smallIconSize: Dp = 16.dp, val smallPadding: Dp = 8.dp, From e2e0627c6fd5d6bcc0ff9b84c9f472dc7880f254 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20G=C3=B6ransson?= Date: Tue, 28 Nov 2023 11:01:08 +0100 Subject: [PATCH 2/4] Convert copy & toggle visibility to IconButton --- .../compose/button/AnimatedIconButton.kt | 64 +++++++------------ .../component/CopyableObfuscationView.kt | 4 +- 2 files changed, 25 insertions(+), 43 deletions(-) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/AnimatedIconButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/AnimatedIconButton.kt index 919dc33bf092..04681400b8b0 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/AnimatedIconButton.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/AnimatedIconButton.kt @@ -1,21 +1,17 @@ package net.mullvad.mullvadvpn.compose.button import androidx.compose.animation.AnimatedContent -import androidx.compose.foundation.Image -import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.ColorFilter +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.painter.Painter import kotlinx.coroutines.delay -import net.mullvad.mullvadvpn.lib.theme.Dimens internal const val PRESS_EFFECT_TIME_SPAN: Long = 1000 @@ -23,10 +19,9 @@ internal const val PRESS_EFFECT_TIME_SPAN: Long = 1000 fun AnimatedIconButton( defaultIcon: Painter, secondaryIcon: Painter, - modifier: Modifier = Modifier, pressEffectDuration: Long = PRESS_EFFECT_TIME_SPAN, - defaultIconColorFilter: ColorFilter? = null, - secondaryIconColorFilter: ColorFilter? = null, + defaultIconTint: Color = Color.Unspecified, + secondaryIconTint: Color = Color.Unspecified, contentDescription: String, isToggleButton: Boolean = false, onClick: () -> Unit @@ -38,52 +33,41 @@ fun AnimatedIconButton( state = ButtonState.IDLE } } - Box( - modifier = - modifier - .clickable { - when (state) { - ButtonState.IDLE -> { - state = if (isToggleButton) ButtonState.TOGGLED else ButtonState.PRESSED - onClick() - } - ButtonState.TOGGLED -> { - state = ButtonState.IDLE - onClick() - } - ButtonState.PRESSED -> {} - } + + IconButton( + onClick = { + when (state) { + ButtonState.IDLE -> { + state = if (isToggleButton) ButtonState.TOGGLED else ButtonState.PRESSED + onClick() + } + ButtonState.TOGGLED -> { + state = ButtonState.IDLE + onClick() } - .padding(all = Dimens.smallPadding) + ButtonState.PRESSED -> {} + } + } ) { AnimatedContent(targetState = state, label = contentDescription) { targetState -> val iconPainter: Painter - val colorFilter: ColorFilter? - val imageModifier: Modifier + val tint: Color when (targetState) { ButtonState.IDLE -> { iconPainter = defaultIcon - colorFilter = defaultIconColorFilter - imageModifier = modifier + tint = defaultIconTint } ButtonState.TOGGLED -> { iconPainter = secondaryIcon - colorFilter = secondaryIconColorFilter - imageModifier = modifier + tint = secondaryIconTint } ButtonState.PRESSED -> { iconPainter = secondaryIcon - colorFilter = secondaryIconColorFilter - imageModifier = modifier + tint = secondaryIconTint } } - Image( - painter = iconPainter, - colorFilter = colorFilter, - contentDescription = contentDescription, - modifier = imageModifier - ) + Icon(painter = iconPainter, contentDescription = contentDescription, tint = tint) } } } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt index a4352147329a..3388eb2b85d7 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt @@ -10,7 +10,6 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment.Companion.CenterVertically import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource @@ -66,8 +65,7 @@ fun CopyAnimatedIconButton(onClick: () -> Unit) { AnimatedIconButton( defaultIcon = painterResource(id = R.drawable.icon_copy), secondaryIcon = painterResource(id = R.drawable.icon_tick), - secondaryIconColorFilter = - ColorFilter.tint(color = MaterialTheme.colorScheme.inversePrimary), + secondaryIconTint = MaterialTheme.colorScheme.inversePrimary, isToggleButton = false, contentDescription = stringResource(id = R.string.copy_account_number), onClick = onClick From e7ee60c5e1f8ebfaca1809eebcf5370f8156c6c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20G=C3=B6ransson?= Date: Wed, 29 Nov 2023 09:03:48 +0100 Subject: [PATCH 3/4] Convert select location back button into IconButton --- .../compose/cell/ExpandableComposeCell.kt | 8 +++-- .../compose/screen/SelectLocationScreen.kt | 33 ++++++++----------- 2 files changed, 20 insertions(+), 21 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 index 6deb2070dcfb..1fe1815e9278 100644 --- 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 @@ -1,6 +1,5 @@ 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.size @@ -83,7 +82,12 @@ private fun ExpandableComposeCellBody( verticalAlignment = Alignment.CenterVertically ) { if (onInfoClicked != null) { - IconButton(modifier = Modifier.padding(horizontal = Dimens.miniPadding).align(Alignment.CenterVertically), onClick = onInfoClicked) { + IconButton( + modifier = + Modifier.padding(horizontal = Dimens.miniPadding) + .align(Alignment.CenterVertically), + onClick = onInfoClicked + ) { Icon( painter = painterResource(id = R.drawable.icon_info), contentDescription = null, diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt index 55936b392a4f..f62db784f65f 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt @@ -1,7 +1,6 @@ package net.mullvad.mullvadvpn.compose.screen import androidx.compose.animation.animateContentSize -import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Column @@ -15,6 +14,8 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -27,6 +28,7 @@ import androidx.compose.ui.draw.rotate import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusProperties import androidx.compose.ui.focus.focusRequester +import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource @@ -101,26 +103,19 @@ fun SelectLocationScreen( Column(modifier = Modifier.background(backgroundColor).fillMaxWidth().fillMaxHeight()) { Row( modifier = - Modifier.padding( - horizontal = Dimens.selectLocationTitlePadding, - vertical = Dimens.selectLocationTitlePadding - ) + Modifier.padding(vertical = Dimens.selectLocationTitlePadding) + .padding(end = Dimens.selectLocationTitlePadding) .fillMaxWidth() ) { - Image( - painter = painterResource(id = R.drawable.icon_back), - contentDescription = null, - modifier = - Modifier.focusRequester(backFocus) - .focusProperties { next = listFocus } - .focusProperties { - down = listFocus - right = searchBarFocus - } - .size(Dimens.titleIconSize) - .rotate(270f) - .clickable { onBackClick() } - ) + IconButton(onClick = onBackClick) { + Icon( + painter = painterResource(id = R.drawable.icon_back), + contentDescription = null, + tint = Color.Unspecified, + modifier = + Modifier.size(Dimens.titleIconSize).rotate(270f).clickable { onBackClick() } + ) + } Text( text = stringResource(id = R.string.select_location), modifier = From 6aa1be55cceef23b5fe125d3dd204010bab2d5de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20G=C3=B6ransson?= Date: Thu, 30 Nov 2023 09:36:01 +0100 Subject: [PATCH 4/4] Fix select location navigate back --- .../mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt index f62db784f65f..5bfdee94f614 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt @@ -1,6 +1,7 @@ package net.mullvad.mullvadvpn.compose.screen import androidx.compose.animation.animateContentSize +import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Column @@ -112,8 +113,7 @@ fun SelectLocationScreen( painter = painterResource(id = R.drawable.icon_back), contentDescription = null, tint = Color.Unspecified, - modifier = - Modifier.size(Dimens.titleIconSize).rotate(270f).clickable { onBackClick() } + modifier = Modifier.size(Dimens.titleIconSize).rotate(270f) ) } Text(