diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/DisabledComposerView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/DisabledComposerView.kt index 19e1758be8..e72e094a5e 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/DisabledComposerView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/DisabledComposerView.kt @@ -25,7 +25,6 @@ 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.res.stringResource import androidx.compose.ui.unit.dp import io.element.android.compound.theme.ElementTheme import io.element.android.compound.tokens.generated.CompoundIcons @@ -33,31 +32,24 @@ import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.IconButton -import io.element.android.libraries.designsystem.utils.CommonDrawables -import io.element.android.libraries.textcomposer.R +import io.element.android.libraries.designsystem.theme.components.IconColorButton +import io.element.android.libraries.designsystem.theme.components.IconColorButtonStyle @Composable internal fun DisabledComposerView( modifier: Modifier = Modifier, ) { Row( - modifier = modifier.padding(3.dp) + modifier = modifier + .padding(3.dp) .fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, ) { - IconButton( - modifier = Modifier - .size(48.dp), - enabled = false, + IconColorButton( onClick = {}, - ) { - Icon( - modifier = Modifier.size(30.dp), - resourceId = CommonDrawables.ic_plus_composer, - contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment), - tint = ElementTheme.colors.iconDisabled, - ) - } + imageVector = CompoundIcons.Plus(), + iconColorButtonStyle = IconColorButtonStyle.Disabled, + ) val bgColor = ElementTheme.colors.bgCanvasDisabled val borderColor = ElementTheme.colors.borderDisabled diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/icons/IconsList.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/icons/IconsList.kt index 07083dc3e5..f13a75a317 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/icons/IconsList.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/icons/IconsList.kt @@ -12,9 +12,7 @@ import io.element.android.libraries.designsystem.R // This list and all the drawable it contains should be removed at some point. // All the icons should be defined in Compound. internal val iconsOther = listOf( - R.drawable.ic_cancel, R.drawable.ic_notification_small, - R.drawable.ic_plus_composer, R.drawable.ic_stop, R.drawable.pin, ) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconColorButton.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconColorButton.kt new file mode 100644 index 0000000000..ec7be9622c --- /dev/null +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconColorButton.kt @@ -0,0 +1,112 @@ +/* + * Copyright 2025 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial + * Please see LICENSE files in the repository root for full details. + */ + +package io.element.android.libraries.designsystem.theme.components + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +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.vector.ImageVector +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp +import io.element.android.compound.theme.ElementTheme +import io.element.android.compound.tokens.generated.CompoundIcons +import io.element.android.libraries.designsystem.preview.ElementPreview +import io.element.android.libraries.designsystem.preview.PreviewsDayNight +import io.element.android.libraries.ui.strings.CommonStrings + +/** + * Button with colored background. + * Figma: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=1956-37586 + */ +@Composable +fun IconColorButton( + onClick: () -> Unit, + imageVector: ImageVector, + modifier: Modifier = Modifier, + buttonSize: ButtonSize = ButtonSize.Large, + iconColorButtonStyle: IconColorButtonStyle = IconColorButtonStyle.Primary, +) { + val bgColor = when (iconColorButtonStyle) { + IconColorButtonStyle.Primary -> ElementTheme.colors.iconPrimary + IconColorButtonStyle.Secondary -> ElementTheme.colors.iconSecondary + IconColorButtonStyle.Disabled -> ElementTheme.colors.iconDisabled + } + IconButton( + modifier = modifier + .size(48.dp), + onClick = onClick + ) { + Icon( + modifier = modifier + .clip(CircleShape) + .size(buttonSize.toContainerSize()) + .background(bgColor) + .padding(buttonSize.toContainerPadding()), + imageVector = imageVector, + contentDescription = stringResource(CommonStrings.action_close), + tint = ElementTheme.colors.iconOnSolidPrimary + ) + } +} + +enum class IconColorButtonStyle { + Primary, + Secondary, + Disabled, +} + +private fun ButtonSize.toContainerSize() = when (this) { + ButtonSize.Small -> 20.dp + ButtonSize.Medium -> 24.dp + ButtonSize.Large, + ButtonSize.MediumLowPadding, + ButtonSize.LargeLowPadding -> 30.dp +} + +private fun ButtonSize.toContainerPadding() = when (this) { + ButtonSize.Small -> 2.dp + ButtonSize.Medium -> 2.dp + ButtonSize.Large, + ButtonSize.MediumLowPadding, + ButtonSize.LargeLowPadding -> 3.dp +} + +@PreviewsDayNight +@Composable +internal fun IconColorButtonPreview() = ElementPreview { + Column { + listOf( + IconColorButtonStyle.Primary, + IconColorButtonStyle.Secondary, + IconColorButtonStyle.Disabled, + ).forEach { style -> + Row( + modifier = Modifier.padding(4.dp), + horizontalArrangement = Arrangement.spacedBy(4.dp), + verticalAlignment = Alignment.CenterVertically + ) { + listOf(ButtonSize.Large, ButtonSize.Medium, ButtonSize.Small).forEach { size -> + IconColorButton( + onClick = {}, + imageVector = CompoundIcons.Close(), + buttonSize = size, + iconColorButtonStyle = style, + ) + } + } + } + } +} diff --git a/libraries/designsystem/src/main/res/drawable/ic_cancel.xml b/libraries/designsystem/src/main/res/drawable/ic_cancel.xml deleted file mode 100644 index c36efcec94..0000000000 --- a/libraries/designsystem/src/main/res/drawable/ic_cancel.xml +++ /dev/null @@ -1,16 +0,0 @@ - - - - diff --git a/libraries/designsystem/src/main/res/drawable/ic_plus_composer.xml b/libraries/designsystem/src/main/res/drawable/ic_plus_composer.xml deleted file mode 100644 index e22f124645..0000000000 --- a/libraries/designsystem/src/main/res/drawable/ic_plus_composer.xml +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt index a5d672ab5d..eeb6687a92 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt @@ -46,6 +46,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator import io.element.android.libraries.designsystem.theme.components.Icon +import io.element.android.libraries.designsystem.theme.components.IconColorButton import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.matrix.api.core.EventId import io.element.android.libraries.matrix.api.timeline.item.event.EventOrTransactionId @@ -54,8 +55,6 @@ import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetailsProvider import io.element.android.libraries.testtags.TestTags import io.element.android.libraries.testtags.testTag -import io.element.android.libraries.textcomposer.components.ComposerOptionsButton -import io.element.android.libraries.textcomposer.components.DismissTextFormattingButton import io.element.android.libraries.textcomposer.components.SendButton import io.element.android.libraries.textcomposer.components.TextFormatting import io.element.android.libraries.textcomposer.components.VoiceMessageDeleteButton @@ -141,10 +140,9 @@ fun TextComposer( Spacer(modifier = Modifier.width(16.dp)) } else -> { - ComposerOptionsButton( - modifier = Modifier - .size(48.dp), - onClick = onAddAttachment + IconColorButton( + onClick = onAddAttachment, + imageVector = CompoundIcons.Plus(), ) } } @@ -285,7 +283,10 @@ fun TextComposer( modifier = layoutModifier, textInput = textInput, dismissTextFormattingButton = { - DismissTextFormattingButton(onClick = onDismissTextFormatting) + IconColorButton( + onClick = onDismissTextFormatting, + imageVector = CompoundIcons.Close(), + ) }, textFormatting = textFormattingOptions, sendButton = sendButton, diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/ComposerOptionsButton.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/ComposerOptionsButton.kt deleted file mode 100644 index c4b1350774..0000000000 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/ComposerOptionsButton.kt +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright 2023, 2024 New Vector Ltd. - * - * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial - * Please see LICENSE files in the repository root for full details. - */ - -package io.element.android.libraries.textcomposer.components - -import androidx.compose.foundation.layout.size -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.unit.dp -import io.element.android.compound.theme.ElementTheme -import io.element.android.libraries.designsystem.preview.ElementPreview -import io.element.android.libraries.designsystem.preview.PreviewsDayNight -import io.element.android.libraries.designsystem.theme.components.Icon -import io.element.android.libraries.designsystem.theme.components.IconButton -import io.element.android.libraries.designsystem.utils.CommonDrawables -import io.element.android.libraries.textcomposer.R - -@Composable -internal fun ComposerOptionsButton( - onClick: () -> Unit, - modifier: Modifier = Modifier, -) { - IconButton( - modifier = modifier - .size(48.dp), - onClick = onClick - ) { - Icon( - modifier = Modifier.size(30.dp), - resourceId = CommonDrawables.ic_plus_composer, - contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment), - tint = ElementTheme.colors.iconPrimary, - ) - } -} - -@PreviewsDayNight -@Composable -internal fun ComposerOptionsButtonPreview() = ElementPreview { - ComposerOptionsButton(onClick = {}) -} diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/DismissTextFormattingButton.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/DismissTextFormattingButton.kt deleted file mode 100644 index 229cfc8275..0000000000 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/DismissTextFormattingButton.kt +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright 2023, 2024 New Vector Ltd. - * - * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial - * Please see LICENSE files in the repository root for full details. - */ - -package io.element.android.libraries.textcomposer.components - -import androidx.compose.foundation.layout.size -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.unit.dp -import io.element.android.compound.theme.ElementTheme -import io.element.android.libraries.designsystem.preview.ElementPreview -import io.element.android.libraries.designsystem.preview.PreviewsDayNight -import io.element.android.libraries.designsystem.theme.components.Icon -import io.element.android.libraries.designsystem.theme.components.IconButton -import io.element.android.libraries.designsystem.utils.CommonDrawables -import io.element.android.libraries.ui.strings.CommonStrings - -@Composable -internal fun DismissTextFormattingButton( - onClick: () -> Unit, - modifier: Modifier = Modifier -) { - IconButton( - modifier = modifier - .size(48.dp), - onClick = onClick - ) { - Icon( - modifier = Modifier.size(30.dp), - resourceId = CommonDrawables.ic_cancel, - contentDescription = stringResource(CommonStrings.action_close), - tint = ElementTheme.colors.iconPrimary, - ) - } -} - -@PreviewsDayNight -@Composable -internal fun DismissTextFormattingButtonPreview() = ElementPreview { - DismissTextFormattingButton(onClick = {}) -}