refactor: map buttons

2024-11-04 12:11:15 -03:00 · 2024-11-04 12:11:15 -03:00 · 45d3741124
commit 45d3741124
--- a/app/src/main/java/com/geeksville/mesh/ui/map/DownloadButton.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/map/DownloadButton.kt
@ -8,10 +8,11 @@ import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.material.FloatingActionButton
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Download
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import com.geeksville.mesh.R

@ -36,8 +37,8 @@ internal fun DownloadButton(
            backgroundColor = MaterialTheme.colors.primary,
        ) {
            Icon(
-                painterResource(R.drawable.ic_twotone_download_24),
-                stringResource(R.string.map_download_region),
+                imageVector = Icons.Default.Download,
+                contentDescription = stringResource(R.string.map_download_region),
                modifier = Modifier.scale(1.25f),
            )
        }
--- a/app/src/main/java/com/geeksville/mesh/ui/map/MapButton.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/map/MapButton.kt
@ -1,63 +1,74 @@
 package com.geeksville.mesh.ui.map

-import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Layers
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
-import com.geeksville.mesh.R
-import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
+import com.geeksville.mesh.R
+import com.geeksville.mesh.ui.theme.AppTheme

@Composable
 fun MapButton(
-    onClick: () -> Unit,
-    @DrawableRes drawableRes: Int,
+    icon: ImageVector,
    @StringRes contentDescription: Int,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
+    onClick: () -> Unit = {}
 ) {
    MapButton(
-        onClick = onClick,
-        drawableRes = drawableRes,
+        icon = icon,
        contentDescription = stringResource(contentDescription),
        modifier = modifier,
        enabled = enabled,
+        onClick = onClick,
    )
 }

@Composable
 fun MapButton(
-    onClick: () -> Unit,
-    @DrawableRes drawableRes: Int,
+    icon: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
+    onClick: () -> Unit = {}
 ) {
    Button(
        onClick = onClick,
        enabled = enabled,
        modifier = modifier.size(48.dp),
+        shape = CircleShape,
+        colors = ButtonDefaults.buttonColors(
+            backgroundColor = MaterialTheme.colors.surface.copy(alpha = 1f),
+            contentColor = MaterialTheme.colors.onSurface,
+        ),
    ) {
        Icon(
-            painterResource(id = drawableRes),
-            contentDescription,
+            imageVector = icon,
+            contentDescription = contentDescription,
            modifier = Modifier.scale(scale = 1.5f),
        )
    }
 }

-@Preview(showBackground = true)
+@PreviewLightDark
@Composable
 private fun MapButtonPreview() {
-    MapButton(
-        onClick = {},
-        drawableRes = R.drawable.ic_twotone_layers_24,
-        R.string.map_style_selection,
-    )
+    AppTheme {
+        MapButton(
+            icon = Icons.Outlined.Layers,
+            contentDescription = R.string.map_style_selection,
+        )
+    }
 }
--- a/app/src/main/java/com/geeksville/mesh/ui/map/MapFragment.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/map/MapFragment.kt
@ -16,6 +16,10 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Scaffold
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.LocationDisabled
+import androidx.compose.material.icons.outlined.Layers
+import androidx.compose.material.icons.outlined.MyLocation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@ -691,26 +695,25 @@ fun MapView(
                verticalArrangement = Arrangement.spacedBy(8.dp),
            ) {
                MapButton(
-                    onClick = { showMapStyleDialog() },
-                    drawableRes = R.drawable.ic_twotone_layers_24,
+                    onClick = ::showMapStyleDialog,
+                    icon = Icons.Outlined.Layers,
                    contentDescription = R.string.map_style_selection,
                )
                MapButton(
-                    onClick = {
-                        if (context.hasLocationPermission()) {
-                            map.toggleMyLocation()
-                        } else {
-                            requestPermissionAndToggleLauncher.launch(context.getLocationPermissions())
-                        }
-                    },
                    enabled = hasGps,
-                    drawableRes = if (myLocationOverlay == null) {
-                        R.drawable.ic_twotone_my_location_24
+                    icon = if (myLocationOverlay == null) {
+                        Icons.Outlined.MyLocation
                    } else {
-                        R.drawable.ic_twotone_location_disabled_24
+                        Icons.Default.LocationDisabled
                    },
                    contentDescription = null,
-                )
+                ) {
+                    if (context.hasLocationPermission()) {
+                        map.toggleMyLocation()
+                    } else {
+                        requestPermissionAndToggleLauncher.launch(context.getLocationPermissions())
+                    }
+                }
            }
        }
    }
--- a/app/src/main/res/drawable/ic_twotone_download_24.xml
+++ b/app/src/main/res/drawable/ic_twotone_download_24.xml
@ -1,15 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:tint="?attr/colorControlNormal"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-    <path
-        android:fillAlpha="0.3"
-        android:fillColor="@android:color/white"
-        android:pathData="M13,9V5h-2v6H9.83L12,13.17 14.17,11H13z"
-        android:strokeAlpha="0.3" />
-    <path
-        android:fillColor="@android:color/white"
-        android:pathData="M15,9L15,3L9,3v6L5,9l7,7 7,-7h-4zM12,13.17L9.83,11L11,11L11,5h2v6h1.17L12,13.17zM5,18h14v2L5,20z" />
-</vector>
--- a/app/src/main/res/drawable/ic_twotone_layers_24.xml
+++ b/app/src/main/res/drawable/ic_twotone_layers_24.xml
@ -1,14 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-    <path
-        android:fillAlpha="0.3"
-        android:fillColor="@android:color/white"
-        android:pathData="M6.26,9L12,13.47 17.74,9 12,4.53z"
-        android:strokeAlpha="0.3" />
-    <path
-        android:fillColor="@android:color/white"
-        android:pathData="M19.37,12.8l-7.38,5.74 -7.37,-5.73L3,14.07l9,7 9,-7zM12,2L3,9l1.63,1.27L12,16l7.36,-5.73L21,9l-9,-7zM12,13.47L6.26,9 12,4.53 17.74,9 12,13.47z" />
-</vector>
--- a/app/src/main/res/drawable/ic_twotone_location_disabled_24.xml
+++ b/app/src/main/res/drawable/ic_twotone_location_disabled_24.xml
@ -1,9 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-    <path
-        android:fillColor="@android:color/white"
-        android:pathData="M23,13v-2h-2.06c-0.46,-4.17 -3.77,-7.48 -7.94,-7.94V1h-2v2.06c-0.98,0.11 -1.91,0.38 -2.77,0.78l1.53,1.53C10.46,5.13 11.22,5 12,5c3.87,0 7,3.13 7,7 0,0.79 -0.13,1.54 -0.37,2.24l1.53,1.53c0.4,-0.86 0.67,-1.79 0.78,-2.77H23zM4.41,2.86L3,4.27l2.04,2.04C3.97,7.62 3.26,9.23 3.06,11H1v2h2.06c0.46,4.17 3.77,7.48 7.94,7.94V23h2v-2.06c1.77,-0.2 3.38,-0.91 4.69,-1.98L19.73,21l1.41,-1.41L4.41,2.86zM12,19c-3.87,0 -7,-3.13 -7,-7 0,-1.61 0.55,-3.09 1.46,-4.27l9.81,9.81C15.09,18.45 13.61,19 12,19z" />
-</vector>
--- a/app/src/main/res/drawable/ic_twotone_my_location_24.xml
+++ b/app/src/main/res/drawable/ic_twotone_my_location_24.xml
@ -1,17 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-    <path
-        android:fillColor="@android:color/white"
-        android:pathData="M13,3.06V1h-2v2.06C6.83,3.52 3.52,6.83 3.06,11H1v2h2.06c0.46,4.17 3.77,7.48 7.94,7.94V23h2v-2.06c4.17,-0.46 7.48,-3.77 7.94,-7.94H23v-2h-2.06c-0.46,-4.17 -3.77,-7.48 -7.94,-7.94zM12,19c-3.87,0 -7,-3.13 -7,-7s3.13,-7 7,-7 7,3.13 7,7 -3.13,7 -7,7z" />
-    <path
-        android:fillAlpha="0.3"
-        android:fillColor="@android:color/white"
-        android:pathData="M12,12m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"
-        android:strokeAlpha="0.3" />
-    <path
-        android:fillColor="@android:color/white"
-        android:pathData="M12,8c-2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM12,14c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2 2,0.9 2,2 -0.9,2 -2,2z" />
-</vector>