Preference: Add badge to the icon preference.

This commit is contained in:
Benoit Marty 2023-10-03 13:44:06 +02:00 committed by Benoit Marty
parent bec12c4cca
commit 93e05e9d9f
2 changed files with 38 additions and 13 deletions

View file

@ -57,6 +57,7 @@ fun PreferenceText(
icon: ImageVector? = null,
@DrawableRes iconResourceId: Int? = null,
showIconAreaIfNoIcon: Boolean = false,
showIconBadge: Boolean = false,
tintColor: Color? = null,
onClick: () -> Unit = {},
) {
@ -73,6 +74,7 @@ fun PreferenceText(
PreferenceIcon(
icon = icon,
iconResourceId = iconResourceId,
showIconBadge = showIconBadge,
enabled = enabled,
isVisible = showIconAreaIfNoIcon,
tintColor = tintColor ?: enabled.toSecondaryEnabledColor(),

View file

@ -17,17 +17,20 @@
package io.element.android.libraries.designsystem.components.preferences.components
import androidx.annotation.DrawableRes
import androidx.compose.foundation.layout.Box
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.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.atomic.atoms.RedIndicatorAtom
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
@ -38,20 +41,30 @@ fun PreferenceIcon(
modifier: Modifier = Modifier,
icon: ImageVector? = null,
@DrawableRes iconResourceId: Int? = null,
showIconBadge: Boolean = false,
tintColor: Color? = null,
enabled: Boolean = true,
isVisible: Boolean = true,
) {
if (icon != null || iconResourceId != null) {
Icon(
imageVector = icon,
resourceId = iconResourceId,
contentDescription = "",
tint = tintColor ?: enabled.toSecondaryEnabledColor(),
modifier = modifier
.padding(end = 16.dp)
.size(24.dp),
)
Box(modifier = modifier) {
Icon(
imageVector = icon,
resourceId = iconResourceId,
contentDescription = "",
tint = tintColor ?: enabled.toSecondaryEnabledColor(),
modifier = Modifier
.padding(end = 16.dp)
.size(24.dp),
)
if (showIconBadge) {
RedIndicatorAtom(
modifier = Modifier
.align(Alignment.TopEnd)
.padding(end = 16.dp)
)
}
}
} else if (isVisible) {
Spacer(modifier = modifier.width(40.dp))
}
@ -60,9 +73,19 @@ fun PreferenceIcon(
@Preview(group = PreviewGroup.Preferences)
@Composable
internal fun PreferenceIconPreview(@PreviewParameter(ImageVectorProvider::class) content: ImageVector?) =
ElementThemedPreview { ContentToPreview(content) }
ElementThemedPreview {
PreferenceIcon(
icon = content,
showIconBadge = false,
)
}
@Preview(group = PreviewGroup.Preferences)
@Composable
private fun ContentToPreview(content: ImageVector?) {
PreferenceIcon(icon = content)
}
internal fun PreferenceIconWithBadgePreview(@PreviewParameter(ImageVectorProvider::class) content: ImageVector?) =
ElementThemedPreview {
PreferenceIcon(
icon = content,
showIconBadge = true,
)
}