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

Design fixes
This commit is contained in:
Benoit Marty 2023-06-30 19:22:05 +02:00 committed by GitHub
commit a2b3807e2e
43 changed files with 112 additions and 98 deletions

View file

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

View file

@ -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,

View file

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

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4b7ff8d0fef47f1fb7d0211409652453ec69e7fdbcb2e2ace957939c8a3635fa
size 8082
oid sha256:b73b4dbeb9a29f3fa032efe51180a79b79c990d9f0184421f29ed32f02e226b5
size 5991

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7d63e0f003219ebe12d481d37d1b152baac20583eea143fccf20846f062d1b89
size 8292
oid sha256:64c3d595fb898d78e2546933c2726b733bbeb369718f79e934284f66adbcded7
size 6221

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:914755576adadb44afe10c70d451a60819b3b0db5d3ab3a7e838a17c07035837
size 7886
oid sha256:9e405ec5830955d4e8ffce7efb3769c782739ae6ddda7ff950f160c28bd91fc0
size 5607

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:150abc1fae569bd587a419ca5f0eea0f02d7c011545eb677c077e3200691134b
size 8375
oid sha256:f360ea3fe2c371940a7c2483593d2ee2f755ee7e39ef7e3c7dc7097d766674e3
size 5932

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:45901a5b2712a74ec634351395b60afd3008f98252615bb91e5c6d44bf7ccb40
size 8612
oid sha256:1628d5f5290e4a0ae796be1973760e7371b07c04025676143d1755ea9420d9d9
size 6211

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0ecb27df40a8cbe83cbcdaacd09724a5e486732be29f2c552f926eec5bfc4aea
size 8046
oid sha256:bb6e50af0903bf32cd141847fa652ccf47a1de065a575e7a785a160772b79cac
size 5507

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d6db79b8eb53fe2f725f2891bb05a258b670a63fc65a526789257c22d15ad47b
size 62295
oid sha256:043097099dd08f0e192debd0ef650e8effe76c71f29dd3a993bf756d8e933d25
size 62314

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7d12aebf3567be495b32b811c7cb3f85fee8e1dcc9054d1071704a7e4cb59a6e
size 68783
oid sha256:e78c43cdaa5532d854087567fb8deef13fe89b1e896450428186df6b6cd83443
size 68731

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a8f964bdd2c5a1e8ce147df80230076cd771062c4607310271a8fe9dc33a2286
size 70758
oid sha256:960e7c05075107db3a2b57f630f114927d4d019ffc5d38f5d501d44107753ea5
size 70789

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:03eebd80447751df357996b4e9f343681e973e813aa091e4dc3de45a0576d164
size 64290
oid sha256:f39fd269e68edb95e0b7c49bbf21a51c6c4233bfbfc173fdbc0e80eec2cf8d83
size 64252

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:07f611db60f509a8be5ce619e9e7d00784ac29c4fa7b6b3461edf2b9e3f2a9c0
size 71225
oid sha256:79493cad80934a053f300864189dd47bf6c1d9aabac780a5c5ea1ca497fc7a47
size 71250

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c5a9b225e0d09b2b72a1e74094daefed0e672457b52cbdc5138923aa1173124f
size 73643
oid sha256:c2b4ed0df17a6f96dd0031b820585346ec6ccac419a2f1237e0decdfb50dddb7
size 73644

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:527e9f234020fe52277f19c244565aef0b63c97db56cdab9fa7b70a3a3145b2f
size 42500
oid sha256:047cbed5744579aaf927330d8ae002bcbb0e44cd2a4f8c65a49d839d2f3fae8b
size 42712

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7b3ba9608d5e35b026e8bb7cfc9c5e1f49e81ac3c57163b24c0c2810b2696c5b
size 53749
oid sha256:4d6247667a790a0a4189a69d78e29bb2dce28b8aeb45cad04347e09be61ccb23
size 53728

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d9e4fc3870b5dfb628f6bcdcb69ea1fccbb085b4a538bb7ba85d946d7d37ffd6
size 56908
oid sha256:ca06ac3a11554302731d8c010c3f1098d19e35faa2747885d53abfb9b93e50eb
size 56702

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0a2d25abb7d0d15d53994b2b7af2aa08819b2b68e5e13931e53b4d7bbdc27f18
size 47543
oid sha256:420f2e78166e233502c80dd79e7ad21bee22a4fcc3146f35ed1a5f20b32c944a
size 47289

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c0a5f18f8822de1f0f398deef7a19ad9f1a372e97e27889a9e78ec97a14c84b0
size 61894
oid sha256:d166f5d024011395077f16e6d85a3d60b19e393a469cc5273479761e4283de25
size 61952

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1da5db0c72cee6075e73ec958efad2a4e7d84b4d45d0e93187135bbe2a50451f
size 44299
oid sha256:7d9c2cabba5995b5bc5bfcbc9c2a081d8c2e1b8d86f24536b86c19348768e4c5
size 44147

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:081081bf7e41eccb9a8812c95100fcc0a2a4ead33c82ef4e314fe02fb7a0551d
size 55601
oid sha256:fe9ea07c0ef2cbfb16d7735cca4872a307f370f7332c71a8fb44dfef3637a42a
size 55791

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:21d1b7469df1b1ba6f3c4b053702b045506fa5b510f16d07661bb8842a59047f
size 40750
oid sha256:498b25c2274b89f6421f80d6104684152480f88837bbd4844f05857240331116
size 40853

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:696d092927284673100f0d0c9a5f3b5448afc6a0dca63cfefdcb55acd2691e03
size 43471
oid sha256:5816e45f00625e5183fb1b0157bea4aff9e4a263c51c127a425a468dea87a23d
size 43579

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5df4d249d0aefd7f1c85593c853c7e18535795ea4cf5d6c957149c4f443a6430
size 55911
oid sha256:230aaefe076912bba8cc5393db3850103a3f5fbb73dcf9b85fa2cf4700350165
size 55763

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:42f04d6a93187cc26c9c0fb5c9d60c418d0e01fc42a27eb14d13f6267a7aabd5
size 59076
oid sha256:ae14fcc174d187290418462c0ea435eae75fcf60a925d5f1e17e18448bbaa92c
size 58926

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e88cdaaf2c98cd872c9645662b97f7157b3c862ab70616d29c4e8d53424612fc
size 49040
oid sha256:9fcdf56aaddf7447f6df9d7a87773f7bc266df98fca0d9956c89d93b69eadff5
size 48937

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ea57669770d84acd3d8a4114561a5ed8f9bb1d7124df8075f4738fd14a142736
size 63699
oid sha256:c9985113800d8789503c407df9a2eb0ca83869c432cba9014c5cfc250cfe36ec
size 64239

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a74663300260f547592110b52baac61990014b4afe51b2c99b417f5d7fc4aac5
size 80450
oid sha256:4f9ba6ae2cac88d442b4ec9ea2abbae901960275d017874b87656d5ee5525804
size 81275

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fd951c7ffcd7673b2224986e5fdf168543e763b7697e1389bbbeea071a7a3c83
size 45317
oid sha256:60ef831750ebc9fd4bda3f3dc1895fe98e26def9b5aeca759a8ef26510a288e0
size 45299

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6db451aec7d5d3b19c3378ff15218aacb0d838714b2d196465d0cc9190b45ae1
size 57725
oid sha256:46ba4d82d26ecd969bdb14e36fcf27a9dff304565e092a36a603c01270a37552
size 57772

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f547ad07db87cbc08c31922e1f21fdbe6fdbdea8667159c8e100a440a2c05c7f
size 41624
oid sha256:94ea618b4daaa7f6a1dda170357c31090104a3db12a675eaead30491cc9d16da
size 41599

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1f80795f0031052ed7f549f85146b76ebdbfcb7a56d9c5716a002a438eb0ea00
size 43501
oid sha256:a782e808691e129bddaa202d8cbb92cb80e0021246f62fb52b272073e9a60b04
size 43595

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d4fdc1a87c918200f7e8261f98069dd2817e9cc6664f587fea5a702ef06611a8
size 45069
oid sha256:cd9cb3166a5edac332f11bf58c58e87c6c72bee0ef750376a2c076d9d87d0a33
size 45183

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:dc6afed2c94d2d864ec52a184fc362dd212a9c9d86d546ab8e077fa0509ee578
size 43741
oid sha256:02271b61eedc338cfae0dbc07693f24631f6f52f1d20ff34cbaff7c68c34a210
size 43842

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:40831216d38bd5aadf0bbbc7b7b263c85c9db327ab8b2956ff2f45c51a3779c9
size 46753
oid sha256:66e05897e8233d39a7cb187bb3a0c962adf4eed7b287ff556567b718b5d24597
size 46839

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:785925fae28ada8803e71922660c044fcf5e570c71d2b280ff0ec9d438b66082
size 44180
oid sha256:74d3c9bf35257b8ae23820900cacb798e62618f78099456038b1af16d09fb908
size 44219

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2bf860ee9ba6f836a222d5d753c2d986e12b2bea6d95a91893fc59510cc5c29d
size 44621
oid sha256:e9855ce12fe901460e8423de4516656bc7073055d04f57cd5be2f58ec61e932c
size 44623

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:75963fbdfce9a5ee2913459cd075fddaa8450693d8daddf5044b14a7df4db860
size 46306
oid sha256:a25cd3598f58c8335c344dc8e799f3dcbde880131a54da42ffc95803e8a8a431
size 46327

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:992d1c0d8ae4d706b4c2420214f0a2c44de7f2d381df9c640fb5aa3aa9048fbb
size 44924
oid sha256:fc925b7f26112db3b8bc0f9c5a1613025a5754249fa37414ca372c742341e132
size 44935

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:295cc62a4969cd9c57b52fc3a85be8d04e736453223b0bd5698e78d9299aa2da
size 47992
oid sha256:6ad56ce29bd30d075aa5331850452b9ef6c69512529e51c85609a7c60b850ea3
size 47953

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:057fa5d76bc0db2658c1f6f670365f4d74a0629495ea4d7ee0a53a1ab503435f
size 45334
oid sha256:3ba244c4ba15a21852caae07cb265339ace5c12f346d363c553bbdade246856d
size 45398