From 38a05f5aa65f5e5442e51ed49965a39acf4e47bc Mon Sep 17 00:00:00 2001 From: Tangem Date: Thu, 27 Apr 2023 14:59:12 +0300 Subject: [PATCH] Updated on 2026-08-14 --- .../core/ui/components/Notifications.kt | 202 ++++++++++++++++++ .../com/tangem/core/ui/res/TangemDimens.kt | 1 + core/ui/src/main/res/drawable/ic_star_24.xml | 9 + 3 files changed, 212 insertions(+) create mode 100644 core/ui/src/main/java/com/tangem/core/ui/components/Notifications.kt create mode 100644 core/ui/src/main/res/drawable/ic_star_24.xml diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/Notifications.kt b/core/ui/src/main/java/com/tangem/core/ui/components/Notifications.kt new file mode 100644 index 0000000000..e70f571b18 --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/Notifications.kt @@ -0,0 +1,202 @@ +package com.tangem.core.ui.components + +import androidx.annotation.DrawableRes +import androidx.compose.foundation.Image +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.* +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.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import com.tangem.core.ui.R +import com.tangem.core.ui.res.TangemTheme + +/** + * Closable notification with custom icon + * Child of parent component + * @see Figma component + * + * Use to show banner with custom icon and possibility to close + * i.e. Feedback notification + * + * @param title notification title + * @param icon drawable res on icon + * @param iconColor icon color + * @param onClick callback on click + * @param onCloseClick callback on close icon click + */ +@Composable +fun ClosableNotification( + title: String, + @DrawableRes icon: Int, + iconColor: Color, + onClick: (() -> Unit), + onCloseClick: (() -> Unit), +) { + NotificationCardTemplate(onClick) { + Icon( + modifier = Modifier + .size(TangemTheme.dimens.size20) + .align(Alignment.CenterStart), + painter = painterResource(id = icon), + tint = iconColor, + contentDescription = null, + ) + Text( + modifier = Modifier + .padding(horizontal = TangemTheme.dimens.spacing28) + .align(Alignment.CenterStart), + text = title, + color = TangemTheme.colors.text.primary1, + style = TangemTheme.typography.subtitle2, + ) + Icon( + modifier = Modifier + .size(TangemTheme.dimens.size20) + .align(Alignment.CenterEnd) + .clickable(onClick = onCloseClick), + painter = painterResource(id = R.drawable.ic_close_24), + contentDescription = null, + tint = TangemTheme.colors.icon.informative, + ) + } +} + +/** + * Notification component from Design system + * There are few states for this component, but only one parent, see link below + * + * Use this for Notification with title, subtitle, clickable or not + * + * @param title notification title + * @param subtitle notification subtitle + * @param onClick click on notification, if its null then no chevron icon + * + * @see Figma component + */ +@Composable +fun WarningNotification(title: String, subtitle: String?, onClick: (() -> Unit)?) { + NotificationCardTemplate(onClick) { + Image( + modifier = Modifier + .size(TangemTheme.dimens.size20) + .align(Alignment.CenterStart), + painter = painterResource(id = R.drawable.img_attention_20), + contentDescription = null, + ) + Column( + modifier = Modifier + .padding(horizontal = TangemTheme.dimens.spacing28) + .align(Alignment.CenterStart), + ) { + Text( + text = title, + color = TangemTheme.colors.text.primary1, + style = TangemTheme.typography.subtitle2, + ) + if (!subtitle.isNullOrEmpty()) { + SpacerH2() + Text( + text = subtitle, + color = TangemTheme.colors.text.tertiary, + style = TangemTheme.typography.caption, + ) + } + } + if (onClick != null) { + Icon( + modifier = Modifier + .size(TangemTheme.dimens.size20) + .align(Alignment.CenterEnd), + painter = painterResource(id = R.drawable.ic_chevron_right_24), + contentDescription = null, + tint = TangemTheme.colors.icon.informative, + ) + } + } +} + +@OptIn(ExperimentalMaterialApi::class) +@Composable +private fun NotificationCardTemplate(onClick: (() -> Unit)? = null, content: @Composable BoxScope.() -> Unit) { + Surface( + color = TangemTheme.colors.button.secondary, + shape = RoundedCornerShape(TangemTheme.dimens.radius18), + onClick = onClick ?: {}, + enabled = onClick != null, + ) { + Box( + Modifier + .padding( + horizontal = TangemTheme.dimens.spacing12, + vertical = TangemTheme.dimens.spacing8, + ) + .wrapContentSize(), + ) { + content() + } + } +} + +// region Preview + +@Composable +private fun WarningNotificationPreview() { + Column(modifier = Modifier.fillMaxWidth()) { + WarningNotification( + title = "Your wallet hasn’t been backed up", + subtitle = "Lorem ipsum dolor sit amet, consectetur " + + "adipiscing elit, sed do eiusmod tempor incididunt ut labore et...", + onClick = {}, + ) + SpacerH32() + WarningNotification( + title = "Your wallet hasn’t been backed up", + subtitle = null, + onClick = {}, + ) + SpacerH32() + WarningNotification( + title = "Your wallet hasn’t been backed up", + subtitle = "Lorem ipsum dolor sit amet, consectetur " + + "adipiscing elit, sed do eiusmod tempor incididunt ut labore et...", + onClick = null, + ) + SpacerH32() + WarningNotification( + title = "Your wallet hasn’t been backed up", + subtitle = null, + onClick = null, + ) + SpacerH32() + ClosableNotification( + title = "Like tangem app?", + icon = R.drawable.ic_star_24, + iconColor = TangemTheme.colors.icon.attention, + onClick = {}, + onCloseClick = {}, + ) + } +} + +@Preview(showBackground = true) +@Composable +private fun Preview_WarningNotification_InLightTheme() { + TangemTheme(isDark = false) { + WarningNotificationPreview() + } +} + +@Preview(showBackground = true) +@Composable +private fun Preview_WarningNotification_InDarkTheme() { + TangemTheme(isDark = true) { + WarningNotificationPreview() + } +} + +// endregion Preview \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt b/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt index 9d9362b84d..d5d14244ae 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt @@ -28,6 +28,7 @@ data class TangemDimens internal constructor( val radius10: Dp = 10.dp, val radius12: Dp = 12.dp, val radius16: Dp = 16.dp, + val radius18: Dp = 18.dp, val radius28: Dp = 28.dp, // endregion Radius // region Size diff --git a/core/ui/src/main/res/drawable/ic_star_24.xml b/core/ui/src/main/res/drawable/ic_star_24.xml new file mode 100644 index 0000000000..caa0be3b55 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_star_24.xml @@ -0,0 +1,9 @@ + + +