Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate other icons to compound icons.

Browse source
This commit is contained in:
Benoit Marty 2023-09-20 15:47:17 +02:00 • committed by Benoit Marty
parent 32f95e70cb
commit d531e71cd8
60 changed files with 339 additions and 305 deletions
Download patch file Download diff file Expand all files Collapse all files

11
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/InfoListItemMolecule.kt
View file

@ -24,8 +24,6 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
@ -35,6 +33,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
@Composable
fun InfoListItemMolecule(
@ -79,25 +78,25 @@ internal fun InfoListItemMoleculePreview() {
) {
InfoListItemMolecule(
message = { Text("A single item") },
icon = { Icon(imageVector = Icons.Default.Info, contentDescription = null) },
icon = { Icon(resourceId = CommonDrawables.ic_compound_info, contentDescription = null) },
position = InfoListItemPosition.Single,
backgroundColor = color,
)
InfoListItemMolecule(
message = { Text("A top item") },
icon = { Icon(imageVector = Icons.Default.Info, contentDescription = null) },
icon = { Icon(resourceId = CommonDrawables.ic_compound_info, contentDescription = null) },
position = InfoListItemPosition.Top,
backgroundColor = color,
)
InfoListItemMolecule(
message = { Text("A middle item") },
icon = { Icon(imageVector = Icons.Default.Info, contentDescription = null) },
icon = { Icon(resourceId = CommonDrawables.ic_compound_info, contentDescription = null) },
position = InfoListItemPosition.Middle,
backgroundColor = color,
)
InfoListItemMolecule(
message = { Text("A bottom item") },
icon = { Icon(imageVector = Icons.Default.Info, contentDescription = null) },
icon = { Icon(resourceId = CommonDrawables.ic_compound_info, contentDescription = null) },
position = InfoListItemPosition.Bottom,
backgroundColor = color,
)

19
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/Bloom.kt
View file

@ -33,8 +33,6 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Share
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.IconButton
import androidx.compose.material3.TopAppBarDefaults
@ -114,6 +112,7 @@ import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.MediumTopAppBar
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
@ -375,7 +374,7 @@ fun Modifier.avatarBloom(
width = avatarData.size.dp,
height = avatarData.size.dp,
text = avatarData.initial,
textColor = avatarColors.foreground,
textColor = avatarColors.foreground,
backgroundColor = avatarColors.background,
)
val hash = remember(avatarData, avatarColors) {
@ -430,7 +429,7 @@ private fun initialsBitmap(
val bitmap = Bitmap.createBitmap(width.roundToPx(), height.roundToPx(), Bitmap.Config.ARGB_8888).asImageBitmap()
androidx.compose.ui.graphics.Canvas(bitmap).also { canvas ->
canvas.drawCircle(centerPx.toOffset(), width.toPx() / 2, backgroundPaint)
canvas.nativeCanvas.drawText(text, centerPx.x.toFloat() - result.size.width/2, centerPx.y * 2f - result.size.height/2 - 4, textPaint)
canvas.nativeCanvas.drawText(text, centerPx.x.toFloat() - result.size.width / 2, centerPx.y * 2f - result.size.height / 2 - 4, textPaint)
}
bitmap
}
@ -467,7 +466,9 @@ internal fun BloomPreview() {
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(topAppBarState)
ElementPreview {
Scaffold(
modifier = Modifier.fillMaxSize().nestedScroll(scrollBehavior.nestedScrollConnection),
modifier = Modifier
.fillMaxSize()
.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
Box {
MediumTopAppBar(
@ -499,7 +500,10 @@ internal fun BloomPreview() {
},
actions = {
IconButton(onClick = {}) {
Icon(imageVector = Icons.Default.Share, contentDescription = null)
Icon(
resourceId = CommonDrawables.ic_compound_share_android,
contentDescription = null,
)
}
},
title = {
@ -539,7 +543,8 @@ internal fun BloomInitialsPreview(@PreviewParameter(InitialsColorStateProvider::
val bitmap = initialsBitmap(text = "F", backgroundColor = avatarColors.background, textColor = avatarColors.foreground)
val hash = BlurHash.encode(bitmap.asAndroidBitmap(), BloomDefaults.HASH_COMPONENTS, BloomDefaults.HASH_COMPONENTS)
Box(
modifier = Modifier.size(256.dp)
modifier = Modifier
.size(256.dp)
.bloom(
hash = hash,
background = if (ElementTheme.isLightTheme) {

10
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/BackButton.kt
View file

@ -16,25 +16,25 @@
package io.element.android.libraries.designsystem.components.button
import androidx.annotation.DrawableRes
import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
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
fun BackButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
imageVector: ImageVector = Icons.Default.ArrowBack,
// TODO Handle RTL languages
@DrawableRes resourceId: Int = CommonDrawables.ic_compound_arrow_left,
contentDescription: String = stringResource(CommonStrings.action_back),
enabled: Boolean = true,
) {
@ -43,7 +43,7 @@ fun BackButton(
onClick = onClick,
enabled = enabled,
) {
Icon(imageVector = imageVector, contentDescription = contentDescription)
Icon(resourceId = resourceId, contentDescription = contentDescription)
}
}

22
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/MainActionButton.kt
View file

@ -16,6 +16,7 @@
package io.element.android.libraries.designsystem.components.button
import androidx.annotation.DrawableRes
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
@ -24,8 +25,6 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Share
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
@ -33,19 +32,19 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
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 MainActionButton(
title: String,
icon: ImageVector,
@DrawableRes iconResourceId: Int,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
@ -64,7 +63,7 @@ fun MainActionButton(
) {
val tintColor = if (enabled) LocalContentColor.current else MaterialTheme.colorScheme.secondary
Icon(
icon,
resourceId = iconResourceId,
contentDescription = contentDescription,
tint = tintColor,
)
@ -88,8 +87,17 @@ internal fun MainActionButtonPreview() {
@Composable
private fun ContentsToPreview() {
Row(Modifier.padding(10.dp)) {
MainActionButton(title = "Share", icon = Icons.Outlined.Share, onClick = { })
MainActionButton(
title = "Share",
iconResourceId = CommonDrawables.ic_compound_share_android,
onClick = { },
)
Spacer(modifier = Modifier.width(20.dp))
MainActionButton(title = "Share", icon = Icons.Outlined.Share, onClick = { }, enabled = false)
MainActionButton(
title = "Share",
iconResourceId = CommonDrawables.ic_compound_share_android,
onClick = { },
enabled = false,
)
}
}

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceCategory.kt
View file

@ -20,9 +20,6 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Announcement
import androidx.compose.material.icons.filled.BugReport
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
@ -30,6 +27,7 @@ import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
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
@ -79,11 +77,11 @@ private fun ContentToPreview() {
) {
PreferenceText(
title = "Title",
icon = Icons.Default.BugReport,
iconResourceId = CommonDrawables.ic_compound_chat_problem,
)
PreferenceSwitch(
title = "Switch",
icon = Icons.Default.Announcement,
iconResourceId = CommonDrawables.ic_compound_threads,
isChecked = true
)
PreferenceSlide(

10
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceCheckbox.kt
View file

@ -16,6 +16,7 @@
package io.element.android.libraries.designsystem.components.preferences
import androidx.annotation.DrawableRes
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
@ -23,8 +24,6 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Announcement
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -38,6 +37,7 @@ import io.element.android.libraries.designsystem.theme.components.Checkbox
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.toEnabledColor
import io.element.android.libraries.designsystem.toSecondaryEnabledColor
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
@Composable
@ -48,6 +48,7 @@ fun PreferenceCheckbox(
supportingText: String? = null,
enabled: Boolean = true,
icon: ImageVector? = null,
@DrawableRes iconResourceId: Int? = null,
showIconAreaIfNoIcon: Boolean = false,
onCheckedChange: (Boolean) -> Unit = {},
) {
@ -61,6 +62,7 @@ fun PreferenceCheckbox(
) {
PreferenceIcon(
icon = icon,
iconResourceId = iconResourceId,
enabled = enabled,
isVisible = showIconAreaIfNoIcon
)
@ -100,14 +102,14 @@ private fun ContentToPreview() {
Column {
PreferenceCheckbox(
title = "Checkbox",
icon = Icons.Default.Announcement,
iconResourceId = CommonDrawables.ic_compound_threads,
enabled = true,
isChecked = true
)
PreferenceCheckbox(
title = "Checkbox with supporting text",
supportingText = "Supporting text",
icon = Icons.Default.Announcement,
iconResourceId = CommonDrawables.ic_compound_threads,
enabled = true,
isChecked = true
)

10
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceScreen.kt
View file

@ -28,9 +28,6 @@ import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Announcement
import androidx.compose.material.icons.filled.BugReport
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@ -42,6 +39,7 @@ import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.Scaffold
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
@OptIn(ExperimentalLayoutApi::class)
@ -115,18 +113,18 @@ internal fun PreferenceViewPreview() = ElementPreview {
PreferenceText(
title = "Title",
subtitle = "Some other text",
icon = Icons.Default.BugReport,
iconResourceId = CommonDrawables.ic_compound_chat_problem,
)
PreferenceDivider()
PreferenceSwitch(
title = "Switch",
icon = Icons.Default.Announcement,
iconResourceId = CommonDrawables.ic_compound_threads,
isChecked = true,
)
PreferenceDivider()
PreferenceCheckbox(
title = "Checkbox",
icon = Icons.Default.Announcement,
iconResourceId = CommonDrawables.ic_compound_notifications,
isChecked = true,
)
PreferenceDivider()

13
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSlide.kt
View file

@ -16,14 +16,13 @@
package io.element.android.libraries.designsystem.components.preferences
import androidx.annotation.DrawableRes
import androidx.annotation.FloatRange
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
@ -35,6 +34,7 @@ import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.theme.components.Slider
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.toEnabledColor
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
@Composable
@ -44,6 +44,7 @@ fun PreferenceSlide(
value: Float,
modifier: Modifier = Modifier,
icon: ImageVector? = null,
@DrawableRes iconResourceId: Int? = null,
showIconAreaIfNoIcon: Boolean = false,
enabled: Boolean = true,
summary: String? = null,
@ -56,7 +57,11 @@ fun PreferenceSlide(
.defaultMinSize(minHeight = preferenceMinHeight)
.padding(vertical = 4.dp, horizontal = preferencePaddingHorizontal),
) {
PreferenceIcon(icon = icon, isVisible = showIconAreaIfNoIcon)
PreferenceIcon(
icon = icon,
iconResourceId = iconResourceId,
isVisible = showIconAreaIfNoIcon,
)
Column(
modifier = Modifier
.weight(1f),
@ -90,7 +95,7 @@ internal fun PreferenceSlidePreview() = ElementThemedPreview { ContentToPreview(
@Composable
private fun ContentToPreview() {
PreferenceSlide(
icon = Icons.Default.Person,
iconResourceId = CommonDrawables.ic_compound_user_profile,
title = "Slide",
summary = "Summary",
value = 0.75F

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSwitch.kt
View file

@ -16,6 +16,7 @@
package io.element.android.libraries.designsystem.components.preferences
import androidx.annotation.DrawableRes
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
@ -25,8 +26,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Announcement
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -40,6 +39,7 @@ import io.element.android.libraries.designsystem.theme.components.Switch
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.toEnabledColor
import io.element.android.libraries.designsystem.toSecondaryEnabledColor
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
@Composable
@ -50,6 +50,7 @@ fun PreferenceSwitch(
subtitle: String? = null,
enabled: Boolean = true,
icon: ImageVector? = null,
@DrawableRes iconResourceId: Int? = null,
showIconAreaIfNoIcon: Boolean = false,
onCheckedChange: (Boolean) -> Unit = {},
switchAlignment: Alignment.Vertical = Alignment.CenterVertically
@ -64,6 +65,7 @@ fun PreferenceSwitch(
) {
PreferenceIcon(
icon = icon,
iconResourceId = iconResourceId,
enabled = enabled,
isVisible = showIconAreaIfNoIcon
)
@ -107,7 +109,7 @@ private fun ContentToPreview() {
PreferenceSwitch(
title = "Switch",
subtitle = "Subtitle Switch",
icon = Icons.Default.Announcement,
iconResourceId = CommonDrawables.ic_compound_threads,
enabled = true,
isChecked = true
)

20
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt
View file

@ -16,6 +16,7 @@
package io.element.android.libraries.designsystem.components.preferences
import androidx.annotation.DrawableRes
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
@ -25,8 +26,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.progressSemantics
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.BugReport
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -41,6 +40,7 @@ import io.element.android.libraries.designsystem.theme.components.CircularProgre
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.toEnabledColor
import io.element.android.libraries.designsystem.toSecondaryEnabledColor
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
/**
@ -55,6 +55,7 @@ fun PreferenceText(
currentValue: String? = null,
loadingCurrentValue: Boolean = false,
icon: ImageVector? = null,
@DrawableRes iconResourceId: Int? = null,
showIconAreaIfNoIcon: Boolean = false,
tintColor: Color? = null,
onClick: () -> Unit = {},
@ -71,6 +72,7 @@ fun PreferenceText(
) {
PreferenceIcon(
icon = icon,
iconResourceId = iconResourceId,
enabled = enabled,
isVisible = showIconAreaIfNoIcon,
tintColor = tintColor ?: enabled.toSecondaryEnabledColor(),
@ -126,40 +128,40 @@ private fun ContentToPreview() {
) {
PreferenceText(
title = "Title",
icon = Icons.Default.BugReport,
iconResourceId = CommonDrawables.ic_compound_chat_problem,
)
PreferenceText(
title = "Title",
subtitle = "Some content",
icon = Icons.Default.BugReport,
iconResourceId = CommonDrawables.ic_compound_chat_problem,
)
PreferenceText(
title = "Title",
subtitle = "Some content",
icon = Icons.Default.BugReport,
iconResourceId = CommonDrawables.ic_compound_chat_problem,
currentValue = "123",
)
PreferenceText(
title = "Title",
subtitle = "Some content",
icon = Icons.Default.BugReport,
iconResourceId = CommonDrawables.ic_compound_chat_problem,
currentValue = "123",
enabled = false,
)
PreferenceText(
title = "Title",
subtitle = "Some content",
icon = Icons.Default.BugReport,
iconResourceId = CommonDrawables.ic_compound_chat_problem,
loadingCurrentValue = true,
)
PreferenceText(
title = "Title",
icon = Icons.Default.BugReport,
iconResourceId = CommonDrawables.ic_compound_chat_problem,
currentValue = "123",
)
PreferenceText(
title = "Title",
icon = Icons.Default.BugReport,
iconResourceId = CommonDrawables.ic_compound_chat_problem,
loadingCurrentValue = true,
)
PreferenceText(

9
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/components/PreferenceIcon.kt
View file

@ -16,6 +16,7 @@
package io.element.android.libraries.designsystem.components.preferences.components
import androidx.annotation.DrawableRes
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
@ -34,15 +35,17 @@ import io.element.android.libraries.designsystem.toSecondaryEnabledColor
@Composable
fun PreferenceIcon(
icon: ImageVector?,
modifier: Modifier = Modifier,
icon: ImageVector? = null,
@DrawableRes iconResourceId: Int? = null,
tintColor: Color? = null,
enabled: Boolean = true,
isVisible: Boolean = true,
) {
if (icon != null) {
if (icon != null || iconResourceId != null) {
Icon(
imageVector = icon,
resourceId = iconResourceId,
contentDescription = "",
tint = tintColor ?: enabled.toSecondaryEnabledColor(),
modifier = modifier
@ -61,5 +64,5 @@ internal fun PreferenceIconPreview(@PreviewParameter(ImageVectorProvider::class)
@Composable
private fun ContentToPreview(content: ImageVector?) {
PreferenceIcon(content)
PreferenceIcon(icon = content)
}

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/AlertDialogContent.kt
View file

@ -24,8 +24,6 @@ import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ProvideTextStyle
@ -44,6 +42,7 @@ import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
import kotlin.math.max
@ -417,7 +416,10 @@ internal fun DialogWithTitleIconAndOkButtonPreview() {
DialogPreview {
SimpleAlertDialogContent(
icon = {
Icon(imageVector = Icons.Default.Notifications, contentDescription = null)
Icon(
resourceId = CommonDrawables.ic_compound_notifications_solid,
contentDescription = null
)
},
title = "Dialog Title",
content = "A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made. Learn more",

5
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt
View file

@ -31,8 +31,6 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.progressSemantics
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Share
import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.LocalContentColor
@ -53,6 +51,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
// Designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&mode=design&t=U03tOFZz5FSLVUMa-1
@ -346,7 +345,7 @@ private fun ButtonCombinationPreview(
// With icon
ButtonRowPreview(
modifier = Modifier.then(modifier),
leadingIcon = IconSource.Vector(Icons.Outlined.Share),
leadingIcon = IconSource.Resource(CommonDrawables.ic_compound_share_android),
style = style,
size = size,
)

18
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/DropdownMenuItem.kt
View file

@ -19,9 +19,6 @@ package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowRight
import androidx.compose.material.icons.filled.BugReport
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MenuDefaults
@ -33,6 +30,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
// Figma designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&node-id=1032%3A44063&mode=design&t=rsNegTbEVLYAXL76-1
@ -88,32 +86,32 @@ private fun ContentToPreview() {
DropdownMenuItem(
text = { Text(text = "Item") },
onClick = {},
trailingIcon = { Icon(Icons.Default.ArrowRight, contentDescription = null) },
trailingIcon = { Icon(resourceId = CommonDrawables.ic_compound_chevron_right, contentDescription = null) },
)
HorizontalDivider()
DropdownMenuItem(
text = { Text(text = "Item") },
onClick = {},
leadingIcon = { Icon(Icons.Default.BugReport, contentDescription = null) },
leadingIcon = { Icon(resourceId = CommonDrawables.ic_compound_chat_problem, contentDescription = null) },
)
DropdownMenuItem(
text = { Text(text = "Item") },
onClick = {},
leadingIcon = { Icon(Icons.Default.BugReport, contentDescription = null) },
trailingIcon = { Icon(Icons.Default.ArrowRight, contentDescription = null) },
leadingIcon = { Icon(resourceId = CommonDrawables.ic_compound_chat_problem, contentDescription = null) },
trailingIcon = { Icon(resourceId = CommonDrawables.ic_compound_chevron_right, contentDescription = null) },
)
DropdownMenuItem(
text = { Text(text = "Item") },
onClick = {},
enabled = false,
leadingIcon = { Icon(Icons.Default.BugReport, contentDescription = null) },
trailingIcon = { Icon(Icons.Default.ArrowRight, contentDescription = null) },
leadingIcon = { Icon(resourceId = CommonDrawables.ic_compound_chat_problem, contentDescription = null) },
trailingIcon = { Icon(resourceId = CommonDrawables.ic_compound_chevron_right, contentDescription = null) },
)
HorizontalDivider()
DropdownMenuItem(
text = { Text(text = "Multiline\nItem") },
onClick = {},
trailingIcon = { Icon(Icons.Default.ArrowRight, contentDescription = null) },
trailingIcon = { Icon(resourceId = CommonDrawables.ic_compound_chevron_right, contentDescription = null) },
)
}
}

5
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/FloatingActionButton.kt
View file

@ -20,8 +20,6 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.FloatingActionButtonElevation
import androidx.compose.material3.contentColorFor
@ -34,6 +32,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
@Composable
fun FloatingActionButton(
@ -67,7 +66,7 @@ internal fun FloatingActionButtonPreview() =
private fun ContentToPreview() {
Box(modifier = Modifier.padding(8.dp)) {
FloatingActionButton(onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
Icon(resourceId = CommonDrawables.ic_compound_close, contentDescription = "")
}
}
}

5
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Icon.kt
View file

@ -17,8 +17,6 @@
package io.element.android.libraries.designsystem.theme.components
import androidx.annotation.DrawableRes
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.LocalContentColor
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@ -30,6 +28,7 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
/**
* Icon is a wrapper around [androidx.compose.material3.Icon] which allows to use
@ -146,5 +145,5 @@ internal fun IconImageVectorPreview() =
@Composable
private fun ContentToPreview() {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
Icon(resourceId = CommonDrawables.ic_compound_close, contentDescription = "")
}

11
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconButton.kt
View file

@ -19,8 +19,6 @@ package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.LocalContentColor
import androidx.compose.runtime.Composable
@ -30,6 +28,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
// Figma designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&node-id=1182%3A48861&mode=design&t=Shlcvznm1oUyqGC2-1
@ -67,20 +66,20 @@ private fun ContentToPreview() {
CompositionLocalProvider(LocalContentColor provides ElementTheme.colors.iconPrimary) {
Row {
IconButton(onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
Icon(resourceId = CommonDrawables.ic_compound_close, contentDescription = "")
}
IconButton(enabled = false, onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
Icon(resourceId = CommonDrawables.ic_compound_close, contentDescription = "")
}
}
}
CompositionLocalProvider(LocalContentColor provides ElementTheme.colors.iconSecondary) {
Row {
IconButton(onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
Icon(resourceId = CommonDrawables.ic_compound_close, contentDescription = "")
}
IconButton(enabled = false, onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
Icon(resourceId = CommonDrawables.ic_compound_close, contentDescription = "")
}
}
}

48
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListItem.kt
View file

@ -17,8 +17,6 @@
package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.clickable
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Share
import androidx.compose.material3.ListItemColors
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.LocalContentColor
@ -37,6 +35,7 @@ import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.components.list.ListItemContent
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
// Designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&node-id=425%3A24208&mode=design&t=G5hCfkLB6GgXDuWe-1
@ -119,7 +118,9 @@ fun ListItem(
androidx.compose.material3.ListItem(
headlineContent = decoratedHeadlineContent,
modifier = if (onClick != null) Modifier.clickable(enabled = enabled, onClick = onClick).then(modifier) else modifier,
modifier = if (onClick != null) Modifier
.clickable(enabled = enabled, onClick = onClick)
.then(modifier) else modifier,
overlineContent = null,
supportingContent = decoratedSupportingContent,
leadingContent = decoratedLeadingContent,
@ -135,27 +136,31 @@ fun ListItem(
*/
sealed interface ListItemStyle {
data object Default : ListItemStyle
data object Primary: ListItemStyle
data object Primary : ListItemStyle
data object Destructive : ListItemStyle
@Composable fun headlineColor() = when (this) {
@Composable
fun headlineColor() = when (this) {
Default, Primary -> ListItemDefaultColors.headline
Destructive -> ElementTheme.colors.textCriticalPrimary
}
@Composable fun supportingTextColor() = when (this) {
@Composable
fun supportingTextColor() = when (this) {
Default, Primary -> ListItemDefaultColors.supportingText
// FIXME once we have a defined color for this value
Destructive -> ElementTheme.colors.textCriticalPrimary.copy(alpha = 0.8f)
}
@Composable fun leadingIconColor() = when (this) {
@Composable
fun leadingIconColor() = when (this) {
Default -> ListItemDefaultColors.icon
Primary -> ElementTheme.colors.iconPrimary
Destructive -> ElementTheme.colors.iconCriticalPrimary
}
@Composable fun trailingIconColor() = when (this) {
@Composable
fun trailingIconColor() = when (this) {
Default -> ListItemDefaultColors.icon
Primary -> ElementTheme.colors.iconPrimary
Destructive -> ElementTheme.colors.iconCriticalPrimary
@ -169,15 +174,16 @@ object ListItemDefaultColors {
val icon: Color @Composable get() = ElementTheme.colors.iconTertiary
val iconDisabled: Color @Composable get() = ElementTheme.colors.iconDisabled
val colors: ListItemColors @Composable get() = ListItemDefaults.colors(
headlineColor = headline,
supportingColor = supportingText,
leadingIconColor = icon,
trailingIconColor = icon,
disabledHeadlineColor = headlineDisabled,
disabledLeadingIconColor = iconDisabled,
disabledTrailingIconColor = iconDisabled,
)
val colors: ListItemColors
@Composable get() = ListItemDefaults.colors(
headlineColor = headline,
supportingColor = supportingText,
leadingIconColor = icon,
trailingIconColor = icon,
disabledHeadlineColor = headlineDisabled,
disabledLeadingIconColor = iconDisabled,
disabledTrailingIconColor = iconDisabled,
)
}
// region: Simple list item
@ -191,7 +197,7 @@ internal fun ListItemTwoLinesSimplePreview() = PreviewItems.TwoLinesListItemPrev
@Preview(name = "List item (1 line) - Simple", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemSingleLineSimplePreview() = PreviewItems.OneLineListItemPreview()
internal fun ListItemSingleLineSimplePreview() = PreviewItems.OneLineListItemPreview()
// endregion
// region: Trailing Checkbox
@ -453,10 +459,12 @@ private object PreviewItems {
}
@Composable
fun switch() : ListItemContent {
fun switch(): ListItemContent {
var checked by remember { mutableStateOf(false) }
return ListItemContent.Switch(checked = checked, onChange = { checked = !checked })
}
fun icon() = ListItemContent.Icon(iconSource = IconSource.Vector(Icons.Outlined.Share))
fun icon() = ListItemContent.Icon(
iconSource = IconSource.Resource(CommonDrawables.ic_compound_share_android)
)
}

12
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSection.kt
View file

@ -21,8 +21,6 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Share
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.LocalTextStyle
import androidx.compose.runtime.Composable
@ -37,6 +35,7 @@ import io.element.android.libraries.designsystem.components.ClickableLinkText
import io.element.android.libraries.designsystem.components.list.ListItemContent
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
// Designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&node-id=425%3A24208&mode=design&t=G5hCfkLB6GgXDuWe-1
@ -128,12 +127,16 @@ object ListSupportingTextDefaults {
sealed interface Padding {
/** No padding. */
data object None : Padding
/** Default padding, it will align fine with a [ListItem] with no leading content. */
data object Default : Padding
/** It will align to a [ListItem] with an [Icon] or [Checkbox] as leading content. */
data object SmallLeadingContent : Padding
/** It will align to with a [ListItem] with a [Switch] as leading content. */
data object LargeLeadingContent : Padding
/** It will align to with a [ListItem] with a custom start [padding]. */
data class Custom(val padding: Dp) : Padding
@ -256,7 +259,10 @@ internal fun ListSupportingTextDefaultPaddingPreview() {
internal fun ListSupportingTextSmallPaddingPreview() {
ElementThemedPreview {
Column {
ListItem(headlineContent = { Text("A title") }, leadingContent = ListItemContent.Icon(IconSource.Vector(Icons.Outlined.Share)))
ListItem(
headlineContent = { Text("A title") },
leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_share_android))
)
ListSupportingText(
text = "Supporting line text lorem ipsum dolor sit amet, consectetur. Read more",
contentPadding = ListSupportingTextDefaults.Padding.SmallLeadingContent,

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/MediumTopAppBar.kt
View file

@ -18,8 +18,6 @@ package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Share
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.TopAppBarColors
@ -32,6 +30,7 @@ import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
@OptIn(ExperimentalMaterial3Api::class)
@ -74,7 +73,10 @@ private fun ContentToPreview() {
actions = {
TextButton(text = "Action", onClick = {})
IconButton(onClick = {}) {
Icon(imageVector = Icons.Default.Share, contentDescription = null)
Icon(
resourceId = CommonDrawables.ic_compound_share_android,
contentDescription = null,
)
}
}
)

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/SearchBar.kt
View file

@ -24,9 +24,6 @@ import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SearchBarColors
@ -46,6 +43,7 @@ import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@ -99,7 +97,7 @@ fun <T> SearchBar(
{
IconButton(onClick = { onQueryChange("") }) {
Icon(
imageVector = Icons.Default.Close,
resourceId = CommonDrawables.ic_compound_close,
contentDescription = stringResource(CommonStrings.action_clear),
)
}
@ -109,7 +107,7 @@ fun <T> SearchBar(
!active -> {
{
Icon(
imageVector = Icons.Default.Search,
resourceId = CommonDrawables.ic_compound_search,
contentDescription = stringResource(CommonStrings.action_search),
tint = MaterialTheme.colorScheme.tertiary,
)

13
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Snackbar.kt
View file

@ -17,8 +17,6 @@
package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.SnackbarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@ -29,6 +27,7 @@ import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.components.button.ButtonVisuals
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.theme.SnackBarLabelColorDark
import io.element.android.libraries.theme.SnackBarLabelColorLight
@ -119,8 +118,10 @@ internal fun SnackbarWithActionAndCloseButtonPreview() {
ElementThemedPreview {
Snackbar(
message = "Snackbar supporting text",
action = ButtonVisuals.Text("Action", {}),
dismissAction = ButtonVisuals.Icon(IconSource.Vector(Icons.Default.Close), {})
action = ButtonVisuals.Text("Action") {},
dismissAction = ButtonVisuals.Icon(
IconSource.Resource(CommonDrawables.ic_compound_close)
) {}
)
}
}
@ -140,7 +141,9 @@ internal fun SnackbarWithActionOnNewLineAndCloseButtonPreview() {
Snackbar(
message = "Snackbar supporting text",
action = ButtonVisuals.Text("Action", {}),
dismissAction = ButtonVisuals.Icon(IconSource.Vector(Icons.Default.Close), {}),
dismissAction = ButtonVisuals.Icon(
IconSource.Resource(CommonDrawables.ic_compound_close)
) {},
actionOnNewLine = true
)
}

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TopAppBar.kt
View file

@ -18,8 +18,6 @@ package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Share
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.TopAppBarColors
@ -32,6 +30,7 @@ import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.theme.ElementTheme
@OptIn(ExperimentalMaterial3Api::class)
@ -74,7 +73,10 @@ private fun ContentToPreview() {
actions = {
TextButton(text = "Action", onClick = {})
IconButton(onClick = {}) {
Icon(imageVector = Icons.Default.Share, contentDescription = null)
Icon(
resourceId = CommonDrawables.ic_compound_share_android,
contentDescription = null,
)
}
}
)

7
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/previews/MenuPreview.kt
View file

@ -17,7 +17,6 @@
package io.element.android.libraries.designsystem.theme.components.previews
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowRight
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@ -32,6 +31,7 @@ import io.element.android.libraries.designsystem.theme.components.DropdownMenu
import io.element.android.libraries.designsystem.theme.components.DropdownMenuItem
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
@Preview(group = PreviewGroup.Menus)
@Composable
@ -51,7 +51,10 @@ internal fun MenuPreview() {
val trailingIcon: @Composable (() -> Unit)? = if (i in 3..4) {
@Composable {
Icon(Icons.Filled.ArrowRight, contentDescription = "Favorite")
Icon(
resourceId = CommonDrawables.ic_compound_chevron_right,
contentDescription = "Favorite",
)
}
} else {
null

7
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/Snackbar.kt
View file

@ -18,8 +18,6 @@ package io.element.android.libraries.designsystem.utils
import androidx.annotation.StringRes
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarHostState
import androidx.compose.runtime.Composable
@ -88,7 +86,10 @@ fun SnackbarHost(hostState: SnackbarHostState, modifier: Modifier = Modifier) {
message = data.visuals.message,
action = data.visuals.actionLabel?.let { ButtonVisuals.Text(it, data::performAction) },
dismissAction = if (data.visuals.withDismissAction) {
ButtonVisuals.Icon(IconSource.Vector(Icons.Default.Close), data::dismiss)
ButtonVisuals.Icon(
IconSource.Resource(CommonDrawables.ic_compound_close),
data::dismiss
)
} else null,
)
}

8
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/AttachmentThumbnail.kt
View file

@ -21,7 +21,6 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Attachment
import androidx.compose.material.icons.outlined.GraphicEq
import androidx.compose.material.icons.outlined.VideoCameraBack
import androidx.compose.material3.MaterialTheme
@ -34,6 +33,7 @@ import androidx.compose.ui.layout.ContentScale
import io.element.android.libraries.designsystem.components.BlurHashAsyncImage
import io.element.android.libraries.designsystem.components.PinIcon
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.matrix.api.media.MediaSource
import io.element.android.libraries.matrix.ui.media.MediaRequestData
import kotlinx.parcelize.Parcelize
@ -77,7 +77,7 @@ fun AttachmentThumbnail(
}
AttachmentThumbnailType.File -> {
Icon(
imageVector = Icons.Outlined.Attachment,
resourceId = CommonDrawables.ic_september_attachment,
contentDescription = info.textContent,
modifier = Modifier.rotate(-45f)
)
@ -94,7 +94,7 @@ fun AttachmentThumbnail(
}
@Parcelize
enum class AttachmentThumbnailType: Parcelable {
enum class AttachmentThumbnailType : Parcelable {
Image, Video, File, Audio, Location
}
@ -104,4 +104,4 @@ data class AttachmentThumbnailInfo(
val thumbnailSource: MediaSource? = null,
val textContent: String? = null,
val blurHash: String? = null,
): Parcelable
) : Parcelable

2
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/AvatarActionBottomSheet.kt
View file

@ -100,7 +100,7 @@ private fun AvatarActionBottomSheetContent(
},
leadingContent = {
Icon(
imageVector = action.icon,
resourceId = action.iconResourceId,
contentDescription = stringResource(action.titleResId),
tint = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.secondary,
)

5
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedRoom.kt
View file

@ -24,8 +24,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
@ -44,6 +42,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.Surface
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.matrix.api.core.RoomId
import io.element.android.libraries.matrix.api.roomlist.RoomSummaryDetails
import io.element.android.libraries.ui.strings.CommonStrings
@ -82,7 +81,7 @@ fun SelectedRoom(
),
) {
Icon(
imageVector = Icons.Default.Close,
resourceId = CommonDrawables.ic_compound_close,
contentDescription = stringResource(id = CommonStrings.action_remove),
tint = MaterialTheme.colorScheme.onPrimary,
modifier = Modifier.padding(2.dp)

5
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt
View file

@ -24,8 +24,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
@ -43,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.Surface
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.matrix.api.user.MatrixUser
import io.element.android.libraries.matrix.ui.model.getAvatarData
import io.element.android.libraries.matrix.ui.model.getBestName
@ -82,7 +81,7 @@ fun SelectedUser(
),
) {
Icon(
imageVector = Icons.Default.Close,
resourceId = CommonDrawables.ic_compound_close,
contentDescription = stringResource(id = CommonStrings.action_remove),
tint = MaterialTheme.colorScheme.onPrimary,
modifier = Modifier.padding(2.dp)

5
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnresolvedUserRow.kt
View file

@ -24,8 +24,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Error
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -44,6 +42,7 @@ import io.element.android.libraries.designsystem.theme.components.Checkbox
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.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.matrix.ui.model.getAvatarData
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@ -83,7 +82,7 @@ fun UnresolvedUserRow(
.padding(top = 3.dp)
) {
Icon(
imageVector = Icons.Filled.Error,
resourceId = CommonDrawables.ic_compound_error,
contentDescription = "",
modifier = Modifier
.size(18.dp)

27
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/media/AvatarAction.kt
View file

@ -16,22 +16,31 @@
package io.element.android.libraries.matrix.ui.media
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Delete
import androidx.compose.material.icons.outlined.PhotoCamera
import androidx.compose.material.icons.outlined.PhotoLibrary
import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.vector.ImageVector
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.ui.strings.CommonStrings
@Immutable
sealed class AvatarAction(
@StringRes val titleResId: Int,
val icon: ImageVector,
@DrawableRes val iconResourceId: Int,
val destructive: Boolean = false,
) {
data object TakePhoto : AvatarAction(titleResId = CommonStrings.action_take_photo, icon = Icons.Outlined.PhotoCamera)
data object ChoosePhoto : AvatarAction(titleResId = CommonStrings.action_choose_photo, icon = Icons.Outlined.PhotoLibrary)
data object Remove : AvatarAction(titleResId = CommonStrings.action_remove, icon = Icons.Outlined.Delete, destructive = true)
data object TakePhoto : AvatarAction(
titleResId = CommonStrings.action_take_photo,
iconResourceId = CommonDrawables.ic_september_take_photo_camera,
)
data object ChoosePhoto : AvatarAction(
titleResId = CommonStrings.action_choose_photo,
iconResourceId = CommonDrawables.ic_september_photo_video_library,
)
data object Remove : AvatarAction(
titleResId = CommonStrings.action_remove,
iconResourceId = CommonDrawables.ic_compound_delete,
destructive = true
)
}

6
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt
View file

@ -38,8 +38,6 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
@ -494,7 +492,7 @@ private fun EditingModeView(
.weight(1f)
)
Icon(
imageVector = Icons.Default.Close,
resourceId = CommonDrawables.ic_compound_close,
contentDescription = stringResource(CommonStrings.action_close),
tint = ElementTheme.materialColors.secondary,
modifier = Modifier
@ -557,7 +555,7 @@ private fun ReplyToModeView(
)
}
Icon(
imageVector = Icons.Default.Close,
resourceId = CommonDrawables.ic_compound_close,
contentDescription = stringResource(CommonStrings.action_close),
tint = MaterialTheme.colorScheme.secondary,
modifier = Modifier