nick/amethyst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add animation to zap and reaction popups

Browse Source
This commit is contained in:
Giovanni Gatti
2024-10-08 11:06:29 +02:00
parent 18fca8adac
commit a7343d5b54
1 changed files with 119 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/ReactionsRow.kt
+119 -60
View File
@@ -24,8 +24,10 @@ import android.content.Context
import android.content.Intent import android.content.Intent
import androidx.compose.animation.AnimatedContent import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedContentTransitionScope import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ContentTransform import androidx.compose.animation.ContentTransform
import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeIn
@@ -147,6 +149,7 @@ import kotlinx.collections.immutable.persistentSetOf
import kotlinx.collections.immutable.toImmutableList import kotlinx.collections.immutable.toImmutableList
import kotlinx.collections.immutable.toImmutableSet import kotlinx.collections.immutable.toImmutableSet
import kotlinx.coroutines.Dispatchers import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
import kotlin.math.roundToInt import kotlin.math.roundToInt
@@ -1326,24 +1329,52 @@ fun ReactionChoicePopup(
.collectAsStateWithLifecycle() .collectAsStateWithLifecycle()
val toRemove = remember { baseNote.reactedBy(accountViewModel.userProfile()).toImmutableSet() } val toRemove = remember { baseNote.reactedBy(accountViewModel.userProfile()).toImmutableSet() }
// Define animation specs
val animationDuration = 250
val fadeAnimationSpec = tween<Float>(durationMillis = animationDuration)
// Prevent multiple calls to onDismiss()
var dismissed by remember { mutableStateOf(false) }
val visibilityState = remember { MutableTransitionState(false).apply { targetState = true } }
LaunchedEffect(visibilityState.targetState) {
if (!visibilityState.targetState && !dismissed) {
delay(animationDuration.toLong())
dismissed = true
onDismiss()
}
}
Popup( Popup(
alignment = Alignment.BottomCenter, alignment = Alignment.BottomCenter,
offset = IntOffset(0, iconSizePx), offset = IntOffset(0, iconSizePx),
onDismissRequest = { onDismiss() }, onDismissRequest = { visibilityState.targetState = false },
properties = PopupProperties(focusable = true), properties = PopupProperties(focusable = true),
) { ) {
ReactionChoicePopupContent( AnimatedVisibility(
reactions, visibleState = visibilityState,
toRemove = toRemove, enter =
onClick = { reactionType -> slideInVertically(
accountViewModel.reactToOrDelete( initialOffsetY = { it / 2 },
baseNote, ) + fadeIn(animationSpec = fadeAnimationSpec),
reactionType, exit =
) slideOutVertically(
onDismiss() targetOffsetY = { it / 2 },
}, ) + fadeOut(animationSpec = fadeAnimationSpec),
onChangeAmount, ) {
) ReactionChoicePopupContent(
reactions,
toRemove = toRemove,
onClick = { reactionType ->
accountViewModel.reactToOrDelete(
baseNote,
reactionType,
)
visibilityState.targetState = false
},
onChangeAmount,
)
}
} }
} }
@@ -1505,59 +1536,87 @@ fun ZapAmountChoicePopup(
val yOffset = with(LocalDensity.current) { -popupYOffset.toPx().toInt() } val yOffset = with(LocalDensity.current) { -popupYOffset.toPx().toInt() }
// Define animation specs
val animationDuration = 250
val fadeAnimationSpec = tween<Float>(durationMillis = animationDuration)
// Prevent multiple calls to onDismiss()
var dismissed by remember { mutableStateOf(false) }
val visibilityState = remember { MutableTransitionState(false).apply { targetState = true } }
LaunchedEffect(visibilityState.targetState) {
if (!visibilityState.targetState && !dismissed) {
delay(animationDuration.toLong())
dismissed = true
onDismiss()
}
}
Popup( Popup(
alignment = Alignment.BottomCenter, alignment = Alignment.BottomCenter,
offset = IntOffset(0, yOffset), offset = IntOffset(0, yOffset),
onDismissRequest = { onDismiss() }, onDismissRequest = { visibilityState.targetState = false },
properties = PopupProperties(focusable = true), properties = PopupProperties(focusable = true),
) { ) {
FlowRow(horizontalArrangement = Arrangement.Center) { AnimatedVisibility(
zapAmountChoices.forEach { amountInSats -> visibleState = visibilityState,
Button( enter =
modifier = Modifier.padding(horizontal = 3.dp), slideInVertically(
onClick = { initialOffsetY = { it / 2 },
accountViewModel.zap( ) + fadeIn(animationSpec = fadeAnimationSpec),
baseNote, exit =
amountInSats * 1000, slideOutVertically(
null, targetOffsetY = { it / 2 },
zapMessage, ) + fadeOut(animationSpec = fadeAnimationSpec),
context, ) {
true, FlowRow(horizontalArrangement = Arrangement.Center) {
onError, zapAmountChoices.forEach { amountInSats ->
onProgress, Button(
onPayViaIntent, modifier = Modifier.padding(horizontal = 3.dp),
) onClick = {
onDismiss() accountViewModel.zap(
}, baseNote,
shape = ButtonBorder, amountInSats * 1000,
colors = null,
ButtonDefaults.buttonColors( zapMessage,
containerColor = MaterialTheme.colorScheme.primary, context,
), true,
) { onError,
Text( onProgress,
"⚡ ${showAmount(amountInSats.toBigDecimal().setScale(1))}", onPayViaIntent,
color = Color.White, )
textAlign = TextAlign.Center, visibilityState.targetState = false
modifier = },
Modifier.combinedClickable( shape = ButtonBorder,
onClick = { colors =
accountViewModel.zap( ButtonDefaults.buttonColors(
baseNote, containerColor = MaterialTheme.colorScheme.primary,
amountInSats * 1000,
null,
zapMessage,
context,
true,
onError,
onProgress,
onPayViaIntent,
)
onDismiss()
},
onLongClick = { onChangeAmount() },
), ),
) ) {
Text(
"⚡ ${showAmount(amountInSats.toBigDecimal().setScale(1))}",
color = Color.White,
textAlign = TextAlign.Center,
modifier =
Modifier.combinedClickable(
onClick = {
accountViewModel.zap(
baseNote,
amountInSats * 1000,
null,
zapMessage,
context,
true,
onError,
onProgress,
onPayViaIntent,
)
visibilityState.targetState = false
},
onLongClick = { onChangeAmount() },
),
)
}
} }
} }
} }