Merge pull request #729 from vector-im/feature/bma/designFixes

Design fixes

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)
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemFileView.kt

@@ -26,7 +26,6 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Attachment
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -43,6 +42,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.theme.ElementTheme
 
 @Composable
 fun TimelineItemFileView(
@@ -57,12 +57,13 @@ fun TimelineItemFileView(
             modifier = Modifier
                 .size(32.dp)
                 .clip(CircleShape)
-                .background(MaterialTheme.colorScheme.background),
+                .background(ElementTheme.materialColors.background),
             contentAlignment = Alignment.Center,
         ) {
             Icon(
                 imageVector = Icons.Outlined.Attachment,
                 contentDescription = "OpenFile",
+                tint = ElementTheme.materialColors.primary,
                 modifier = Modifier
                     .size(16.dp)
                     .rotate(-45f),
@@ -72,13 +73,14 @@ fun TimelineItemFileView(
         Column {
             Text(
                 text = content.body,
+                color = ElementTheme.materialColors.primary,
                 maxLines = 2,
                 fontSize = 16.sp,
                 overflow = TextOverflow.Ellipsis
             )
             Text(
-                text = content.fileExtensionAndSize + extraPadding.str,
-                color = MaterialTheme.colorScheme.secondary,
+                text = content.fileExtensionAndSize + extraPadding.getStr(12.sp),
+                color = ElementTheme.materialColors.secondary,
                 fontSize = 12.sp,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemInformativeView.kt

@@ -59,8 +59,7 @@ fun TimelineItemInformativeView(
             fontStyle = FontStyle.Italic,
             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)
         )
     }
 }

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),
     )
 }