From 166be4e289600be9898a47f02964391fb163165c Mon Sep 17 00:00:00 2001
From: Valere <valeref@matrix.org>
Date: Tue, 27 Aug 2019 15:36:44 +0200
Subject: [PATCH] Improve read receipt design

---
 .../DisplayReadReceiptsBottomSheet.kt         |  2 +-
 .../main/res/drawable/pill_receipt_black.xml  |  6 ++++
 .../main/res/drawable/pill_receipt_dark.xml   |  6 ++++
 .../main/res/drawable/pill_receipt_light.xml  |  6 ++++
 .../res/layout/item_display_read_receipt.xml  | 22 +++----------
 .../res/layout/item_simple_reaction_info.xml  | 18 ++---------
 .../main/res/layout/view_read_receipts.xml    | 31 ++++++++++++-------
 vector/src/main/res/values/attrs.xml          |  1 +
 vector/src/main/res/values/strings_riotX.xml  |  1 +
 vector/src/main/res/values/styles_riot.xml    | 19 ++++++++++++
 vector/src/main/res/values/theme_black.xml    |  2 ++
 vector/src/main/res/values/theme_dark.xml     |  2 ++
 vector/src/main/res/values/theme_light.xml    |  2 ++
 13 files changed, 73 insertions(+), 45 deletions(-)
 create mode 100644 vector/src/main/res/drawable/pill_receipt_black.xml
 create mode 100644 vector/src/main/res/drawable/pill_receipt_dark.xml
 create mode 100644 vector/src/main/res/drawable/pill_receipt_light.xml

diff --git a/vector/src/main/java/im/vector/riotx/features/home/room/detail/readreceipts/DisplayReadReceiptsBottomSheet.kt b/vector/src/main/java/im/vector/riotx/features/home/room/detail/readreceipts/DisplayReadReceiptsBottomSheet.kt
index b8c1519f..42ad1664 100644
--- a/vector/src/main/java/im/vector/riotx/features/home/room/detail/readreceipts/DisplayReadReceiptsBottomSheet.kt
+++ b/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)
     }
 
diff --git a/vector/src/main/res/drawable/pill_receipt_black.xml b/vector/src/main/res/drawable/pill_receipt_black.xml
new file mode 100644
index 00000000..e6390355
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/vector/src/main/res/drawable/pill_receipt_dark.xml b/vector/src/main/res/drawable/pill_receipt_dark.xml
new file mode 100644
index 00000000..5442f139
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/vector/src/main/res/drawable/pill_receipt_light.xml b/vector/src/main/res/drawable/pill_receipt_light.xml
new file mode 100644
index 00000000..66875dc1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/vector/src/main/res/layout/item_display_read_receipt.xml b/vector/src/main/res/layout/item_display_read_receipt.xml
index 9b4072ab..2aa4485c 100644
--- a/vector/src/main/res/layout/item_display_read_receipt.xml
+++ b/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_height="24dp"
+        android:layout_width="32dp"
+        android:layout_height="32dp"
         android:layout_marginEnd="8dp"
         tools:src="@tools:sample/avatars" />
 
     <TextView
         android:id="@+id/readReceiptName"
-        android:layout_width="0dp"
-        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"
+        style="@style/BottomSheetItemTextMain"
         tools:text="@sample/matrix.json/data/displayName" />
 
     <TextView
         android:id="@+id/readReceiptDate"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:lines="1"
-        android:textColor="?riotx_text_secondary"
-        android:textSize="12sp"
+        style="@style/BottomSheetItemTime"
         tools:text="10:44" />
 
 </LinearLayout>
\ No newline at end of file
diff --git a/vector/src/main/res/layout/item_simple_reaction_info.xml b/vector/src/main/res/layout/item_simple_reaction_info.xml
index 06f94fc8..02a36fc6 100644
--- a/vector/src/main/res/layout/item_simple_reaction_info.xml
+++ b/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"
-        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"
+        style="@style/BottomSheetItemTextMain"
         tools:text="@sample/matrix.json/data/displayName" />
 
     <TextView
         android:id="@+id/itemSimpleReactionInfoTime"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:lines="1"
-        android:textColor="?android:textColorSecondary"
-        android:textSize="12sp"
+        style="@style/BottomSheetItemTime"
         tools:text="10:44" />
 
 
diff --git a/vector/src/main/res/layout/view_read_receipts.xml b/vector/src/main/res/layout/view_read_receipts.xml
index e3cbc6ba..f477a979 100644
--- a/vector/src/main/res/layout/view_read_receipts.xml
+++ b/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_marginEnd="8dp"
+        android:layout_height="18dp"
         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_height="16dp"
+        android:layout_width="18dp"
+        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_height="16dp"
+        android:layout_width="18dp"
+        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_height="16dp"
+        android:layout_width="18dp"
+        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_height="16dp"
+        android:layout_width="18dp"
+        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_height="16dp"
+        android:layout_width="18dp"
+        android:layout_height="18dp"
+        android:layout_marginStart="2dp"
         android:adjustViewBounds="true"
         android:scaleType="centerCrop"
         tools:src="@tools:sample/avatars" />
diff --git a/vector/src/main/res/values/attrs.xml b/vector/src/main/res/values/attrs.xml
index 368c03c0..e9a4296a 100644
--- a/vector/src/main/res/values/attrs.xml
+++ b/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" />
diff --git a/vector/src/main/res/values/strings_riotX.xml b/vector/src/main/res/values/strings_riotX.xml
index 118fde84..23ea1e2f 100644
--- a/vector/src/main/res/values/strings_riotX.xml
+++ b/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>
\ No newline at end of file
diff --git a/vector/src/main/res/values/styles_riot.xml b/vector/src/main/res/values/styles_riot.xml
index 80f5148a..d1894254 100644
--- a/vector/src/main/res/values/styles_riot.xml
+++ b/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>
\ No newline at end of file
diff --git a/vector/src/main/res/values/theme_black.xml b/vector/src/main/res/values/theme_black.xml
index 7b582e20..129a2e9b 100644
--- a/vector/src/main/res/values/theme_black.xml
+++ b/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>
diff --git a/vector/src/main/res/values/theme_dark.xml b/vector/src/main/res/values/theme_dark.xml
index b5796eb9..41432292 100644
--- a/vector/src/main/res/values/theme_dark.xml
+++ b/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>
diff --git a/vector/src/main/res/values/theme_light.xml b/vector/src/main/res/values/theme_light.xml
index 56f2b90b..8d51486e 100644
--- a/vector/src/main/res/values/theme_light.xml
+++ b/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>