Iterate design on several screens: update icons, replace PreferenceTe…

…xts (#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]>
element-hq · Nov 15, 2023 · a5bad53 · a5bad53
1 parent 99783a6
commit a5bad53
Show file tree

Hide file tree

Showing 194 changed files with 945 additions and 519 deletions.
diff --git a/changelog.d/1718.misc b/changelog.d/1718.misc
@@ -0,0 +1 @@
+Update icons and move away from `PreferenceText` components.
diff --git a/...pl/src/main/kotlin/io/element/android/features/createroom/impl/root/CreateRoomRootView.kt b/...pl/src/main/kotlin/io/element/android/features/createroom/impl/root/CreateRoomRootView.kt
@@ -140,7 +140,7 @@ private fun CreateRoomActionButtonsList(
 ) {
     Column(modifier = modifier) {
         CreateRoomActionButton(
-            iconRes = CommonDrawables.ic_groups,
+            iconRes = CommonDrawables.ic_compound_plus,
             text = stringResource(id = R.string.screen_create_room_action_create_room),
             onClick = onNewRoomClicked,
         )

diff --git a/...n/impl/src/main/kotlin/io/element/android/features/location/impl/send/SendLocationView.kt b/...n/impl/src/main/kotlin/io/element/android/features/location/impl/send/SendLocationView.kt
@@ -18,7 +18,6 @@ package io.element.android.features.location.impl.send
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
@@ -27,9 +26,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.LocationSearching
-import androidx.compose.material.icons.filled.MyLocation
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.SheetValue
@@ -68,7 +64,7 @@ import io.element.android.libraries.maplibre.compose.rememberCameraPositionState
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 
-@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SendLocationView(
     state: SendLocationState,
@@ -215,8 +211,8 @@ fun SendLocationView(
                     .padding(end = 16.dp, bottom = 72.dp + navBarPadding),
             ) {
                 when (state.mode) {
-                    SendLocationState.Mode.PinLocation -> Icon(imageVector = Icons.Default.LocationSearching, contentDescription = null)
-                    SendLocationState.Mode.SenderLocation -> Icon(imageVector = Icons.Default.MyLocation, contentDescription = null)
+                    SendLocationState.Mode.PinLocation -> Icon(resourceId = CommonDrawables.ic_location_navigator, contentDescription = null)
+                    SendLocationState.Mode.SenderLocation -> Icon(resourceId = CommonDrawables.ic_location_navigator_centered, contentDescription = null)
                 }
             }
         }

diff --git a/...pl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt b/...pl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt
@@ -26,16 +26,15 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.ListItem
-import androidx.compose.material.Text
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
@@ -70,12 +69,17 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.messages.impl.utils.messagesummary.MessageSummaryFormatterImpl
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.text.toSp
 import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.IconSource
+import io.element.android.libraries.designsystem.theme.components.ListItem
+import io.element.android.libraries.designsystem.theme.components.ListItemStyle
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
+import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.hide
 import io.element.android.libraries.designsystem.utils.CommonDrawables
 import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
@@ -140,15 +144,13 @@ fun ActionListView(
                 onEmojiReactionClicked = ::onEmojiReactionClicked,
                 onCustomReactionClicked = ::onCustomReactionClicked,
                 modifier = Modifier
-                    .padding(bottom = 32.dp)
-//                    .navigationBarsPadding() - FIXME after https://issuetracker.google.com/issues/275849044
-//                    .imePadding()
+                    .navigationBarsPadding()
+                    .imePadding()
             )
         }
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 private fun SheetContent(
     state: ActionListState,
@@ -198,18 +200,13 @@ private fun SheetContent(
                         modifier = Modifier.clickable {
                             onActionClicked(action)
                         },
-                        text = {
-                            Text(
-                                text = stringResource(id = action.titleRes),
-                                color = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
-                            )
+                        headlineContent = {
+                            Text(text = stringResource(id = action.titleRes))
                         },
-                        icon = {
-                            Icon(
-                                resourceId = action.icon,
-                                contentDescription = "",
-                                tint = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
-                            )
+                        leadingContent = ListItemContent.Icon(IconSource.Resource(action.icon)),
+                        style = when {
+                            action.destructive -> ListItemStyle.Destructive
+                            else -> ListItemStyle.Primary
                         }
                     )
                 }
@@ -373,7 +370,7 @@ private fun EmojiReactionsRow(
             contentAlignment = Alignment.Center
         ) {
             Icon(
-                resourceId = CommonDrawables.ic_september_add_reaction,
+                resourceId = CommonDrawables.ic_add_reaction,
                 contentDescription = "Emojis",
                 tint = MaterialTheme.colorScheme.secondary,
                 modifier = Modifier
@@ -410,8 +407,7 @@ private fun EmojiButton(
     ) {
         Text(
             emoji,
-            fontSize = 24.dp.toSp(),
-            color = Color.White,
+            style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = 24.dp.toSp(), color = Color.White),
             modifier = Modifier
                 .clickable(
                     enabled = true,

diff --git a/...n/kotlin/io/element/android/features/messages/impl/actionlist/model/TimelineItemAction.kt b/...n/kotlin/io/element/android/features/messages/impl/actionlist/model/TimelineItemAction.kt
@@ -28,13 +28,13 @@ sealed class TimelineItemAction(
     @DrawableRes val icon: Int,
     val destructive: Boolean = false
 ) {
-    data object Forward : TimelineItemAction(CommonStrings.action_forward, CommonDrawables.ic_september_forward)
-    data object Copy : TimelineItemAction(CommonStrings.action_copy, CommonDrawables.ic_september_copy)
+    data object Forward : TimelineItemAction(CommonStrings.action_forward, CommonDrawables.ic_forward)
+    data object Copy : TimelineItemAction(CommonStrings.action_copy, CommonDrawables.ic_copy)
     data object Redact : TimelineItemAction(CommonStrings.action_remove, CommonDrawables.ic_compound_delete, destructive = true)
-    data object Reply : TimelineItemAction(CommonStrings.action_reply, CommonDrawables.ic_september_reply)
-    data object ReplyInThread : TimelineItemAction(CommonStrings.action_reply_in_thread, CommonDrawables.ic_september_reply)
-    data object Edit : TimelineItemAction(CommonStrings.action_edit, CommonDrawables.ic_september_edit_outline)
-    data object ViewSource : TimelineItemAction(CommonStrings.action_view_source, CommonDrawables.ic_september_view_source)
+    data object Reply : TimelineItemAction(CommonStrings.action_reply, CommonDrawables.ic_reply)
+    data object ReplyInThread : TimelineItemAction(CommonStrings.action_reply_in_thread, CommonDrawables.ic_reply)
+    data object Edit : TimelineItemAction(CommonStrings.action_edit, CommonDrawables.ic_edit_outline)
+    data object ViewSource : TimelineItemAction(CommonStrings.action_view_source, CommonDrawables.ic_developer_options)
     data object ReportContent : TimelineItemAction(CommonStrings.action_report_content, CommonDrawables.ic_compound_chat_problem, destructive = true)
     data object EndPoll : TimelineItemAction(CommonStrings.action_end_poll, CommonDrawables.ic_poll_end)
 }
diff --git a/...l/src/main/kotlin/io/element/android/features/messages/impl/media/local/LocalMediaView.kt b/...l/src/main/kotlin/io/element/android/features/messages/impl/media/local/LocalMediaView.kt
@@ -236,7 +236,7 @@ private fun MediaFileView(
             ) {
                 Icon(
                     imageVector = if (isAudio) Icons.Outlined.GraphicEq else null,
-                    resourceId = if (isAudio) null else CommonDrawables.ic_september_attachment,
+                    resourceId = if (isAudio) null else CommonDrawables.ic_attachment,
                     contentDescription = null,
                     tint = MaterialTheme.colorScheme.background,
                     modifier = Modifier

diff --git a/...otlin/io/element/android/features/messages/impl/messagecomposer/AttachmentsBottomSheet.kt b/...otlin/io/element/android/features/messages/impl/messagecomposer/AttachmentsBottomSheet.kt
@@ -19,9 +19,8 @@ package io.element.android.features.messages.impl.messagecomposer
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.ListItem
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@@ -33,12 +32,14 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
 import io.element.android.features.messages.impl.R
 import io.element.android.libraries.androidutils.ui.hideKeyboard
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.IconSource
+import io.element.android.libraries.designsystem.theme.components.ListItem
+import io.element.android.libraries.designsystem.theme.components.ListItemStyle
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -93,7 +94,6 @@ internal fun AttachmentsBottomSheet(
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 private fun AttachmentSourcePickerMenu(
     state: MessageComposerState,
@@ -103,37 +103,43 @@ private fun AttachmentSourcePickerMenu(
     modifier: Modifier = Modifier,
 ) {
     Column(
-        modifier.padding(bottom = 32.dp)
-//        .navigationBarsPadding() - FIXME after https://issuetracker.google.com/issues/275849044
+        modifier = modifier
+            .navigationBarsPadding()
+            .imePadding()
     ) {
         ListItem(
             modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.FromGallery) },
-            icon = { Icon(CommonDrawables.ic_september_photo_video_library, null) },
-            text = { Text(stringResource(R.string.screen_room_attachment_source_gallery)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_image)),
+            headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_gallery)) },
+            style = ListItemStyle.Primary,
         )
         ListItem(
             modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.FromFiles) },
-            icon = { Icon(CommonDrawables.ic_september_attachment, null) },
-            text = { Text(stringResource(R.string.screen_room_attachment_source_files)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_attachment)),
+            headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_files)) },
+            style = ListItemStyle.Primary,
         )
         ListItem(
             modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.PhotoFromCamera) },
-            icon = { Icon(CommonDrawables.ic_september_take_photo_camera, null) },
-            text = { Text(stringResource(R.string.screen_room_attachment_source_camera_photo)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_take_photo_camera, )),
+            headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_camera_photo)) },
+            style = ListItemStyle.Primary,
         )
         ListItem(
             modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.VideoFromCamera) },
-            icon = { Icon(CommonDrawables.ic_september_video_call, null) },
-            text = { Text(stringResource(R.string.screen_room_attachment_source_camera_video)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_video_call)),
+            headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_camera_video)) },
+            style = ListItemStyle.Primary,
         )
         if (state.canShareLocation) {
             ListItem(
                 modifier = Modifier.clickable {
                     state.eventSink(MessageComposerEvents.PickAttachmentSource.Location)
                     onSendLocationClicked()
                 },
-                icon = { Icon(CommonDrawables.ic_september_location, null) },
-                text = { Text(stringResource(R.string.screen_room_attachment_source_location)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_location_pin) ),
+                headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_location)) },
+                style = ListItemStyle.Primary,
             )
         }
         if (state.canCreatePoll) {
@@ -142,15 +148,17 @@ private fun AttachmentSourcePickerMenu(
                     state.eventSink(MessageComposerEvents.PickAttachmentSource.Poll)
                     onCreatePollClicked()
                 },
-                icon = { Icon(CommonDrawables.ic_compound_polls, null) },
-                text = { Text(stringResource(R.string.screen_room_attachment_source_poll)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_polls)),
+                headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_poll)) },
+                style = ListItemStyle.Primary,
             )
         }
         if (enableTextFormatting) {
             ListItem(
                 modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.ToggleTextFormatting(enabled = true)) },
-                icon = { Icon(CommonDrawables.ic_september_text_formatting, null) },
-                text = { Text(stringResource(R.string.screen_room_attachment_text_formatting)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_text_formatting, null)),
+                headlineContent = { Text(stringResource(R.string.screen_room_attachment_text_formatting)) },
+                style = ListItemStyle.Primary,
             )
         }
     }

diff --git a/...n/io/element/android/features/messages/impl/timeline/components/MessagesReactionButton.kt b/...n/io/element/android/features/messages/impl/timeline/components/MessagesReactionButton.kt
@@ -181,7 +181,7 @@ internal fun MessagesReactionButtonPreview(@PreviewParameter(AggregatedReactionP
 @Composable
 internal fun MessagesAddReactionButtonPreview() = ElementPreview {
     MessagesReactionButton(
-        content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
+        content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_add_reaction),
         onClick = {},
         onLongClick = {}
     )

diff --git a/...tlin/io/element/android/features/messages/impl/timeline/components/ReplySwipeIndicator.kt b/...tlin/io/element/android/features/messages/impl/timeline/components/ReplySwipeIndicator.kt
@@ -49,7 +49,7 @@ fun RowScope.ReplySwipeIndicator(
                 alpha = swipeProgress()
             },
         contentDescription = null,
-        resourceId = CommonDrawables.ic_september_reply,
+        resourceId = CommonDrawables.ic_reply,
     )
 }
 

diff --git a/...element/android/features/messages/impl/timeline/components/TimelineItemReactionsLayout.kt b/...element/android/features/messages/impl/timeline/components/TimelineItemReactionsLayout.kt
@@ -196,7 +196,7 @@ internal fun TimelineItemReactionsLayoutPreview() = ElementPreview {
         },
         addMoreButton = {
             MessagesReactionButton(
-                content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
+                content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_add_reaction),
                 onClick = {},
                 onLongClick = {}
             )

diff --git a/...o/element/android/features/messages/impl/timeline/components/TimelineItemReactionsView.kt b/...o/element/android/features/messages/impl/timeline/components/TimelineItemReactionsView.kt
@@ -95,7 +95,7 @@ private fun TimelineItemReactionsView(
             },
             addMoreButton = {
                 MessagesReactionButton(
-                    content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
+                    content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_add_reaction),
                     onClick = onMoreReactionsClick,
                     onLongClick = {}
                 )

diff --git a/...ent/android/features/messages/impl/timeline/components/event/TimelineItemEncryptedView.kt b/...ent/android/features/messages/impl/timeline/components/event/TimelineItemEncryptedView.kt
@@ -35,7 +35,7 @@ fun TimelineItemEncryptedView(
     TimelineItemInformativeView(
         text = stringResource(id = CommonStrings.common_waiting_for_decryption_key),
         iconDescription = stringResource(id = CommonStrings.dialog_title_warning),
-        iconResourceId = CommonDrawables.ic_september_decryption_error,
+        iconResourceId = CommonDrawables.ic_waiting_to_decrypt,
         extraPadding = extraPadding,
         modifier = modifier
     )

diff --git a/.../element/android/features/messages/impl/timeline/components/event/TimelineItemFileView.kt b/.../element/android/features/messages/impl/timeline/components/event/TimelineItemFileView.kt
@@ -59,7 +59,7 @@ fun TimelineItemFileView(
             contentAlignment = Alignment.Center,
         ) {
             Icon(
-                resourceId = CommonDrawables.ic_september_attachment,
+                resourceId = CommonDrawables.ic_attachment,
                 contentDescription = "OpenFile",
                 tint = ElementTheme.materialColors.primary,
                 modifier = Modifier