Browse Source

Messages: update how textcomposer is composed

feature/bma/flipper
ganfra 2 years ago
parent
commit
f85e522842
  1. 78
      features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt
  2. 8
      libraries/textcomposer/src/main/java/io/element/android/x/textcomposer/TextComposer.kt

78
features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt

@ -109,7 +109,7 @@ fun MessagesContent(
) )
}, },
content = { padding -> content = { padding ->
Box( Column(
modifier = Modifier modifier = Modifier
.padding(padding) .padding(padding)
.fillMaxSize() .fillMaxSize()
@ -119,38 +119,37 @@ fun MessagesContent(
timelineItems = timelineItems, timelineItems = timelineItems,
hasMoreToLoad = hasMoreToLoad, hasMoreToLoad = hasMoreToLoad,
onReachedLoadMore = onReachedLoadMore, onReachedLoadMore = onReachedLoadMore,
modifier = Modifier.weight(1f)
) )
Box( TextComposer(
modifier = Modifier.align(Alignment.BottomCenter) callback = object : Callback {
) { override fun onRichContentSelected(contentUri: Uri): Boolean {
TextComposer( return false
callback = object : Callback { }
override fun onRichContentSelected(contentUri: Uri): Boolean {
return false
}
override fun onTextChanged(text: CharSequence) { override fun onTextChanged(text: CharSequence) {
} }
override fun onCloseRelatedMessage() { override fun onCloseRelatedMessage() {
} }
override fun onSendMessage(text: CharSequence) { override fun onSendMessage(text: CharSequence) {
onSendMessage.invoke(text) onSendMessage.invoke(text)
} }
override fun onAddAttachment() { override fun onAddAttachment() {
} }
override fun onExpandOrCompactChange() { override fun onExpandOrCompactChange() {
} }
override fun onFullScreenModeChanged() { override fun onFullScreenModeChanged() {
} }
}, },
height = COMPOSER_HEIGHT modifier = Modifier
) .fillMaxWidth()
} .height(COMPOSER_HEIGHT)
)
} }
} }
) )
@ -162,19 +161,15 @@ fun TimelineItems(
timelineItems: List<MessagesTimelineItemState>, timelineItems: List<MessagesTimelineItemState>,
hasMoreToLoad: Boolean, hasMoreToLoad: Boolean,
onReachedLoadMore: () -> Unit, onReachedLoadMore: () -> Unit,
modifier: Modifier = Modifier,
) { ) {
LazyColumn( LazyColumn(
modifier = Modifier modifier = modifier.fillMaxWidth(),
.padding(bottom = COMPOSER_HEIGHT)
.fillMaxSize(),
state = lazyListState, state = lazyListState,
horizontalAlignment = Alignment.Start, horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.Bottom, verticalArrangement = Arrangement.Bottom,
reverseLayout = true reverseLayout = true
) { ) {
item {
Spacer(modifier = Modifier.height(8.dp))
}
itemsIndexed(timelineItems) { index, timelineItem -> itemsIndexed(timelineItems) { index, timelineItem ->
TimelineItemRow(timelineItem = timelineItem) TimelineItemRow(timelineItem = timelineItem)
} }
@ -267,7 +262,6 @@ fun MessageEventBubble(
messageEvent: MessagesTimelineItemState.MessageEvent, messageEvent: MessagesTimelineItemState.MessageEvent,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
fun MessagesTimelineItemState.MessageEvent.bubbleShape(): Shape { fun MessagesTimelineItemState.MessageEvent.bubbleShape(): Shape {
return when (groupPosition) { return when (groupPosition) {
MessagesItemGroupPosition.First -> if (isMine) { MessagesItemGroupPosition.First -> if (isMine) {
@ -295,6 +289,14 @@ fun MessageEventBubble(
} }
} }
fun Modifier.offsetForItem(messageEvent: MessagesTimelineItemState.MessageEvent): Modifier {
return if (messageEvent.isMine) {
offset(y = -(12.dp))
} else {
offset(x = 20.dp, y = -(12.dp))
}
}
val (backgroundBubbleColor, border) = if (messageEvent.isMine) { val (backgroundBubbleColor, border) = if (messageEvent.isMine) {
Pair(MaterialTheme.colorScheme.surfaceVariant, null) Pair(MaterialTheme.colorScheme.surfaceVariant, null)
} else { } else {
@ -304,15 +306,7 @@ fun MessageEventBubble(
) )
} }
fun Modifier.offsetForItem(messageEvent: MessagesTimelineItemState.MessageEvent): Modifier { val bubbleShape = messageEvent.bubbleShape()
return if (messageEvent.isMine) {
offset(y = -(12.dp))
} else {
offset(x = 20.dp, y = -(12.dp))
}
}
val bubbleShape = remember { messageEvent.bubbleShape() }
Surface( Surface(
modifier = modifier modifier = modifier
.widthIn(min = 80.dp) .widthIn(min = 80.dp)

8
libraries/textcomposer/src/main/java/io/element/android/x/textcomposer/TextComposer.kt

@ -1,9 +1,7 @@
package io.element.android.x.textcomposer package io.element.android.x.textcomposer
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.viewinterop.AndroidView import androidx.compose.ui.viewinterop.AndroidView
import androidx.core.view.isVisible import androidx.core.view.isVisible
import io.element.android.x.element.resources.R as ElementR import io.element.android.x.element.resources.R as ElementR
@ -11,12 +9,10 @@ import io.element.android.x.element.resources.R as ElementR
@Composable @Composable
fun TextComposer( fun TextComposer(
callback: Callback, callback: Callback,
height: Dp, modifier: Modifier = Modifier,
){ ){
AndroidView( AndroidView(
modifier = Modifier modifier = modifier,
.fillMaxWidth()
.height(height),
factory = { context -> factory = { context ->
RichTextComposerLayout(context).apply { RichTextComposerLayout(context).apply {
// Sets up listeners for View -> Compose communication // Sets up listeners for View -> Compose communication

Loading…
Cancel
Save