Iterate on icons (#1320)

This commit is contained in:
Benoit Marty
2023-09-20 12:22:11 +02:00
committed by Benoit Marty
parent 8fedc40008
commit caa0ce0c0a
15 changed files with 62 additions and 69 deletions

View File

@@ -28,13 +28,13 @@ sealed class TimelineItemAction(
@DrawableRes val icon: Int,
val destructive: Boolean = false
) {
data object Forward : TimelineItemAction(CommonStrings.action_forward, CommonDrawables.ic_forward)
data object Copy : TimelineItemAction(CommonStrings.action_copy, CommonDrawables.ic_content_copy)
data object Redact : TimelineItemAction(CommonStrings.action_remove, CommonDrawables.ic_delete, destructive = true)
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)
data object ViewSource : TimelineItemAction(CommonStrings.action_view_source, CommonDrawables.ic_developer_mode)
data object ReportContent : TimelineItemAction(CommonStrings.action_report_content, CommonDrawables.ic_report_content, destructive = true)
data object Forward : TimelineItemAction(CommonStrings.action_forward, CommonDrawables.ic_september_forward)
data object Copy : TimelineItemAction(CommonStrings.action_copy, CommonDrawables.ic_september_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 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)
}

View File

@@ -22,14 +22,6 @@ 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.material.icons.Icons
import androidx.compose.material.icons.filled.AttachFile
import androidx.compose.material.icons.filled.BarChart
import androidx.compose.material.icons.filled.Collections
import androidx.compose.material.icons.filled.FormatColorText
import androidx.compose.material.icons.filled.LocationOn
import androidx.compose.material.icons.filled.PhotoCamera
import androidx.compose.material.icons.filled.Videocam
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
@@ -49,6 +41,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.theme.components.Icon
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
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@@ -115,22 +108,22 @@ internal fun AttachmentSourcePickerMenu(
) {
ListItem(
modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.FromGallery) },
icon = { Icon(Icons.Default.Collections, null) },
icon = { Icon(CommonDrawables.ic_september_photo_video_library, null) },
text = { Text(stringResource(R.string.screen_room_attachment_source_gallery)) },
)
ListItem(
modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.FromFiles) },
icon = { Icon(Icons.Default.AttachFile, null) },
icon = { Icon(CommonDrawables.ic_september_attachment, null) },
text = { Text(stringResource(R.string.screen_room_attachment_source_files)) },
)
ListItem(
modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.PhotoFromCamera) },
icon = { Icon(Icons.Default.PhotoCamera, null) },
icon = { Icon(CommonDrawables.ic_september_take_photo_camera, null) },
text = { Text(stringResource(R.string.screen_room_attachment_source_camera_photo)) },
)
ListItem(
modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.VideoFromCamera) },
icon = { Icon(Icons.Default.Videocam, null) },
icon = { Icon(CommonDrawables.ic_september_video_call, null) },
text = { Text(stringResource(R.string.screen_room_attachment_source_camera_video)) },
)
if (state.canShareLocation) {
@@ -139,7 +132,7 @@ internal fun AttachmentSourcePickerMenu(
state.eventSink(MessageComposerEvents.PickAttachmentSource.Location)
onSendLocationClicked()
},
icon = { Icon(Icons.Default.LocationOn, null) },
icon = { Icon(CommonDrawables.ic_september_location, null) },
text = { Text(stringResource(R.string.screen_room_attachment_source_location)) },
)
}
@@ -149,14 +142,14 @@ internal fun AttachmentSourcePickerMenu(
state.eventSink(MessageComposerEvents.PickAttachmentSource.Poll)
onCreatePollClicked()
},
icon = { Icon(Icons.Default.BarChart, null) },
icon = { Icon(CommonDrawables.ic_compound_polls, null) },
text = { Text(stringResource(R.string.screen_room_attachment_source_poll)) },
)
}
if (enableTextFormatting) {
ListItem(
modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.ToggleTextFormatting(enabled = true)) },
icon = { Icon(Icons.Default.FormatColorText, null) },
icon = { Icon(CommonDrawables.ic_september_text_formatting, null) },
text = { Text(stringResource(R.string.screen_room_attachment_text_formatting)) },
)
}

View File

@@ -16,6 +16,7 @@
package io.element.android.features.messages.impl.timeline.components
import androidx.annotation.DrawableRes
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
@@ -29,15 +30,12 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.AddReaction
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
@@ -52,6 +50,7 @@ import io.element.android.libraries.designsystem.text.toDp
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Surface
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
@Composable
@@ -96,7 +95,7 @@ fun MessagesReactionButton(
color = buttonColor
) {
when (content) {
is MessagesReactionsButtonContent.Icon -> IconContent(imageVector = content.imageVector)
is MessagesReactionsButtonContent.Icon -> IconContent(resourceId = content.resourceId)
is MessagesReactionsButtonContent.Text -> TextContent(text = content.text)
is MessagesReactionsButtonContent.Reaction -> ReactionContent(reaction = content.reaction)
}
@@ -105,7 +104,7 @@ fun MessagesReactionButton(
sealed class MessagesReactionsButtonContent {
data class Text(val text: String) : MessagesReactionsButtonContent()
data class Icon(val imageVector: ImageVector) : MessagesReactionsButtonContent()
data class Icon(@DrawableRes val resourceId: Int) : MessagesReactionsButtonContent()
data class Reaction(val reaction: AggregatedReaction) : MessagesReactionsButtonContent()
@@ -129,10 +128,10 @@ private fun TextContent(
@Composable
private fun IconContent(
imageVector: ImageVector,
@DrawableRes resourceId: Int,
modifier: Modifier = Modifier
) = Icon(
imageVector = imageVector,
resourceId = resourceId,
contentDescription = stringResource(id = R.string.screen_room_timeline_add_reaction),
tint = ElementTheme.materialColors.secondary,
modifier = modifier
@@ -179,7 +178,7 @@ internal fun MessagesReactionButtonPreview(@PreviewParameter(AggregatedReactionP
@Composable
internal fun MessagesAddReactionButtonPreview() = ElementPreview {
MessagesReactionButton(
content = MessagesReactionsButtonContent.Icon(Icons.Outlined.AddReaction),
content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
onClick = {},
onLongClick = {}
)

View File

@@ -49,7 +49,7 @@ fun RowScope.ReplySwipeIndicator(
alpha = swipeProgress()
},
contentDescription = null,
resourceId = CommonDrawables.ic_reply,
resourceId = CommonDrawables.ic_september_reply,
)
}

View File

@@ -24,8 +24,6 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Error
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
@@ -42,6 +40,7 @@ import io.element.android.libraries.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.matrix.api.timeline.item.event.LocalEventSendState
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@@ -90,7 +89,12 @@ fun TimelineEventTimestampView(
)
if (hasMessageSendingFailed && tint != null) {
Spacer(modifier = Modifier.width(2.dp))
Icon(imageVector = Icons.Default.Error, contentDescription = "Error sending message", tint = tint, modifier = Modifier.size(15.dp, 18.dp))
Icon(
resourceId = CommonDrawables.ic_compound_error,
contentDescription = "Error sending message",
tint = tint,
modifier = Modifier.size(15.dp, 18.dp),
)
}
}
}

View File

@@ -16,8 +16,6 @@
package io.element.android.features.messages.impl.timeline.components
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.AddReaction
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.MeasureResult
@@ -30,6 +28,7 @@ import androidx.compose.ui.unit.dp
import io.element.android.features.messages.impl.R
import io.element.android.libraries.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.utils.CommonDrawables
/**
* A flow layout for reactions that will show a collapse/expand button when the layout wraps over a defined number of rows.
@@ -197,7 +196,7 @@ internal fun TimelineItemReactionsLayoutPreview() = ElementPreview {
},
addMoreButton = {
MessagesReactionButton(
content = MessagesReactionsButtonContent.Icon(Icons.Outlined.AddReaction),
content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
onClick = {},
onLongClick = {}
)

View File

@@ -16,8 +16,6 @@
package io.element.android.features.messages.impl.timeline.components
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.AddReaction
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
@@ -35,6 +33,7 @@ import io.element.android.features.messages.impl.timeline.model.AggregatedReacti
import io.element.android.features.messages.impl.timeline.model.TimelineItemReactions
import io.element.android.libraries.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.utils.CommonDrawables
import kotlinx.collections.immutable.ImmutableList
@Composable
@@ -96,7 +95,7 @@ private fun TimelineItemReactionsView(
},
addMoreButton = {
MessagesReactionButton(
content = MessagesReactionsButtonContent.Icon(Icons.Outlined.AddReaction),
content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
onClick = onMoreReactionsClick,
onLongClick = {}
)

View File

@@ -16,14 +16,13 @@
package io.element.android.features.messages.impl.timeline.components.event
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Warning
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEncryptedContent
import io.element.android.libraries.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.matrix.api.timeline.item.event.UnableToDecryptContent
import io.element.android.libraries.ui.strings.CommonStrings
@@ -36,7 +35,7 @@ fun TimelineItemEncryptedView(
TimelineItemInformativeView(
text = stringResource(id = CommonStrings.common_decryption_error),
iconDescription = stringResource(id = CommonStrings.dialog_title_warning),
icon = Icons.Default.Warning,
iconResourceId = CommonDrawables.ic_september_decryption_error,
extraPadding = extraPadding,
modifier = modifier
)

View File

@@ -16,17 +16,15 @@
package io.element.android.features.messages.impl.timeline.components.event
import androidx.annotation.DrawableRes
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@@ -34,13 +32,14 @@ import io.element.android.libraries.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
@Composable
fun TimelineItemInformativeView(
text: String,
iconDescription: String,
icon: ImageVector,
@DrawableRes iconResourceId: Int,
extraPadding: ExtraPadding,
modifier: Modifier = Modifier
) {
@@ -49,7 +48,7 @@ fun TimelineItemInformativeView(
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = icon,
resourceId = iconResourceId,
tint = MaterialTheme.colorScheme.secondary,
contentDescription = iconDescription,
modifier = Modifier.size(16.dp)
@@ -70,7 +69,7 @@ internal fun TimelineItemInformativeViewPreview() = ElementPreview {
TimelineItemInformativeView(
text = "Info",
iconDescription = "",
icon = Icons.Default.Delete,
iconResourceId = CommonDrawables.ic_compound_delete,
extraPadding = noExtraPadding,
)
}

View File

@@ -16,14 +16,13 @@
package io.element.android.features.messages.impl.timeline.components.event
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import io.element.android.features.messages.impl.timeline.model.event.TimelineItemRedactedContent
import io.element.android.libraries.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.ui.strings.CommonStrings
@Composable
@@ -35,7 +34,7 @@ fun TimelineItemRedactedView(
TimelineItemInformativeView(
text = stringResource(id = CommonStrings.common_message_removed),
iconDescription = stringResource(id = CommonStrings.common_message_removed),
icon = Icons.Default.Delete,
iconResourceId = CommonDrawables.ic_compound_delete,
extraPadding = extraPadding,
modifier = modifier
)

View File

@@ -16,14 +16,13 @@
package io.element.android.features.messages.impl.timeline.components.event
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import io.element.android.features.messages.impl.timeline.model.event.TimelineItemUnknownContent
import io.element.android.libraries.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.ui.strings.CommonStrings
@Composable
@@ -35,7 +34,7 @@ fun TimelineItemUnknownView(
TimelineItemInformativeView(
text = stringResource(id = CommonStrings.common_unsupported_event),
iconDescription = stringResource(id = CommonStrings.dialog_title_warning),
icon = Icons.Default.Info,
iconResourceId = CommonDrawables.ic_compound_info,
extraPadding = extraPadding,
modifier = modifier
)

View File

@@ -21,9 +21,6 @@ import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@@ -33,6 +30,8 @@ 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.designsystem.preview.DayNightPreviews
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
@Composable
@@ -47,7 +46,7 @@ fun TimelineEncryptedHistoryBannerView(modifier: Modifier = Modifier) {
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
Icon(
imageVector = Icons.Default.Info,
resourceId = CommonDrawables.ic_compound_info,
contentDescription = "Info",
tint = ElementTheme.colors.iconInfoPrimary
)

View File

@@ -231,7 +231,7 @@ fun RoomListContent(
) {
Icon(
// Note cannot use Icons.Outlined.EditSquare, it does not exist :/
resourceId = DrawableR.drawable.ic_edit_square,
resourceId = DrawableR.drawable.ic_september_compose_button,
contentDescription = stringResource(id = R.string.screen_roomlist_a11y_create_message)
)
}

View File

@@ -23,7 +23,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.outlined.BugReport
import androidx.compose.material.icons.outlined.Share
import androidx.compose.material3.ExperimentalMaterial3Api
@@ -210,7 +209,7 @@ private fun DefaultRoomListTopBar(
onClick = onSearchClicked,
) {
Icon(
resourceId = CommonR.drawable.ic_search,
resourceId = CommonR.drawable.ic_compound_search,
contentDescription = stringResource(CommonStrings.action_search),
)
}
@@ -218,7 +217,7 @@ private fun DefaultRoomListTopBar(
onClick = { showMenu = !showMenu }
) {
Icon(
imageVector = Icons.Default.MoreVert,
resourceId = CommonR.drawable.ic_compound_overflow_vertical,
contentDescription = null,
)
}

View File

@@ -470,14 +470,14 @@ private fun EditingModeView(
modifier: Modifier = Modifier,
) {
Row(
horizontalArrangement = Arrangement.spacedBy(5.dp),
horizontalArrangement = Arrangement.spacedBy(4.dp),
verticalAlignment = Alignment.CenterVertically,
modifier = modifier
.fillMaxWidth()
.padding(start = 12.dp)
) {
Icon(
resourceId = CommonDrawables.ic_edit,
resourceId = CommonDrawables.ic_september_edit_solid_16,
contentDescription = stringResource(CommonStrings.common_editing),
tint = ElementTheme.materialColors.secondary,
modifier = Modifier
@@ -587,8 +587,13 @@ private fun SendButton(
enabled = canSendMessage,
) {
val iconId = when (composerMode) {
is MessageComposerMode.Edit -> R.drawable.ic_tick
else -> R.drawable.ic_send
is MessageComposerMode.Edit -> CommonDrawables.ic_compound_check
else -> CommonDrawables.ic_september_send
}
val iconSize = when (composerMode) {
is MessageComposerMode.Edit -> 24.dp
// CommonDrawables.ic_september_send is too big... reduce its size.
else -> 18.dp
}
val contentDescription = when (composerMode) {
is MessageComposerMode.Edit -> stringResource(CommonStrings.action_edit)
@@ -602,7 +607,7 @@ private fun SendButton(
) {
Icon(
modifier = Modifier
.height(24.dp.applyScaleUp())
.height(iconSize.applyScaleUp())
.align(Alignment.Center),
resourceId = iconId,
contentDescription = contentDescription,