From be5bece629cc4f48e3327fe4b42f86311c7dd162 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Tue, 12 Sep 2023 13:20:29 +0200 Subject: [PATCH] Attempt to add extra spacing for Document (#1228) --- .../timeline/components/event/ExtraPadding.kt | 11 ++++++++ .../components/event/TimelineItemTextView.kt | 24 ++++++---------- .../timeline/components/html/HtmlDocument.kt | 28 ++++++++++++++----- 3 files changed, 40 insertions(+), 23 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 65101183d9..e5851c993b 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,10 +18,14 @@ 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.Dp import androidx.compose.ui.unit.TextUnit +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.times 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.designsystem.text.toDp import io.element.android.libraries.matrix.api.timeline.item.event.LocalEventSendState import io.element.android.libraries.theme.ElementTheme import io.element.android.libraries.ui.strings.CommonStrings @@ -69,3 +73,10 @@ fun ExtraPadding.getStr(fontSize: TextUnit): String { // A space and some unbreakable spaces return " " + "\u00A0".repeat(nbOfSpaces) } + +@Composable +fun ExtraPadding.getDpSize(): Dp { + if (nbChars == 0) return 0.dp + val timestampFontSize = ElementTheme.typography.fontBodyXsRegular.fontSize // 11.sp + return nbChars * timestampFontSize.toDp() / 3 +} 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 c6b0218bba..b2dcc477a0 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 @@ -18,9 +18,6 @@ package io.element.android.features.messages.impl.timeline.components.event import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.height import androidx.compose.material3.LocalContentColor import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider @@ -28,7 +25,6 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Modifier 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 io.element.android.features.messages.impl.timeline.components.html.HtmlDocument import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent @@ -51,18 +47,14 @@ fun TimelineItemTextView( CompositionLocalProvider(LocalContentColor provides ElementTheme.colors.textPrimary) { val htmlDocument = content.htmlDocument if (htmlDocument != null) { - // For now we ignore the extra padding for html content, so add some spacing - // below the content (as previous behavior) - Column(modifier = modifier) { - HtmlDocument( - document = htmlDocument, - modifier = Modifier, - onTextClicked = onTextClicked, - onTextLongClicked = onTextLongClicked, - interactionSource = interactionSource - ) - Spacer(Modifier.height(16.dp)) - } + HtmlDocument( + document = htmlDocument, + extraPadding = extraPadding, + modifier = modifier, + onTextClicked = onTextClicked, + onTextLongClicked = onTextLongClicked, + interactionSource = interactionSource + ) } else { Box(modifier) { val textWithPadding = remember(content.body) { diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/html/HtmlDocument.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/html/HtmlDocument.kt index 9c2798a638..11eb1f421f 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/html/HtmlDocument.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/html/HtmlDocument.kt @@ -25,8 +25,10 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowRow +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.InlineTextContent import androidx.compose.foundation.text.appendInlineContent @@ -53,6 +55,9 @@ 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 io.element.android.features.messages.impl.timeline.components.event.ExtraPadding +import io.element.android.features.messages.impl.timeline.components.event.getDpSize +import io.element.android.features.messages.impl.timeline.components.event.noExtraPadding import io.element.android.libraries.designsystem.components.ClickableLinkText import io.element.android.libraries.designsystem.preview.ElementPreviewDark import io.element.android.libraries.designsystem.preview.ElementPreviewLight @@ -72,18 +77,23 @@ private const val CHIP_ID = "chip" @Composable fun HtmlDocument( document: Document, + extraPadding: ExtraPadding, interactionSource: MutableInteractionSource, modifier: Modifier = Modifier, onTextClicked: () -> Unit = {}, onTextLongClicked: () -> Unit = {}, ) { - HtmlBody( - body = document.body(), - interactionSource = interactionSource, + FlowRow( modifier = modifier, - onTextClicked = onTextClicked, - onTextLongClicked = onTextLongClicked, - ) + ) { + HtmlBody( + body = document.body(), + interactionSource = interactionSource, + onTextClicked = onTextClicked, + onTextLongClicked = onTextLongClicked, + ) + Spacer(modifier = Modifier.width(extraPadding.getDpSize())) + } } @Composable @@ -603,5 +613,9 @@ internal fun HtmlDocumentDarkPreview(@PreviewParameter(DocumentProvider::class) @Composable private fun ContentToPreview(document: Document) { - HtmlDocument(document, remember { MutableInteractionSource() }) + HtmlDocument( + document = document, + extraPadding = noExtraPadding, + interactionSource = remember { MutableInteractionSource() } + ) }