From 9dbb2634ab30dcfe1d2fe10bc85a23235a5bd02b Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Wed, 16 Jul 2025 09:31:54 +0200 Subject: [PATCH] FAB: iterate on design --- .../android/features/home/impl/HomeView.kt | 3 +- .../common/ui/LocationFloatingActionButton.kt | 51 +++++++++++++++++++ .../location/impl/send/SendLocationView.kt | 15 ++---- .../location/impl/show/ShowLocationView.kt | 12 ++--- .../messages/impl/timeline/TimelineView.kt | 6 ++- .../src/main/res/values/localazy.xml | 1 + 6 files changed, 67 insertions(+), 21 deletions(-) create mode 100644 features/location/impl/src/main/kotlin/io/element/android/features/location/impl/common/ui/LocationFloatingActionButton.kt diff --git a/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/HomeView.kt b/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/HomeView.kt index 83d02b5d35..30a5c86243 100644 --- a/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/HomeView.kt +++ b/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/HomeView.kt @@ -274,12 +274,11 @@ private fun HomeScaffold( floatingActionButton = { if (state.displayActions) { FloatingActionButton( - onClick = onCreateRoomClick + onClick = onCreateRoomClick, ) { Icon( imageVector = CompoundIcons.Plus(), contentDescription = stringResource(id = R.string.screen_roomlist_a11y_create_message), - tint = ElementTheme.colors.iconOnSolidPrimary, ) } } diff --git 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 new file mode 100644 index 0000000000..9a79237d7d --- /dev/null +++ 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), + ) + } +} + diff --git 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 index 32df5af6c5..d6882ced98 100644 --- 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), + ) } } } diff --git 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 index 03d2a3c714..2a6063e9f3 100644 --- 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( diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt index 790519526b..68bbc9c8b9 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt @@ -23,6 +23,7 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyListState import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.foundation.shape.CircleShape import androidx.compose.material3.FloatingActionButtonDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider @@ -46,6 +47,7 @@ import androidx.compose.ui.platform.rememberNestedScrollInteropConnection import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.PreviewParameter 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.features.messages.impl.crypto.sendfailure.resolve.ResolveVerifiedUserSendFailureView import io.element.android.features.messages.impl.timeline.components.TimelineItemRow @@ -361,8 +363,10 @@ private fun JumpToBottomButton( FloatingActionButton( onClick = onClick, elevation = FloatingActionButtonDefaults.elevation(4.dp, 4.dp, 4.dp, 4.dp), - shape = FloatingActionButtonDefaults.smallShape, + shape = CircleShape, modifier = Modifier.size(36.dp), + containerColor = ElementTheme.colors.bgSubtleSecondary, + contentColor = ElementTheme.colors.iconSecondary, ) { Icon( modifier = Modifier diff --git a/libraries/ui-strings/src/main/res/values/localazy.xml b/libraries/ui-strings/src/main/res/values/localazy.xml index 362b2310d4..36daf388b8 100644 --- a/libraries/ui-strings/src/main/res/values/localazy.xml +++ b/libraries/ui-strings/src/main/res/values/localazy.xml @@ -12,6 +12,7 @@ "Hide password" "Join call" "Jump to bottom" + "Move the map to my location" "Mentions only" "Muted" "New mentions"