From 73291cde0538547f662523e576a50eb8002ef3b8 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Thu, 29 Jun 2023 20:12:26 +0200 Subject: [PATCH] Change the way ExtraPadding is computing to take into account the size of the font which will be used to render the space chars. --- .../timeline/components/event/ExtraPadding.kt | 34 ++++++++++++------- .../components/event/TimelineItemFileView.kt | 2 +- .../event/TimelineItemInformativeView.kt | 2 +- .../components/event/TimelineItemTextView.kt | 7 ++-- 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/ExtraPadding.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/ExtraPadding.kt index 7473bf46af..e880dc7959 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/ExtraPadding.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/ExtraPadding.kt @@ -18,17 +18,19 @@ package io.element.android.features.messages.impl.timeline.components.event import androidx.compose.runtime.Composable import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.TextUnit import io.element.android.features.messages.impl.timeline.model.TimelineItem import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent import io.element.android.libraries.core.bool.orFalse import io.element.android.libraries.matrix.api.timeline.item.event.EventSendState +import io.element.android.libraries.theme.ElementTheme import io.element.android.libraries.ui.strings.CommonStrings // Allow to not overlap the timestamp with the text, in the message bubble. // Compute the size of the worst case. -data class ExtraPadding(val str: String) +data class ExtraPadding(val nbChars: Int) -val noExtraPadding = ExtraPadding("") +val noExtraPadding = ExtraPadding(0) /** * See [io.element.android.features.messages.impl.timeline.components.TimelineEventTimestampView] for the related View. @@ -40,22 +42,30 @@ fun TimelineItem.Event.toExtraPadding(): ExtraPadding { val hasMessageSendingFailed = sendState is EventSendState.SendingFailed val isMessageEdited = (content as? TimelineItemTextBasedContent)?.isEdited.orFalse() - var strLen = 2 + var strLen = 6 if (isMessageEdited) { - strLen += stringResource(id = CommonStrings.common_edited_suffix).length + 2 + strLen += stringResource(id = CommonStrings.common_edited_suffix).length + 3 } strLen += formattedTime.length if (hasMessageSendingFailed) { strLen += 5 + if (isMessageEdited) { + // I do not know why, but adding 2 more chars avoid overlapping when the + // message is edited and in error. + strLen += 2 + } } - // A space and a few unbreakable spaces - return ExtraPadding(" " + "\u00A0".repeat(strLen)) + return ExtraPadding(strLen) } -fun ExtraPadding.strBigger(): String { - return if (str.isEmpty()) { - str - } else { - str + "\u00A0\u00A0\u00A0" - } +/** + * Get a string to add to the content of the message to avoid overlapping the timestamp. + * @param fontSize the font size of the message content, to be able to add more space char if the font is small. + */ +fun ExtraPadding.getStr(fontSize: TextUnit): String { + if (nbChars == 0) return "" + val timestampFontSize = ElementTheme.typography.fontBodyXsRegular.fontSize // 11.sp + val nbOfSpaces = ((timestampFontSize.value / fontSize.value) * nbChars).toInt() + 1 + // A space and some unbreakable spaces + return " " + "\u00A0".repeat(nbOfSpaces) } diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemFileView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemFileView.kt index 6036228730..dc77faae52 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemFileView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemFileView.kt @@ -79,7 +79,7 @@ fun TimelineItemFileView( overflow = TextOverflow.Ellipsis ) Text( - text = content.fileExtensionAndSize + extraPadding.str, + text = content.fileExtensionAndSize + extraPadding.getStr(12.sp), color = ElementTheme.materialColors.secondary, fontSize = 12.sp, maxLines = 1, diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemInformativeView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemInformativeView.kt index 325bd7e3f8..3abdb0feef 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemInformativeView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemInformativeView.kt @@ -60,7 +60,7 @@ fun TimelineItemInformativeView( color = MaterialTheme.colorScheme.secondary, fontSize = 14.sp, // Since the font size is smaller, add more space to extra padding, to not overlap with the timestamp - text = text + extraPadding.strBigger() + text = text + extraPadding.getStr(14.sp) ) } } diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt index 67e8b856fd..65be8f44e0 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt @@ -33,6 +33,7 @@ import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import androidx.core.text.util.LinkifyCompat import io.element.android.features.messages.impl.timeline.components.html.HtmlDocument import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent @@ -71,7 +72,9 @@ fun TimelineItemTextView( val linkStyle = SpanStyle( color = LinkColor, ) - val styledText = remember(content.body) { content.body.linkify(linkStyle) + extraPadding.str.toAnnotatedString() } + val styledText = remember(content.body) { + content.body.linkify(linkStyle) + extraPadding.getStr(16.sp).toAnnotatedString() + } ClickableLinkText( text = styledText, linkAnnotationTag = "URL", @@ -123,7 +126,7 @@ fun ContentToPreview(content: TimelineItemTextBasedContent) { TimelineItemTextView( content = content, interactionSource = MutableInteractionSource(), - extraPadding = ExtraPadding(" (padding)"), + extraPadding = ExtraPadding(nbChars = 8), ) }