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

Make read receipt avatar list more compact

changelog.d/5970.feature

@@ -0,0 +1 @@
+Make read receipt avatar list more compact

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_DISPLAYED = 3
-private const val MAX_RECEIPT_DESCRIBED = 3
 
 class ReadReceiptsView @JvmOverloads constructor(
         context: Context,
@@ -45,13 +44,7 @@ class ReadReceiptsView @JvmOverloads constructor(
     }
 
     private val receiptAvatars: List<ImageView> by lazy {
-        listOf(
+        listOf(views.receiptAvatar1, views.receiptAvatar2, views.receiptAvatar3)
-                views.receiptAvatar1,
-                views.receiptAvatar2,
-                views.receiptAvatar3,
-                views.receiptAvatar4,
-                views.receiptAvatar5
-        )
     }
 
     private fun setupView() {
@@ -60,22 +53,17 @@ class ReadReceiptsView @JvmOverloads constructor(
     }
 
     fun render(readReceipts: List<ReadReceiptData>, avatarRenderer: AvatarRenderer) {
-        if (readReceipts.isNotEmpty()) {
+        receiptAvatars.forEach { it.isVisible = false }
-            isVisible = true
+
-            for (index in 0 until MAX_RECEIPT_DISPLAYED) {
+        readReceipts.take(MAX_RECEIPT_DISPLAYED).forEachIndexed { index, receiptData ->
-                val receiptData = readReceipts.getOrNull(index)
+            receiptAvatars[index].isVisible = true
-                if (receiptData == null) {
-                    receiptAvatars[index].visibility = View.INVISIBLE
-                } else {
-                    receiptAvatars[index].visibility = View.VISIBLE
             avatarRenderer.render(receiptData.toMatrixItem(), receiptAvatars[index])
         }
-            }
 
         val displayNames = readReceipts
                 .mapNotNull { it.displayName }
                 .filter { it.isNotBlank() }
-                    .take(MAX_RECEIPT_DESCRIBED)
+                .take(MAX_RECEIPT_DISPLAYED)
 
         if (readReceipts.size > MAX_RECEIPT_DISPLAYED) {
             views.receiptMore.visibility = View.VISIBLE
@@ -118,9 +106,6 @@ class ReadReceiptsView @JvmOverloads constructor(
                     context.resources.getQuantityString(R.plurals.fallback_users_read, readReceipts.size)
                 }
         }
-        } else {
-            isVisible = false
-        }
     }
 
     fun unbind(avatarRenderer: AvatarRenderer?) {

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" />
 

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