Updated on 2026-08-14
This commit is contained in:
parent
c43432b1ca
commit
1d68916cb7
7 changed files with 57 additions and 32 deletions
|
|
@ -3,6 +3,7 @@ package com.tangem.common.ui.markets.tokenselector
|
||||||
import android.content.res.Configuration
|
import android.content.res.Configuration
|
||||||
import androidx.compose.foundation.layout.*
|
import androidx.compose.foundation.layout.*
|
||||||
import androidx.compose.foundation.lazy.LazyColumn
|
import androidx.compose.foundation.lazy.LazyColumn
|
||||||
|
import androidx.compose.foundation.lazy.rememberLazyListState
|
||||||
import androidx.compose.foundation.shape.CircleShape
|
import androidx.compose.foundation.shape.CircleShape
|
||||||
import androidx.compose.material3.Icon
|
import androidx.compose.material3.Icon
|
||||||
import androidx.compose.runtime.*
|
import androidx.compose.runtime.*
|
||||||
|
|
@ -18,6 +19,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
|
||||||
import androidx.compose.ui.unit.Dp
|
import androidx.compose.ui.unit.Dp
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import com.tangem.core.ui.R
|
import com.tangem.core.ui.R
|
||||||
|
import com.tangem.core.ui.components.bottomsheets.LocalBottomSheetContentScrollable
|
||||||
import com.tangem.core.ui.components.bottomsheets.TangemBottomSheet
|
import com.tangem.core.ui.components.bottomsheets.TangemBottomSheet
|
||||||
import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
|
import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
|
||||||
import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetType
|
import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetType
|
||||||
|
|
@ -78,12 +80,24 @@ private fun TokenSelectorContent(
|
||||||
} else {
|
} else {
|
||||||
topBarHeight
|
topBarHeight
|
||||||
}
|
}
|
||||||
|
val listState = rememberLazyListState()
|
||||||
|
val scrollableSignal = LocalBottomSheetContentScrollable.current
|
||||||
|
if (scrollableSignal != null) {
|
||||||
|
LaunchedEffect(listState) {
|
||||||
|
snapshotFlow { listState.canScrollForward || listState.canScrollBackward }
|
||||||
|
.collect { canScroll -> scrollableSignal.value = canScroll }
|
||||||
|
}
|
||||||
|
DisposableEffect(scrollableSignal) {
|
||||||
|
onDispose { scrollableSignal.value = true }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Box(modifier = modifier.fillMaxWidth()) {
|
Box(modifier = modifier.fillMaxWidth()) {
|
||||||
val bottomFadeReserve = if (embedded) 0.dp else TangemTheme.dimens2.x10
|
val bottomFadeReserve = if (embedded) 0.dp else TangemTheme.dimens2.x10
|
||||||
val bottomListPadding = bottomFadeReserve + scrollBottomInset
|
val bottomListPadding = bottomFadeReserve + scrollBottomInset
|
||||||
val topFadeColor = TangemTheme.colors2.surface.level2.copy(alpha = .95f)
|
val topFadeColor = TangemTheme.colors2.surface.level2.copy(alpha = .95f)
|
||||||
LazyColumn(
|
LazyColumn(
|
||||||
|
state = listState,
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.hazeSourceTangem(state = hazeState, 1f)
|
.hazeSourceTangem(state = hazeState, 1f)
|
||||||
.topFade(height = topBarHeight, color = topFadeColor, solidStop = .6f),
|
.topFade(height = topBarHeight, color = topFadeColor, solidStop = .6f),
|
||||||
|
|
|
||||||
|
|
@ -49,6 +49,15 @@ import com.tangem.core.ui.utils.WindowInsetsZero
|
||||||
*/
|
*/
|
||||||
val LocalTangemBottomSheetContentBottomInset = compositionLocalOf { 0.dp }
|
val LocalTangemBottomSheetContentBottomInset = compositionLocalOf { 0.dp }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Provided by [FooterOverlay] so scrollable content under [BasicBottomSheet] can report whether
|
||||||
|
* it currently scrolls. When set to `false`, [FooterOverlay] omits the bottom fade gradient and
|
||||||
|
* shrinks [LocalTangemBottomSheetContentBottomInset] accordingly — so content that fits without
|
||||||
|
* scrolling sits flush above the sticky footer instead of leaving an empty gap.
|
||||||
|
* Defaults to `null` outside [BasicBottomSheet]; null-check before writing.
|
||||||
|
*/
|
||||||
|
val LocalBottomSheetContentScrollable = compositionLocalOf<MutableState<Boolean>?> { null }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Type of [TangemBottomSheet] that defines its behavior and appearance.
|
* Type of [TangemBottomSheet] that defines its behavior and appearance.
|
||||||
* - [Default]: Standard bottom sheet with a draggable header
|
* - [Default]: Standard bottom sheet with a draggable header
|
||||||
|
|
@ -290,7 +299,8 @@ fun BoxScope.FooterOverlay(
|
||||||
content: @Composable () -> Unit,
|
content: @Composable () -> Unit,
|
||||||
) {
|
) {
|
||||||
val density = LocalDensity.current
|
val density = LocalDensity.current
|
||||||
val gradientHeight = TangemTheme.dimens2.x10
|
val isContentScrollable = remember { mutableStateOf(true) }
|
||||||
|
val gradientHeight = if (isContentScrollable.value) TangemTheme.dimens2.x10 else 0.dp
|
||||||
val isFooterRendered = measuredFooterHeight == null || measuredFooterHeight > 0.dp
|
val isFooterRendered = measuredFooterHeight == null || measuredFooterHeight > 0.dp
|
||||||
val contentBottomOverlayHeight = if (isFooterRendered) {
|
val contentBottomOverlayHeight = if (isFooterRendered) {
|
||||||
(measuredFooterHeight ?: 0.dp) + gradientHeight
|
(measuredFooterHeight ?: 0.dp) + gradientHeight
|
||||||
|
|
@ -300,6 +310,7 @@ fun BoxScope.FooterOverlay(
|
||||||
val fadeMax = TangemTheme.colors2.surface.level2
|
val fadeMax = TangemTheme.colors2.surface.level2
|
||||||
CompositionLocalProvider(
|
CompositionLocalProvider(
|
||||||
LocalTangemBottomSheetContentBottomInset provides contentBottomOverlayHeight,
|
LocalTangemBottomSheetContentBottomInset provides contentBottomOverlayHeight,
|
||||||
|
LocalBottomSheetContentScrollable provides isContentScrollable,
|
||||||
) {
|
) {
|
||||||
content()
|
content()
|
||||||
}
|
}
|
||||||
|
|
@ -309,10 +320,12 @@ fun BoxScope.FooterOverlay(
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.align(Alignment.BottomCenter),
|
.align(Alignment.BottomCenter),
|
||||||
) {
|
) {
|
||||||
Fade(
|
if (gradientHeight > 0.dp) {
|
||||||
backgroundColor = fadeMax,
|
Fade(
|
||||||
height = gradientHeight,
|
backgroundColor = fadeMax,
|
||||||
)
|
height = gradientHeight,
|
||||||
|
)
|
||||||
|
}
|
||||||
Spacer(
|
Spacer(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
|
|
|
||||||
|
|
@ -269,7 +269,7 @@ internal fun Modifier.bottomSheetDraggableAnchor(
|
||||||
if (!state.skipPartiallyExpanded) {
|
if (!state.skipPartiallyExpanded) {
|
||||||
PartiallyExpanded at (layoutHeight - peekHeightPx)
|
PartiallyExpanded at (layoutHeight - peekHeightPx)
|
||||||
}
|
}
|
||||||
if (sheetHeight != peekHeightPx) {
|
if (state.skipPartiallyExpanded || sheetHeight != peekHeightPx) {
|
||||||
Expanded at maxOf(layoutHeight - sheetHeight, 0f)
|
Expanded at maxOf(layoutHeight - sheetHeight, 0f)
|
||||||
}
|
}
|
||||||
if (!state.skipHiddenState) {
|
if (!state.skipHiddenState) {
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,7 @@
|
||||||
package com.tangem.core.ui.ds.tabs
|
package com.tangem.core.ui.ds.tabs
|
||||||
|
|
||||||
import android.content.res.Configuration
|
import android.content.res.Configuration
|
||||||
import androidx.compose.animation.core.AnimationSpec
|
import androidx.compose.animation.core.*
|
||||||
import androidx.compose.animation.core.animateDpAsState
|
|
||||||
import androidx.compose.animation.core.animateFloatAsState
|
|
||||||
import androidx.compose.animation.core.snap
|
|
||||||
import androidx.compose.animation.core.tween
|
|
||||||
import androidx.compose.foundation.background
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.clickable
|
import androidx.compose.foundation.clickable
|
||||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||||
|
|
@ -21,6 +17,7 @@ import androidx.compose.ui.draw.clip
|
||||||
import androidx.compose.ui.draw.shadow
|
import androidx.compose.ui.draw.shadow
|
||||||
import androidx.compose.ui.layout.onGloballyPositioned
|
import androidx.compose.ui.layout.onGloballyPositioned
|
||||||
import androidx.compose.ui.platform.LocalDensity
|
import androidx.compose.ui.platform.LocalDensity
|
||||||
|
import androidx.compose.ui.text.style.TextAlign
|
||||||
import androidx.compose.ui.tooling.preview.Preview
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
import androidx.compose.ui.tooling.preview.PreviewParameter
|
import androidx.compose.ui.tooling.preview.PreviewParameter
|
||||||
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
|
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
|
||||||
|
|
@ -109,6 +106,7 @@ fun TangemSegmentedPicker(
|
||||||
itemsWidths = itemsWidths,
|
itemsWidths = itemsWidths,
|
||||||
selectedIndex = selectedIndex.intValue,
|
selectedIndex = selectedIndex.intValue,
|
||||||
segmentHeight = segmentHeight.value,
|
segmentHeight = segmentHeight.value,
|
||||||
|
separatorWidth = SEPARATOR_WIDTH,
|
||||||
)
|
)
|
||||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||||
items.fastForEachIndexed { index, item ->
|
items.fastForEachIndexed { index, item ->
|
||||||
|
|
@ -139,7 +137,7 @@ fun TangemSegmentedPicker(
|
||||||
Box(
|
Box(
|
||||||
Modifier
|
Modifier
|
||||||
.alpha(alpha)
|
.alpha(alpha)
|
||||||
.width(0.5.dp)
|
.width(SEPARATOR_WIDTH)
|
||||||
.height(20.dp)
|
.height(20.dp)
|
||||||
.background(
|
.background(
|
||||||
color = TangemTheme.colors2.border.neutral.tertiary.copy(alpha = 0.1f),
|
color = TangemTheme.colors2.border.neutral.tertiary.copy(alpha = 0.1f),
|
||||||
|
|
@ -151,8 +149,15 @@ fun TangemSegmentedPicker(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private val SEPARATOR_WIDTH = 0.5.dp
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
private fun SegmentSelection(itemsWidths: SnapshotStateList<Dp>, selectedIndex: Int, segmentHeight: Dp) {
|
private fun SegmentSelection(
|
||||||
|
itemsWidths: SnapshotStateList<Dp>,
|
||||||
|
selectedIndex: Int,
|
||||||
|
segmentHeight: Dp,
|
||||||
|
separatorWidth: Dp,
|
||||||
|
) {
|
||||||
var hasInitiallyMeasured by remember { mutableStateOf(false) }
|
var hasInitiallyMeasured by remember { mutableStateOf(false) }
|
||||||
|
|
||||||
val animationSpec: AnimationSpec<Dp> = if (hasInitiallyMeasured) {
|
val animationSpec: AnimationSpec<Dp> = if (hasInitiallyMeasured) {
|
||||||
|
|
@ -162,7 +167,7 @@ private fun SegmentSelection(itemsWidths: SnapshotStateList<Dp>, selectedIndex:
|
||||||
}
|
}
|
||||||
|
|
||||||
val indicatorOffset by animateDpAsState(
|
val indicatorOffset by animateDpAsState(
|
||||||
targetValue = itemsWidths.take(selectedIndex).fold(0.dp, Dp::plus),
|
targetValue = itemsWidths.take(selectedIndex).fold(0.dp, Dp::plus) + separatorWidth * selectedIndex,
|
||||||
animationSpec = animationSpec,
|
animationSpec = animationSpec,
|
||||||
label = "indicatorOffset",
|
label = "indicatorOffset",
|
||||||
)
|
)
|
||||||
|
|
@ -216,6 +221,7 @@ private fun RowScope.Segment(
|
||||||
selectedIndex.value = index
|
selectedIndex.value = index
|
||||||
onClick()
|
onClick()
|
||||||
},
|
},
|
||||||
|
contentAlignment = Alignment.Center,
|
||||||
) {
|
) {
|
||||||
Text(
|
Text(
|
||||||
text = item.title.resolveReference(),
|
text = item.title.resolveReference(),
|
||||||
|
|
@ -226,6 +232,7 @@ private fun RowScope.Segment(
|
||||||
TangemTheme.colors2.tabs.textSecondary
|
TangemTheme.colors2.tabs.textSecondary
|
||||||
},
|
},
|
||||||
maxLines = 1,
|
maxLines = 1,
|
||||||
|
textAlign = TextAlign.Center,
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.align(Alignment.Center)
|
.align(Alignment.Center)
|
||||||
.padding(
|
.padding(
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,6 @@
|
||||||
package com.tangem.features.commonfeatures.impl.addtoportfolio
|
package com.tangem.features.commonfeatures.impl.addtoportfolio
|
||||||
|
|
||||||
import androidx.compose.animation.AnimatedContent
|
import androidx.compose.animation.AnimatedContent
|
||||||
import androidx.compose.animation.fadeIn
|
|
||||||
import androidx.compose.animation.fadeOut
|
|
||||||
import androidx.compose.animation.togetherWith
|
|
||||||
import androidx.compose.foundation.background
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.layout.*
|
import androidx.compose.foundation.layout.*
|
||||||
import androidx.compose.foundation.rememberScrollState
|
import androidx.compose.foundation.rememberScrollState
|
||||||
|
|
@ -63,18 +60,12 @@ internal fun AddToPortfolioBottomSheetV2(
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
footer = {
|
footer = {
|
||||||
AnimatedContent(
|
AddToPortfolioBottomSheetFooter(
|
||||||
targetState = contentStack.value.active.configuration,
|
currentRoute = contentStack.value.active.configuration,
|
||||||
transitionSpec = { fadeIn() togetherWith fadeOut() },
|
userPortfolioState = userPortfolioState,
|
||||||
label = "Footer Animation",
|
onBack = onBack,
|
||||||
) { route ->
|
onAddFromUserPortfolioClick = onAddFromUserPortfolioClick,
|
||||||
AddToPortfolioBottomSheetFooter(
|
)
|
||||||
currentRoute = route,
|
|
||||||
userPortfolioState = userPortfolioState,
|
|
||||||
onBack = onBack,
|
|
||||||
onAddFromUserPortfolioClick = onAddFromUserPortfolioClick,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@ internal fun ColumnScope.Header(
|
||||||
) {
|
) {
|
||||||
val isRedesignEnabled = LocalRedesignEnabled.current
|
val isRedesignEnabled = LocalRedesignEnabled.current
|
||||||
if (isRedesignEnabled) {
|
if (isRedesignEnabled) {
|
||||||
SpacerH(16.dp)
|
SpacerH(12.dp)
|
||||||
}
|
}
|
||||||
AnimatedContent(isLoading) { animatedState ->
|
AnimatedContent(isLoading) { animatedState ->
|
||||||
Row(
|
Row(
|
||||||
|
|
|
||||||
|
|
@ -130,8 +130,8 @@ internal fun MarketPositionCard(item: InfoPointUMV2.MarketPosition) {
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.height(6.dp),
|
.height(6.dp),
|
||||||
progress = { item.rangeValue },
|
progress = { item.rangeValue },
|
||||||
dotColor = TangemTheme.colors2.fill.neutral.primaryInvertedConstant,
|
dotColor = TangemTheme.colors3.icon.primary,
|
||||||
backgroundColor = TangemTheme.colors2.graphic.neutral.primaryInvertedConstant.copy(alpha = .1f),
|
backgroundColor = TangemTheme.colors3.bg.opaque.secondary,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
SpacerH(12.dp)
|
SpacerH(12.dp)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue