From a54c3ce6eaf791f451d9988690df8acf9dd6c785 Mon Sep 17 00:00:00 2001 From: Tangem Date: Tue, 12 May 2026 09:49:50 +0200 Subject: [PATCH] Updated on 2026-08-14 --- .../tokenselector/TokenSelectorBottomSheet.kt | 33 +--- .../com/tangem/core/ui/components/Fade.kt | 12 ++ .../tangem/core/ui/components/FadeModifier.kt | 25 ++- .../ui/ds/field/search/TangemSearchField.kt | 8 +- .../components/earn/DefaultEarnComponent.kt | 22 +-- .../DefaultMarketsTokenDetailsComponent.kt | 25 +-- .../list/DefaultMarketsTokenListComponent.kt | 22 +-- .../details/DefaultNewsDetailsComponent.kt | 25 +-- .../news/list/DefaultNewsListComponent.kt | 18 +- .../search/DefaultSearchComponent.kt | 11 -- .../tangem/features/feed/ui/EntryContent.kt | 182 ++++++++++++------ .../feed/ui/components/FeedSearchBar.kt | 5 +- .../tangem/features/feed/ui/feed/FeedList.kt | 22 +-- .../feed/ui/market/list/MarketsList.kt | 30 ++- .../feed/ui/market/list/components/Options.kt | 15 +- .../feed/ui/news/list/NewsListContent.kt | 48 +++-- .../features/feed/ui/utils/FadeConstants.kt | 7 + 17 files changed, 269 insertions(+), 241 deletions(-) create mode 100644 features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/utils/FadeConstants.kt diff --git a/common/ui-markets/src/main/kotlin/com/tangem/common/ui/markets/tokenselector/TokenSelectorBottomSheet.kt b/common/ui-markets/src/main/kotlin/com/tangem/common/ui/markets/tokenselector/TokenSelectorBottomSheet.kt index 2aff7dd2e3..65ebf6b827 100644 --- a/common/ui-markets/src/main/kotlin/com/tangem/common/ui/markets/tokenselector/TokenSelectorBottomSheet.kt +++ b/common/ui-markets/src/main/kotlin/com/tangem/common/ui/markets/tokenselector/TokenSelectorBottomSheet.kt @@ -1,8 +1,6 @@ package com.tangem.common.ui.markets.tokenselector import android.content.res.Configuration -import androidx.compose.animation.core.EaseOut -import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.shape.CircleShape @@ -10,6 +8,7 @@ import androidx.compose.material3.Icon import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.platform.LocalDensity @@ -19,19 +18,18 @@ import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.tangem.core.ui.R -import com.tangem.core.ui.components.Fade import com.tangem.core.ui.components.bottomsheets.TangemBottomSheet import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetType import com.tangem.core.ui.components.haze.hazeEffectTangem import com.tangem.core.ui.components.haze.hazeSourceTangem +import com.tangem.core.ui.components.topFade import com.tangem.core.ui.ds.topbar.TangemTopBar import com.tangem.core.ui.ds.topbar.TangemTopBarType import com.tangem.core.ui.extensions.clickableSingle import com.tangem.core.ui.extensions.resourceReference import com.tangem.core.ui.res.TangemTheme import com.tangem.core.ui.res.TangemThemePreviewRedesign -import dev.chrisbanes.haze.HazeProgressive import dev.chrisbanes.haze.HazeState import dev.chrisbanes.haze.rememberHazeState @@ -84,8 +82,11 @@ private fun TokenSelectorContent( Box(modifier = modifier.fillMaxWidth()) { val bottomFadeReserve = if (embedded) 0.dp else TangemTheme.dimens2.x10 val bottomListPadding = bottomFadeReserve + scrollBottomInset + val topFadeColor = TangemTheme.colors2.surface.level2.copy(alpha = .95f) LazyColumn( - modifier = Modifier.hazeSourceTangem(state = hazeState, 1f), + modifier = Modifier + .hazeSourceTangem(state = hazeState, 1f) + .topFade(height = topBarHeight, color = topFadeColor, solidStop = .6f), contentPadding = PaddingValues( start = TangemTheme.dimens2.x4, end = TangemTheme.dimens2.x4, @@ -102,12 +103,6 @@ private fun TokenSelectorContent( hazeState = hazeState, onChangeHeight = { topBarHeight = it }, ) - Fade( - modifier = Modifier - .fillMaxWidth() - .align(Alignment.BottomCenter), - height = TangemTheme.dimens2.x10, - ) } } } @@ -119,7 +114,6 @@ private fun TokenSelectorSheetTopBar( onChangeHeight: (Dp) -> Unit, modifier: Modifier = Modifier, ) { - val bgColor = TangemTheme.colors2.surface.level2 val density = LocalDensity.current TangemTopBar( modifier = modifier @@ -129,15 +123,6 @@ private fun TokenSelectorSheetTopBar( onChangeHeight(coordinates.size.height.toDp()) } } - } - .hazeEffectTangem(state = hazeState) { - backgroundColor = bgColor - progressive = HazeProgressive.verticalGradient( - startIntensity = .55f, - endIntensity = 0f, - preferPerformance = true, - easing = EaseOut, - ) }, type = TangemTopBarType.BottomSheet, title = resourceReference(R.string.markets_search_portfolio_header), @@ -148,10 +133,8 @@ private fun TokenSelectorSheetTopBar( tint = TangemTheme.colors2.graphic.neutral.primary, modifier = Modifier .size(TangemTheme.dimens2.x11) - .background( - color = TangemTheme.colors2.button.backgroundSecondary, - shape = CircleShape, - ) + .clip(CircleShape) + .hazeEffectTangem(state = hazeState) { blurRadius = 8.dp } .clickableSingle(onClick = onDismiss) .padding(TangemTheme.dimens2.x2_5), ) diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/Fade.kt b/core/ui/src/main/java/com/tangem/core/ui/components/Fade.kt index 709b5a6625..12c987787d 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/Fade.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/Fade.kt @@ -47,6 +47,18 @@ fun BottomFade( ) } +@Composable +fun TopFade(vararg colorStops: Pair, modifier: Modifier = Modifier, height: Dp = 100.dp) { + Box( + modifier = modifier + .fillMaxWidth() + .height(height) + .background( + brush = Brush.verticalGradient(colorStops = colorStops), + ), + ) +} + /** * A composable that draws a fade effect at the bottom of the screen. Used on screens with a list of repeating * elements and floating button at the bottom of the screen. diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/FadeModifier.kt b/core/ui/src/main/java/com/tangem/core/ui/components/FadeModifier.kt index 50eaa752d7..5b934bcc3c 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/FadeModifier.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/FadeModifier.kt @@ -25,10 +25,8 @@ fun Modifier.edgeFade( isVisible: Boolean = true, animationSpec: AnimationSpec? = null, color: Color = TangemTheme.colors.background.secondary, + solidStop: Float = 0f, ): Modifier = composed { - require(value = size > 0.dp) { - "Size must be greater than '0'" - } val animatedSize = animationSpec?.let { spec -> animateDpAsState( targetValue = if (isVisible) size else 0.dp, @@ -45,6 +43,7 @@ fun Modifier.edgeFade( val staticSizePx = if (isVisible) size.toPx() else 0f val sizePx = animatedSize?.value?.toPx() ?: staticSizePx + if (sizePx <= 0f) return@forEach val fraction = when (side) { FadePosition.LEFT, FadePosition.RIGHT -> sizePx / this.size.width @@ -54,6 +53,7 @@ fun Modifier.edgeFade( drawRect( brush = Brush.linearGradient( 0f to color, + solidStop.coerceIn(minimumValue = 0f, maximumValue = 1f) * fraction to color, fraction to Color.Transparent, start = start, end = end, @@ -74,6 +74,25 @@ fun Modifier.bottomFade( color = color, ) +/** + * Draws a vertical gradient fade over the top edge of the content. + * + * @param height the fade region height + * @param color the solid color at the top edge that fades to transparent at the bottom of the region + * @param solidStop fraction (0..1) of [height] kept fully [color] before the fade starts + */ +@Composable +fun Modifier.topFade( + height: Dp, + color: Color = TangemTheme.colors.background.secondary, + solidStop: Float = 0f, +): Modifier = edgeFade( + FadePosition.TOP, + size = height, + color = color, + solidStop = solidStop, +) + enum class FadePosition { TOP, BOTTOM, LEFT, RIGHT } diff --git a/core/ui/src/main/java/com/tangem/core/ui/ds/field/search/TangemSearchField.kt b/core/ui/src/main/java/com/tangem/core/ui/ds/field/search/TangemSearchField.kt index 905ef8c5fb..c341a7949c 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/ds/field/search/TangemSearchField.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/ds/field/search/TangemSearchField.kt @@ -46,9 +46,11 @@ 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.PreviewParameterProvider +import androidx.compose.ui.unit.dp import androidx.compose.ui.util.fastForEach import com.tangem.core.ui.R import com.tangem.core.ui.components.fields.entity.SearchBarUM +import com.tangem.core.ui.components.haze.hazeEffectTangem import com.tangem.core.ui.ds.button.GhostTangemButton import com.tangem.core.ui.ds.button.TangemButtonSize import com.tangem.core.ui.extensions.resolveReference @@ -177,7 +179,11 @@ private fun DecorationBox( contentAlignment = BiasAlignment(horizontalBias = alignmentBias, verticalBias = 0f), modifier = Modifier .weight(1f) - .background(color, shape.toShape()) + .clip(shape.toShape()) + .background(color) + .hazeEffectTangem { + blurRadius = 8.dp + } .padding(TangemTheme.dimens2.x3), ) { Row( diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/earn/DefaultEarnComponent.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/earn/DefaultEarnComponent.kt index 9e4094404f..f61f46c0a3 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/earn/DefaultEarnComponent.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/earn/DefaultEarnComponent.kt @@ -1,7 +1,5 @@ package com.tangem.features.feed.components.earn -import androidx.compose.animation.core.EaseOut -import androidx.compose.foundation.background import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -11,9 +9,10 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.State import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.drawBehind +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.arkivanov.decompose.ComponentContext import com.arkivanov.decompose.extensions.compose.subscribeAsState @@ -41,7 +40,6 @@ import com.tangem.features.feed.model.earn.EarnModel import com.tangem.features.feed.model.earn.analytics.EarnSource import com.tangem.features.feed.ui.components.FeedSearchBar import com.tangem.features.feed.ui.earn.EarnContent -import dev.chrisbanes.haze.HazeProgressive internal class DefaultEarnComponent( appComponentContext: AppComponentContext, @@ -66,16 +64,6 @@ internal class DefaultEarnComponent( FeedSearchBar( isSearchBarClickable = bottomSheetState.value == BottomSheetState.EXPANDED, feedListSearchBar = state.feedListSearchBar, - modifier = Modifier - .drawBehind { drawRect(background) } - .hazeEffectTangem { - progressive = HazeProgressive.verticalGradient( - startIntensity = .55f, - endIntensity = 0f, - preferPerformance = true, - easing = EaseOut, - ) - }, startContent = { Icon( imageVector = ImageVector.vectorResource(id = R.drawable.ic_arrow_back_28), @@ -83,10 +71,8 @@ internal class DefaultEarnComponent( tint = TangemTheme.colors2.graphic.neutral.primary, modifier = Modifier .size(TangemTheme.dimens2.x11) - .background( - color = TangemTheme.colors2.button.backgroundSecondary, - shape = CircleShape, - ) + .clip(CircleShape) + .hazeEffectTangem { blurRadius = 8.dp } .clickableSingle( onClick = state.onBackClick, enabled = bottomSheetState.value == BottomSheetState.EXPANDED, diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/market/details/DefaultMarketsTokenDetailsComponent.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/market/details/DefaultMarketsTokenDetailsComponent.kt index cb37e92734..9fb1688ccd 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/market/details/DefaultMarketsTokenDetailsComponent.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/market/details/DefaultMarketsTokenDetailsComponent.kt @@ -1,7 +1,5 @@ package com.tangem.features.feed.components.market.details -import androidx.compose.animation.core.EaseOut -import androidx.compose.foundation.background import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -12,8 +10,10 @@ import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.State import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.LifecycleStartEffect import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.arkivanov.decompose.ComponentContext @@ -50,7 +50,6 @@ import com.tangem.features.feed.model.market.details.analytics.MarketDetailsAnal import com.tangem.features.feed.model.market.details.state.TokenNetworksState import com.tangem.features.feed.ui.market.detailed.MarketsTokenDetailsContent import com.tangem.features.feed.ui.market.detailed.MarketsTokenDetailsTopBar -import dev.chrisbanes.haze.HazeProgressive import kotlinx.coroutines.flow.collectLatest import kotlinx.coroutines.launch import kotlinx.serialization.Serializable @@ -161,14 +160,6 @@ internal class DefaultMarketsTokenDetailsComponent( val background = LocalMainBottomSheetColor.current.value if (LocalRedesignEnabled.current) { TangemTopBar( - modifier = Modifier.hazeEffectTangem { - progressive = HazeProgressive.verticalGradient( - startIntensity = .55f, - endIntensity = 0f, - preferPerformance = true, - easing = EaseOut, - ) - }, startContent = { Icon( imageVector = ImageVector.vectorResource(id = R.drawable.ic_arrow_back_28), @@ -176,10 +167,8 @@ internal class DefaultMarketsTokenDetailsComponent( tint = TangemTheme.colors2.graphic.neutral.primary, modifier = Modifier .size(TangemTheme.dimens2.x11) - .background( - color = TangemTheme.colors2.button.backgroundSecondary, - shape = CircleShape, - ) + .clip(CircleShape) + .hazeEffectTangem { blurRadius = 8.dp } .clickableSingle( onClick = { params.onBackClicked() }, enabled = bottomSheetState.value == BottomSheetState.EXPANDED, @@ -194,10 +183,8 @@ internal class DefaultMarketsTokenDetailsComponent( tint = TangemTheme.colors2.graphic.neutral.primary, modifier = Modifier .size(TangemTheme.dimens2.x11) - .background( - color = TangemTheme.colors2.button.backgroundSecondary, - shape = CircleShape, - ) + .clip(CircleShape) + .hazeEffectTangem { blurRadius = 8.dp } .clickableSingle( onClick = state.onShareClick, enabled = bottomSheetState.value == BottomSheetState.EXPANDED, diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/market/list/DefaultMarketsTokenListComponent.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/market/list/DefaultMarketsTokenListComponent.kt index 79cbf99fa3..ceaa6edccd 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/market/list/DefaultMarketsTokenListComponent.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/market/list/DefaultMarketsTokenListComponent.kt @@ -11,9 +11,10 @@ import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.State import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.drawBehind +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.LifecycleStartEffect import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.tangem.core.decompose.context.AppComponentContext @@ -34,7 +35,6 @@ import com.tangem.features.feed.model.market.list.state.SortByTypeUM import com.tangem.features.feed.ui.components.FeedSearchBar import com.tangem.features.feed.ui.market.list.MarketsList import com.tangem.features.feed.ui.market.list.TopBarWithSearch -import dev.chrisbanes.haze.HazeProgressive import kotlinx.serialization.Serializable internal class DefaultMarketsTokenListComponent( @@ -54,21 +54,13 @@ internal class DefaultMarketsTokenListComponent( override fun Title(bottomSheetState: State) { val state by model.state.collectAsStateWithLifecycle() val bsState by bottomSheetState - val background = LocalMainBottomSheetColor.current.value if (LocalRedesignEnabled.current) { + val background = LocalMainBottomSheetColor.current.value FeedSearchBar( isSearchBarClickable = bottomSheetState.value == BottomSheetState.EXPANDED, feedListSearchBar = state.feedListSearchBar, - modifier = Modifier - .drawBehind { drawRect(background) } - .hazeEffectTangem { - progressive = HazeProgressive.verticalGradient( - startIntensity = .55f, - endIntensity = .2f, - preferPerformance = true, - ) - }, + modifier = Modifier.background(background.copy(alpha = .95f)), startContent = { Icon( imageVector = ImageVector.vectorResource(id = R.drawable.ic_arrow_back_28), @@ -76,10 +68,8 @@ internal class DefaultMarketsTokenListComponent( tint = TangemTheme.colors2.graphic.neutral.primary, modifier = Modifier .size(TangemTheme.dimens2.x11) - .background( - color = TangemTheme.colors2.button.backgroundSecondary, - shape = CircleShape, - ) + .clip(CircleShape) + .hazeEffectTangem { blurRadius = 8.dp } .clickableSingle( onClick = clickIntents.onBackClicked, enabled = bottomSheetState.value == BottomSheetState.EXPANDED, diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/news/details/DefaultNewsDetailsComponent.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/news/details/DefaultNewsDetailsComponent.kt index 47732db33e..08f7fa5752 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/news/details/DefaultNewsDetailsComponent.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/news/details/DefaultNewsDetailsComponent.kt @@ -1,7 +1,5 @@ package com.tangem.features.feed.components.news.details -import androidx.compose.animation.core.EaseOut -import androidx.compose.foundation.background import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -11,8 +9,10 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.State import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.tangem.core.decompose.context.AppComponentContext import com.tangem.core.decompose.model.getOrCreateModel @@ -34,7 +34,6 @@ import com.tangem.domain.news.model.NewsListConfig import com.tangem.features.feed.model.news.details.NewsDetailsModel import com.tangem.features.feed.ui.news.details.NewsDetailsContent import com.tangem.features.feed.ui.news.details.state.ArticlesStateUM -import dev.chrisbanes.haze.HazeProgressive import kotlinx.serialization.Serializable internal class DefaultNewsDetailsComponent( @@ -50,14 +49,6 @@ internal class DefaultNewsDetailsComponent( val state by newsDetailsModel.state.collectAsStateWithLifecycle() if (LocalRedesignEnabled.current) { TangemTopBar( - modifier = Modifier.hazeEffectTangem { - progressive = HazeProgressive.verticalGradient( - startIntensity = .55f, - endIntensity = 0f, - preferPerformance = true, - easing = EaseOut, - ) - }, type = TangemTopBarType.BottomSheet, startContent = { Icon( @@ -66,10 +57,8 @@ internal class DefaultNewsDetailsComponent( tint = TangemTheme.colors2.graphic.neutral.primary, modifier = Modifier .size(TangemTheme.dimens2.x11) - .background( - color = TangemTheme.colors2.button.backgroundSecondary, - shape = CircleShape, - ) + .clip(CircleShape) + .hazeEffectTangem { blurRadius = 8.dp } .clickableSingle( onClick = state.onBackClick, enabled = bottomSheetState.value == BottomSheetState.EXPANDED, @@ -84,10 +73,8 @@ internal class DefaultNewsDetailsComponent( tint = TangemTheme.colors2.graphic.neutral.primary, modifier = Modifier .size(TangemTheme.dimens2.x11) - .background( - color = TangemTheme.colors2.button.backgroundSecondary, - shape = CircleShape, - ) + .clip(CircleShape) + .hazeEffectTangem { blurRadius = 8.dp } .clickableSingle( onClick = state.onShareClick, enabled = bottomSheetState.value == BottomSheetState.EXPANDED && diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/news/list/DefaultNewsListComponent.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/news/list/DefaultNewsListComponent.kt index 1325a29be6..480da418e5 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/news/list/DefaultNewsListComponent.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/news/list/DefaultNewsListComponent.kt @@ -10,8 +10,10 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.State import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.tangem.core.decompose.context.AppComponentContext import com.tangem.core.decompose.model.getOrCreateModel @@ -32,7 +34,6 @@ import com.tangem.core.ui.res.TangemTheme import com.tangem.domain.news.model.NewsListConfig import com.tangem.features.feed.model.news.list.NewsListModel import com.tangem.features.feed.ui.news.list.NewsListContent -import dev.chrisbanes.haze.HazeProgressive import kotlinx.serialization.Serializable internal class DefaultNewsListComponent( @@ -48,14 +49,7 @@ internal class DefaultNewsListComponent( val state by newsListModel.state.collectAsStateWithLifecycle() if (LocalRedesignEnabled.current) { TangemTopBar( - modifier = Modifier.hazeEffectTangem { - progressive = HazeProgressive.verticalGradient( - startIntensity = .55f, - endIntensity = .2f, - preferPerformance = true, - ) - backgroundColor = background - }, + modifier = Modifier.background(background.copy(alpha = .95f)), title = resourceReference(R.string.common_news), type = TangemTopBarType.BottomSheet, startContent = { @@ -65,10 +59,8 @@ internal class DefaultNewsListComponent( tint = TangemTheme.colors2.graphic.neutral.primary, modifier = Modifier .size(TangemTheme.dimens2.x11) - .background( - color = TangemTheme.colors2.button.backgroundSecondary, - shape = CircleShape, - ) + .clip(CircleShape) + .hazeEffectTangem { blurRadius = 8.dp } .clickableSingle( onClick = state.onBackClick, enabled = bottomSheetState.value == BottomSheetState.EXPANDED, diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/search/DefaultSearchComponent.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/search/DefaultSearchComponent.kt index 0ad95b2ae6..1947475d45 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/search/DefaultSearchComponent.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/components/search/DefaultSearchComponent.kt @@ -1,6 +1,5 @@ package com.tangem.features.feed.components.search -import androidx.compose.animation.core.EaseOut import androidx.compose.foundation.layout.PaddingValues import androidx.compose.runtime.* import androidx.compose.ui.Modifier @@ -13,7 +12,6 @@ import com.tangem.core.decompose.context.AppComponentContext import com.tangem.core.decompose.context.childByContext import com.tangem.core.decompose.model.getOrCreateModel import com.tangem.core.ui.components.bottomsheets.state.BottomSheetState -import com.tangem.core.ui.components.haze.hazeEffectTangem import com.tangem.core.ui.decompose.ComposableBottomSheetComponent import com.tangem.core.ui.decompose.ComposableModularBottomSheetContentComponent import com.tangem.core.ui.ds.field.search.TangemFieldShape @@ -25,7 +23,6 @@ import com.tangem.domain.markets.TokenMarketParams import com.tangem.features.feed.model.search.SearchModel import com.tangem.features.feed.ui.search.SearchContent import com.tangem.features.feed.ui.search.state.SearchCallbacks -import dev.chrisbanes.haze.HazeProgressive internal class DefaultSearchComponent( appComponentContext: AppComponentContext, @@ -53,14 +50,6 @@ internal class DefaultSearchComponent( } TangemTopBar( - modifier = Modifier.hazeEffectTangem { - progressive = HazeProgressive.verticalGradient( - startIntensity = .55f, - endIntensity = 0f, - preferPerformance = true, - easing = EaseOut, - ) - }, type = TangemTopBarType.BottomSheet, reserveSlotSpace = false, content = { diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/EntryContent.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/EntryContent.kt index bd372df7e7..24bc03a3c9 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/EntryContent.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/EntryContent.kt @@ -18,6 +18,7 @@ import com.arkivanov.decompose.extensions.compose.stack.Children import com.arkivanov.decompose.router.stack.ChildStack import com.tangem.core.ui.components.bottomsheets.state.BottomSheetState import com.tangem.core.ui.components.haze.hazeSourceTangem +import com.tangem.core.ui.components.topFade import com.tangem.core.ui.decompose.ComposableModularBottomSheetContentComponent import com.tangem.core.ui.extensions.conditionalCompose import com.tangem.core.ui.res.LocalHazeState @@ -26,10 +27,19 @@ import com.tangem.core.ui.res.LocalRedesignEnabled import com.tangem.core.ui.res.TangemTheme import com.tangem.core.ui.utils.WindowInsetsZero import com.tangem.features.feed.components.FeedEntryChildFactory +import com.tangem.features.feed.ui.utils.FadeConstants.BASE_FADE_LEVEL import com.tangem.features.feed.ui.utils.contentFeedEntryStackAnimation import com.tangem.features.feed.ui.utils.topBarFeedEntryAnimatedContentTransitionSpec import dev.chrisbanes.haze.rememberHazeState +/** + + * When the value is `null` (default), the fade covers `topBarHeight`. A screen with sticky chrome + * (e.g. category chips, sort options) can set this to `0.dp` to disable the centralized fade and + * apply its own fade on its inner haze source covering the full sticky header (topbar + chrome). + */ +internal val LocalContentTopFadeHeightOverride = compositionLocalOf?> { null } + @OptIn(ExperimentalDecomposeApi::class) @Composable internal fun EntryContent( @@ -128,75 +138,131 @@ private fun EntryContentV2( onExpandSheet: () -> Unit, isOpenedInBottomSheet: Boolean, ) { - val density = LocalDensity.current val background = LocalMainBottomSheetColor.current.value - val animationContent = remember { contentFeedEntryStackAnimation() } - val animationAppBar = remember(stackState) { topBarFeedEntryAnimatedContentTransitionSpec(stackState) } + var topBarHeight by remember { mutableStateOf(0.dp) } val hazeState = rememberHazeState() + val fadeHeightOverride = remember { mutableStateOf(null) } + val effectiveFadeHeight = fadeHeightOverride.value ?: topBarHeight Surface(contentColor = background) { - CompositionLocalProvider(LocalHazeState provides hazeState) { + CompositionLocalProvider( + LocalHazeState provides hazeState, + LocalContentTopFadeHeightOverride provides fadeHeightOverride, + ) { Box(modifier = Modifier.fillMaxSize()) { - Children( - modifier = Modifier.fillMaxSize(), - stack = stackState.value, - animation = animationContent, - ) { child -> - child.instance.Content( - modifier = Modifier - .fillMaxSize() - .conditionalCompose( - condition = !isOpenedInBottomSheet, - modifier = { - padding(top = topBarHeight) - }, - ) - .hazeSourceTangem(zIndex = 0f, state = hazeState), - contentPadding = PaddingValues( - top = if (isOpenedInBottomSheet) topBarHeight else TangemTheme.dimens2.x2_5, - ), - bottomSheetState = bottomSheetState, - ) - } - Box( - modifier = Modifier - .align(Alignment.TopStart) - .then( - if (!isOpenedInBottomSheet) { - Modifier.statusBarsPadding() - } else { - Modifier - }, - ) - .onGloballyPositioned { coordinates -> - if (coordinates.size.height > 0) { - with(density) { - val height = coordinates.size.height.toDp() - topBarHeight = height - onHeaderSizeChange(height) - } - } - }, - ) { - AnimatedContent( - targetState = stackState.value.active, - transitionSpec = animationAppBar, - contentKey = { it.key }, - label = "FeedEntryAppBar", - ) { state -> - state.instance.Title(bottomSheetState) - } - CollapsedTitleClickOverlay( - bottomSheetState = bottomSheetState, - onExpandSheet = onExpandSheet, - ) - } + ContentBlock( + bottomSheetState = bottomSheetState, + effectiveFadeHeight = effectiveFadeHeight, + isOpenedInBottomSheet = isOpenedInBottomSheet, + stackState = stackState, + topBarHeight = topBarHeight, + ) + TitleBlock( + bottomSheetState = bottomSheetState, + stackState = stackState, + onTopBarHeightChang = { dp -> + onHeaderSizeChange(dp) + topBarHeight = dp + }, + isOpenedInBottomSheet = isOpenedInBottomSheet, + onExpandSheet = onExpandSheet, + ) } } } } +@Composable +private fun BoxScope.TitleBlock( + bottomSheetState: State, + stackState: State>, + onTopBarHeightChang: (Dp) -> Unit, + isOpenedInBottomSheet: Boolean, + onExpandSheet: () -> Unit, + modifier: Modifier = Modifier, +) { + val density = LocalDensity.current + val animationAppBar = remember(stackState) { topBarFeedEntryAnimatedContentTransitionSpec(stackState) } + + Box( + modifier = modifier + .align(Alignment.TopStart) + .then( + if (!isOpenedInBottomSheet) { + Modifier.statusBarsPadding() + } else { + Modifier + }, + ) + .onGloballyPositioned { coordinates -> + if (coordinates.size.height > 0) { + with(density) { + val height = coordinates.size.height.toDp() + onTopBarHeightChang(height) + } + } + }, + ) { + AnimatedContent( + targetState = stackState.value.active, + transitionSpec = animationAppBar, + contentKey = { it.key }, + label = "FeedEntryAppBar", + ) { state -> + state.instance.Title(bottomSheetState) + } + CollapsedTitleClickOverlay( + bottomSheetState = bottomSheetState, + onExpandSheet = onExpandSheet, + ) + } +} + +@Composable +private fun BoxScope.ContentBlock( + bottomSheetState: State, + effectiveFadeHeight: Dp, + isOpenedInBottomSheet: Boolean, + stackState: State>, + topBarHeight: Dp, + modifier: Modifier = Modifier, +) { + val animationContent = remember { contentFeedEntryStackAnimation() } + + Children( + modifier = modifier.fillMaxSize(), + stack = stackState.value, + animation = animationContent, + ) { child -> + child.instance.Content( + modifier = Modifier + .fillMaxSize() + .conditionalCompose( + condition = !isOpenedInBottomSheet, + modifier = { + padding(top = topBarHeight) + }, + ) + .hazeSourceTangem(zIndex = 0f, state = LocalHazeState.current) + .conditionalCompose( + condition = isOpenedInBottomSheet, + modifier = { + topFade( + height = effectiveFadeHeight, + color = TangemTheme.colors2.surface.level2.copy(BASE_FADE_LEVEL), + solidStop = .6f, + ) + }, + ), + contentPadding = PaddingValues( + top = if (isOpenedInBottomSheet) topBarHeight else TangemTheme.dimens2.x2_5, + ), + bottomSheetState = bottomSheetState, + ) + } +} + @Composable private fun BoxScope.CollapsedTitleClickOverlay(bottomSheetState: State, onExpandSheet: () -> Unit) { if (bottomSheetState.value == BottomSheetState.COLLAPSED) { diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/components/FeedSearchBar.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/components/FeedSearchBar.kt index 7d9ab43a62..7d1ed7e428 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/components/FeedSearchBar.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/components/FeedSearchBar.kt @@ -16,6 +16,7 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import com.tangem.core.ui.R import com.tangem.core.ui.components.SpacerW +import com.tangem.core.ui.components.haze.hazeEffectTangem import com.tangem.core.ui.ds.topbar.TangemTopBar import com.tangem.core.ui.ds.topbar.TangemTopBarType import com.tangem.core.ui.extensions.conditional @@ -107,7 +108,9 @@ private fun FeedSearchBarV2( end = if (endContent != null) TangemTheme.dimens2.x3 else 0.dp, ) .clip(CircleShape) - .background(color = TangemTheme.colors2.button.backgroundSecondary) + .hazeEffectTangem { + blurRadius = 8.dp + } .conditional(condition = isSearchBarClickable) { clickable(onClick = feedListSearchBar.onBarClick) } diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/feed/FeedList.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/feed/FeedList.kt index 3f80f6214c..c180304707 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/feed/FeedList.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/feed/FeedList.kt @@ -1,7 +1,6 @@ package com.tangem.features.feed.ui.feed import androidx.compose.animation.AnimatedContent -import androidx.compose.animation.core.EaseOut import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.togetherWith @@ -16,9 +15,7 @@ import androidx.compose.ui.platform.testTag import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.tangem.core.ui.components.SpacerH -import com.tangem.core.ui.components.haze.hazeEffectTangem import com.tangem.core.ui.decompose.ComposableContentComponent -import com.tangem.core.ui.extensions.conditionalCompose import com.tangem.core.ui.res.LocalMainBottomSheetColor import com.tangem.core.ui.res.LocalRedesignEnabled import com.tangem.core.ui.res.TangemThemePreview @@ -31,7 +28,6 @@ import com.tangem.features.feed.ui.feed.preview.FeedListPreviewDataProvider.crea import com.tangem.features.feed.ui.feed.state.FeedListSearchBar import com.tangem.features.feed.ui.feed.state.FeedListUM import com.tangem.features.feed.ui.feed.state.GlobalFeedState -import dev.chrisbanes.haze.HazeProgressive @Composable internal fun FeedListHeader( @@ -39,26 +35,10 @@ internal fun FeedListHeader( feedListSearchBar: FeedListSearchBar, modifier: Modifier = Modifier, ) { - val background = LocalMainBottomSheetColor.current.value FeedSearchBar( isSearchBarClickable = isSearchBarClickable, feedListSearchBar = feedListSearchBar, - modifier = modifier - .drawBehind { drawRect(background) } - .conditionalCompose( - condition = LocalRedesignEnabled.current, - modifier = { - hazeEffectTangem { - progressive = HazeProgressive.verticalGradient( - startIntensity = .75f, - endIntensity = 0f, - preferPerformance = true, - easing = EaseOut, - ) - } - }, - ) - .testTag(SEARCH_BAR), + modifier = modifier.testTag(SEARCH_BAR), ) } diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/list/MarketsList.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/list/MarketsList.kt index fb12e37421..5694f7fd13 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/list/MarketsList.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/list/MarketsList.kt @@ -13,6 +13,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.drawBehind import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.platform.LocalFocusManager @@ -32,18 +33,18 @@ import com.tangem.core.ui.components.haze.hazeSourceTangem import com.tangem.core.ui.event.consumedEvent import com.tangem.core.ui.extensions.resourceReference import com.tangem.core.ui.extensions.stringResourceSafe -import com.tangem.core.ui.res.LocalHazeState -import com.tangem.core.ui.res.LocalMainBottomSheetColor -import com.tangem.core.ui.res.LocalRedesignEnabled -import com.tangem.core.ui.res.TangemTheme -import com.tangem.core.ui.res.TangemThemePreview +import com.tangem.core.ui.res.* import com.tangem.domain.models.currency.CryptoCurrency import com.tangem.features.feed.impl.R import com.tangem.features.feed.model.market.list.state.* +import com.tangem.features.feed.ui.LocalContentTopFadeHeightOverride import com.tangem.features.feed.ui.feed.state.FeedListSearchBar import com.tangem.features.feed.ui.market.list.components.MarketsListLazyColumn import com.tangem.features.feed.ui.market.list.components.MarketsListSortByBottomSheet import com.tangem.features.feed.ui.market.list.components.Options +import com.tangem.features.feed.ui.utils.FadeConstants.BASE_FADE_LEVEL +import com.tangem.features.feed.ui.utils.FadeConstants.FIRST_STEP +import com.tangem.features.feed.ui.utils.FadeConstants.FIRST_STEP_FADE_LEVEL import dev.chrisbanes.haze.rememberHazeState import kotlinx.collections.immutable.toImmutableList import kotlinx.coroutines.delay @@ -205,6 +206,14 @@ private fun ColumnScope.ContentV2(contentPadding: PaddingValues, state: MarketsL val scrolledState = remember { mutableStateOf(false) } var optionsHeight by remember { mutableStateOf(0.dp) } val density = LocalDensity.current + val fadeColor = TangemTheme.colors2.surface.level2.copy(BASE_FADE_LEVEL) + val topPadding = contentPadding.calculateTopPadding() + + val centralFadeOverride = LocalContentTopFadeHeightOverride.current + DisposableEffect(centralFadeOverride) { + centralFadeOverride?.value = 0.dp + onDispose { centralFadeOverride?.value = null } + } Box(modifier = Modifier.fillMaxSize()) { ItemsList( @@ -216,10 +225,19 @@ private fun ColumnScope.ContentV2(contentPadding: PaddingValues, state: MarketsL isInSearchMode = state.isInSearchMode, state = state.list, ) + TopFade( + modifier = Modifier.padding(top = contentPadding.calculateTopPadding()), + colorStops = arrayOf( + 0f to fadeColor, + FIRST_STEP to fadeColor.copy(FIRST_STEP_FADE_LEVEL), + 1f to Color.Transparent, + ), + height = 20.dp + optionsHeight, + ) Options( modifier = Modifier .align(Alignment.TopStart) - .padding(bottom = TangemTheme.dimens2.x4, top = contentPadding.calculateTopPadding()) + .padding(bottom = TangemTheme.dimens2.x4, top = topPadding) .padding(horizontal = TangemTheme.dimens2.x4) .onGloballyPositioned { coordinates -> if (coordinates.size.height > 0) { diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/list/components/Options.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/list/components/Options.kt index 191c6db56d..104d4fef3f 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/list/components/Options.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/market/list/components/Options.kt @@ -1,6 +1,5 @@ package com.tangem.features.feed.ui.market.list.components -import androidx.compose.animation.core.EaseOut import androidx.compose.foundation.layout.* import androidx.compose.material3.Text import androidx.compose.runtime.* @@ -20,14 +19,12 @@ import com.tangem.core.ui.ds.image.TangemIconUM import com.tangem.core.ui.ds.tabs.TangemSegmentUM import com.tangem.core.ui.ds.tabs.TangemSegmentedPicker import com.tangem.core.ui.extensions.resolveReference -import com.tangem.core.ui.res.LocalMainBottomSheetColor import com.tangem.core.ui.res.LocalRedesignEnabled import com.tangem.core.ui.res.TangemTheme import com.tangem.features.feed.impl.R import com.tangem.features.feed.model.market.list.state.MarketsListUM import com.tangem.features.feed.model.market.list.state.SortByMenuUM import com.tangem.features.feed.model.market.list.state.SortByTypeUM -import dev.chrisbanes.haze.HazeProgressive import kotlinx.collections.immutable.persistentListOf import com.tangem.core.ui.ds.button.TangemButtonIconPosition as RedesignTangemButtonIconPosition @@ -120,7 +117,6 @@ private fun OptionsV2( modifier: Modifier = Modifier, ) { var isShowDropdownMenu by rememberSaveable { mutableStateOf(false) } - val background = LocalMainBottomSheetColor.current.value val segmentItems = remember { persistentListOf( @@ -147,16 +143,7 @@ private fun OptionsV2( Row( modifier = Modifier .fillMaxWidth() - .height(IntrinsicSize.Max) - .hazeEffectTangem { - progressive = HazeProgressive.verticalGradient( - startIntensity = .2f, - endIntensity = 0f, - easing = EaseOut, - preferPerformance = true, - ) - backgroundColor = background - }, + .height(IntrinsicSize.Max), horizontalArrangement = Arrangement.SpaceBetween, ) { PrimaryInverseTangemButton( diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/news/list/NewsListContent.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/news/list/NewsListContent.kt index 9bc099b815..5a700ef6ea 100644 --- a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/news/list/NewsListContent.kt +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/news/list/NewsListContent.kt @@ -1,6 +1,5 @@ package com.tangem.features.feed.ui.news.list -import androidx.compose.animation.core.EaseOut import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyListState @@ -10,25 +9,32 @@ import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.tangem.core.ui.components.SpacerH +import com.tangem.core.ui.components.TopFade import com.tangem.core.ui.components.chip.Chip import com.tangem.core.ui.components.chip.entity.ChipUM -import com.tangem.core.ui.components.haze.hazeEffectTangem import com.tangem.core.ui.components.haze.hazeSourceTangem import com.tangem.core.ui.components.label.entity.LabelUM import com.tangem.core.ui.ds.tabs.TangemTab import com.tangem.core.ui.event.EventEffect import com.tangem.core.ui.extensions.TextReference -import com.tangem.core.ui.res.* +import com.tangem.core.ui.res.LocalMainBottomSheetColor +import com.tangem.core.ui.res.LocalRedesignEnabled +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview +import com.tangem.features.feed.ui.LocalContentTopFadeHeightOverride import com.tangem.features.feed.ui.feed.components.articles.ArticleConfigUM import com.tangem.features.feed.ui.news.list.components.NewsListLazyColumn import com.tangem.features.feed.ui.news.list.state.NewsListState import com.tangem.features.feed.ui.news.list.state.NewsListUM -import dev.chrisbanes.haze.HazeProgressive +import com.tangem.features.feed.ui.utils.FadeConstants.BASE_FADE_LEVEL +import com.tangem.features.feed.ui.utils.FadeConstants.FIRST_STEP +import com.tangem.features.feed.ui.utils.FadeConstants.FIRST_STEP_FADE_LEVEL import kotlinx.collections.immutable.persistentListOf import kotlinx.collections.immutable.toImmutableSet @@ -93,6 +99,14 @@ internal fun NewsListContentV2(contentPadding: PaddingValues, state: NewsListUM) val chipsListState = rememberLazyListState() var chipsHeight by remember { mutableStateOf(0.dp) } val density = LocalDensity.current + val fadeColor = TangemTheme.colors2.surface.level2.copy(BASE_FADE_LEVEL) + val topPadding = contentPadding.calculateTopPadding() + + val centralFadeOverride = LocalContentTopFadeHeightOverride.current + DisposableEffect(centralFadeOverride) { + centralFadeOverride?.value = 0.dp + onDispose { centralFadeOverride?.value = null } + } ScrollChipsToSelected(state = state, chipsListState = chipsListState) @@ -104,33 +118,35 @@ internal fun NewsListContentV2(contentPadding: PaddingValues, state: NewsListUM) NewsListLazyColumn( topContentPadding = contentPadding.calculateTopPadding() + 16.dp + chipsHeight, modifier = Modifier - .hazeSourceTangem(zIndex = 0f) - .align(Alignment.TopStart), + .align(Alignment.TopStart) + .hazeSourceTangem(zIndex = 0f), newsListState = state.newsListState, listOfArticles = state.listOfArticles, lazyListState = lazyListState, onArticleClick = state.onArticleClick, ) + + TopFade( + modifier = Modifier.padding(top = contentPadding.calculateTopPadding()), + colorStops = arrayOf( + 0f to fadeColor, + FIRST_STEP to fadeColor.copy(FIRST_STEP_FADE_LEVEL), + 1f to Color.Transparent, + ), + height = 20.dp + chipsHeight, + ) + LazyRow( state = chipsListState, modifier = Modifier .align(Alignment.TopStart) - .padding(top = contentPadding.calculateTopPadding(), bottom = TangemTheme.dimens2.x4) + .padding(top = topPadding, bottom = TangemTheme.dimens2.x4) .onGloballyPositioned { coordinates -> if (coordinates.size.height > 0) { with(density) { chipsHeight = coordinates.size.height.toDp() } } - } - .hazeEffectTangem { - progressive = HazeProgressive.verticalGradient( - startIntensity = .2f, - endIntensity = 0f, - easing = EaseOut, - preferPerformance = true, - ) - backgroundColor = background }, contentPadding = PaddingValues(horizontal = 16.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), diff --git a/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/utils/FadeConstants.kt b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/utils/FadeConstants.kt new file mode 100644 index 0000000000..c79de28a3a --- /dev/null +++ b/features/feed/impl/src/main/kotlin/com/tangem/features/feed/ui/utils/FadeConstants.kt @@ -0,0 +1,7 @@ +package com.tangem.features.feed.ui.utils + +internal object FadeConstants { + const val BASE_FADE_LEVEL = .95f + const val FIRST_STEP = .8f + const val FIRST_STEP_FADE_LEVEL = .7f +} \ No newline at end of file