Merge pull request #4004 from element-hq/feature/bma/customAlertSolid
Add destructive param to BigIcon.Style.Default to be able to render icons with red tint
This commit is contained in:
commit
d1cfad4ec8
9 changed files with 66 additions and 28 deletions
|
|
@ -10,9 +10,12 @@ package io.element.android.libraries.designsystem.components
|
|||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.lazy.grid.GridCells
|
||||
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
|
||||
import androidx.compose.foundation.lazy.grid.items
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.CatchingPokemon
|
||||
|
|
@ -48,8 +51,13 @@ object BigIcon {
|
|||
*
|
||||
* @param vectorIcon the [ImageVector] to display
|
||||
* @param contentDescription the content description of the icon, if any. It defaults to `null`
|
||||
* @param useCriticalTint whether the icon and background should be rendered using critical tint
|
||||
*/
|
||||
data class Default(val vectorIcon: ImageVector, val contentDescription: String? = null) : Style
|
||||
data class Default(
|
||||
val vectorIcon: ImageVector,
|
||||
val contentDescription: String? = null,
|
||||
val useCriticalTint: Boolean = false,
|
||||
) : Style
|
||||
|
||||
/**
|
||||
* An alert style with a transparent background.
|
||||
|
|
@ -84,25 +92,40 @@ object BigIcon {
|
|||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
val backgroundColor = when (style) {
|
||||
is Style.Default -> ElementTheme.colors.bgSubtleSecondary
|
||||
Style.Alert, Style.Success -> Color.Transparent
|
||||
is Style.Default -> if (style.useCriticalTint) {
|
||||
ElementTheme.colors.bgCriticalSubtle
|
||||
} else {
|
||||
ElementTheme.colors.bgSubtleSecondary
|
||||
}
|
||||
Style.Alert,
|
||||
Style.Success -> Color.Transparent
|
||||
Style.AlertSolid -> ElementTheme.colors.bgCriticalSubtle
|
||||
Style.SuccessSolid -> ElementTheme.colors.bgSuccessSubtle
|
||||
}
|
||||
val icon = when (style) {
|
||||
is Style.Default -> style.vectorIcon
|
||||
Style.Alert, Style.AlertSolid -> CompoundIcons.Error()
|
||||
Style.Success, Style.SuccessSolid -> CompoundIcons.CheckCircleSolid()
|
||||
Style.Alert,
|
||||
Style.AlertSolid -> CompoundIcons.Error()
|
||||
Style.Success,
|
||||
Style.SuccessSolid -> CompoundIcons.CheckCircleSolid()
|
||||
}
|
||||
val contentDescription = when (style) {
|
||||
is Style.Default -> style.contentDescription
|
||||
Style.Alert, Style.AlertSolid -> stringResource(CommonStrings.common_error)
|
||||
Style.Success, Style.SuccessSolid -> stringResource(CommonStrings.common_success)
|
||||
Style.Alert,
|
||||
Style.AlertSolid -> stringResource(CommonStrings.common_error)
|
||||
Style.Success,
|
||||
Style.SuccessSolid -> stringResource(CommonStrings.common_success)
|
||||
}
|
||||
val iconTint = when (style) {
|
||||
is Style.Default -> ElementTheme.colors.iconSecondary
|
||||
Style.Alert, Style.AlertSolid -> ElementTheme.colors.iconCriticalPrimary
|
||||
Style.Success, Style.SuccessSolid -> ElementTheme.colors.iconSuccessPrimary
|
||||
is Style.Default -> if (style.useCriticalTint) {
|
||||
ElementTheme.colors.iconCriticalPrimary
|
||||
} else {
|
||||
ElementTheme.colors.iconSecondary
|
||||
}
|
||||
Style.Alert,
|
||||
Style.AlertSolid -> ElementTheme.colors.iconCriticalPrimary
|
||||
Style.Success,
|
||||
Style.SuccessSolid -> ElementTheme.colors.iconSuccessPrimary
|
||||
}
|
||||
Box(
|
||||
modifier = modifier
|
||||
|
|
@ -123,11 +146,19 @@ object BigIcon {
|
|||
|
||||
@PreviewsDayNight
|
||||
@Composable
|
||||
internal fun BigIconPreview() {
|
||||
ElementPreview {
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(10.dp), modifier = Modifier.padding(10.dp)) {
|
||||
val provider = BigIconStyleProvider()
|
||||
for (style in provider.values) {
|
||||
internal fun BigIconPreview() = ElementPreview {
|
||||
LazyVerticalGrid(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(10.dp),
|
||||
columns = GridCells.Adaptive(minSize = 64.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(10.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(10.dp),
|
||||
) {
|
||||
items(BigIconStyleProvider().values.toList()) { style ->
|
||||
Box(
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
BigIcon(style = style)
|
||||
}
|
||||
}
|
||||
|
|
@ -140,6 +171,7 @@ internal class BigIconStyleProvider : PreviewParameterProvider<BigIcon.Style> {
|
|||
BigIcon.Style.Default(Icons.Filled.CatchingPokemon),
|
||||
BigIcon.Style.Alert,
|
||||
BigIcon.Style.AlertSolid,
|
||||
BigIcon.Style.Default(Icons.Filled.CatchingPokemon, useCriticalTint = true),
|
||||
BigIcon.Style.Success,
|
||||
BigIcon.Style.SuccessSolid
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:ee6ae9f6af47e39480ec9e78d37da7d2f7174cba71c5274bb6314a2dc346b1ab
|
||||
size 10691
|
||||
oid sha256:6bed157ced6cb695c6c92f15bc8b31b124fb943f86db580c9ab2db33d423b731
|
||||
size 12408
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:e0ee879f0cb6b6d42aa0706c1d2ce763211d95768e0111f03e79eaa923515534
|
||||
size 10615
|
||||
oid sha256:211c37c03a828d65c2d28622ebb7eee49d39941f80aca809698561c55ae12135
|
||||
size 12521
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b0ae9f53b675f2f754f7cb3ebf3fbe45ae7eae0c63bc8628425e0bf21ff95bcb
|
||||
size 12485
|
||||
oid sha256:315e1d831a1e3082a9d4ea749b76b374b0f8018c6d5c11b1f48ed34db3b3a1c5
|
||||
size 13279
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:7a9d956826399b4a700a4f5d05eed66412f76f59a21a0995a85c69b3c528803a
|
||||
size 13124
|
||||
oid sha256:b0ae9f53b675f2f754f7cb3ebf3fbe45ae7eae0c63bc8628425e0bf21ff95bcb
|
||||
size 12485
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:7a9d956826399b4a700a4f5d05eed66412f76f59a21a0995a85c69b3c528803a
|
||||
size 13124
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:8debba5d7b2f5866dafbb553732d5f99e3ecade1e3da873abdf2a82856f6b835
|
||||
size 12249
|
||||
oid sha256:da1945462f70133c47e33eaaa9dfc3d64033c6a83d4d50b03776adcc7a7f77e0
|
||||
size 13334
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:fe20c0a4b18c1844df6d962e147a5e939cf0cba70657a67f3286c013942dd010
|
||||
size 13068
|
||||
oid sha256:8debba5d7b2f5866dafbb553732d5f99e3ecade1e3da873abdf2a82856f6b835
|
||||
size 12249
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:fe20c0a4b18c1844df6d962e147a5e939cf0cba70657a67f3286c013942dd010
|
||||
size 13068
|
||||
Loading…
Add table
Add a link
Reference in a new issue