FAB: iterate on design

2025-07-16 09:31:54 +02:00
parent d759125206
commit 9dbb2634ab
6 changed files with 67 additions and 21 deletions
--- a/features/location/impl/src/main/kotlin/io/element/android/features/location/impl/common/ui/LocationFloatingActionButton.kt
+++ b/features/location/impl/src/main/kotlin/io/element/android/features/location/impl/common/ui/LocationFloatingActionButton.kt
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.location.impl.common.ui
+
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.ui.strings.CommonStrings
+
+/**
+ * Ref: See design in https://www.figma.com/design/0MMNu7cTOzLOlWb7ctTkv3/Element-X?node-id=3426-141111
+ */
+@Composable
+internal fun LocationFloatingActionButton(
+    isMapCenteredOnUser: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    FloatingActionButton(
+        shape = FloatingActionButtonDefaults.smallShape,
+        containerColor = ElementTheme.colors.bgCanvasDefault,
+        contentColor = ElementTheme.colors.iconPrimary,
+        onClick = onClick,
+        modifier = modifier
+            // Note: design is 40do, but min is 48 for accessibility.
+            .size(48.dp),
+    ) {
+        val iconImage = if (isMapCenteredOnUser) {
+            CompoundIcons.LocationNavigatorCentred()
+        } else {
+            CompoundIcons.LocationNavigator()
+        }
+        Icon(
+            imageVector = iconImage,
+            contentDescription = stringResource(CommonStrings.a11y_move_the_map_to_my_location),
+        )
+    }
+}
+
--- a/features/location/impl/src/main/kotlin/io/element/android/features/location/impl/send/SendLocationView.kt
+++ b/features/location/impl/src/main/kotlin/io/element/android/features/location/impl/send/SendLocationView.kt
@@ -30,7 +30,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
-import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.location.api.Location
 import io.element.android.features.location.api.internal.centerBottomEdge
 import io.element.android.features.location.api.internal.rememberTileStyleUrl
@@ -38,11 +37,11 @@ import io.element.android.features.location.impl.R
 import io.element.android.features.location.impl.common.MapDefaults
 import io.element.android.features.location.impl.common.PermissionDeniedDialog
 import io.element.android.features.location.impl.common.PermissionRationaleDialog
+import io.element.android.features.location.impl.common.ui.LocationFloatingActionButton
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.BottomSheetScaffold
-import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
@@ -189,17 +188,13 @@ fun SendLocationView(
                tint = Color.Unspecified,
                modifier = Modifier.centerBottomEdge(this),
            )
-            FloatingActionButton(
+            LocationFloatingActionButton(
+                isMapCenteredOnUser = state.mode == SendLocationState.Mode.SenderLocation,
                onClick = { state.eventSink(SendLocationEvents.SwitchToMyLocationMode) },
                modifier = Modifier
                    .align(Alignment.BottomEnd)
-                    .padding(end = 16.dp, bottom = 72.dp + navBarPadding),
-            ) {
-                when (state.mode) {
-                    SendLocationState.Mode.PinLocation -> Icon(imageVector = CompoundIcons.LocationNavigator(), contentDescription = null)
-                    SendLocationState.Mode.SenderLocation -> Icon(imageVector = CompoundIcons.LocationNavigatorCentred(), contentDescription = null)
-                }
-            }
+                    .padding(end = 18.dp, bottom = 72.dp + navBarPadding),
+            )
        }
    }
 }
--- a/features/location/impl/src/main/kotlin/io/element/android/features/location/impl/show/ShowLocationView.kt
+++ b/features/location/impl/src/main/kotlin/io/element/android/features/location/impl/show/ShowLocationView.kt
@@ -27,10 +27,10 @@ import io.element.android.features.location.api.internal.rememberTileStyleUrl
 import io.element.android.features.location.impl.common.MapDefaults
 import io.element.android.features.location.impl.common.PermissionDeniedDialog
 import io.element.android.features.location.impl.common.PermissionRationaleDialog
+import io.element.android.features.location.impl.common.ui.LocationFloatingActionButton
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Scaffold
@@ -118,14 +118,10 @@ fun ShowLocationView(
            )
        },
        floatingActionButton = {
-            FloatingActionButton(
+            LocationFloatingActionButton(
+                isMapCenteredOnUser = state.isTrackMyLocation,
                onClick = { state.eventSink(ShowLocationEvents.TrackMyLocation(true)) },
-            ) {
-                when (state.isTrackMyLocation) {
-                    false -> Icon(imageVector = CompoundIcons.LocationNavigator(), contentDescription = null)
-                    true -> Icon(imageVector = CompoundIcons.LocationNavigatorCentred(), contentDescription = null)
-                }
-            }
+            )
        },
    ) { paddingValues ->
        Column(