diff --git a/core/ui/src/main/java/com/tangem/core/ui/ds/tabs/TangemSegmentedPicker.kt b/core/ui/src/main/java/com/tangem/core/ui/ds/tabs/TangemSegmentedPicker.kt index 3f98cea45a..b685eab6d8 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/ds/tabs/TangemSegmentedPicker.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/ds/tabs/TangemSegmentedPicker.kt @@ -2,6 +2,7 @@ package com.tangem.core.ui.ds.tabs import android.content.res.Configuration import androidx.compose.animation.core.animateDpAsState +import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.tween import androidx.compose.foundation.background import androidx.compose.foundation.clickable @@ -13,6 +14,7 @@ import androidx.compose.runtime.* import androidx.compose.runtime.snapshots.SnapshotStateList import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.shadow import androidx.compose.ui.layout.onGloballyPositioned @@ -52,7 +54,6 @@ fun TangemSegmentedPicker( items = tangemSegmentedPickerUM.items, modifier = modifier, initialSelectedItem = tangemSegmentedPickerUM.initialSelectedItem, - hasSeparator = tangemSegmentedPickerUM.hasSeparator, isFixed = tangemSegmentedPickerUM.isFixed, isAltSurface = tangemSegmentedPickerUM.isAltSurface, onClick = onClick, @@ -66,7 +67,6 @@ fun TangemSegmentedPicker( * @param items List of TangemSegmentUM representing the segments in the picker. * @param modifier Modifier to be applied to the segmented picker. * @param initialSelectedItem Optional TangemSegmentUM representing the initially selected segment. - * @param hasSeparator Boolean indicating whether there is a separator between segments. * @param isFixed Boolean indicating whether the picker has a fixed width. * @param isAltSurface Boolean indicating whether to use an alternative surface style. * @param onClick Lambda function to be invoked when a segment is clicked. @@ -76,7 +76,6 @@ fun TangemSegmentedPicker( items: ImmutableList, modifier: Modifier = Modifier, initialSelectedItem: TangemSegmentUM? = null, - hasSeparator: Boolean = false, isFixed: Boolean = false, isAltSurface: Boolean = false, minSegmentWidth: Dp = Dp.Unspecified, @@ -91,11 +90,6 @@ fun TangemSegmentedPicker( val segmentHeight = remember { mutableStateOf(0.dp) } val shape = RoundedCornerShape(TangemTheme.dimens2.x25) - val spacing = if (hasSeparator) { - TangemTheme.dimens2.x4 - } else { - TangemTheme.dimens2.x1 - } Box( modifier = modifier @@ -113,12 +107,8 @@ fun TangemSegmentedPicker( itemsWidths = itemsWidths, selectedIndex = selectedIndex.value, segmentHeight = segmentHeight.value, - spacing = spacing, ) - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(spacing), - ) { + Row(verticalAlignment = Alignment.CenterVertically) { items.fastForEachIndexed { index, item -> Segment( item = item, @@ -135,15 +125,34 @@ fun TangemSegmentedPicker( } }, ) + + if (index != items.lastIndex) { + val selected by selectedIndex + val alpha by animateFloatAsState( + targetValue = if (selected == index || selected == index + 1) 0f else 1f, + animationSpec = tween(durationMillis = 300), + label = "separatorAlpha", + ) + + Box( + Modifier + .alpha(alpha) + .width(0.5.dp) + .height(20.dp) + .background( + color = TangemTheme.colors2.border.neutral.tertiary.copy(alpha = 0.1f), + ), + ) + } } } } } @Composable -private fun SegmentSelection(itemsWidths: SnapshotStateList, selectedIndex: Int, segmentHeight: Dp, spacing: Dp) { +private fun SegmentSelection(itemsWidths: SnapshotStateList, selectedIndex: Int, segmentHeight: Dp) { val indicatorOffset by animateDpAsState( - targetValue = itemsWidths.take(selectedIndex).fold(0.dp, Dp::plus) + spacing * selectedIndex, + targetValue = itemsWidths.take(selectedIndex).fold(0.dp, Dp::plus), animationSpec = tween(durationMillis = 300), label = "indicatorOffset", ) @@ -228,7 +237,6 @@ private fun TangemSegmentedPicker_Preview(@PreviewParameter(PreviewProvider::cla ) { TangemSegmentedPicker( isFixed = params.isFixed, - hasSeparator = params.hasSeparator, isAltSurface = params.isAltSurface, items = params.items, initialSelectedItem = params.items.last(), @@ -248,25 +256,21 @@ private class PreviewProvider : PreviewParameterProvider, val initialSelectedItem: TangemSegmentUM? = null, - val hasSeparator: Boolean = false, val isFixed: Boolean = false, val isAltSurface: Boolean = false, ) diff --git a/core/ui/src/main/java/com/tangem/core/ui/res/TangemThemeRedesign.kt b/core/ui/src/main/java/com/tangem/core/ui/res/TangemThemeRedesign.kt index adac73f3c7..8428d0f240 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/res/TangemThemeRedesign.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/res/TangemThemeRedesign.kt @@ -94,7 +94,7 @@ private fun lightThemeColors2(): TangemColors2 { neutral = TangemColors2.Border.Neutral( primary = TangemColorPalette.Light3, secondary = TangemColorPalette.Light5, - tertiary = TangemColorPalette.Light_10, + tertiary = TangemColorPalette.Dark_10, quaternary = TangemColorPalette.Dark_10, ), status = TangemColors2.Border.Status( diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/detailed/MarketsTokenDetailsContent.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/detailed/MarketsTokenDetailsContent.kt index eb0862ce2e..8cbb7fb5e1 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/detailed/MarketsTokenDetailsContent.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/detailed/MarketsTokenDetailsContent.kt @@ -32,6 +32,8 @@ import com.tangem.core.ui.components.buttons.segmentedbutton.SegmentedButtons import com.tangem.core.ui.components.currency.icon.CoinIcon import com.tangem.core.ui.components.marketprice.PriceChangeInPercent import com.tangem.core.ui.components.marketprice.PriceChangeType +import com.tangem.core.ui.ds.tabs.TangemSegmentUM +import com.tangem.core.ui.ds.tabs.TangemSegmentedPicker import com.tangem.core.ui.event.EventEffect import com.tangem.core.ui.event.StateEvent import com.tangem.core.ui.extensions.TextReference @@ -49,6 +51,7 @@ import com.tangem.features.feed.ui.market.detailed.state.InfoBottomSheetContent import com.tangem.features.feed.ui.market.detailed.state.MarketsTokenDetailsUM import com.tangem.features.feed.ui.market.detailed.state.SecurityScoreBottomSheetContent import kotlinx.collections.immutable.persistentListOf +import kotlinx.collections.immutable.toImmutableList import kotlinx.coroutines.flow.distinctUntilChanged import com.tangem.core.ui.R as CoreR @@ -245,6 +248,26 @@ private fun IntervalSelector( onIntervalClick: (PriceChangeInterval) -> Unit, modifier: Modifier = Modifier, ) { + if (LocalRedesignEnabled.current) { + val items = remember { + PriceChangeInterval.entries + .map { TangemSegmentUM(it.toString(), it.getText()) }.toImmutableList() + } + val selectedItem = remember(trendInterval) { + items.firstOrNull { it.id == trendInterval.toString() } + } + + TangemSegmentedPicker( + items = items, + initialSelectedItem = selectedItem, + isFixed = true, + modifier = modifier, + onClick = { onIntervalClick(PriceChangeInterval.valueOf(it.id)) }, + ) + + return + } + SegmentedButtons( config = persistentListOf( PriceChangeInterval.H24, @@ -296,7 +319,6 @@ private fun ShowPriceSubtitleEffect(lazyListState: LazyListState, onShouldShowPr } } -@Composable fun PriceChangeInterval.getText(): TextReference { return when (this) { PriceChangeInterval.H24 -> resourceReference(R.string.markets_selector_interval_24h_title) diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/detailed/components/InsightsBlock.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/detailed/components/InsightsBlock.kt index 18c97a1f39..0d0dc27c6a 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/detailed/components/InsightsBlock.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/detailed/components/InsightsBlock.kt @@ -146,7 +146,6 @@ private fun InsightsBlockV2(state: InsightsUM, modifier: Modifier = Modifier) { TangemSegmentedPicker( items = segmentItems, initialSelectedItem = segmentItems.first(), - hasSeparator = true, isFixed = false, isAltSurface = true, minSegmentWidth = 48.dp, diff --git a/features/tester/impl/src/main/java/com/tangem/feature/tester/presentation/storybook/page/tabs/TangemSegmentedPickerStory.kt b/features/tester/impl/src/main/java/com/tangem/feature/tester/presentation/storybook/page/tabs/TangemSegmentedPickerStory.kt index df03dcb6d4..ac87504551 100644 --- a/features/tester/impl/src/main/java/com/tangem/feature/tester/presentation/storybook/page/tabs/TangemSegmentedPickerStory.kt +++ b/features/tester/impl/src/main/java/com/tangem/feature/tester/presentation/storybook/page/tabs/TangemSegmentedPickerStory.kt @@ -45,15 +45,12 @@ private val items5 = persistentListOf( private data class PickerConfig( val label: String, - val hasSeparator: Boolean, val isFixed: Boolean, ) private val configs = listOf( - PickerConfig("Default", hasSeparator = false, isFixed = false), - PickerConfig("Separator", hasSeparator = true, isFixed = false), - PickerConfig("Fixed", hasSeparator = false, isFixed = true), - PickerConfig("Fixed + Separator", hasSeparator = true, isFixed = true), + PickerConfig("Default", isFixed = false), + PickerConfig("Fixed", isFixed = true), ) @Composable @@ -119,7 +116,6 @@ private fun PickerRow(config: PickerConfig, isAltSurface: Boolean) { ) TangemSegmentedPicker( items = items4, - hasSeparator = config.hasSeparator, isFixed = config.isFixed, isAltSurface = isAltSurface, onClick = {},