Merge pull request #5970 from ofalvai/feature/ofa/read-receipts-design

Make read receipt avatar list more compact
2024-11-22 09:25:49 +03:00 · 2022-05-31 18:26:57 +02:00 · 2022-05-31 18:26:57 +02:00 · e6beb73e3d
commit e6beb73e3d
parent 8e709dbbdb b5168f27dd
4 changed files with 63 additions and 89 deletions
--- a/changelog.d/5970.feature
+++ b/changelog.d/5970.feature
@ -0,0 +1 @@
+Make read receipt avatar list more compact
--- a/vector/src/main/java/im/vector/app/core/ui/views/ReadReceiptsView.kt
+++ b/vector/src/main/java/im/vector/app/core/ui/views/ReadReceiptsView.kt
@ -28,8 +28,7 @@ import im.vector.app.features.home.AvatarRenderer
 import im.vector.app.features.home.room.detail.timeline.item.ReadReceiptData
 import im.vector.app.features.home.room.detail.timeline.item.toMatrixItem

-private const val MAX_RECEIPT_DISPLAYED = 5
-private const val MAX_RECEIPT_DESCRIBED = 3
+private const val MAX_RECEIPT_DISPLAYED = 3

 class ReadReceiptsView @JvmOverloads constructor(
        context: Context,
@ -45,13 +44,7 @@ class ReadReceiptsView @JvmOverloads constructor(
    }

    private val receiptAvatars: List<ImageView> by lazy {
-        listOf(
-                views.receiptAvatar1,
-                views.receiptAvatar2,
-                views.receiptAvatar3,
-                views.receiptAvatar4,
-                views.receiptAvatar5
-        )
+        listOf(views.receiptAvatar1, views.receiptAvatar2, views.receiptAvatar3)
    }

    private fun setupView() {
@ -60,66 +53,58 @@ class ReadReceiptsView @JvmOverloads constructor(
    }

    fun render(readReceipts: List<ReadReceiptData>, avatarRenderer: AvatarRenderer) {
-        if (readReceipts.isNotEmpty()) {
-            isVisible = true
-            for (index in 0 until MAX_RECEIPT_DISPLAYED) {
-                val receiptData = readReceipts.getOrNull(index)
-                if (receiptData == null) {
-                    receiptAvatars[index].visibility = View.INVISIBLE
-                } else {
-                    receiptAvatars[index].visibility = View.VISIBLE
-                    avatarRenderer.render(receiptData.toMatrixItem(), receiptAvatars[index])
-                }
-            }
+        receiptAvatars.forEach { it.isVisible = false }

-            val displayNames = readReceipts
-                    .mapNotNull { it.displayName }
-                    .filter { it.isNotBlank() }
-                    .take(MAX_RECEIPT_DESCRIBED)
+        readReceipts.take(MAX_RECEIPT_DISPLAYED).forEachIndexed { index, receiptData ->
+            receiptAvatars[index].isVisible = true
+            avatarRenderer.render(receiptData.toMatrixItem(), receiptAvatars[index])
+        }

-            if (readReceipts.size > MAX_RECEIPT_DISPLAYED) {
-                views.receiptMore.visibility = View.VISIBLE
-                views.receiptMore.text = context.getString(
-                        R.string.x_plus, readReceipts.size - MAX_RECEIPT_DISPLAYED
-                )
-            } else {
-                views.receiptMore.visibility = View.GONE
-            }
-            contentDescription = when (readReceipts.size) {
-                1    ->
-                    if (displayNames.size == 1) {
-                        context.getString(R.string.one_user_read, displayNames[0])
-                    } else {
-                        context.resources.getQuantityString(R.plurals.fallback_users_read, readReceipts.size)
-                    }
-                2    ->
-                    if (displayNames.size == 2) {
-                        context.getString(R.string.two_users_read, displayNames[0], displayNames[1])
-                    } else {
-                        context.resources.getQuantityString(R.plurals.fallback_users_read, readReceipts.size)
-                    }
-                3    ->
-                    if (displayNames.size == 3) {
-                        context.getString(R.string.three_users_read, displayNames[0], displayNames[1], displayNames[2])
-                    } else {
-                        context.resources.getQuantityString(R.plurals.fallback_users_read, readReceipts.size)
-                    }
-                else ->
-                    if (displayNames.size >= 2) {
-                        val qty = readReceipts.size - 2
-                        context.resources.getQuantityString(
-                                R.plurals.two_and_some_others_read,
-                                qty,
-                                displayNames[0],
-                                displayNames[1],
-                                qty
-                        )
-                    } else {
-                        context.resources.getQuantityString(R.plurals.fallback_users_read, readReceipts.size)
-                    }
-            }
+        val displayNames = readReceipts
+                .mapNotNull { it.displayName }
+                .filter { it.isNotBlank() }
+                .take(MAX_RECEIPT_DISPLAYED)
+
+        if (readReceipts.size > MAX_RECEIPT_DISPLAYED) {
+            views.receiptMore.visibility = View.VISIBLE
+            views.receiptMore.text = context.getString(
+                    R.string.x_plus, readReceipts.size - MAX_RECEIPT_DISPLAYED
+            )
        } else {
-            isVisible = false
+            views.receiptMore.visibility = View.GONE
+        }
+        contentDescription = when (readReceipts.size) {
+            1    ->
+                if (displayNames.size == 1) {
+                    context.getString(R.string.one_user_read, displayNames[0])
+                } else {
+                    context.resources.getQuantityString(R.plurals.fallback_users_read, readReceipts.size)
+                }
+            2    ->
+                if (displayNames.size == 2) {
+                    context.getString(R.string.two_users_read, displayNames[0], displayNames[1])
+                } else {
+                    context.resources.getQuantityString(R.plurals.fallback_users_read, readReceipts.size)
+                }
+            3    ->
+                if (displayNames.size == 3) {
+                    context.getString(R.string.three_users_read, displayNames[0], displayNames[1], displayNames[2])
+                } else {
+                    context.resources.getQuantityString(R.plurals.fallback_users_read, readReceipts.size)
+                }
+            else ->
+                if (displayNames.size >= 2) {
+                    val qty = readReceipts.size - 2
+                    context.resources.getQuantityString(
+                                R.plurals.two_and_some_others_read,
+                            qty,
+                            displayNames[0],
+                            displayNames[1],
+                            qty
+                        )
+                } else {
+                    context.resources.getQuantityString(R.plurals.fallback_users_read, readReceipts.size)
+                }
        }
    }

--- a/vector/src/main/res/layout/view_read_receipts.xml
+++ b/vector/src/main/res/layout/view_read_receipts.xml
@ -3,6 +3,7 @@
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
+    android:gravity="end"
    tools:parentTag="android.widget.LinearLayout">

    <TextView
@ -18,53 +19,40 @@
        android:textColor="?vctr_content_primary"
        tools:text="999+" />

-    <ImageView
-        android:id="@+id/receiptAvatar5"
-        android:layout_width="@dimen/item_event_message_state_size"
-        android:layout_height="@dimen/item_event_message_state_size"
-        android:layout_marginStart="2dp"
-        android:adjustViewBounds="true"
-        android:importantForAccessibility="no"
-        android:scaleType="centerCrop"
-        tools:src="@sample/user_round_avatars" />
-
-    <ImageView
-        android:id="@+id/receiptAvatar4"
-        android:layout_width="@dimen/item_event_message_state_size"
-        android:layout_height="@dimen/item_event_message_state_size"
-        android:layout_marginStart="2dp"
-        android:adjustViewBounds="true"
-        android:importantForAccessibility="no"
-        android:scaleType="centerCrop"
-        tools:src="@sample/user_round_avatars" />
-
    <ImageView
        android:id="@+id/receiptAvatar3"
        android:layout_width="@dimen/item_event_message_state_size"
        android:layout_height="@dimen/item_event_message_state_size"
        android:layout_marginStart="2dp"
+        android:layout_marginEnd="-6dp"
        android:adjustViewBounds="true"
        android:importantForAccessibility="no"
+        android:padding="1dp"
        android:scaleType="centerCrop"
+        tools:ignore="NegativeMargin"
        tools:src="@sample/user_round_avatars" />

    <ImageView
        android:id="@+id/receiptAvatar2"
        android:layout_width="@dimen/item_event_message_state_size"
        android:layout_height="@dimen/item_event_message_state_size"
-        android:layout_marginStart="2dp"
+        android:layout_marginEnd="-6dp"
        android:adjustViewBounds="true"
+        android:background="@drawable/pill_receipt"
        android:importantForAccessibility="no"
+        android:padding="1dp"
        android:scaleType="centerCrop"
+        tools:ignore="NegativeMargin"
        tools:src="@sample/user_round_avatars" />

    <ImageView
        android:id="@+id/receiptAvatar1"
        android:layout_width="@dimen/item_event_message_state_size"
        android:layout_height="@dimen/item_event_message_state_size"
-        android:layout_marginStart="2dp"
        android:adjustViewBounds="true"
+        android:background="@drawable/pill_receipt"
        android:importantForAccessibility="no"
+        android:padding="1dp"
        android:scaleType="centerCrop"
        tools:src="@sample/user_round_avatars" />

--- a/vector/src/main/res/values/strings.xml
+++ b/vector/src/main/res/values/strings.xml
@ -1424,7 +1424,7 @@
    <string name="merged_events_collapse">collapse</string>

    <string name="generic_label_and_value">%1$s: %2$s</string>
-    <string name="x_plus">%d+</string>
+    <string name="x_plus">+%d</string>
    <string name="no_valid_google_play_services_apk">No valid Google Play Services APK found. Notifications may not work properly.</string>

    <!-- Passphrase -->