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

Preference: Add badge to the icon preference.

Browse source
This commit is contained in:
Benoit Marty 2023-10-03 13:44:06 +02:00 • committed by Benoit Marty
parent f34fdcc87b
commit c6ddc33be7
2 changed files with 38 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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