devol
/
smalltalk-matrix
mirror of https://github.com/ouchadam/small-talk.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding sliding reply animation

This commit is contained in:
Adam Brown 2022-09-30 18:00:43 +01:00 committed by Adam Brown
parent f4e852b628
commit 625a2f682f
1 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt
View File

@ -2,7 +2,9 @@ package app.dapk.st.messenger
import android.content.res.Configuration
import androidx.activity.result.ActivityResultLauncher
import androidx.compose.animation.*
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
@ -26,6 +28,7 @@ import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.onSizeChanged
@ -35,6 +38,7 @@ import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import androidx.compose.ui.zIndex
import androidx.core.net.toUri
import app.dapk.st.core.Lce
import app.dapk.st.core.LifecycleEffect
@ -614,6 +618,7 @@ private fun RowScope.SendStatus(message: RoomEvent) {
}
}
@OptIn(ExperimentalAnimationApi::class)
@Composable
private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> Unit, onSend: () -> Unit, onAttach: () -> Unit) {
Row(
@ -623,34 +628,38 @@ private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> Un
.fillMaxWidth()
.height(IntrinsicSize.Min), verticalAlignment = Alignment.Bottom
) {
Column(
modifier = Modifier
.weight(1f)
.fillMaxHeight()
.background(SmallTalkTheme.extendedColors.othersBubble, RoundedCornerShape(24.dp)),
) {
// AnimatedVisibility(
// visible = state.reply?.let { it is Message } ?: false,
// enter = slideInVertically { it - 50 },
// exit = slideOutVertically { it - 50 },
// ) {
//
// val message = state.reply as Message
// Column(
// modifier = Modifier
// .background(SmallTalkTheme.extendedColors.othersBubble, RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp))
// ) {
// Text(message.author.displayName ?: message.author.id.value)
// Text(message.content)
// Spacer(Modifier.height(50.dp))
// }
// }
Box(
modifier = Modifier
.weight(1f)
.fillMaxHeight()
.background(SmallTalkTheme.extendedColors.othersBubble, RoundedCornerShape(24.dp)),
contentAlignment = Alignment.TopStart,
AnimatedContent(
targetState = state.reply,
transitionSpec = {
slideIntoContainer(towards = AnimatedContentScope.SlideDirection.Up, animationSpec = tween(500)){
it / 2
}
.with(slideOutOfContainer(towards = AnimatedContentScope.SlideDirection.Down))
.using(
SizeTransform(
clip = true,
sizeAnimationSpec = { initialSize, targetSize ->
tween(500)
})
)
}
) {
if (it is Message) {
Column(Modifier.clipToBounds()) {
Text(it.author.displayName ?: it.author.id.value)
Text(it.content, maxLines = 2)
}
}
}
Box(modifier = Modifier.background(SmallTalkTheme.extendedColors.othersBubble, RoundedCornerShape(24.dp))) {
BasicTextField(
modifier = Modifier.fillMaxWidth().padding(14.dp),
value = state.value,