Skip to content

Commit

Permalink
Merge pull request #181 from ouchadam/feature/dismiss-reply
Browse files Browse the repository at this point in the history 
Dismiss swipe to reply
  • Loading branch information
@ouchadam
ouchadam authored Oct 2, 2022
2 parents 9cb8b18 + 36efadd commit 6ced088
Showing 1 changed file with 39 additions and 28 deletions.
67 changes: 39 additions & 28 deletions features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ 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
Expand Down Expand Up @@ -83,6 +82,11 @@ internal fun MessengerScreen(
else -> null
}

val replyActions = ReplyActions(
onReply = { viewModel.post(MessengerAction.ComposerEnterReplyMode(it)) },
onDismiss = { viewModel.post(MessengerAction.ComposerExitReplyMode) }
)

Column {
Toolbar(onNavigate = { navigator.navigate.upToHome() }, roomTitle, actions = {
// OverflowMenu {
Expand All @@ -91,14 +95,13 @@ internal fun MessengerScreen(
})
when (state.composerState) {
is ComposerState.Text -> {
Room(state.roomState, onReply = {
viewModel.post(MessengerAction.ComposerEnterReplyMode(it))
})
Room(state.roomState, replyActions)
TextComposer(
state.composerState,
onTextChange = { viewModel.post(MessengerAction.ComposerTextUpdate(it)) },
onSend = { viewModel.post(MessengerAction.ComposerSendText) },
onAttach = { viewModel.startAttachment() }
onAttach = { viewModel.startAttachment() },
replyActions = replyActions,
)
}

Expand Down Expand Up @@ -129,11 +132,11 @@ private fun MessengerViewModel.ObserveEvents(galleryLauncher: ActivityResultLaun
}

@Composable
private fun ColumnScope.Room(roomStateLce: Lce<MessengerState>, onReply: (RoomEvent) -> Unit) {
private fun ColumnScope.Room(roomStateLce: Lce<MessengerState>, replyActions: ReplyActions) {
when (val state = roomStateLce) {
is Lce.Loading -> CenteredLoading()
is Lce.Content -> {
RoomContent(state.value.self, state.value.roomState, onReply)
RoomContent(state.value.self, state.value.roomState, replyActions)
val eventBarHeight = 14.dp
val typing = state.value.typing
when {
Expand Down Expand Up @@ -176,7 +179,7 @@ private fun ColumnScope.Room(roomStateLce: Lce<MessengerState>, onReply: (RoomEv
}

@Composable
private fun ColumnScope.RoomContent(self: UserId, state: RoomState, onReply: (RoomEvent) -> Unit) {
private fun ColumnScope.RoomContent(self: UserId, state: RoomState, replyActions: ReplyActions) {
val listState: LazyListState = rememberLazyListState(
initialFirstVisibleItemIndex = 0
)
Expand All @@ -202,7 +205,7 @@ private fun ColumnScope.RoomContent(self: UserId, state: RoomState, onReply: (Ro
) { index, item ->
val previousEvent = if (index != 0) state.events[index - 1] else null
val wasPreviousMessageSameSender = previousEvent?.author?.id == item.author.id
AlignedBubble(item, self, wasPreviousMessageSameSender, onReply) {
AlignedBubble(item, self, wasPreviousMessageSameSender, replyActions) {
when (item) {
is RoomEvent.Image -> MessageImage(it as BubbleContent<RoomEvent.Image>)
is Message -> TextBubbleContent(it as BubbleContent<RoomEvent.Message>)
Expand All @@ -225,7 +228,7 @@ private fun <T : RoomEvent> LazyItemScope.AlignedBubble(
message: T,
self: UserId,
wasPreviousMessageSameSender: Boolean,
onReply: (RoomEvent) -> Unit,
replyActions: ReplyActions,
content: @Composable (BubbleContent<T>) -> Unit
) {
when (message.author.id == self) {
Expand All @@ -236,7 +239,7 @@ private fun <T : RoomEvent> LazyItemScope.AlignedBubble(
message = message,
isNotSelf = false,
wasPreviousMessageSameSender = wasPreviousMessageSameSender,
onReply = onReply,
replyActions = replyActions,
) {
content(BubbleContent(selfBackgroundShape, SmallTalkTheme.extendedColors.selfBubble, false, message))
}
Expand All @@ -250,7 +253,7 @@ private fun <T : RoomEvent> LazyItemScope.AlignedBubble(
message = message,
isNotSelf = true,
wasPreviousMessageSameSender = wasPreviousMessageSameSender,
onReply = onReply,
replyActions = replyActions,
) {
content(BubbleContent(othersBackgroundShape, SmallTalkTheme.extendedColors.othersBubble, true, message))
}
Expand Down Expand Up @@ -345,7 +348,7 @@ private fun Bubble(
message: RoomEvent,
isNotSelf: Boolean,
wasPreviousMessageSameSender: Boolean,
onReply: (RoomEvent) -> Unit,
replyActions: ReplyActions,
content: @Composable () -> Unit
) {

Expand All @@ -368,7 +371,7 @@ private fun Bubble(
onDragStopped = {
with(localDensity) {
if (offsetX.value > (screenWidthDp.toPx() * 0.15)) {
onReply(message)
replyActions.onReply(message)
}
}

Expand Down Expand Up @@ -474,8 +477,8 @@ private fun ReplyBubbleContent(content: BubbleContent<RoomEvent.Reply>) {
Column(
Modifier
.fillMaxWidth()
.background(if (content.isNotSelf) SmallTalkTheme.extendedColors.otherBubbleReplyBackground else SmallTalkTheme.extendedColors.selfBubbleReplyBackground)
.padding(4.dp)
.background(if (content.isNotSelf) SmallTalkTheme.extendedColors.onOthersBubble.copy(alpha = 0.1f) else SmallTalkTheme.extendedColors.onSelfBubble.copy(alpha = 0.2f), RoundedCornerShape(12.dp))
.padding(8.dp)
) {
val replyName = if (!content.isNotSelf && content.message.replyingToSelf) "You" else content.message.replyingTo.author.displayName
?: content.message.replyingTo.author.id.value
Expand All @@ -485,12 +488,13 @@ private fun ReplyBubbleContent(content: BubbleContent<RoomEvent.Reply>) {
maxLines = 1,
color = content.textColor()
)
Spacer(modifier = Modifier.height(2.dp))
when (val replyingTo = content.message.replyingTo) {
is Message -> {
Text(
text = replyingTo.content,
color = content.textColor(),
fontSize = 15.sp,
color = content.textColor().copy(alpha = 0.8f),
fontSize = 14.sp,
modifier = Modifier.wrapContentSize(),
textAlign = TextAlign.Start,
)
Expand Down Expand Up @@ -619,7 +623,7 @@ private fun RowScope.SendStatus(message: RoomEvent) {

@OptIn(ExperimentalAnimationApi::class)
@Composable
private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> Unit, onSend: () -> Unit, onAttach: () -> Unit) {
private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> Unit, onSend: () -> Unit, onAttach: () -> Unit, replyActions: ReplyActions) {
Row(
Modifier
.fillMaxWidth()
Expand All @@ -636,22 +640,25 @@ private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> Un
AnimatedContent(
targetState = state.reply,
transitionSpec = {
slideIntoContainer(towards = AnimatedContentScope.SlideDirection.Up, animationSpec = tween(500)) {
it / 2
}
.with(slideOutOfContainer(towards = AnimatedContentScope.SlideDirection.Down))
val durationMillis = 300
slideIntoContainer(towards = AnimatedContentScope.SlideDirection.Up, tween(durationMillis)) { it / 2 }
.with(slideOutVertically(tween(durationMillis)) { it / 2})
.using(
SizeTransform(
clip = true,
sizeAnimationSpec = { initialSize, targetSize ->
tween(500)
})

sizeAnimationSpec = { _, _ -> tween(durationMillis) })
)
}
) {
if (it is Message) {
Column(Modifier.padding(12.dp)) {
Box(Modifier.padding(12.dp)) {
Box(Modifier.padding(4.dp).clickable { replyActions.onDismiss() }.wrapContentWidth().align(Alignment.TopEnd)) {
Icon(
modifier = Modifier.size(16.dp),
imageVector = Icons.Filled.Close,
contentDescription = "",
)
}
Column(
Modifier
.fillMaxWidth()
Expand Down Expand Up @@ -776,3 +783,7 @@ private fun AttachmentComposer(state: ComposerState.Attachments, onSend: () -> U
}
}

class ReplyActions(
val onReply: (RoomEvent) -> Unit,
val onDismiss: () -> Unit,
)

0 comments on commit 6ced088

Please sign in to comment.