diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/rows/BlockchainRow.kt b/core/ui/src/main/java/com/tangem/core/ui/components/rows/BlockchainRow.kt index 8d6e4165e3..d0341755a7 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/rows/BlockchainRow.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/BlockchainRow.kt @@ -1,20 +1,22 @@ package com.tangem.core.ui.components.rows import android.content.res.Configuration +import androidx.annotation.DrawableRes +import androidx.compose.foundation.Image import androidx.compose.foundation.background -import androidx.compose.foundation.layout.BoxScope -import androidx.compose.foundation.layout.heightIn -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.Icon import androidx.compose.runtime.Composable +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.datasource.CollectionPreviewParameterProvider import com.tangem.core.ui.R import com.tangem.core.ui.components.TangemSwitch import com.tangem.core.ui.components.rows.model.BlockchainRowUM -import com.tangem.core.ui.extensions.stringReference import com.tangem.core.ui.res.TangemTheme import com.tangem.core.ui.res.TangemThemePreview @@ -32,24 +34,84 @@ fun BlockchainRow(model: BlockchainRowUM, action: @Composable BoxScope.() -> Uni ), icon = { RowIcon( - modifier = Modifier.size(TangemTheme.dimens.size22), - resId = model.icon.resId, - isColored = model.icon.isColored, - showAccentBadge = model.isAccented, + resId = model.iconResId, + isColored = model.isSelected, + showAccentBadge = model.isMainNetwork, ) }, text = { - RowTitleAndSubtitle( - title = model.name, - subtitle = model.type, - accentTitle = model.usePrimaryTextColor, - accentSubtitle = model.isAccented, + RowText( + mainText = model.name, + secondText = model.type, + accentMainText = model.isSelected, + accentSecondText = model.isMainNetwork, ) }, action = action, ) } +@Composable +private fun RowIcon( + @DrawableRes resId: Int, + isColored: Boolean, + showAccentBadge: Boolean, + modifier: Modifier = Modifier, +) { + Box( + modifier = modifier.size(TangemTheme.dimens.size24), + ) { + if (isColored) { + Image( + modifier = Modifier + .align(Alignment.Center) + .size(TangemTheme.dimens.size22), + painter = painterResource(id = resId), + contentDescription = null, + ) + } else { + Icon( + modifier = Modifier + .align(Alignment.Center) + .background( + color = TangemTheme.colors.button.secondary, + shape = CircleShape, + ) + .size(TangemTheme.dimens.size22), + painter = painterResource(id = resId), + tint = TangemTheme.colors.icon.informative, + contentDescription = null, + ) + } + + if (showAccentBadge) { + Badge(modifier = Modifier.align(Alignment.TopEnd)) + } + } +} + +@Composable +private fun Badge(modifier: Modifier = Modifier) { + Box( + modifier = modifier + .size(TangemTheme.dimens.size8) + .background( + color = TangemTheme.colors.background.primary, + shape = CircleShape, + ), + contentAlignment = Alignment.Center, + ) { + Box( + modifier = Modifier + .size(TangemTheme.dimens.size5) + .background( + color = TangemTheme.colors.icon.accent, + shape = CircleShape, + ), + ) + } +} + // region Preview @Preview(showBackground = true, widthDp = 360) @Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES) @@ -74,25 +136,25 @@ private fun Preview_BlockchainRow(@PreviewParameter(BlockchainRowParameterProvid private class BlockchainRowParameterProvider : CollectionPreviewParameterProvider( collection = listOf( BlockchainRowUM( - name = stringReference("BNB BEACON CHAIN"), - type = stringReference("BEP20"), - icon = BlockchainRowUM.Icon(R.drawable.ic_bsc_16, isColored = false), - isAccented = true, - usePrimaryTextColor = false, + name = "BNB BEACON CHAIN", + type = "BEP20", + iconResId = R.drawable.img_bsc_22, + isMainNetwork = true, + isSelected = true, ), BlockchainRowUM( - name = stringReference("1234567890111213141516171819"), - type = stringReference("BEP20"), - icon = BlockchainRowUM.Icon(R.drawable.ic_bsc_16, isColored = false), - isAccented = false, - usePrimaryTextColor = true, + name = "1234567890111213141516171819", + type = "BEP20", + iconResId = R.drawable.ic_bsc_16, + isMainNetwork = true, + isSelected = false, ), BlockchainRowUM( - name = stringReference("BNB BEACON CHAIN"), - type = stringReference("1234567890111213141516171819"), - icon = BlockchainRowUM.Icon(R.drawable.img_bsc_22, isColored = true), - isAccented = false, - usePrimaryTextColor = false, + name = "BNB BEACON CHAIN", + type = "1234567890111213141516171819", + iconResId = R.drawable.ic_bsc_16, + isMainNetwork = false, + isSelected = false, ), ), ) diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/rows/ChainRow.kt b/core/ui/src/main/java/com/tangem/core/ui/components/rows/ChainRow.kt index 24645b9c17..175ace75f5 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/rows/ChainRow.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/ChainRow.kt @@ -2,10 +2,7 @@ package com.tangem.core.ui.components.rows import android.content.res.Configuration import androidx.compose.foundation.background -import androidx.compose.foundation.layout.BoxScope -import androidx.compose.foundation.layout.heightIn -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.* import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.runtime.Composable @@ -15,8 +12,10 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider import com.tangem.core.ui.R +import com.tangem.core.ui.components.currency.icon.CurrencyIcon +import com.tangem.core.ui.components.currency.icon.CurrencyIconState import com.tangem.core.ui.components.rows.model.ChainRowUM -import com.tangem.core.ui.extensions.stringReference +import com.tangem.core.ui.extensions.resourceReference import com.tangem.core.ui.res.TangemTheme import com.tangem.core.ui.res.TangemThemePreview @@ -32,20 +31,24 @@ fun ChainRow(model: ChainRowUM, modifier: Modifier = Modifier, action: @Composab vertical = TangemTheme.dimens.spacing12, horizontal = TangemTheme.dimens.spacing14, ), + horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12), icon = { - RowIcon( - modifier = Modifier.size(TangemTheme.dimens.size36), - resId = model.icon.resId, - isColored = model.icon.isColored, - showAccentBadge = false, + CurrencyIcon( + state = model.icon, + shouldDisplayNetwork = true, ) }, text = { - RowTitleAndSubtitle( - title = model.name, - subtitle = model.type, - accentTitle = true, - accentSubtitle = false, + RowText( + mainText = model.name, + secondText = model.type, + subtitle = if (model.showCustom) { + resourceReference(R.string.common_custom) + } else { + null + }, + accentMainText = true, + accentSecondText = false, ) }, action = action, @@ -81,36 +84,28 @@ private fun Preview_ChainRow(@PreviewParameter(ChainRowParameterProvider::class) private class ChainRowParameterProvider : CollectionPreviewParameterProvider( collection = listOf( ChainRowUM( - name = stringReference("Cardano"), - type = stringReference("ADA"), - icon = ChainRowUM.Icon( - resId = R.drawable.img_cardano_22, - isColored = true, - ), + name = "Cardano", + type = "ADA", + icon = CurrencyIconState.Locked, + showCustom = true, ), ChainRowUM( - name = stringReference("Binance"), - type = stringReference("BNB"), - icon = ChainRowUM.Icon( - resId = R.drawable.ic_bsc_16, - isColored = false, - ), + name = "Binance", + type = "BNB", + icon = CurrencyIconState.Locked, + showCustom = false, ), ChainRowUM( - name = stringReference("123456789010111213141516"), - type = stringReference("BNB"), - icon = ChainRowUM.Icon( - resId = R.drawable.ic_bsc_16, - isColored = false, - ), + name = "123456789010111213141516", + type = "BNB", + icon = CurrencyIconState.Locked, + showCustom = true, ), ChainRowUM( - name = stringReference("123456789010111213141516"), - type = stringReference("123456789010111213141516"), - icon = ChainRowUM.Icon( - resId = R.drawable.ic_bsc_16, - isColored = false, - ), + name = "123456789010111213141516", + type = "123456789010111213141516", + icon = CurrencyIconState.Locked, + showCustom = false, ), ), ) diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/rows/RowComponents.kt b/core/ui/src/main/java/com/tangem/core/ui/components/rows/RowComponents.kt index e0ac20cdc2..f93f42b41d 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/rows/RowComponents.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/RowComponents.kt @@ -1,18 +1,13 @@ package com.tangem.core.ui.components.rows -import androidx.annotation.DrawableRes -import androidx.compose.foundation.Image -import androidx.compose.foundation.background import androidx.compose.foundation.layout.* -import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextOverflow import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.extensions.isNullOrEmpty import com.tangem.core.ui.extensions.resolveReference import com.tangem.core.ui.res.TangemTheme @@ -22,11 +17,12 @@ internal inline fun RowContentContainer( text: @Composable BoxScope.() -> Unit, action: @Composable BoxScope.() -> Unit, modifier: Modifier = Modifier, + horizontalArrangement: Arrangement.Horizontal = Arrangement.spacedBy(TangemTheme.dimens.spacing8), ) { Row( modifier = modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing8, Alignment.Start), + horizontalArrangement = horizontalArrangement, ) { Box( contentAlignment = Alignment.Center, @@ -41,7 +37,7 @@ internal inline fun RowContentContainer( ) Box( modifier = Modifier - .requiredWidthIn(max = TangemTheme.dimens.size48) + .requiredWidthIn(max = TangemTheme.dimens.size80) .heightIn(min = TangemTheme.dimens.size24), contentAlignment = Alignment.CenterEnd, content = action, @@ -50,90 +46,50 @@ internal inline fun RowContentContainer( } @Composable -internal fun RowTitleAndSubtitle( - title: TextReference, - subtitle: TextReference, - accentTitle: Boolean, - accentSubtitle: Boolean, +internal fun RowText( + mainText: String, + secondText: String, + accentMainText: Boolean, + accentSecondText: Boolean, modifier: Modifier = Modifier, + subtitle: TextReference? = null, ) { - Row( + Column( modifier = modifier, - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing4), + horizontalAlignment = Alignment.Start, + verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing2), ) { - Text( - modifier = Modifier.weight(weight = 10f, fill = false), - text = title.resolveReference(), - style = TangemTheme.typography.subtitle2, - color = if (accentTitle) TangemTheme.colors.text.primary1 else TangemTheme.colors.text.secondary, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - ) - - Text( - modifier = Modifier.weight(weight = 4f, fill = false), - text = subtitle.resolveReference(), - style = TangemTheme.typography.body2, - color = if (accentSubtitle) TangemTheme.colors.text.accent else TangemTheme.colors.text.secondary, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - ) - } -} - -@Composable -internal fun RowIcon( - @DrawableRes resId: Int, - isColored: Boolean, - showAccentBadge: Boolean, - modifier: Modifier = Modifier, -) { - Box(modifier = modifier) { - if (isColored) { - Image( - modifier = Modifier.matchParentSize(), - painter = painterResource(id = resId), - contentDescription = null, + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing4), + ) { + Text( + modifier = Modifier.weight(weight = 10f, fill = false), + text = mainText, + style = TangemTheme.typography.subtitle2, + color = if (accentMainText) TangemTheme.colors.text.primary1 else TangemTheme.colors.text.secondary, + maxLines = 1, + overflow = TextOverflow.Ellipsis, ) - } else { - Icon( - modifier = Modifier - .background( - color = TangemTheme.colors.button.secondary, - shape = CircleShape, - ) - .matchParentSize(), - painter = painterResource(id = resId), - tint = TangemTheme.colors.icon.informative, - contentDescription = null, + + Text( + modifier = Modifier.weight(weight = 4f, fill = false), + text = secondText, + style = TangemTheme.typography.body2, + color = if (accentSecondText) TangemTheme.colors.text.accent else TangemTheme.colors.text.secondary, + maxLines = 1, + overflow = TextOverflow.Ellipsis, ) } - if (showAccentBadge) { - Badge(modifier = Modifier.align(Alignment.TopEnd)) + if (!subtitle.isNullOrEmpty()) { + Text( + text = subtitle.resolveReference(), + style = TangemTheme.typography.caption2, + color = TangemTheme.colors.text.tertiary, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) } } -} - -@Composable -private fun Badge(modifier: Modifier = Modifier) { - Box( - modifier = modifier - .size(TangemTheme.dimens.size6) - .background( - color = TangemTheme.colors.background.primary, - shape = CircleShape, - ), - ) { - Box( - modifier = Modifier - .padding(all = TangemTheme.dimens.spacing1) - .matchParentSize() - .background( - color = TangemTheme.colors.icon.accent, - shape = CircleShape, - ), - ) - } } \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/BlockchainRowUM.kt b/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/BlockchainRowUM.kt index dbb8ae529d..f8e756a9ae 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/BlockchainRowUM.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/BlockchainRowUM.kt @@ -1,21 +1,12 @@ package com.tangem.core.ui.components.rows.model -import androidx.annotation.DrawableRes import androidx.compose.runtime.Immutable -import com.tangem.core.ui.extensions.TextReference @Immutable data class BlockchainRowUM( - val name: TextReference, - val type: TextReference, - val icon: Icon, - val isAccented: Boolean, - val usePrimaryTextColor: Boolean, -) { - - @Immutable - data class Icon( - @DrawableRes val resId: Int, - val isColored: Boolean, - ) -} \ No newline at end of file + val name: String, + val type: String, + val iconResId: Int, + val isMainNetwork: Boolean, + val isSelected: Boolean, +) \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/ChainRowUM.kt b/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/ChainRowUM.kt index 58e337a805..c0c3764c5e 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/ChainRowUM.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/ChainRowUM.kt @@ -1,19 +1,12 @@ package com.tangem.core.ui.components.rows.model -import androidx.annotation.DrawableRes import androidx.compose.runtime.Immutable -import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.components.currency.icon.CurrencyIconState @Immutable data class ChainRowUM( - val name: TextReference, - val type: TextReference, - val icon: Icon, -) { - - @Immutable - data class Icon( - @DrawableRes val resId: Int, - val isColored: Boolean, - ) -} \ No newline at end of file + val name: String, + val type: String, + val icon: CurrencyIconState, + val showCustom: Boolean, +) \ No newline at end of file