Sulkta-OSS/element-x-ada
3
0
Fork 0
Code Issues 1 Pull requests 11 Projects Releases Packages Wiki Activity Actions

Merge pull request #1835 from vector-im/feature/fga/timeline_recomposition

Browse source 
Timeline : do not use SubcomposeLayout if not needed
This commit is contained in:
ganfra 2023-11-20 09:51:46 +01:00 • committed by GitHub
commit 658124f247
1 changed files with 57 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

106
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt
View file

@ -383,22 +383,6 @@ private fun MessageEventBubbleContent(
// to its `combinedClickable` parent so we do it manually // to its `combinedClickable` parent so we do it manually
fun onTimestampLongClick() = onMessageLongClick() fun onTimestampLongClick() = onMessageLongClick()
@Composable
fun ContentView(
modifier: Modifier = Modifier
) {
TimelineItemEventContentView(
content = event.content,
isMine = event.isMine,
interactionSource = interactionSource,
onClick = onMessageClick,
onLongClick = onMessageLongClick,
extraPadding = event.toExtraPadding(),
eventSink = eventSink,
modifier = modifier,
)
}
@Composable @Composable
fun ThreadDecoration( fun ThreadDecoration(
modifier: Modifier = Modifier modifier: Modifier = Modifier
@ -422,21 +406,20 @@ private fun MessageEventBubbleContent(
} }
@Composable @Composable
fun ContentAndTimestampView( fun WithTimestampLayout(
timestampPosition: TimestampPosition, timestampPosition: TimestampPosition,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
contentModifier: Modifier = Modifier, content: @Composable () -> Unit,
timestampModifier: Modifier = Modifier,
) { ) {
when (timestampPosition) { when (timestampPosition) {
TimestampPosition.Overlay -> TimestampPosition.Overlay ->
Box(modifier) { Box(modifier) {
ContentView(modifier = contentModifier) content()
TimelineEventTimestampView( TimelineEventTimestampView(
event = event, event = event,
onClick = onTimestampClicked, onClick = onTimestampClicked,
onLongClick = ::onTimestampLongClick, onLongClick = ::onTimestampLongClick,
modifier = timestampModifier modifier = Modifier
.padding(horizontal = 4.dp, vertical = 4.dp) // Outer padding .padding(horizontal = 4.dp, vertical = 4.dp) // Outer padding
.background(ElementTheme.colors.bgSubtleSecondary, RoundedCornerShape(10.0.dp)) .background(ElementTheme.colors.bgSubtleSecondary, RoundedCornerShape(10.0.dp))
.align(Alignment.BottomEnd) .align(Alignment.BottomEnd)
@ -445,24 +428,24 @@ private fun MessageEventBubbleContent(
} }
TimestampPosition.Aligned -> TimestampPosition.Aligned ->
Box(modifier) { Box(modifier) {
ContentView(modifier = contentModifier) content()
TimelineEventTimestampView( TimelineEventTimestampView(
event = event, event = event,
onClick = onTimestampClicked, onClick = onTimestampClicked,
onLongClick = ::onTimestampLongClick, onLongClick = ::onTimestampLongClick,
modifier = timestampModifier modifier = Modifier
.align(Alignment.BottomEnd) .align(Alignment.BottomEnd)
.padding(horizontal = 8.dp, vertical = 4.dp) .padding(horizontal = 8.dp, vertical = 4.dp)
) )
} }
TimestampPosition.Below -> TimestampPosition.Below ->
Column(modifier) { Column(modifier) {
ContentView(modifier = contentModifier) content()
TimelineEventTimestampView( TimelineEventTimestampView(
event = event, event = event,
onClick = onTimestampClicked, onClick = onTimestampClicked,
onLongClick = ::onTimestampLongClick, onLongClick = ::onTimestampLongClick,
modifier = timestampModifier modifier = Modifier
.align(Alignment.End) .align(Alignment.End)
.padding(horizontal = 8.dp, vertical = 4.dp) .padding(horizontal = 8.dp, vertical = 4.dp)
) )
@ -478,52 +461,77 @@ private fun MessageEventBubbleContent(
inReplyToDetails: InReplyTo.Ready?, inReplyToDetails: InReplyTo.Ready?,
modifier: Modifier = Modifier modifier: Modifier = Modifier
) { ) {
val modifierWithPadding: Modifier val timestampLayoutModifier: Modifier
val contentModifier: Modifier val contentModifier: Modifier
when { when {
inReplyToDetails != null -> { inReplyToDetails != null -> {
if (timestampPosition == TimestampPosition.Overlay) { if (timestampPosition == TimestampPosition.Overlay) {
modifierWithPadding = Modifier.padding(start = 8.dp, end = 8.dp, bottom = 8.dp) timestampLayoutModifier = Modifier.padding(start = 8.dp, end = 8.dp, bottom = 8.dp)
contentModifier = Modifier.clip(RoundedCornerShape(12.dp)) contentModifier = Modifier.clip(RoundedCornerShape(12.dp))
} else { } else {
contentModifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 0.dp, bottom = 8.dp) contentModifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 0.dp, bottom = 8.dp)
modifierWithPadding = Modifier timestampLayoutModifier = Modifier
} }
} }
timestampPosition != TimestampPosition.Overlay -> { timestampPosition != TimestampPosition.Overlay -> {
modifierWithPadding = Modifier timestampLayoutModifier = Modifier
contentModifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 8.dp, bottom = 8.dp) contentModifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 8.dp, bottom = 8.dp)
} }
else -> { else -> {
modifierWithPadding = Modifier timestampLayoutModifier = Modifier
contentModifier = Modifier contentModifier = Modifier
} }
} }
val threadDecoration = @Composable {
EqualWidthColumn(modifier = modifier, spacing = 8.dp) {
if (showThreadDecoration) { if (showThreadDecoration) {
ThreadDecoration(modifier = Modifier.padding(top = 8.dp, start = 12.dp, end = 12.dp)) ThreadDecoration(modifier = Modifier.padding(top = 8.dp, start = 12.dp, end = 12.dp))
} }
if (inReplyToDetails != null) { }
val senderName = inReplyToDetails.senderDisplayName ?: inReplyToDetails.senderId.value val contentWithTimestamp = @Composable {
val attachmentThumbnailInfo = attachmentThumbnailInfoForInReplyTo(inReplyToDetails) WithTimestampLayout(
val text = textForInReplyTo(inReplyToDetails) timestampPosition = timestampPosition,
val topPadding = if (showThreadDecoration) 0.dp else 8.dp modifier = timestampLayoutModifier,
ReplyToContent( ) {
senderName = senderName, TimelineItemEventContentView(
text = text, content = event.content,
attachmentThumbnailInfo = attachmentThumbnailInfo, isMine = event.isMine,
modifier = Modifier interactionSource = interactionSource,
.padding(top = topPadding, start = 8.dp, end = 8.dp) onClick = onMessageClick,
.clip(RoundedCornerShape(6.dp)) onLongClick = onMessageLongClick,
.clickable(enabled = true, onClick = inReplyToClick), extraPadding = event.toExtraPadding(),
eventSink = eventSink,
modifier = contentModifier,
) )
} }
ContentAndTimestampView( }
timestampPosition = timestampPosition, val inReplyTo = @Composable { inReplyToReady: InReplyTo.Ready ->
modifier = modifierWithPadding, val senderName = inReplyToReady.senderDisplayName ?: inReplyToReady.senderId.value
contentModifier = contentModifier, val attachmentThumbnailInfo = attachmentThumbnailInfoForInReplyTo(inReplyToReady)
val text = textForInReplyTo(inReplyToReady)
val topPadding = if (showThreadDecoration) 0.dp else 8.dp
ReplyToContent(
senderName = senderName,
text = text,
attachmentThumbnailInfo = attachmentThumbnailInfo,
modifier = Modifier
.padding(top = topPadding, start = 8.dp, end = 8.dp)
.clip(RoundedCornerShape(6.dp))
.clickable(enabled = true, onClick = inReplyToClick),
) )
}
if (inReplyToDetails != null) {
// Use SubComposeLayout only if necessary as it can have consequences on the performance.
EqualWidthColumn(modifier = modifier, spacing = 8.dp) {
threadDecoration()
inReplyTo(inReplyToDetails)
contentWithTimestamp()
}
} else {
Column(modifier = modifier, verticalArrangement = spacedBy(8.dp)) {
threadDecoration()
contentWithTimestamp()
}
} }
} }