Merge branch 'use-round-focus-highlighting-for-all-icon-buttons-droid…

…-483'
mullvad · Dec 6, 2023 · 1de1978 · 1de1978
2 parents 96d2e3a + 6aa1be5
commit 1de1978
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 106 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
@@ -1,32 +1,27 @@
 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
 
 @Composable
 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/cell/ExpandableComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.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.padding
 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 +82,18 @@ private fun ExpandableComposeCellBody(
         verticalAlignment = Alignment.CenterVertically
     ) {
         if (onInfoClicked != null) {
-            Icon(
+            IconButton(
                 modifier =
-                    Modifier.clickable { onInfoClicked() }
-                        .padding(
-                            start = Dimens.mediumPadding,
-                            end = Dimens.mediumPadding,
-                            top = Dimens.infoButtonVerticalPadding,
-                            bottom = Dimens.infoButtonVerticalPadding
-                        )
+                    Modifier.padding(horizontal = Dimens.miniPadding)
                         .align(Alignment.CenterVertically),
-                painter = painterResource(id = R.drawable.icon_info),
-                contentDescription = null,
-                tint = MaterialTheme.colorScheme.onPrimary
-            )
+                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
@@ -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
@@ -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/...d/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt b/...d/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

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
@@ -15,6 +15,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 +29,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 +104,18 @@ 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)
+                )
+            }
             Text(
                 text = stringResource(id = R.string.select_location),
                 modifier =

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
@@ -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,