Skip to content

Commit a5bad53

Browse files
jmartinespElementBot
jmartinesp
and
ElementBot
authored
Iterate design on several screens: update icons, replace PreferenceTexts (#1771)
- Batch import new icons from the design team. - Rename _september icons since they're just extra icons that need to be integrated in Compound in the future, and it should be ok if we don't distinguish between ic_september_*, ic_november_* etc., so all icons are now simply ic_* in the designsystem module. - Create a new CompoundIconListPreviewProvider to add chunked lists of icons for previews. Add an exception for it to Konsist. - Move some icons to use Compound icons. - Remove most PreferenceText usages, use ListItem instead. --------- Co-authored-by: ElementBot <[email protected]>
1 parent 99783a6 commit a5bad53

File tree

194 files changed

+945
-519
lines changed

Some content is hidden

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

194 files changed

+945
-519
lines changed

‎changelog.d/1718.misc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Update icons and move away from `PreferenceText` components.

‎features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/root/CreateRoomRootView.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ private fun CreateRoomActionButtonsList(
140140
) {
141141
Column(modifier = modifier) {
142142
CreateRoomActionButton(
143-
iconRes = CommonDrawables.ic_groups,
143+
iconRes = CommonDrawables.ic_compound_plus,
144144
text = stringResource(id = R.string.screen_create_room_action_create_room),
145145
onClick = onNewRoomClicked,
146146
)

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ package io.element.android.features.location.impl.send
1818

1919
import androidx.compose.foundation.clickable
2020
import androidx.compose.foundation.layout.Box
21-
import androidx.compose.foundation.layout.ExperimentalLayoutApi
2221
import androidx.compose.foundation.layout.Spacer
2322
import androidx.compose.foundation.layout.WindowInsets
2423
import androidx.compose.foundation.layout.asPaddingValues
@@ -27,9 +26,6 @@ import androidx.compose.foundation.layout.fillMaxSize
2726
import androidx.compose.foundation.layout.height
2827
import androidx.compose.foundation.layout.navigationBars
2928
import androidx.compose.foundation.layout.padding
30-
import androidx.compose.material.icons.Icons
31-
import androidx.compose.material.icons.filled.LocationSearching
32-
import androidx.compose.material.icons.filled.MyLocation
3329
import androidx.compose.material3.ExperimentalMaterial3Api
3430
import androidx.compose.material3.ListItem
3531
import androidx.compose.material3.SheetValue
@@ -68,7 +64,7 @@ import io.element.android.libraries.maplibre.compose.rememberCameraPositionState
6864
import io.element.android.libraries.theme.ElementTheme
6965
import io.element.android.libraries.ui.strings.CommonStrings
7066

71-
@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
67+
@OptIn(ExperimentalMaterial3Api::class)
7268
@Composable
7369
fun SendLocationView(
7470
state: SendLocationState,
@@ -215,8 +211,8 @@ fun SendLocationView(
215211
.padding(end = 16.dp, bottom = 72.dp + navBarPadding),
216212
) {
217213
when (state.mode) {
218-
SendLocationState.Mode.PinLocation -> Icon(imageVector = Icons.Default.LocationSearching, contentDescription = null)
219-
SendLocationState.Mode.SenderLocation -> Icon(imageVector = Icons.Default.MyLocation, contentDescription = null)
214+
SendLocationState.Mode.PinLocation -> Icon(resourceId = CommonDrawables.ic_location_navigator, contentDescription = null)
215+
SendLocationState.Mode.SenderLocation -> Icon(resourceId = CommonDrawables.ic_location_navigator_centered, contentDescription = null)
220216
}
221217
}
222218
}

‎features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,15 @@ import androidx.compose.foundation.layout.Row
2626
import androidx.compose.foundation.layout.Spacer
2727
import androidx.compose.foundation.layout.fillMaxWidth
2828
import androidx.compose.foundation.layout.height
29+
import androidx.compose.foundation.layout.imePadding
30+
import androidx.compose.foundation.layout.navigationBarsPadding
2931
import androidx.compose.foundation.layout.padding
3032
import androidx.compose.foundation.layout.size
3133
import androidx.compose.foundation.layout.width
3234
import androidx.compose.foundation.lazy.LazyColumn
3335
import androidx.compose.foundation.lazy.items
3436
import androidx.compose.foundation.shape.CircleShape
3537
import androidx.compose.foundation.shape.RoundedCornerShape
36-
import androidx.compose.material.ExperimentalMaterialApi
37-
import androidx.compose.material.ListItem
38-
import androidx.compose.material.Text
3938
import androidx.compose.material.ripple.rememberRipple
4039
import androidx.compose.material3.ExperimentalMaterial3Api
4140
import androidx.compose.material3.MaterialTheme
@@ -70,12 +69,17 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
7069
import io.element.android.features.messages.impl.utils.messagesummary.MessageSummaryFormatterImpl
7170
import io.element.android.libraries.designsystem.components.avatar.Avatar
7271
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
73-
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
72+
import io.element.android.libraries.designsystem.components.list.ListItemContent
7473
import io.element.android.libraries.designsystem.preview.ElementPreview
74+
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
7575
import io.element.android.libraries.designsystem.text.toSp
7676
import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
7777
import io.element.android.libraries.designsystem.theme.components.Icon
78+
import io.element.android.libraries.designsystem.theme.components.IconSource
79+
import io.element.android.libraries.designsystem.theme.components.ListItem
80+
import io.element.android.libraries.designsystem.theme.components.ListItemStyle
7881
import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
82+
import io.element.android.libraries.designsystem.theme.components.Text
7983
import io.element.android.libraries.designsystem.theme.components.hide
8084
import io.element.android.libraries.designsystem.utils.CommonDrawables
8185
import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
@@ -140,15 +144,13 @@ fun ActionListView(
140144
onEmojiReactionClicked = ::onEmojiReactionClicked,
141145
onCustomReactionClicked = ::onCustomReactionClicked,
142146
modifier = Modifier
143-
.padding(bottom = 32.dp)
144-
// .navigationBarsPadding() - FIXME after https://issuetracker.google.com/issues/275849044
145-
// .imePadding()
147+
.navigationBarsPadding()
148+
.imePadding()
146149
)
147150
}
148151
}
149152
}
150153

151-
@OptIn(ExperimentalMaterialApi::class)
152154
@Composable
153155
private fun SheetContent(
154156
state: ActionListState,
@@ -198,18 +200,13 @@ private fun SheetContent(
198200
modifier = Modifier.clickable {
199201
onActionClicked(action)
200202
},
201-
text = {
202-
Text(
203-
text = stringResource(id = action.titleRes),
204-
color = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
205-
)
203+
headlineContent = {
204+
Text(text = stringResource(id = action.titleRes))
206205
},
207-
icon = {
208-
Icon(
209-
resourceId = action.icon,
210-
contentDescription = "",
211-
tint = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
212-
)
206+
leadingContent = ListItemContent.Icon(IconSource.Resource(action.icon)),
207+
style = when {
208+
action.destructive -> ListItemStyle.Destructive
209+
else -> ListItemStyle.Primary
213210
}
214211
)
215212
}
@@ -373,7 +370,7 @@ private fun EmojiReactionsRow(
373370
contentAlignment = Alignment.Center
374371
) {
375372
Icon(
376-
resourceId = CommonDrawables.ic_september_add_reaction,
373+
resourceId = CommonDrawables.ic_add_reaction,
377374
contentDescription = "Emojis",
378375
tint = MaterialTheme.colorScheme.secondary,
379376
modifier = Modifier
@@ -410,8 +407,7 @@ private fun EmojiButton(
410407
) {
411408
Text(
412409
emoji,
413-
fontSize = 24.dp.toSp(),
414-
color = Color.White,
410+
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = 24.dp.toSp(), color = Color.White),
415411
modifier = Modifier
416412
.clickable(
417413
enabled = true,

‎features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/model/TimelineItemAction.kt‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@ sealed class TimelineItemAction(
2828
@DrawableRes val icon: Int,
2929
val destructive: Boolean = false
3030
) {
31-
data object Forward : TimelineItemAction(CommonStrings.action_forward, CommonDrawables.ic_september_forward)
32-
data object Copy : TimelineItemAction(CommonStrings.action_copy, CommonDrawables.ic_september_copy)
31+
data object Forward : TimelineItemAction(CommonStrings.action_forward, CommonDrawables.ic_forward)
32+
data object Copy : TimelineItemAction(CommonStrings.action_copy, CommonDrawables.ic_copy)
3333
data object Redact : TimelineItemAction(CommonStrings.action_remove, CommonDrawables.ic_compound_delete, destructive = true)
34-
data object Reply : TimelineItemAction(CommonStrings.action_reply, CommonDrawables.ic_september_reply)
35-
data object ReplyInThread : TimelineItemAction(CommonStrings.action_reply_in_thread, CommonDrawables.ic_september_reply)
36-
data object Edit : TimelineItemAction(CommonStrings.action_edit, CommonDrawables.ic_september_edit_outline)
37-
data object ViewSource : TimelineItemAction(CommonStrings.action_view_source, CommonDrawables.ic_september_view_source)
34+
data object Reply : TimelineItemAction(CommonStrings.action_reply, CommonDrawables.ic_reply)
35+
data object ReplyInThread : TimelineItemAction(CommonStrings.action_reply_in_thread, CommonDrawables.ic_reply)
36+
data object Edit : TimelineItemAction(CommonStrings.action_edit, CommonDrawables.ic_edit_outline)
37+
data object ViewSource : TimelineItemAction(CommonStrings.action_view_source, CommonDrawables.ic_developer_options)
3838
data object ReportContent : TimelineItemAction(CommonStrings.action_report_content, CommonDrawables.ic_compound_chat_problem, destructive = true)
3939
data object EndPoll : TimelineItemAction(CommonStrings.action_end_poll, CommonDrawables.ic_poll_end)
4040
}

‎features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/media/local/LocalMediaView.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ private fun MediaFileView(
236236
) {
237237
Icon(
238238
imageVector = if (isAudio) Icons.Outlined.GraphicEq else null,
239-
resourceId = if (isAudio) null else CommonDrawables.ic_september_attachment,
239+
resourceId = if (isAudio) null else CommonDrawables.ic_attachment,
240240
contentDescription = null,
241241
tint = MaterialTheme.colorScheme.background,
242242
modifier = Modifier

‎features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/AttachmentsBottomSheet.kt‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,8 @@ package io.element.android.features.messages.impl.messagecomposer
1919
import androidx.activity.compose.BackHandler
2020
import androidx.compose.foundation.clickable
2121
import androidx.compose.foundation.layout.Column
22-
import androidx.compose.foundation.layout.padding
23-
import androidx.compose.material.ExperimentalMaterialApi
24-
import androidx.compose.material.ListItem
22+
import androidx.compose.foundation.layout.imePadding
23+
import androidx.compose.foundation.layout.navigationBarsPadding
2524
import androidx.compose.material3.ExperimentalMaterial3Api
2625
import androidx.compose.material3.rememberModalBottomSheetState
2726
import androidx.compose.runtime.Composable
@@ -33,12 +32,14 @@ import androidx.compose.runtime.setValue
3332
import androidx.compose.ui.Modifier
3433
import androidx.compose.ui.platform.LocalView
3534
import androidx.compose.ui.res.stringResource
36-
import androidx.compose.ui.unit.dp
3735
import io.element.android.features.messages.impl.R
3836
import io.element.android.libraries.androidutils.ui.hideKeyboard
39-
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
37+
import io.element.android.libraries.designsystem.components.list.ListItemContent
4038
import io.element.android.libraries.designsystem.preview.ElementPreview
41-
import io.element.android.libraries.designsystem.theme.components.Icon
39+
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
40+
import io.element.android.libraries.designsystem.theme.components.IconSource
41+
import io.element.android.libraries.designsystem.theme.components.ListItem
42+
import io.element.android.libraries.designsystem.theme.components.ListItemStyle
4243
import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
4344
import io.element.android.libraries.designsystem.theme.components.Text
4445
import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -93,7 +94,6 @@ internal fun AttachmentsBottomSheet(
9394
}
9495
}
9596

96-
@OptIn(ExperimentalMaterialApi::class)
9797
@Composable
9898
private fun AttachmentSourcePickerMenu(
9999
state: MessageComposerState,
@@ -103,37 +103,43 @@ private fun AttachmentSourcePickerMenu(
103103
modifier: Modifier = Modifier,
104104
) {
105105
Column(
106-
modifier.padding(bottom = 32.dp)
107-
// .navigationBarsPadding() - FIXME after https://issuetracker.google.com/issues/275849044
106+
modifier = modifier
107+
.navigationBarsPadding()
108+
.imePadding()
108109
) {
109110
ListItem(
110111
modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.FromGallery) },
111-
icon = { Icon(CommonDrawables.ic_september_photo_video_library, null) },
112-
text = { Text(stringResource(R.string.screen_room_attachment_source_gallery)) },
112+
leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_image)),
113+
headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_gallery)) },
114+
style = ListItemStyle.Primary,
113115
)
114116
ListItem(
115117
modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.FromFiles) },
116-
icon = { Icon(CommonDrawables.ic_september_attachment, null) },
117-
text = { Text(stringResource(R.string.screen_room_attachment_source_files)) },
118+
leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_attachment)),
119+
headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_files)) },
120+
style = ListItemStyle.Primary,
118121
)
119122
ListItem(
120123
modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.PhotoFromCamera) },
121-
icon = { Icon(CommonDrawables.ic_september_take_photo_camera, null) },
122-
text = { Text(stringResource(R.string.screen_room_attachment_source_camera_photo)) },
124+
leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_take_photo_camera, )),
125+
headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_camera_photo)) },
126+
style = ListItemStyle.Primary,
123127
)
124128
ListItem(
125129
modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.VideoFromCamera) },
126-
icon = { Icon(CommonDrawables.ic_september_video_call, null) },
127-
text = { Text(stringResource(R.string.screen_room_attachment_source_camera_video)) },
130+
leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_video_call)),
131+
headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_camera_video)) },
132+
style = ListItemStyle.Primary,
128133
)
129134
if (state.canShareLocation) {
130135
ListItem(
131136
modifier = Modifier.clickable {
132137
state.eventSink(MessageComposerEvents.PickAttachmentSource.Location)
133138
onSendLocationClicked()
134139
},
135-
icon = { Icon(CommonDrawables.ic_september_location, null) },
136-
text = { Text(stringResource(R.string.screen_room_attachment_source_location)) },
140+
leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_location_pin) ),
141+
headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_location)) },
142+
style = ListItemStyle.Primary,
137143
)
138144
}
139145
if (state.canCreatePoll) {
@@ -142,15 +148,17 @@ private fun AttachmentSourcePickerMenu(
142148
state.eventSink(MessageComposerEvents.PickAttachmentSource.Poll)
143149
onCreatePollClicked()
144150
},
145-
icon = { Icon(CommonDrawables.ic_compound_polls, null) },
146-
text = { Text(stringResource(R.string.screen_room_attachment_source_poll)) },
151+
leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_polls)),
152+
headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_poll)) },
153+
style = ListItemStyle.Primary,
147154
)
148155
}
149156
if (enableTextFormatting) {
150157
ListItem(
151158
modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.ToggleTextFormatting(enabled = true)) },
152-
icon = { Icon(CommonDrawables.ic_september_text_formatting, null) },
153-
text = { Text(stringResource(R.string.screen_room_attachment_text_formatting)) },
159+
leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_text_formatting, null)),
160+
headlineContent = { Text(stringResource(R.string.screen_room_attachment_text_formatting)) },
161+
style = ListItemStyle.Primary,
154162
)
155163
}
156164
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ internal fun MessagesReactionButtonPreview(@PreviewParameter(AggregatedReactionP
181181
@Composable
182182
internal fun MessagesAddReactionButtonPreview() = ElementPreview {
183183
MessagesReactionButton(
184-
content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
184+
content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_add_reaction),
185185
onClick = {},
186186
onLongClick = {}
187187
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ fun RowScope.ReplySwipeIndicator(
4949
alpha = swipeProgress()
5050
},
5151
contentDescription = null,
52-
resourceId = CommonDrawables.ic_september_reply,
52+
resourceId = CommonDrawables.ic_reply,
5353
)
5454
}
5555

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ internal fun TimelineItemReactionsLayoutPreview() = ElementPreview {
196196
},
197197
addMoreButton = {
198198
MessagesReactionButton(
199-
content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
199+
content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_add_reaction),
200200
onClick = {},
201201
onLongClick = {}
202202
)

0 commit comments

Comments
 (0)