From 42d67bedb091f992d2bf14f9507c4559694ec2a2 Mon Sep 17 00:00:00 2001 From: Tangem Date: Mon, 9 Sep 2024 16:57:58 +0300 Subject: [PATCH] Updated on 2026-08-14 --- .../block/information/InformationBlock.kt | 46 +------ .../core/ui/components/rows/NetworkTitle.kt | 103 +++++++++++++++ .../common/component/NetworkGroupItem.kt | 124 ------------------ .../common/component/NetworkTitleItem.kt | 103 +++++++++++++++ .../organizetokens/OrganizeTokensScreen.kt | 10 +- .../multicurrency/MultiCurrencyContentItem.kt | 8 +- 6 files changed, 219 insertions(+), 175 deletions(-) create mode 100644 core/ui/src/main/java/com/tangem/core/ui/components/rows/NetworkTitle.kt delete mode 100644 features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/NetworkGroupItem.kt create mode 100644 features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/NetworkTitleItem.kt diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/block/information/InformationBlock.kt b/core/ui/src/main/java/com/tangem/core/ui/components/block/information/InformationBlock.kt index 25bac7feca..3c5b7a606d 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/block/information/InformationBlock.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/block/information/InformationBlock.kt @@ -16,6 +16,7 @@ import com.tangem.core.ui.R import com.tangem.core.ui.components.buttons.SecondarySmallButton import com.tangem.core.ui.components.buttons.SmallButtonConfig import com.tangem.core.ui.components.buttons.common.TangemButtonIconPosition +import com.tangem.core.ui.components.rows.NetworkTitle import com.tangem.core.ui.components.text.TooltipText import com.tangem.core.ui.extensions.TextReference import com.tangem.core.ui.extensions.resolveReference @@ -27,7 +28,6 @@ import kotlinx.collections.immutable.persistentListOf @Immutable class InformationBlockContentScope(val scope: BoxScope) : BoxScope by scope -// TODO: [REDACTED_JIRA] @Composable fun InformationBlock( title: @Composable BoxScope.() -> Unit, @@ -43,49 +43,7 @@ fun InformationBlock( .background(color = TangemTheme.colors.background.action), horizontalAlignment = Alignment.Start, ) { - val minHeight = if (action == null) TangemTheme.dimens.size36 else TangemTheme.dimens.size40 - val padding = if (action == null) { - PaddingValues( - start = TangemTheme.dimens.spacing12, - top = TangemTheme.dimens.spacing12, - end = TangemTheme.dimens.spacing12, - bottom = TangemTheme.dimens.spacing4, - ) - } else { - PaddingValues( - start = TangemTheme.dimens.spacing12, - top = TangemTheme.dimens.spacing11, - end = TangemTheme.dimens.spacing12, - bottom = TangemTheme.dimens.spacing5, - ) - } - - Row( - modifier = Modifier - .fillMaxWidth() - .heightIn(min = minHeight) - .padding(paddingValues = padding), - horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.CenterVertically, - ) { - Box( - modifier = Modifier - .weight(weight = 1f) - .heightIn(min = TangemTheme.dimens.size20), - contentAlignment = Alignment.CenterStart, - content = title, - ) - if (action != null) { - Spacer(modifier = Modifier.size(TangemTheme.dimens.spacing8)) - Box( - modifier = Modifier - .weight(weight = 1f) - .heightIn(min = TangemTheme.dimens.size24), - contentAlignment = Alignment.CenterEnd, - content = action, - ) - } - } + NetworkTitle(title = title, action = action) if (content != null) { Box( diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/rows/NetworkTitle.kt b/core/ui/src/main/java/com/tangem/core/ui/components/rows/NetworkTitle.kt new file mode 100644 index 0000000000..383854fd65 --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/NetworkTitle.kt @@ -0,0 +1,103 @@ +package com.tangem.core.ui.components.rows + +import android.content.res.Configuration +import androidx.compose.foundation.layout.* +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.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.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview + +/** + * Network title component. [title] and [action] composables are placed horizontally + * + * @param title title composable in [BoxScope] + * @param modifier modifier + * @param action optional action composable in [BoxScope] + * + * @see Figma component + * +[REDACTED_AUTHOR] + */ +@Composable +fun NetworkTitle( + title: @Composable BoxScope.() -> Unit, + modifier: Modifier = Modifier, + action: (@Composable BoxScope.() -> Unit)? = null, +) { + val minHeight = if (action == null) TangemTheme.dimens.size36 else TangemTheme.dimens.size40 + + val padding = if (action == null) { + PaddingValues( + start = TangemTheme.dimens.spacing12, + top = TangemTheme.dimens.spacing12, + end = TangemTheme.dimens.spacing12, + bottom = TangemTheme.dimens.spacing4, + ) + } else { + PaddingValues( + start = TangemTheme.dimens.spacing12, + top = TangemTheme.dimens.spacing11, + end = TangemTheme.dimens.spacing12, + bottom = TangemTheme.dimens.spacing5, + ) + } + + Row( + modifier = modifier + .fillMaxWidth() + .heightIn(min = minHeight) + .padding(paddingValues = padding), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Box( + modifier = Modifier + .weight(weight = 1f) + .heightIn(min = TangemTheme.dimens.size20), + contentAlignment = Alignment.CenterStart, + content = title, + ) + + if (action != null) { + Spacer(modifier = Modifier.size(TangemTheme.dimens.spacing8)) + Box( + modifier = Modifier + .weight(weight = 1f) + .heightIn(min = TangemTheme.dimens.size24), + contentAlignment = Alignment.CenterEnd, + content = action, + ) + } + } +} + +@Preview(showBackground = true, widthDp = 360) +@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun NetworkTitlePreview(@PreviewParameter(NetworkTitleIconVisibilityProvider::class) isIconVisible: Boolean) { + TangemThemePreview { + NetworkTitle( + title = { Text(text = "Network") }, + action = { + if (isIconVisible) { + Icon( + painter = painterResource(id = R.drawable.ic_group_drop_24), + tint = TangemTheme.colors.icon.informative, + contentDescription = null, + ) + } + }, + ) + } +} + +private object NetworkTitleIconVisibilityProvider : CollectionPreviewParameterProvider(listOf(true, false)) \ No newline at end of file diff --git a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/NetworkGroupItem.kt b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/NetworkGroupItem.kt deleted file mode 100644 index aca25673e4..0000000000 --- a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/NetworkGroupItem.kt +++ /dev/null @@ -1,124 +0,0 @@ -package com.tangem.feature.wallet.presentation.common.component - -import android.content.res.Configuration -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* -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.res.stringResource -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.res.TangemTheme -import com.tangem.core.ui.res.TangemThemePreview -import com.tangem.feature.wallet.impl.R -import org.burnoutcrew.reorderable.ReorderableLazyListState -import org.burnoutcrew.reorderable.detectReorder - -@Composable -internal fun NetworkGroupItem(networkName: String, modifier: Modifier = Modifier) { - InternalNetworkGroupItem(modifier = modifier, networkName = networkName) -} - -@Composable -internal fun DraggableNetworkGroupItem( - networkName: String, - modifier: Modifier = Modifier, - reorderableTokenListState: ReorderableLazyListState? = null, -) { - InternalNetworkGroupItem( - modifier = modifier, - networkName = networkName, - endIcon = { - Box( - modifier = Modifier - .size(TangemTheme.dimens.size32) - .let { - if (reorderableTokenListState != null) { - it.detectReorder(reorderableTokenListState) - } else { - it - } - }, - contentAlignment = Alignment.Center, - ) { - Icon( - painter = painterResource(id = R.drawable.ic_group_drop_24), - tint = TangemTheme.colors.icon.informative, - contentDescription = null, - ) - } - }, - ) -} - -// TODO: [REDACTED_JIRA] -@Composable -private fun InternalNetworkGroupItem( - networkName: String, - modifier: Modifier = Modifier, - endIcon: @Composable (RowScope.() -> Unit)? = null, -) { - val minHeight = if (endIcon == null) TangemTheme.dimens.size36 else TangemTheme.dimens.size40 - val padding = if (endIcon == null) { - PaddingValues( - start = TangemTheme.dimens.spacing12, - top = TangemTheme.dimens.spacing12, - end = TangemTheme.dimens.spacing12, - bottom = TangemTheme.dimens.spacing4, - ) - } else { - PaddingValues( - start = TangemTheme.dimens.spacing12, - top = TangemTheme.dimens.spacing11, - end = TangemTheme.dimens.spacing12, - bottom = TangemTheme.dimens.spacing5, - ) - } - - Row( - modifier = modifier - .background(TangemTheme.colors.background.primary) - .fillMaxWidth() - .heightIn(min = minHeight) - .padding(paddingValues = padding), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = stringResource(id = R.string.wallet_network_group_title, networkName), - style = TangemTheme.typography.subtitle2, - color = TangemTheme.colors.text.tertiary, - ) - - if (endIcon != null) endIcon() - } -} - -// region Preview -@Composable -private fun NetworkGroupItemSample(isDraggable: Boolean) { - if (isDraggable) { - DraggableNetworkGroupItem(networkName = "Ethereum") - } else { - NetworkGroupItem(networkName = "Ethereum") - } -} - -@Preview(showBackground = true, widthDp = 360) -@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES) -@Composable -private fun NetworkGroupItemPreview(@PreviewParameter(NetworkGroupProvider::class) isDraggable: Boolean) { - TangemThemePreview { - NetworkGroupItemSample(isDraggable) - } -} - -private class NetworkGroupProvider : CollectionPreviewParameterProvider( - collection = listOf(true, false), -) -// endregion Preview \ No newline at end of file diff --git a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/NetworkTitleItem.kt b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/NetworkTitleItem.kt new file mode 100644 index 0000000000..5bd9e5e129 --- /dev/null +++ b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/NetworkTitleItem.kt @@ -0,0 +1,103 @@ +package com.tangem.feature.wallet.presentation.common.component + +import android.content.res.Configuration +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxScope +import androidx.compose.foundation.layout.size +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.graphics.vector.ImageVector +import androidx.compose.ui.graphics.vector.rememberVectorPainter +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.res.vectorResource +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.components.rows.NetworkTitle +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview +import com.tangem.feature.wallet.impl.R +import org.burnoutcrew.reorderable.ReorderableLazyListState +import org.burnoutcrew.reorderable.detectReorder +import org.burnoutcrew.reorderable.rememberReorderableLazyListState + +@Composable +internal fun NetworkTitleItem(networkName: String, modifier: Modifier = Modifier) { + BaseNetworkTitleItem(networkName = networkName, modifier = modifier) +} + +@Composable +internal fun DraggableNetworkTitleItem( + networkName: String, + reorderableTokenListState: ReorderableLazyListState, + modifier: Modifier = Modifier, +) { + BaseNetworkTitleItem( + networkName = networkName, + modifier = modifier, + action = { DraggableIcon(reorderableTokenListState = reorderableTokenListState) }, + ) +} + +@Composable +private fun BaseNetworkTitleItem( + networkName: String, + modifier: Modifier = Modifier, + action: (@Composable BoxScope.() -> Unit)? = null, +) { + NetworkTitle( + title = { + Text( + text = stringResource(id = R.string.wallet_network_group_title, networkName), + style = TangemTheme.typography.subtitle2, + color = TangemTheme.colors.text.tertiary, + ) + }, + modifier = modifier, + action = action, + ) +} + +@Composable +private fun DraggableIcon(reorderableTokenListState: ReorderableLazyListState) { + Box( + modifier = Modifier + .size(TangemTheme.dimens.size32) + .detectReorder(reorderableTokenListState), + contentAlignment = Alignment.Center, + ) { + Icon( + painter = rememberVectorPainter( + image = ImageVector.vectorResource(id = R.drawable.ic_group_drop_24), + ), + contentDescription = null, + tint = TangemTheme.colors.icon.informative, + ) + } +} + +@Preview(showBackground = true, widthDp = 360) +@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun NetworkTitleItemPreview(@PreviewParameter(NetworkTitleItemProvider::class) isDraggable: Boolean) { + TangemThemePreview { + if (isDraggable) { + DraggableNetworkTitleItem( + networkName = "Ethereum", + reorderableTokenListState = rememberReorderableLazyListState(onMove = { _, _ -> }), + modifier = Modifier.background(color = TangemTheme.colors.background.primary), + ) + } else { + NetworkTitleItem( + networkName = "Ethereum", + modifier = Modifier.background(color = TangemTheme.colors.background.primary), + ) + } + } +} + +private object NetworkTitleItemProvider : CollectionPreviewParameterProvider(collection = listOf(true, false)) \ No newline at end of file diff --git a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/organizetokens/OrganizeTokensScreen.kt b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/organizetokens/OrganizeTokensScreen.kt index 0654725a22..b7df4b8f3e 100644 --- a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/organizetokens/OrganizeTokensScreen.kt +++ b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/organizetokens/OrganizeTokensScreen.kt @@ -39,7 +39,7 @@ import com.tangem.core.ui.res.TangemThemePreview import com.tangem.core.ui.utils.WindowInsetsZero import com.tangem.feature.wallet.impl.R import com.tangem.feature.wallet.presentation.common.WalletPreviewData -import com.tangem.feature.wallet.presentation.common.component.DraggableNetworkGroupItem +import com.tangem.feature.wallet.presentation.common.component.DraggableNetworkTitleItem import com.tangem.feature.wallet.presentation.organizetokens.model.DraggableItem import com.tangem.feature.wallet.presentation.organizetokens.model.OrganizeTokensListState import com.tangem.feature.wallet.presentation.organizetokens.model.OrganizeTokensState @@ -173,14 +173,16 @@ private fun LazyItemScope.DraggableItem( ) { isItemDragging -> isDragging = isItemDragging + val modifierWithBackground = itemModifier.background(color = TangemTheme.colors.background.primary) + when (item) { - is DraggableItem.GroupHeader -> DraggableNetworkGroupItem( - modifier = itemModifier, + is DraggableItem.GroupHeader -> DraggableNetworkTitleItem( + modifier = modifierWithBackground, networkName = item.networkName, reorderableTokenListState = reorderableState, ) is DraggableItem.Token -> TokenItem( - modifier = itemModifier.background(color = TangemTheme.colors.background.primary), + modifier = modifierWithBackground, state = item.tokenItemState, reorderableTokenListState = reorderableState, isBalanceHidden = isBalanceHidden, diff --git a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/multicurrency/MultiCurrencyContentItem.kt b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/multicurrency/MultiCurrencyContentItem.kt index 755447b863..6c3ca94c12 100644 --- a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/multicurrency/MultiCurrencyContentItem.kt +++ b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/multicurrency/MultiCurrencyContentItem.kt @@ -6,7 +6,7 @@ import androidx.compose.ui.Modifier import com.tangem.core.ui.components.token.TokenItem import com.tangem.core.ui.extensions.resolveReference import com.tangem.core.ui.res.TangemTheme -import com.tangem.feature.wallet.presentation.common.component.NetworkGroupItem +import com.tangem.feature.wallet.presentation.common.component.NetworkTitleItem import com.tangem.feature.wallet.presentation.wallet.state.model.WalletTokensListState.TokensListItemState /** @@ -23,15 +23,17 @@ internal fun MultiCurrencyContentItem( isBalanceHidden: Boolean, modifier: Modifier = Modifier, ) { + val modifierWithBackground = modifier.background(color = TangemTheme.colors.background.primary) + when (state) { is TokensListItemState.NetworkGroupTitle -> { - NetworkGroupItem(networkName = state.name.resolveReference(), modifier = modifier) + NetworkTitleItem(networkName = state.name.resolveReference(), modifier = modifierWithBackground) } is TokensListItemState.Token -> { TokenItem( state = state.state, isBalanceHidden = isBalanceHidden, - modifier = modifier.background(color = TangemTheme.colors.background.primary), + modifier = modifierWithBackground, ) } }