From 866c8375b305a90119a2bb713a66c32443638e84 Mon Sep 17 00:00:00 2001 From: Jorge Martin Espinosa Date: Thu, 7 May 2026 11:11:07 +0200 Subject: [PATCH] Make send event state UI easier to click (#6739) * Make send event state UI easier to click Make it so the whole timestamp view can be clicked * Update screenshots * Simplify `clickableModifier` --------- Co-authored-by: ElementBot --- .../components/TimelineEventTimestampView.kt | 53 +++++++++++++------ ...ts_TimelineEventTimestampView_Day_3_en.png | 2 +- ..._TimelineEventTimestampView_Night_3_en.png | 4 +- ...lineItemEventRowForDirectRoom_Day_0_en.png | 4 +- ...neItemEventRowForDirectRoom_Night_0_en.png | 4 +- ...ts_TimelineItemEventRowShield_Day_0_en.png | 4 +- ..._TimelineItemEventRowShield_Night_0_en.png | 4 +- ...mponents_TimelineItemEventRow_Day_0_en.png | 4 +- ...onents_TimelineItemEventRow_Night_0_en.png | 2 +- ...s.impl.timeline_TimelineView_Day_17_en.png | 4 +- ...es.impl.timeline_TimelineView_Day_2_en.png | 4 +- ...es.impl.timeline_TimelineView_Day_3_en.png | 4 +- ...es.impl.timeline_TimelineView_Day_9_en.png | 4 +- ...impl.timeline_TimelineView_Night_17_en.png | 4 +- ....impl.timeline_TimelineView_Night_2_en.png | 4 +- ....impl.timeline_TimelineView_Night_3_en.png | 4 +- ....impl.timeline_TimelineView_Night_9_en.png | 4 +- ...ures.messages.impl_MessagesViewA11y_en.png | 4 +- 18 files changed, 68 insertions(+), 49 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineEventTimestampView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineEventTimestampView.kt index 21ef7c5b09..25a53cec2d 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineEventTimestampView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineEventTimestampView.kt @@ -15,9 +15,12 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable +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.res.stringResource import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp @@ -47,9 +50,39 @@ fun TimelineEventTimestampView( val isMessageEdited = event.content.isEdited() val isMessageRedacted = event.content.isRedacted() val tint = if (hasError || hasEncryptionCritical && !isMessageRedacted) ElementTheme.colors.textCriticalPrimary else ElementTheme.colors.textSecondary + + val shield = event.messageShield + val isVerifiedUserSendFailure = event.localSendState is LocalEventSendState.Failed.VerifiedUser + val onClickLabel = when { + shield != null -> stringResource(CommonStrings.a11y_view_details) + hasError && isVerifiedUserSendFailure -> stringResource(CommonStrings.action_open_context_menu) + else -> null + } + val clickableModifier = remember(shield, hasError) { + when { + shield != null -> { + Modifier.clickable( + onClickLabel = onClickLabel, + ) { + eventSink(TimelineEvent.ShowShieldDialog(shield)) + } + } + hasError -> Modifier + .clickable( + enabled = isVerifiedUserSendFailure, + onClickLabel = onClickLabel, + ) { + eventSink(TimelineEvent.ComputeVerifiedUserSendFailure(event)) + } + else -> Modifier + } + } Row( modifier = Modifier .padding(PaddingValues(start = TimelineEventTimestampViewDefaults.spacing)) + // For a better click target, make the corners rounded + .clip(RoundedCornerShape(8.dp)) + .then(clickableModifier) .then(modifier), verticalAlignment = Alignment.CenterVertically, ) { @@ -67,36 +100,22 @@ fun TimelineEventTimestampView( color = tint, ) if (hasError) { - val isVerifiedUserSendFailure = event.localSendState is LocalEventSendState.Failed.VerifiedUser Spacer(modifier = Modifier.width(2.dp)) Icon( imageVector = CompoundIcons.ErrorSolid(), contentDescription = stringResource(id = CommonStrings.common_sending_failed), tint = tint, - modifier = Modifier - .size(15.dp, 18.dp) - .clickable( - enabled = isVerifiedUserSendFailure, - onClickLabel = stringResource(CommonStrings.action_open_context_menu), - ) { - eventSink(TimelineEvent.ComputeVerifiedUserSendFailure(event)) - } + modifier = Modifier.size(15.dp, 18.dp), ) } if (!isMessageRedacted) { - event.messageShield?.let { shield -> + shield?.let { shield -> Spacer(modifier = Modifier.width(2.dp)) Icon( imageVector = shield.toIcon(), contentDescription = stringResource(id = CommonStrings.a11y_encryption_details), - modifier = Modifier - .size(15.dp) - .clickable( - onClickLabel = stringResource(CommonStrings.a11y_view_details), - ) { - eventSink(TimelineEvent.ShowShieldDialog(shield)) - }, + modifier = Modifier.size(15.dp), tint = shield.toIconColor(), ) Spacer(modifier = Modifier.width(4.dp)) diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineEventTimestampView_Day_3_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineEventTimestampView_Day_3_en.png index 2faf0a5bb2..e1f1510b5d 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineEventTimestampView_Day_3_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineEventTimestampView_Day_3_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8ef807d846ee06add8438e81ece8570cf688742268af87b6985551c3cb2a0faf +oid sha256:4bb4d59085cc26a284e1bd9c2e6fb7e982a1b32eae5f46282a4dde93b5d5ba1f size 5735 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineEventTimestampView_Night_3_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineEventTimestampView_Night_3_en.png index fdbb4a4aae..b09b378502 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineEventTimestampView_Night_3_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineEventTimestampView_Night_3_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:46b2bf1b4ed49f02ab2ff5218ad6bf2a7e0184e022af60d4cbeb8599646975c8 -size 5670 +oid sha256:e6cf51de97f040b1028bc32d167f7c4acdbd2717c3222e1a1d97929d666cacc0 +size 5669 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowForDirectRoom_Day_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowForDirectRoom_Day_0_en.png index 592d4b0e0d..a0b392a659 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowForDirectRoom_Day_0_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowForDirectRoom_Day_0_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:87b78e2a06bf592ac538eecfdca70a9c5ec51f69e397623edcdcad8daaa9bfe8 -size 293405 +oid sha256:495951c4763e1c3015a88964683d384b84dbfce1b9569630d81ff8578a7d13e2 +size 293410 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowForDirectRoom_Night_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowForDirectRoom_Night_0_en.png index a84752536c..97826e6a68 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowForDirectRoom_Night_0_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowForDirectRoom_Night_0_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0bccf822697a9710752ce5323c8b6481d7080d9eba7579d9679f451818ab71a6 -size 293202 +oid sha256:25d4838bf2587c2ccfffe83d53d556ec35ee7691e6eff91689d41dfcd538a324 +size 293209 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowShield_Day_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowShield_Day_0_en.png index 4faa1f828a..90e9e72d8f 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowShield_Day_0_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowShield_Day_0_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d6982eb3368779c8e7fa602059d9af4119f450f9f2f7f384b0e1251080d286c1 -size 377103 +oid sha256:7684bb50d0012a7175957d0bbac28f68856573cea37f45697ef3b81235f1eafb +size 377102 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowShield_Night_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowShield_Night_0_en.png index 14d9ae5907..c7a8f44df4 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowShield_Night_0_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRowShield_Night_0_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:add275ce7641fbeba7acca740b2d0d6df0ed06c1c3c5cbcd05a1ca474b086ccf -size 375878 +oid sha256:f6677e0cda28bab1973cc767606eedf86eae3a1ae111b552c6f284eae4fb2de2 +size 375875 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRow_Day_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRow_Day_0_en.png index 480ae88643..cacc88a34c 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRow_Day_0_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRow_Day_0_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2476a6e3d5beff4360a349adb831e63fbc05962b57bb0f551ec784e28b9495d1 -size 411656 +oid sha256:789dbfa4886cacdaf5bab7bd6e501d0dd6e31af965b398d9f61d7e46c653a8c9 +size 411661 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRow_Night_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRow_Night_0_en.png index 75cdc28a3e..e85c9987f7 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRow_Night_0_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components_TimelineItemEventRow_Night_0_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8cb2e25a8f461fbb9ca9082bf94571daae1d2c886d2cd33ecea14f955eb959b2 +oid sha256:a740b9d1af8d48d5b9f9bd47abab34ed37037c7c2646d92a05af139435f23d27 size 409955 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_17_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_17_en.png index 72f4fa03b5..39bbd406ed 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_17_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_17_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4a0827eb23b48bd03fde5078598cb7827459a213ff0a693890581628330f6939 -size 66845 +oid sha256:6f7e3f1cdaf18d7d529be07cde3bdc9100243780101e73dd53c3d78639775974 +size 66862 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_2_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_2_en.png index 67aca77a8c..414db592da 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_2_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_2_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c94c770cbd1f41f0b50d0a64290c96e1a75bdcddbd0f850d097cd41e5f2a9cf5 -size 493537 +oid sha256:467e5aee42e9041db2672dc0d37e98fc1090c19207604a31247f3142d845f792 +size 493534 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_3_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_3_en.png index dde5ade114..b9723dd5c4 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_3_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_3_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9d73c338dce5b27c718cffbbf7cb1fe8f5b9d72f0d335afd81526849190d4941 -size 488704 +oid sha256:723238ad84c9925eb0edbbf225b50a03bf29e5671777d9f03eba6b910ee00fcf +size 488705 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_9_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_9_en.png index adf8d255e3..6ff4840c57 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_9_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_9_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a8fa43d296a984d242ed56f7879de4c38f3da94147c365c424248eba2c4ad61d -size 371263 +oid sha256:fbd5652457d495c3c6692c151be27c985cf47e95c8b89af9b6edc8c1b734acc8 +size 371265 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_17_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_17_en.png index 3ad7246822..e5795401ce 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_17_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_17_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bea070091132156a809da1c185e2f94333e62f8ea9ae7d6d1b789adffb869522 -size 55538 +oid sha256:06e2c25d3cbd111b22bd0188e2b1880729e023170c7bed972cdb3c34544ba55e +size 55547 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_2_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_2_en.png index fa93db2f0d..c418921834 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_2_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_2_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c57dbc66342263c4ff1d47c18099dd2cc22b752f1b6bfc853566706dc0cf5110 -size 486435 +oid sha256:3bf788838a204acb53bceba268327e3c2a772447490a597ed4929487716bc6fb +size 486425 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_3_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_3_en.png index 150b2b0c87..6ab414ab0b 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_3_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_3_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5d4fff1585f602d561a98bfbd907d3c7499e6717f488eee711e90f2b0f5df7b9 -size 481595 +oid sha256:80e198bd8cf523c785de4a66c4c22cecb22d1040377bdfd66eeed821a4281592 +size 481590 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_9_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_9_en.png index 7b5512dcc7..825618ae17 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_9_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_9_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bcd9e0934b5f6808d58a3d3506641f173c4b223d78c605de09832d3741e8834f -size 149300 +oid sha256:75ace43e27a0c8f9786b0494931c3ef5e12d903e7417dddecfb34c9526e74f3c +size 149314 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesViewA11y_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesViewA11y_en.png index c214011ea7..631559cabc 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesViewA11y_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesViewA11y_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:23aabf96e5dc84257968a77ad406a8f3952b24fa8d8c03612bddfc08b6c990c6 -size 131751 +oid sha256:ee269e52306e048bbd0a06ea7c56f9080f37f37b00909c3d48a02a3a37bd57bc +size 131800