Skip to content

Commit cdbadb5

Browse files
bmartybmarty
committed
FAB: iterate on design
1 parent d550a1d commit cdbadb5

File tree

6 files changed

+67
-21
lines changed

6 files changed

+67
-21
lines changed

‎features/home/impl/src/main/kotlin/io/element/android/features/home/impl/HomeView.kt

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,12 +274,11 @@ private fun HomeScaffold(
274274
floatingActionButton = {
275275
if (state.displayActions) {
276276
FloatingActionButton(
277-
onClick = onCreateRoomClick
277+
onClick = onCreateRoomClick,
278278
) {
279279
Icon(
280280
imageVector = CompoundIcons.Plus(),
281281
contentDescription = stringResource(id = R.string.screen_roomlist_a11y_create_message),
282-
tint = ElementTheme.colors.iconOnSolidPrimary,
283282
)
284283
}
285284
}

‎features/location/impl/src/main/kotlin/io/element/android/features/location/impl/common/ui/LocationFloatingActionButton.kt

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
* Copyright 2025 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
package io.element.android.features.location.impl.common.ui
9+
10+
import androidx.compose.foundation.layout.size
11+
import androidx.compose.material3.FloatingActionButtonDefaults
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.res.stringResource
15+
import androidx.compose.ui.unit.dp
16+
import io.element.android.compound.theme.ElementTheme
17+
import io.element.android.compound.tokens.generated.CompoundIcons
18+
import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
19+
import io.element.android.libraries.designsystem.theme.components.Icon
20+
import io.element.android.libraries.ui.strings.CommonStrings
21+
22+
/**
23+
* Ref: See design in https://www.figma.com/design/0MMNu7cTOzLOlWb7ctTkv3/Element-X?node-id=3426-141111
24+
*/
25+
@Composable
26+
internal fun LocationFloatingActionButton(
27+
isMapCenteredOnUser: Boolean,
28+
onClick: () -> Unit,
29+
modifier: Modifier = Modifier,
30+
) {
31+
FloatingActionButton(
32+
shape = FloatingActionButtonDefaults.smallShape,
33+
containerColor = ElementTheme.colors.bgCanvasDefault,
34+
contentColor = ElementTheme.colors.iconPrimary,
35+
onClick = onClick,
36+
modifier = modifier
37+
// Note: design is 40do, but min is 48 for accessibility.
38+
.size(48.dp),
39+
) {
40+
val iconImage = if (isMapCenteredOnUser) {
41+
CompoundIcons.LocationNavigatorCentred()
42+
} else {
43+
CompoundIcons.LocationNavigator()
44+
}
45+
Icon(
46+
imageVector = iconImage,
47+
contentDescription = stringResource(CommonStrings.a11y_move_the_map_to_my_location),
48+
)
49+
}
50+
}
51+

‎features/location/impl/src/main/kotlin/io/element/android/features/location/impl/send/SendLocationView.kt

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,18 @@ import androidx.compose.ui.graphics.Color
3030
import androidx.compose.ui.res.stringResource
3131
import androidx.compose.ui.tooling.preview.PreviewParameter
3232
import androidx.compose.ui.unit.dp
33-
import io.element.android.compound.tokens.generated.CompoundIcons
3433
import io.element.android.features.location.api.Location
3534
import io.element.android.features.location.api.internal.centerBottomEdge
3635
import io.element.android.features.location.api.internal.rememberTileStyleUrl
3736
import io.element.android.features.location.impl.R
3837
import io.element.android.features.location.impl.common.MapDefaults
3938
import io.element.android.features.location.impl.common.PermissionDeniedDialog
4039
import io.element.android.features.location.impl.common.PermissionRationaleDialog
40+
import io.element.android.features.location.impl.common.ui.LocationFloatingActionButton
4141
import io.element.android.libraries.designsystem.components.button.BackButton
4242
import io.element.android.libraries.designsystem.preview.ElementPreview
4343
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
4444
import io.element.android.libraries.designsystem.theme.components.BottomSheetScaffold
45-
import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
4645
import io.element.android.libraries.designsystem.theme.components.Icon
4746
import io.element.android.libraries.designsystem.theme.components.Text
4847
import io.element.android.libraries.designsystem.theme.components.TopAppBar
@@ -189,17 +188,13 @@ fun SendLocationView(
189188
tint = Color.Unspecified,
190189
modifier = Modifier.centerBottomEdge(this),
191190
)
192-
FloatingActionButton(
191+
LocationFloatingActionButton(
192+
isMapCenteredOnUser = state.mode == SendLocationState.Mode.SenderLocation,
193193
onClick = { state.eventSink(SendLocationEvents.SwitchToMyLocationMode) },
194194
modifier = Modifier
195195
.align(Alignment.BottomEnd)
196-
.padding(end = 16.dp, bottom = 72.dp + navBarPadding),
197-
) {
198-
when (state.mode) {
199-
SendLocationState.Mode.PinLocation -> Icon(imageVector = CompoundIcons.LocationNavigator(), contentDescription = null)
200-
SendLocationState.Mode.SenderLocation -> Icon(imageVector = CompoundIcons.LocationNavigatorCentred(), contentDescription = null)
201-
}
202-
}
196+
.padding(end = 18.dp, bottom = 72.dp + navBarPadding),
197+
)
203198
}
204199
}
205200
}

‎features/location/impl/src/main/kotlin/io/element/android/features/location/impl/show/ShowLocationView.kt

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ import io.element.android.features.location.api.internal.rememberTileStyleUrl
2727
import io.element.android.features.location.impl.common.MapDefaults
2828
import io.element.android.features.location.impl.common.PermissionDeniedDialog
2929
import io.element.android.features.location.impl.common.PermissionRationaleDialog
30+
import io.element.android.features.location.impl.common.ui.LocationFloatingActionButton
3031
import io.element.android.libraries.designsystem.components.button.BackButton
3132
import io.element.android.libraries.designsystem.preview.ElementPreview
3233
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
33-
import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
3434
import io.element.android.libraries.designsystem.theme.components.Icon
3535
import io.element.android.libraries.designsystem.theme.components.IconButton
3636
import io.element.android.libraries.designsystem.theme.components.Scaffold
@@ -118,14 +118,10 @@ fun ShowLocationView(
118118
)
119119
},
120120
floatingActionButton = {
121-
FloatingActionButton(
121+
LocationFloatingActionButton(
122+
isMapCenteredOnUser = state.isTrackMyLocation,
122123
onClick = { state.eventSink(ShowLocationEvents.TrackMyLocation(true)) },
123-
) {
124-
when (state.isTrackMyLocation) {
125-
false -> Icon(imageVector = CompoundIcons.LocationNavigator(), contentDescription = null)
126-
true -> Icon(imageVector = CompoundIcons.LocationNavigatorCentred(), contentDescription = null)
127-
}
128-
}
124+
)
129125
},
130126
) { paddingValues ->
131127
Column(

‎features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import androidx.compose.foundation.lazy.LazyColumn
2323
import androidx.compose.foundation.lazy.LazyListState
2424
import androidx.compose.foundation.lazy.items
2525
import androidx.compose.foundation.lazy.rememberLazyListState
26+
import androidx.compose.foundation.shape.CircleShape
2627
import androidx.compose.material3.FloatingActionButtonDefaults
2728
import androidx.compose.runtime.Composable
2829
import androidx.compose.runtime.CompositionLocalProvider
@@ -46,6 +47,7 @@ import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
4647
import androidx.compose.ui.res.stringResource
4748
import androidx.compose.ui.tooling.preview.PreviewParameter
4849
import androidx.compose.ui.unit.dp
50+
import io.element.android.compound.theme.ElementTheme
4951
import io.element.android.compound.tokens.generated.CompoundIcons
5052
import io.element.android.features.messages.impl.crypto.sendfailure.resolve.ResolveVerifiedUserSendFailureView
5153
import io.element.android.features.messages.impl.timeline.components.TimelineItemRow
@@ -361,8 +363,10 @@ private fun JumpToBottomButton(
361363
FloatingActionButton(
362364
onClick = onClick,
363365
elevation = FloatingActionButtonDefaults.elevation(4.dp, 4.dp, 4.dp, 4.dp),
364-
shape = FloatingActionButtonDefaults.smallShape,
366+
shape = CircleShape,
365367
modifier = Modifier.size(36.dp),
368+
containerColor = ElementTheme.colors.bgSubtleSecondary,
369+
contentColor = ElementTheme.colors.iconSecondary,
366370
) {
367371
Icon(
368372
modifier = Modifier

‎libraries/ui-strings/src/main/res/values/localazy.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<string name="a11y_hide_password">"Hide password"</string>
1313
<string name="a11y_join_call">"Join call"</string>
1414
<string name="a11y_jump_to_bottom">"Jump to bottom"</string>
15+
<string name="a11y_move_the_map_to_my_location">"Move the map to my location"</string>
1516
<string name="a11y_notifications_mentions_only">"Mentions only"</string>
1617
<string name="a11y_notifications_muted">"Muted"</string>
1718
<string name="a11y_notifications_new_mentions">"New mentions"</string>

0 commit comments

Comments
 (0)