From 22318a9ab7b1bb4c4d0ed0ef7b83d82c2b57a552 Mon Sep 17 00:00:00 2001 From: Tangem Date: Fri, 31 Jul 2026 12:38:56 +0300 Subject: [PATCH] Updated on 2026-08-14 --- .../ds2/topnavigation/TangemTopNavigation.kt | 49 ++++++++++++++++--- .../ui/components/common/WalletTopBar.kt | 2 + 2 files changed, 45 insertions(+), 6 deletions(-) diff --git a/core/ui/src/main/java/com/tangem/core/ui/ds2/topnavigation/TangemTopNavigation.kt b/core/ui/src/main/java/com/tangem/core/ui/ds2/topnavigation/TangemTopNavigation.kt index 8be7187dcc..09a2dadbf7 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/ds2/topnavigation/TangemTopNavigation.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/ds2/topnavigation/TangemTopNavigation.kt @@ -4,6 +4,7 @@ import android.content.res.Configuration import androidx.compose.animation.AnimatedContent import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.core.Spring +import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.spring import androidx.compose.animation.expandHorizontally import androidx.compose.animation.expandVertically @@ -16,9 +17,11 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.layout.Layout import androidx.compose.ui.layout.layoutId import androidx.compose.ui.tooling.preview.Devices @@ -51,8 +54,10 @@ private enum class SlotId { Start, Content, Group, End } * [TangemTopNavigation.DefaultContentPadding] (top 8, bottom 16, horizontal 16). Override a single * edge via [com.tangem.core.ui.extensions.copy], e.g. `DefaultContentPadding.copy(top = 16.dp)`. * @param blurBackground Whether the fade behind the row should blur the content below. + * @param fadeEnabled Whether the fade behind the row is shown. Alpha is animated on change. Defaults to true. * @param startButton Leading slot. Typically a back button (see [TangemButton.Back]). * @param endButtonsGroup Optional pill-grouped secondary actions placed just before [endButton]. + * @param isEndButtonsGroupBackgroundShown Whether the pill-grouped secondary actions should have a background. Defaults to true. * @param endButton Trailing slot. Typically, a close button (see [TangemButton.Close]). * @param contentColumn Center slot. Place title/subtitle children here. */ @@ -64,6 +69,8 @@ fun TangemTopNavigation( windowInsets: WindowInsets = WindowInsets.statusBars, contentPadding: PaddingValues = TangemTopNavigation.DefaultContentPadding, blurBackground: Boolean = true, + fadeEnabled: Boolean = true, + isEndButtonsGroupBackgroundShown: Boolean = true, startButton: (@Composable () -> Unit)? = null, endButtonsGroup: (@Composable RowScope.() -> Unit)? = null, endButton: (@Composable () -> Unit)? = null, @@ -79,10 +86,17 @@ fun TangemTopNavigation( val slotExit = remember(slotSizeSpec, slotAlphaSpec) { fadeOut(animationSpec = slotAlphaSpec) + shrinkHorizontally(animationSpec = slotSizeSpec) } + val fadeAlpha by animateFloatAsState( + targetValue = if (fadeEnabled) 1f else 0f, + animationSpec = slotAlphaSpec, + label = "TangemTopNavigation.fadeAlpha", + ) Box(modifier) { TangemFade( - modifier = Modifier.matchParentSize(), + modifier = Modifier + .graphicsLayer { alpha = fadeAlpha } + .matchParentSize(), position = TangemFade.Position.Top, variant = TangemFade.Variant.Soft, blur = blurBackground, @@ -125,11 +139,24 @@ fun TangemTopNavigation( exit = slotExit, ) { displayedGroup?.let { group -> - TangemSurface(isMaterial = true, shape = CircleShape) { - Row( - horizontalArrangement = Arrangement.spacedBy(4.dp), - content = group, - ) + AnimatedContent( + targetState = isEndButtonsGroupBackgroundShown, + transitionSpec = { fadeIn() togetherWith fadeOut() }, + label = "TangemTopNavigation.endButtonsGroupBackground", + ) { shown -> + if (shown) { + TangemSurface(isMaterial = true, shape = CircleShape) { + Row( + horizontalArrangement = Arrangement.spacedBy(4.dp), + content = group, + ) + } + } else { + Row( + horizontalArrangement = Arrangement.spacedBy(4.dp), + content = group, + ) + } } } } @@ -209,6 +236,8 @@ fun TangemTopNavigation( windowInsets: WindowInsets = WindowInsets.statusBars, contentPadding: PaddingValues = TangemTopNavigation.DefaultContentPadding, blurBackground: Boolean = true, + fadeEnabled: Boolean = true, + isEndButtonsGroupBackgroundShown: Boolean = true, onBack: (() -> Unit)? = null, endButtonsGroup: (@Composable RowScope.() -> Unit)? = null, onClose: (() -> Unit)? = null, @@ -219,6 +248,8 @@ fun TangemTopNavigation( windowInsets = windowInsets, contentPadding = contentPadding, blurBackground = blurBackground, + fadeEnabled = fadeEnabled, + isEndButtonsGroupBackgroundShown = isEndButtonsGroupBackgroundShown, startButton = onBack?.let { { TangemButton.Back(onClick = it) } }, endButtonsGroup = endButtonsGroup, endButton = onClose?.let { { TangemButton.Close(onClick = it) } }, @@ -236,6 +267,8 @@ fun TangemTopNavigation( windowInsets: WindowInsets = WindowInsets.statusBars, contentPadding: PaddingValues = TangemTopNavigation.DefaultContentPadding, blurBackground: Boolean = true, + fadeEnabled: Boolean = true, + isEndButtonsGroupBackgroundShown: Boolean = true, endButtonsGroup: (@Composable RowScope.() -> Unit)? = null, onClose: (() -> Unit)? = null, startButton: @Composable () -> Unit, @@ -246,6 +279,8 @@ fun TangemTopNavigation( windowInsets = windowInsets, contentPadding = contentPadding, blurBackground = blurBackground, + fadeEnabled = fadeEnabled, + isEndButtonsGroupBackgroundShown = isEndButtonsGroupBackgroundShown, startButton = startButton, endButtonsGroup = endButtonsGroup, endButton = onClose?.let { { TangemButton.Close(onClick = it) } }, @@ -263,6 +298,7 @@ fun TangemTopNavigation( windowInsets: WindowInsets = WindowInsets.statusBars, contentPadding: PaddingValues = TangemTopNavigation.DefaultContentPadding, blurBackground: Boolean = true, + fadeEnabled: Boolean = true, onBack: (() -> Unit)? = null, endButton: @Composable () -> Unit, ) { @@ -272,6 +308,7 @@ fun TangemTopNavigation( windowInsets = windowInsets, contentPadding = contentPadding, blurBackground = blurBackground, + fadeEnabled = fadeEnabled, startButton = onBack?.let { { TangemButton.Back(onClick = it) } }, endButton = endButton, contentColumn = { TitleSubtitle(title = title, subtitle = subtitle) }, diff --git a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/common/WalletTopBar.kt b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/common/WalletTopBar.kt index 06f0145881..58b3c7ca28 100644 --- a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/common/WalletTopBar.kt +++ b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/wallet/ui/components/common/WalletTopBar.kt @@ -93,6 +93,8 @@ internal fun WalletTopBar( } else { null }, + isEndButtonsGroupBackgroundShown = isWrappedBalanceShown, + fadeEnabled = isWrappedBalanceShown, contentColumn = { AnimatedVisibility(visible = wrappedBalance != null) { wrappedBalance?.let { balance ->