From 573dc2a7afe194fa364e24c85427fe2bb2693490 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Tue, 5 Dec 2023 17:16:36 +0100 Subject: [PATCH 1/2] Ensure user display name is clipped to the Text area (#1950) --- .../impl/timeline/components/TimelineItemEventRow.kt | 1 + .../impl/members/details/RoomMemberHeaderSection.kt | 9 +++++++-- .../libraries/matrix/ui/components/MatrixUserHeader.kt | 2 ++ .../libraries/matrix/ui/components/SelectedUser.kt | 2 ++ .../android/libraries/matrix/ui/components/UserRow.kt | 4 +++- .../android/libraries/textcomposer/TextComposer.kt | 3 ++- 6 files changed, 17 insertions(+), 4 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt index 99fb5d3fb7..0a76523016 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt @@ -360,6 +360,7 @@ private fun MessageSenderInformation( Avatar(senderAvatar) Spacer(modifier = Modifier.width(4.dp)) Text( + modifier = Modifier.clipToBounds(), text = sender, maxLines = 1, overflow = TextOverflow.Ellipsis, diff --git a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/details/RoomMemberHeaderSection.kt b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/details/RoomMemberHeaderSection.kt index 5025f37b65..a5cc975b48 100644 --- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/details/RoomMemberHeaderSection.kt +++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/details/RoomMemberHeaderSection.kt @@ -29,13 +29,14 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clipToBounds import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp +import io.element.android.compound.theme.ElementTheme import io.element.android.libraries.designsystem.components.avatar.Avatar import io.element.android.libraries.designsystem.components.avatar.AvatarData import io.element.android.libraries.designsystem.components.avatar.AvatarSize import io.element.android.libraries.designsystem.theme.components.Text -import io.element.android.compound.theme.ElementTheme @Composable fun RoomMemberHeaderSection( @@ -56,7 +57,11 @@ fun RoomMemberHeaderSection( } Spacer(modifier = Modifier.height(24.dp)) if (userName != null) { - Text(text = userName, style = ElementTheme.typography.fontHeadingLgBold) + Text( + modifier = Modifier.clipToBounds(), + text = userName, + style = ElementTheme.typography.fontHeadingLgBold, + ) Spacer(modifier = Modifier.height(6.dp)) } Text( diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserHeader.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserHeader.kt index 9ff9f7d128..8a00be4663 100644 --- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserHeader.kt +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserHeader.kt @@ -25,6 +25,7 @@ import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clipToBounds import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp @@ -80,6 +81,7 @@ private fun MatrixUserHeaderContent( ) { // Name Text( + modifier = Modifier.clipToBounds(), text = matrixUser.getBestName(), maxLines = 1, style = ElementTheme.typography.fontHeadingSmMedium, diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt index 650d4d521b..a3199369e2 100644 --- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt @@ -31,6 +31,7 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.clipToBounds import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp @@ -62,6 +63,7 @@ fun SelectedUser( ) { Avatar(matrixUser.getAvatarData(size = AvatarSize.SelectedUser)) Text( + modifier = Modifier.clipToBounds(), text = matrixUser.getBestName(), overflow = TextOverflow.Ellipsis, maxLines = 1, diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UserRow.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UserRow.kt index 8cd9b63735..f9eef6b990 100644 --- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UserRow.kt +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UserRow.kt @@ -25,12 +25,13 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clipToBounds import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp +import io.element.android.compound.theme.ElementTheme import io.element.android.libraries.designsystem.components.avatar.Avatar import io.element.android.libraries.designsystem.components.avatar.AvatarData import io.element.android.libraries.designsystem.theme.components.Text -import io.element.android.compound.theme.ElementTheme @Composable internal fun UserRow( @@ -55,6 +56,7 @@ internal fun UserRow( ) { // Name Text( + modifier = Modifier.clipToBounds(), text = name, maxLines = 1, overflow = TextOverflow.Ellipsis, diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt index d9b284de6a..b3c87bc602 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt @@ -44,6 +44,7 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.clipToBounds import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow @@ -551,7 +552,7 @@ private fun ReplyToModeView( ) { Text( text = senderName, - modifier = Modifier.fillMaxWidth(), + modifier = Modifier.fillMaxWidth().clipToBounds(), style = ElementTheme.typography.fontBodySmMedium, textAlign = TextAlign.Start, color = ElementTheme.materialColors.primary, From 21a83351e18ac2345e2ad132ca7ee6df1edc7ea5 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Tue, 5 Dec 2023 17:22:16 +0100 Subject: [PATCH 2/2] Changelog --- changelog.d/1950.bugfix | 1 + 1 file changed, 1 insertion(+) create mode 100644 changelog.d/1950.bugfix diff --git a/changelog.d/1950.bugfix b/changelog.d/1950.bugfix new file mode 100644 index 0000000000..2253ca74b8 --- /dev/null +++ b/changelog.d/1950.bugfix @@ -0,0 +1 @@ +Fix rendering of user name with vertical text by clipping the text.