Skip to content

Commit fe8b685

Browse files
bmartybmarty
authored
Merge pull request #5033 from element-hq/feature/bma/updateFabStyle
Iterate on FloatingActionButton shape and colors.
2 parents dbf983a + cb725b2 commit fe8b685

File tree

56 files changed

+164
-126
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+164
-126
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -274,13 +274,11 @@ private fun HomeScaffold(
274274
floatingActionButton = {
275275
if (state.displayActions) {
276276
FloatingActionButton(
277-
containerColor = ElementTheme.colors.iconPrimary,
278-
onClick = onCreateRoomClick
277+
onClick = onCreateRoomClick,
279278
) {
280279
Icon(
281280
imageVector = CompoundIcons.Plus(),
282281
contentDescription = stringResource(id = R.string.screen_roomlist_a11y_create_message),
283-
tint = ElementTheme.colors.iconOnSolidPrimary,
284282
)
285283
}
286284
}

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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 40dp, 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+
}

‎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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -366,7 +366,7 @@ private fun JumpToBottomButton(
366366
shape = CircleShape,
367367
modifier = Modifier.size(36.dp),
368368
containerColor = ElementTheme.colors.bgSubtleSecondary,
369-
contentColor = ElementTheme.colors.iconSecondary
369+
contentColor = ElementTheme.colors.iconSecondary,
370370
) {
371371
Icon(
372372
modifier = Modifier

‎libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/FloatingActionButton.kt

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,16 @@ package io.element.android.libraries.designsystem.theme.components
1010
import androidx.compose.foundation.interaction.MutableInteractionSource
1111
import androidx.compose.foundation.layout.Box
1212
import androidx.compose.foundation.layout.padding
13-
import androidx.compose.foundation.shape.CircleShape
1413
import androidx.compose.material3.FloatingActionButtonDefaults
1514
import androidx.compose.material3.FloatingActionButtonElevation
16-
import androidx.compose.material3.contentColorFor
1715
import androidx.compose.runtime.Composable
1816
import androidx.compose.runtime.remember
1917
import androidx.compose.ui.Modifier
2018
import androidx.compose.ui.graphics.Color
2119
import androidx.compose.ui.graphics.Shape
2220
import androidx.compose.ui.tooling.preview.Preview
2321
import androidx.compose.ui.unit.dp
22+
import io.element.android.compound.theme.ElementTheme
2423
import io.element.android.compound.tokens.generated.CompoundIcons
2524
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
2625
import io.element.android.libraries.designsystem.preview.PreviewGroup
@@ -31,10 +30,9 @@ import io.element.android.libraries.testtags.testTag
3130
fun FloatingActionButton(
3231
onClick: () -> Unit,
3332
modifier: Modifier = Modifier,
34-
// FloatingActionButtonDefaults.shape
35-
shape: Shape = CircleShape,
36-
containerColor: Color = FloatingActionButtonDefaults.containerColor,
37-
contentColor: Color = contentColorFor(containerColor),
33+
shape: Shape = FloatingActionButtonDefaults.shape,
34+
containerColor: Color = ElementTheme.colors.textActionAccent,
35+
contentColor: Color = ElementTheme.colors.iconOnSolidPrimary,
3836
elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
3937
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
4038
content: @Composable () -> Unit,

‎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>

‎tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_0_en.png

Lines changed: 2 additions & 2 deletions

‎tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_10_en.png

Lines changed: 2 additions & 2 deletions

‎tests/uitests/src/test/snapshots/images/features.home.impl_HomeView_Day_11_en.png

Lines changed: 2 additions & 2 deletions

0 commit comments

Comments
 (0)