Improve read receipt design

vector/src/main/java/im/vector/riotx/features/home/room/detail/readreceipts/DisplayReadReceiptsBottomSheet.kt

@@ -69,7 +69,7 @@ class DisplayReadReceiptsBottomSheet : VectorBaseBottomSheetDialogFragment() {
         val dividerItemDecoration = DividerItemDecoration(epoxyRecyclerView.context,
                                                           LinearLayout.VERTICAL)
         epoxyRecyclerView.addItemDecoration(dividerItemDecoration)
-        bottomSheetTitle.text = getString(R.string.read_receipts_list)
+        bottomSheetTitle.text = getString(R.string.read_at)
         epoxyController.setData(displayReadReceiptArgs.readReceipts)
     }
 

vector/src/main/res/drawable/pill_receipt_black.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="10dp" />
+    <solid android:color="@color/riotx_header_panel_border_mobile_black" />
+</shape>

vector/src/main/res/drawable/pill_receipt_dark.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="10dp" />
+    <solid android:color="@color/riotx_header_panel_border_mobile_dark" />
+</shape>

vector/src/main/res/drawable/pill_receipt_light.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="10dp" />
+    <solid android:color="@color/riotx_header_panel_border_mobile_light" />
+</shape>

vector/src/main/res/layout/item_display_read_receipt.xml

@@ -5,38 +5,26 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
+    android:minHeight="40dp"
     android:orientation="horizontal"
     android:paddingStart="8dp"
     android:paddingEnd="8dp">
 
     <ImageView
         android:id="@+id/readReceiptAvatar"
-        android:layout_width="24dp"
+        android:layout_width="32dp"
-        android:layout_height="24dp"
+        android:layout_height="32dp"
         android:layout_marginEnd="8dp"
         tools:src="@tools:sample/avatars" />
 
     <TextView
         android:id="@+id/readReceiptName"
-        android:layout_width="0dp"
+        style="@style/BottomSheetItemTextMain"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="4dp"
-        android:layout_weight="1"
-        android:ellipsize="end"
-        android:lines="1"
-        android:paddingTop="8dp"
-        android:paddingBottom="8dp"
-        android:textColor="?riotx_text_primary"
-        android:textSize="16sp"
         tools:text="@sample/matrix.json/data/displayName" />
 
     <TextView
         android:id="@+id/readReceiptDate"
-        android:layout_width="wrap_content"
+        style="@style/BottomSheetItemTime"
-        android:layout_height="wrap_content"
-        android:lines="1"
-        android:textColor="?riotx_text_secondary"
-        android:textSize="12sp"
         tools:text="10:44" />
 
 </LinearLayout>

vector/src/main/res/layout/item_simple_reaction_info.xml

@@ -6,6 +6,7 @@
     android:gravity="center_vertical"
     android:orientation="horizontal"
     android:paddingStart="8dp"
+    android:minHeight="40dp"
     android:paddingEnd="8dp">
 
     <TextView
@@ -22,25 +23,12 @@
 
     <TextView
         android:id="@+id/itemSimpleReactionInfoMemberName"
-        android:layout_width="0dp"
+        style="@style/BottomSheetItemTextMain"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="4dp"
-        android:paddingTop="8dp"
-        android:paddingBottom="8dp"
-        android:layout_weight="1"
-        android:ellipsize="end"
-        android:lines="1"
-        android:textColor="?android:textColorPrimary"
-        android:textSize="16sp"
         tools:text="@sample/matrix.json/data/displayName" />
 
     <TextView
         android:id="@+id/itemSimpleReactionInfoTime"
-        android:layout_width="wrap_content"
+        style="@style/BottomSheetItemTime"
-        android:layout_height="wrap_content"
-        android:lines="1"
-        android:textColor="?android:textColorSecondary"
-        android:textSize="12sp"
         tools:text="10:44" />
 
 

vector/src/main/res/layout/view_read_receipts.xml

@@ -9,48 +9,55 @@
     <TextView
         android:id="@+id/receiptMore"
         android:layout_width="wrap_content"
-        android:layout_height="match_parent"
+        android:layout_height="18dp"
-        android:layout_marginEnd="8dp"
         android:gravity="center"
         android:textSize="12sp"
+        android:background="?vctr_pill_receipt"
+        android:paddingStart="4dp"
+        android:paddingEnd="4dp"
         tools:text="999+" />
 
     <ImageView
         android:id="@+id/receiptAvatar5"
-        android:layout_width="16dp"
+        android:layout_width="18dp"
-        android:layout_height="16dp"
+        android:layout_height="18dp"
+        android:layout_marginStart="2dp"
         android:adjustViewBounds="true"
         android:scaleType="centerCrop"
         tools:src="@tools:sample/avatars" />
 
     <ImageView
         android:id="@+id/receiptAvatar4"
-        android:layout_width="16dp"
+        android:layout_width="18dp"
-        android:layout_height="16dp"
+        android:layout_height="18dp"
+        android:layout_marginStart="2dp"
         android:adjustViewBounds="true"
         android:scaleType="centerCrop"
         tools:src="@tools:sample/avatars" />
 
     <ImageView
         android:id="@+id/receiptAvatar3"
-        android:layout_width="16dp"
+        android:layout_width="18dp"
-        android:layout_height="16dp"
+        android:layout_height="18dp"
+        android:layout_marginStart="2dp"
         android:adjustViewBounds="true"
         android:scaleType="centerCrop"
         tools:src="@tools:sample/avatars" />
 
     <ImageView
         android:id="@+id/receiptAvatar2"
-        android:layout_width="16dp"
+        android:layout_width="18dp"
-        android:layout_height="16dp"
+        android:layout_height="18dp"
+        android:layout_marginStart="2dp"
         android:adjustViewBounds="true"
         android:scaleType="centerCrop"
         tools:src="@tools:sample/avatars" />
 
     <ImageView
         android:id="@+id/receiptAvatar1"
-        android:layout_width="16dp"
+        android:layout_width="18dp"
-        android:layout_height="16dp"
+        android:layout_height="18dp"
+        android:layout_marginStart="2dp"
         android:adjustViewBounds="true"
         android:scaleType="centerCrop"
         tools:src="@tools:sample/avatars" />

vector/src/main/res/values/attrs.xml

@@ -88,6 +88,7 @@
         <attr name="vctr_pill_background_room_alias" format="reference" />
         <attr name="vctr_pill_text_color_user_id" format="reference" />
         <attr name="vctr_pill_text_color_room_alias" format="reference" />
+        <attr name="vctr_pill_receipt" format="reference" />
 
         <!-- Widget banner background -->
         <attr name="vctr_widget_banner_background" format="color" />

vector/src/main/res/values/strings_riotX.xml

@@ -2,5 +2,6 @@
 <resources>
 
     <!-- Strings not defined in Riot -->
+    <string name="read_at">Read at</string>
 
 </resources>

vector/src/main/res/values/styles_riot.xml

@@ -319,4 +319,23 @@
         <item name="android:background">@drawable/vector_label_background_light</item>
     </style>
 
+    <style name="BottomSheetItemTextMain">
+        <item name="android:fontFamily">sans-serif-medium</item>
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_weight">1</item>
+        <item name="android:ellipsize">end</item>
+        <item name="android:lines">1</item>
+        <item name="android:textColor">?riotx_text_primary</item>
+        <item name="android:textSize">16sp</item>
+    </style>
+
+    <style name="BottomSheetItemTime">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:lines">1</item>
+        <item name="android:textColor">?riotx_text_secondary</item>
+        <item name="android:textSize">12sp</item>
+    </style>
+
 </resources>

vector/src/main/res/values/theme_black.xml

@@ -75,6 +75,8 @@
 
         <item name="vctr_markdown_block_background_color">#FF4D4D4D</item>
 
+        <item name="vctr_pill_receipt">@drawable/pill_receipt_black</item>
+
         <!-- activities background -->
         <item name="android:windowBackground">@color/riot_primary_background_color_black</item>
         <item name="vctr_bottom_nav_background_color">@color/primary_color_black</item>

vector/src/main/res/values/theme_dark.xml

@@ -163,6 +163,8 @@
         <item name="vctr_pill_text_color_user_id">@android:color/white</item>
         <item name="vctr_pill_text_color_room_alias">@color/riot_primary_text_color_dark</item>
 
+        <item name="vctr_pill_receipt">@drawable/pill_receipt_dark</item>
+
         <item name="vctr_direct_chat_circle">@drawable/direct_chat_circle_dark</item>
 
         <item name="vctr_widget_banner_background">#FF454545</item>

vector/src/main/res/values/theme_light.xml

@@ -163,6 +163,8 @@
         <item name="vctr_pill_text_color_user_id">@color/riot_primary_text_color_light</item>
         <item name="vctr_pill_text_color_room_alias">@android:color/white</item>
 
+        <item name="vctr_pill_receipt">@drawable/pill_receipt_light</item>
+
         <item name="vctr_direct_chat_circle">@drawable/direct_chat_circle_light</item>
 
         <item name="vctr_widget_banner_background">#FFD3EFE1</item>