From e9ed80c7a4f5a635378d9e51776fe2647fb36ec9 Mon Sep 17 00:00:00 2001 From: Tangem Date: Wed, 4 Dec 2024 19:34:27 +0400 Subject: [PATCH] Updated on 2026-08-14 --- .../core/ui/components/ResizableText.kt | 51 +++++++++++- .../ui/components/buttons/actions/Actions.kt | 82 +++++++++++++------ .../components/common/WalletActionButtons.kt | 21 +++-- .../multicurrency/MultiCurrencyAction.kt | 54 ++++++++++++ 4 files changed, 176 insertions(+), 32 deletions(-) create mode 100644 features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/multicurrency/MultiCurrencyAction.kt diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/ResizableText.kt b/core/ui/src/main/java/com/tangem/core/ui/components/ResizableText.kt index e63aa1c8e3..649e5c7788 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/ResizableText.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/ResizableText.kt @@ -14,6 +14,8 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.sp +private const val COEFFICIENT = 0.8f + @Suppress("MagicNumber") @Composable fun ResizableText( @@ -50,7 +52,7 @@ fun ResizableText( fontSizeValue.value = fontSizeRange.min.value readyToDraw.value = true } else { - fontSizeValue.value = nextFontSizeValue * 0.8f + fontSizeValue.value = nextFontSizeValue * COEFFICIENT } } else { readyToDraw.value = true @@ -119,6 +121,53 @@ fun ResizableText( ) } +@Composable +fun ResizableText( + text: String, + fontSizeValue: TextUnit, + fontSizeRange: FontSizeRange, + onFontSizeChange: (Float) -> Unit, + modifier: Modifier = Modifier, + color: Color = Color.Unspecified, + overflow: TextOverflow = TextOverflow.Clip, + maxLines: Int = Int.MAX_VALUE, + style: TextStyle = LocalTextStyle.current, +) { + val readyToDraw = remember { mutableStateOf(false) } + + val textState = remember { mutableStateOf(text) } + if (textState.value != text) { + readyToDraw.value = false + onFontSizeChange(fontSizeRange.max.value) + textState.value = text + } + + Text( + text = text, + modifier = modifier.drawWithContent { if (readyToDraw.value) drawContent() }, + color = color, + fontSize = fontSizeValue.value.sp, + overflow = overflow, + softWrap = false, + maxLines = maxLines, + onTextLayout = { + if (it.hasVisualOverflow) { + val nextFontSizeValue = fontSizeValue.value - fontSizeRange.step.value + if (nextFontSizeValue <= fontSizeRange.min.value) { + onFontSizeChange(fontSizeRange.min.value) + readyToDraw.value = true + } else { + val newSizeValue = nextFontSizeValue * COEFFICIENT + onFontSizeChange(newSizeValue) + } + } else { + readyToDraw.value = true + } + }, + style = style, + ) +} + data class FontSizeRange( val min: TextUnit, val max: TextUnit, diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/Actions.kt b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/Actions.kt index 14d96a5225..d5d30f90ca 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/Actions.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/Actions.kt @@ -12,6 +12,7 @@ import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -23,9 +24,9 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.tangem.core.ui.R -import com.tangem.core.ui.components.SpacerW8 import com.tangem.core.ui.extensions.TextReference import com.tangem.core.ui.extensions.resolveReference import com.tangem.core.ui.res.TangemTheme @@ -47,9 +48,19 @@ fun RoundedActionButton( modifier: Modifier = Modifier, color: Color = TangemTheme.colors.button.secondary, ) { - Button( + ActionBaseButton( config = config, shape = RoundedCornerShape(size = TangemTheme.dimens.radius24), + content = { + ActionButtonContent( + config = config, + text = { Text(text = config.text, textColor = it) }, + modifier = it.padding( + start = TangemTheme.dimens.spacing16, + end = TangemTheme.dimens.spacing24, + ), + ) + }, modifier = modifier, color = color, ) @@ -71,9 +82,19 @@ fun ActionButton( modifier: Modifier = Modifier, color: Color = TangemTheme.colors.button.secondary, ) { - Button( + ActionBaseButton( config = config, shape = RoundedCornerShape(size = TangemTheme.dimens.radius12), + content = { + ActionButtonContent( + config = config, + text = { textColor -> Text(text = config.text, textColor = textColor) }, + modifier = it.padding( + start = TangemTheme.dimens.spacing16, + end = TangemTheme.dimens.spacing24, + ), + ) + }, modifier = modifier, color = color, ) @@ -81,9 +102,10 @@ fun ActionButton( @OptIn(ExperimentalFoundationApi::class) @Composable -private fun Button( +fun ActionBaseButton( config: ActionButtonConfig, shape: RoundedCornerShape, + content: @Composable (modifier: Modifier) -> Unit, modifier: Modifier = Modifier, color: Color = TangemTheme.colors.button.secondary, ) { @@ -112,10 +134,7 @@ private fun Button( ) .background(color = backgroundColor), ) { - Content( - modifier = Modifier.align(Alignment.Center), - config = config, - ) + content(Modifier.align(Alignment.Center)) if (config.isInProgress) { Loading( @@ -129,13 +148,14 @@ private fun Button( } @Composable -private fun Content(config: ActionButtonConfig, modifier: Modifier = Modifier) { +fun ActionButtonContent( + config: ActionButtonConfig, + text: @Composable (Color) -> Unit, + modifier: Modifier = Modifier, + paddingBetweenIconAndText: Dp = 8.dp, +) { Row( modifier = modifier - .padding( - start = TangemTheme.dimens.spacing16, - end = TangemTheme.dimens.spacing24, - ) .padding(vertical = TangemTheme.dimens.spacing8), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically, @@ -152,23 +172,23 @@ private fun Content(config: ActionButtonConfig, modifier: Modifier = Modifier) { tint = iconTint, ) - SpacerW8() + Spacer(modifier = Modifier.width(width = paddingBetweenIconAndText)) - val textColor = when { - !config.enabled -> TangemTheme.colors.text.disabled - config.dimContent -> TangemTheme.colors.text.tertiary - else -> TangemTheme.colors.text.primary1 - } - Text( - text = config.text.resolveReference(), - color = textColor, - overflow = TextOverflow.Ellipsis, - maxLines = 1, - style = TangemTheme.typography.button, - ) + text(getTextColor(config)) } } +@Composable +private fun Text(text: TextReference, textColor: Color) { + Text( + text = text.resolveReference(), + color = textColor, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + style = TangemTheme.typography.button, + ) +} + @Composable private fun Loading(backgroundColor: Color, modifier: Modifier = Modifier) { Box( @@ -182,6 +202,16 @@ private fun Loading(backgroundColor: Color, modifier: Modifier = Modifier) { } } +@Composable +@ReadOnlyComposable +fun getTextColor(config: ActionButtonConfig): Color { + return when { + !config.enabled -> TangemTheme.colors.text.disabled + config.dimContent -> TangemTheme.colors.text.tertiary + else -> TangemTheme.colors.text.primary1 + } +} + @Preview(group = "RoundedActionButton", showBackground = true) @Preview(group = "RoundedActionButton", showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES) @Composable diff --git a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/common/WalletActionButtons.kt b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/common/WalletActionButtons.kt index 31a46d0a6a..e661d9994e 100644 --- a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/common/WalletActionButtons.kt +++ b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/common/WalletActionButtons.kt @@ -2,15 +2,17 @@ package com.tangem.feature.wallet.presentation.wallet.ui.components.common import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyListScope -import androidx.compose.runtime.key +import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.tangem.core.ui.components.FontSizeRange import com.tangem.core.ui.components.buttons.HorizontalActionChips -import com.tangem.core.ui.components.buttons.actions.ActionButton import com.tangem.core.ui.res.TangemTheme import com.tangem.feature.wallet.presentation.wallet.state.model.WalletManageButton import com.tangem.feature.wallet.presentation.wallet.ui.components.fastForEach +import com.tangem.feature.wallet.presentation.wallet.ui.components.multicurrency.MultiCurrencyAction import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.toImmutableList @@ -64,9 +66,18 @@ internal fun LazyListScope.actions( horizontalArrangement = Arrangement.spacedBy(space = TangemTheme.dimens.spacing8), verticalAlignment = Alignment.CenterVertically, ) { - actions.fastForEach { - key(it::class.java) { - ActionButton(config = it.config, modifier = Modifier.weight(1f)) + val fontSizeRange = FontSizeRange(min = 10.sp, max = 14.sp) + var fontSizeValue by remember { mutableFloatStateOf(fontSizeRange.max.value) } + + actions.fastForEach { action -> + key(action::class.java) { + MultiCurrencyAction( + config = action.config, + fontSizeValue = fontSizeValue.sp, + fontSizeRange = fontSizeRange, + onFontSizeChange = { fontSizeValue = it }, + modifier = Modifier.weight(1f), + ) } } } diff --git a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/multicurrency/MultiCurrencyAction.kt b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/multicurrency/MultiCurrencyAction.kt new file mode 100644 index 0000000000..e82c67b4fe --- /dev/null +++ b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/multicurrency/MultiCurrencyAction.kt @@ -0,0 +1,54 @@ +package com.tangem.feature.wallet.presentation.wallet.ui.components.multicurrency + +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.TextUnit +import androidx.compose.ui.unit.dp +import com.tangem.core.ui.components.FontSizeRange +import com.tangem.core.ui.components.ResizableText +import com.tangem.core.ui.components.buttons.actions.ActionBaseButton +import com.tangem.core.ui.components.buttons.actions.ActionButtonConfig +import com.tangem.core.ui.components.buttons.actions.ActionButtonContent +import com.tangem.core.ui.extensions.resolveReference +import com.tangem.core.ui.res.TangemTheme + +/** +[REDACTED_AUTHOR] + */ +@Composable +internal fun MultiCurrencyAction( + config: ActionButtonConfig, + fontSizeValue: TextUnit, + fontSizeRange: FontSizeRange, + onFontSizeChange: (Float) -> Unit, + modifier: Modifier = Modifier, +) { + ActionBaseButton( + config = config, + shape = RoundedCornerShape(size = TangemTheme.dimens.radius12), + content = { contentModifier -> + ActionButtonContent( + config = config, + text = { color -> + ResizableText( + text = config.text.resolveReference(), + fontSizeValue = fontSizeValue, + fontSizeRange = fontSizeRange, + onFontSizeChange = onFontSizeChange, + color = color, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + style = TangemTheme.typography.button, + ) + }, + modifier = contentModifier.padding(horizontal = 4.dp), + paddingBetweenIconAndText = 4.dp, + ) + }, + modifier = modifier, + color = TangemTheme.colors.button.secondary, + ) +} \ No newline at end of file