From aa6db5eeafb9b34fd36cc782819072ef9ff445c0 Mon Sep 17 00:00:00 2001 From: Chris Smith Date: Fri, 2 Jun 2023 11:57:43 +0100 Subject: [PATCH] User row tweaks - Make the checkbox non-clickable (the parent handles the clicks, and this stops the m3 lib padding it out to be a sensible touch target) - Align and spread the text properly - Change the default avatar size to match designs --- .../ui/components/CheckableMatrixUserRow.kt | 4 ++-- .../matrix/ui/components/MatrixUserRow.kt | 8 +++++-- .../matrix/ui/components/UnresolvedUserRow.kt | 22 +++++++++++++------ 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CheckableMatrixUserRow.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CheckableMatrixUserRow.kt index 793bd1ff78..2ffc6bdc9b 100644 --- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CheckableMatrixUserRow.kt +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CheckableMatrixUserRow.kt @@ -82,9 +82,9 @@ fun CheckableUserRow( Checkbox( modifier = Modifier - .padding(end = 2.dp), + .padding(end = 16.dp), checked = checked, - onCheckedChange = onCheckedChange, + onCheckedChange = null, enabled = enabled, ) } diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt index 01f3b211d2..ce1e4dad4e 100644 --- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt @@ -16,9 +16,11 @@ package io.element.android.libraries.matrix.ui.components +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding @@ -47,7 +49,7 @@ import io.element.android.libraries.matrix.ui.model.getBestName fun MatrixUserRow( matrixUser: MatrixUser, modifier: Modifier = Modifier, - avatarSize: AvatarSize = AvatarSize.MEDIUM, + avatarSize: AvatarSize = AvatarSize.Custom(36.dp), ) = UserRow( avatarData = matrixUser.getAvatarData(avatarSize), name = matrixUser.getBestName(), @@ -72,7 +74,9 @@ fun UserRow( Avatar(avatarData) Column( modifier = Modifier - .padding(start = 12.dp), + .padding(start = 12.dp) + .fillMaxHeight(), + verticalArrangement = Arrangement.SpaceBetween, ) { // Name Text( diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnresolvedUserRow.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnresolvedUserRow.kt index c195d42685..617b0f944d 100644 --- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnresolvedUserRow.kt +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnresolvedUserRow.kt @@ -17,9 +17,11 @@ package io.element.android.libraries.matrix.ui.components import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding @@ -39,10 +41,12 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp 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.preview.ElementThemedPreview import io.element.android.libraries.designsystem.theme.components.Checkbox import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Text +import io.element.android.libraries.designsystem.theme.noFontPadding import io.element.android.libraries.matrix.ui.model.getAvatarData import io.element.android.libraries.ui.strings.R @@ -62,7 +66,9 @@ fun UnresolvedUserRow( Avatar(avatarData) Column( modifier = Modifier - .padding(start = 12.dp), + .padding(start = 12.dp) + .fillMaxHeight(), + verticalArrangement = Arrangement.SpaceBetween, ) { // ID Text( @@ -72,10 +78,11 @@ fun UnresolvedUserRow( maxLines = 1, overflow = TextOverflow.Ellipsis, color = MaterialTheme.colorScheme.primary, + style = noFontPadding, ) // Warning - Row(modifier = Modifier.fillMaxWidth()) { + Row(modifier = Modifier.fillMaxWidth().padding(top = 3.dp)) { Icon( imageVector = Icons.Filled.Error, contentDescription = "", @@ -121,8 +128,9 @@ fun CheckableUnresolvedUserRow( ) Checkbox( + modifier = Modifier.padding(end = 16.dp), checked = checked, - onCheckedChange = onCheckedChange, + onCheckedChange = null, enabled = enabled, ) } @@ -142,9 +150,9 @@ internal fun CheckableUnresolvedUserRowPreview() = ElementThemedPreview { val matrixUser = aMatrixUser() Column { - CheckableUnresolvedUserRow(false, matrixUser.getAvatarData(), matrixUser.userId.value) - CheckableUnresolvedUserRow(true, matrixUser.getAvatarData(), matrixUser.userId.value) - CheckableUnresolvedUserRow(false, matrixUser.getAvatarData(), matrixUser.userId.value, enabled = false) - CheckableUnresolvedUserRow(true, matrixUser.getAvatarData(), matrixUser.userId.value, enabled = false) + CheckableUnresolvedUserRow(false, matrixUser.getAvatarData(AvatarSize.Custom(36.dp)), matrixUser.userId.value) + CheckableUnresolvedUserRow(true, matrixUser.getAvatarData(AvatarSize.Custom(36.dp)), matrixUser.userId.value) + CheckableUnresolvedUserRow(false, matrixUser.getAvatarData(AvatarSize.Custom(36.dp)), matrixUser.userId.value, enabled = false) + CheckableUnresolvedUserRow(true, matrixUser.getAvatarData(AvatarSize.Custom(36.dp)), matrixUser.userId.value, enabled = false) } }