Preference: Add badge to the icon preference.
This commit is contained in:
parent
bec12c4cca
commit
93e05e9d9f
2 changed files with 38 additions and 13 deletions
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue