diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/SmallButton.kt b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/SmallButton.kt new file mode 100644 index 0000000000..5528c5dab9 --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/SmallButton.kt @@ -0,0 +1,106 @@ +package com.tangem.core.ui.components.buttons + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.tooling.preview.Preview +import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.extensions.resolveReference +import com.tangem.core.ui.res.TangemTheme + +/** + * Small button config + * + * @property text text + * @property onClick lambda be invoked when action component is clicked + * + */ +data class SmallButtonConfig( + val text: TextReference, + val onClick: () -> Unit, +) + +/** + * Primary small button + * [Show in Figma](https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?type=design&node-id=68%3A20&mode=design&t=fjwUkRtMUA4Q4s5r-1) + * + * @property config Config, containing parameters for a button + */ +@Composable +fun PrimarySmallButton(config: SmallButtonConfig, modifier: Modifier = Modifier) { + SmallButton(config = config, isPrimary = true, modifier = modifier) +} + +/** + * Secondary small button + * [Show in Figma](https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?type=design&node-id=68%3A20&mode=design&t=fjwUkRtMUA4Q4s5r-1) + * + * @property config Config, containing parameters for a button + */ +@Composable +fun SecondarySmallButton(config: SmallButtonConfig, modifier: Modifier = Modifier) { + SmallButton(config = config, isPrimary = false, modifier = modifier) +} + +@Composable +private fun SmallButton(config: SmallButtonConfig, isPrimary: Boolean, modifier: Modifier = Modifier) { + val shape = RoundedCornerShape(size = TangemTheme.dimens.radius16) + Box( + modifier = modifier + .defaultMinSize(minWidth = TangemTheme.dimens.size46, minHeight = TangemTheme.dimens.size24) + .clip(shape) + .background( + color = if (isPrimary) TangemTheme.colors.button.primary else TangemTheme.colors.button.secondary, + shape = shape, + ) + .clickable(enabled = true, onClick = config.onClick) + .padding( + vertical = TangemTheme.dimens.spacing2, + ), + contentAlignment = Alignment.Center, + ) { + Text( + text = config.text.resolveReference(), + color = if (isPrimary) TangemTheme.colors.text.primary2 else TangemTheme.colors.text.primary1, + maxLines = 1, + style = TangemTheme.typography.button, + ) + } +} + +@Preview(showBackground = true) +@Composable +private fun Preview_SmallButton_Light() { + TangemTheme(isDark = false) { + ButtonsSample() + } +} + +@Preview(showBackground = true) +@Composable +private fun Preview_SmallButton_Dark() { + TangemTheme(isDark = true) { + ButtonsSample() + } +} + +@Composable +private fun ButtonsSample() { + Column( + modifier = Modifier.background(TangemTheme.colors.background.primary), + verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing8), + ) { + val config = SmallButtonConfig( + text = TextReference.Str(value = "Add"), + onClick = {}, + ) + PrimarySmallButton(config = config) + SecondarySmallButton(config = config.copy(text = TextReference.Str(value = "Add"))) + } +} \ No newline at end of file diff --git a/core/ui/src/main/res/drawable/ic_information_24.xml b/core/ui/src/main/res/drawable/ic_information_24.xml new file mode 100644 index 0000000000..2e97b7f85f --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_information_24.xml @@ -0,0 +1,10 @@ + + + diff --git a/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/state/TokenButtonType.kt b/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/state/TokenButtonType.kt new file mode 100644 index 0000000000..6c47a870ec --- /dev/null +++ b/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/state/TokenButtonType.kt @@ -0,0 +1,5 @@ +package com.tangem.managetokens.presentation.managetokens.state + +internal enum class TokenButtonType { + ADD, EDIT, NOT_AVAILABLE +} \ No newline at end of file diff --git a/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/ui/components/PriceChangesChart.kt b/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/ui/components/PriceChangesChart.kt index 6a7444977d..9909709a8d 100644 --- a/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/ui/components/PriceChangesChart.kt +++ b/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/ui/components/PriceChangesChart.kt @@ -14,6 +14,8 @@ import androidx.compose.ui.graphics.drawscope.DrawScope import androidx.compose.ui.graphics.drawscope.Stroke import androidx.compose.ui.tooling.preview.Preview import com.tangem.core.ui.res.TangemTheme +import kotlinx.collections.immutable.ImmutableList +import kotlinx.collections.immutable.persistentListOf /** * A chart with a solid line and gradient underneath. It can accept values of any range and number. @@ -22,7 +24,7 @@ import com.tangem.core.ui.res.TangemTheme * @param values a list of float values for a chart. **/ @Composable -fun PriceChangesChart(values: List, modifier: Modifier = Modifier) { +fun PriceChangesChart(values: ImmutableList, modifier: Modifier = Modifier) { Row(modifier = modifier) { if (values.size < 2) return // escape without drawing when there are not enough points @@ -39,7 +41,7 @@ fun PriceChangesChart(values: List, modifier: Modifier = Modifier) { } @Composable -private fun Chart(list: List, lineColor: Color, gradient: Brush, modifier: Modifier = Modifier) { +private fun Chart(list: ImmutableList, lineColor: Color, gradient: Brush, modifier: Modifier = Modifier) { val max = list.max() val min = list.min() val zipList: List> = list.zipWithNext() @@ -105,7 +107,7 @@ private fun getValuePercentageForRange(value: Float, max: Float, min: Float): Fl private fun Chart_Positive_Preview() { TangemTheme(isDark = true) { PriceChangesChart( - listOf(1f, 2f, 4f, 1f, 5f), + persistentListOf(1f, 2f, 4f, 1f, 5f), ) } } @@ -115,7 +117,7 @@ private fun Chart_Positive_Preview() { private fun Chart_Negative_Preview() { TangemTheme(isDark = true) { PriceChangesChart( - listOf(10f, 2f, 4f, 1f, 5f), + persistentListOf(10f, 2f, 4f, 1f, 5f), ) } } \ No newline at end of file diff --git a/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/ui/components/TokenButton.kt b/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/ui/components/TokenButton.kt new file mode 100644 index 0000000000..f3f76effd3 --- /dev/null +++ b/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/ui/components/TokenButton.kt @@ -0,0 +1,90 @@ +package com.tangem.managetokens.presentation.managetokens.ui.components + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.size +import androidx.compose.material.Icon +import androidx.compose.material.ripple.rememberRipple +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.tooling.preview.PreviewParameterProvider +import com.tangem.core.ui.components.buttons.PrimarySmallButton +import com.tangem.core.ui.components.buttons.SecondarySmallButton +import com.tangem.core.ui.components.buttons.SmallButtonConfig +import com.tangem.core.ui.extensions.resourceReference +import com.tangem.core.ui.res.TangemTheme +import com.tangem.features.managetokens.impl.R +import com.tangem.managetokens.presentation.managetokens.state.TokenButtonType + +@Composable +internal fun TokenButton(type: TokenButtonType, onClick: () -> Unit, modifier: Modifier = Modifier) { + when (type) { + TokenButtonType.ADD -> PrimarySmallButton( + config = SmallButtonConfig( + text = resourceReference(R.string.manage_tokens_add), + onClick = onClick, + ), + modifier = modifier, + ) + TokenButtonType.EDIT -> SecondarySmallButton( + config = SmallButtonConfig( + text = resourceReference(R.string.manage_tokens_edit), + onClick = onClick, + ), + modifier = modifier, + ) + TokenButtonType.NOT_AVAILABLE -> { + Box( + modifier = modifier + .size(height = TangemTheme.dimens.size24, width = TangemTheme.dimens.size46) + .clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = rememberRipple( + bounded = false, + radius = TangemTheme.dimens.size20, + ), + onClick = onClick, + ), + contentAlignment = Alignment.Center, + ) { + Icon( + modifier = Modifier + .size(TangemTheme.dimens.size20), + painter = painterResource(id = R.drawable.ic_information_24), + tint = TangemTheme.colors.icon.informative, + contentDescription = null, + ) + } + } + } +} + +@Preview(backgroundColor = 0xffffff, showBackground = true) +@Composable +private fun TokenButton_Light_Preview(@PreviewParameter(TokenButtonTypeProvider::class) type: TokenButtonType) { + TangemTheme(isDark = false) { + TokenButton(type = type, {}) + } +} + +@Preview(showBackground = true) +@Composable +private fun TokenButton_Dark_Preview(@PreviewParameter(TokenButtonTypeProvider::class) type: TokenButtonType) { + TangemTheme(isDark = true) { + TokenButton(type = type, {}) + } +} + +private class TokenButtonTypeProvider : PreviewParameterProvider { + override val values = sequenceOf( + TokenButtonType.ADD, + TokenButtonType.EDIT, + TokenButtonType.NOT_AVAILABLE, + ) +} \ No newline at end of file