From a4fe60decef5d074f550c753e3bf2b3719d6ccc0 Mon Sep 17 00:00:00 2001
From: Daniel Gultsch <daniel@gultsch.de>
Date: Thu, 30 Mar 2023 16:36:16 +0200
Subject: [PATCH] add image preview to message bubbles

---
 .../model/MessageWithContentReactions.java    |  4 ++
 .../android/ui/adapter/MessageAdapter.java    |  1 +
 .../drawable/background_message_bubble.xml    |  5 ++
 .../drawable/background_message_received.xml  |  5 --
 .../drawable/background_message_separator.xml |  2 +-
 .../main/res/layout/item_message_received.xml | 48 ++++++++++++++-----
 app/src/main/res/layout/item_message_sent.xml | 42 ++++++++++++----
 app/src/main/res/values/message-bubbles.xml   | 11 +++++
 8 files changed, 90 insertions(+), 28 deletions(-)
 create mode 100644 app/src/main/res/drawable/background_message_bubble.xml
 delete mode 100644 app/src/main/res/drawable/background_message_received.xml
 create mode 100644 app/src/main/res/values/message-bubbles.xml

diff --git a/app/src/main/java/im/conversations/android/database/model/MessageWithContentReactions.java b/app/src/main/java/im/conversations/android/database/model/MessageWithContentReactions.java
index e5b9b5ce6..f366c254e 100644
--- a/app/src/main/java/im/conversations/android/database/model/MessageWithContentReactions.java
+++ b/app/src/main/java/im/conversations/android/database/model/MessageWithContentReactions.java
@@ -101,6 +101,10 @@ public final class MessageWithContentReactions
         // return text.substring(0,Math.min(text.length(),20));
     }
 
+    public boolean hasPreview() {
+        return Iterables.tryFind(this.contents, c -> c.type == PartType.FILE).isPresent();
+    }
+
     public AddressWithName getAddressWithName() {
         if (isKnownSender()) {
             return new AddressWithName(individualAddress(), individualName());
diff --git a/app/src/main/java/im/conversations/android/ui/adapter/MessageAdapter.java b/app/src/main/java/im/conversations/android/ui/adapter/MessageAdapter.java
index e17e149ff..71e3a1d77 100644
--- a/app/src/main/java/im/conversations/android/ui/adapter/MessageAdapter.java
+++ b/app/src/main/java/im/conversations/android/ui/adapter/MessageAdapter.java
@@ -123,6 +123,7 @@ public class MessageAdapter
         protected void setItem(final MessageAdapterItem item) {
             if (item instanceof MessageWithContentReactions message) {
                 this.binding.setMessage(message);
+                this.binding.content.setClipToOutline(true);
             } else {
                 this.binding.setMessage(null);
             }
diff --git a/app/src/main/res/drawable/background_message_bubble.xml b/app/src/main/res/drawable/background_message_bubble.xml
new file mode 100644
index 000000000..463bf0f58
--- /dev/null
+++ b/app/src/main/res/drawable/background_message_bubble.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="?colorSurface"/>
+    <corners android:radius="@dimen/message_bubble_corner_radius"/>
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/background_message_received.xml b/app/src/main/res/drawable/background_message_received.xml
deleted file mode 100644
index a65d9e4cf..000000000
--- a/app/src/main/res/drawable/background_message_received.xml
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="?colorSecondaryContainer"/>
-    <corners android:radius="16dp"/>
-</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/background_message_separator.xml b/app/src/main/res/drawable/background_message_separator.xml
index ef47cd2d3..73e9d0d0c 100644
--- a/app/src/main/res/drawable/background_message_separator.xml
+++ b/app/src/main/res/drawable/background_message_separator.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid android:color="?colorPrimaryContainer"/>
-    <corners android:radius="8dp"/>
+    <corners android:radius="@dimen/message_separator_corner_radius"/>
 </shape>
\ No newline at end of file
diff --git a/app/src/main/res/layout/item_message_received.xml b/app/src/main/res/layout/item_message_received.xml
index ab98cea31..6bb995f04 100644
--- a/app/src/main/res/layout/item_message_received.xml
+++ b/app/src/main/res/layout/item_message_received.xml
@@ -9,12 +9,12 @@
         android:paddingVertical="6dp">
 
         <ImageView
-            android:visibility="@{message == null ? View.INVISIBLE : View.VISIBLE}"
             android:id="@+id/avatar"
             android:layout_width="@dimen/avatar_chat_overview_size"
             android:layout_height="@dimen/avatar_chat_overview_size"
             android:layout_marginStart="8dp"
             android:scaleType="centerCrop"
+            android:visibility="@{message == null ? View.INVISIBLE : View.VISIBLE}"
             app:layout_constraintBottom_toBottomOf="@id/content"
             app:layout_constraintStart_toStartOf="parent" />
 
@@ -23,27 +23,51 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginHorizontal="8dp"
-            android:background="@drawable/background_message_received"
+            android:background="@drawable/background_message_bubble"
+            android:backgroundTint="?colorSecondaryContainer"
+            android:clipToOutline="true"
             android:minHeight="40dp"
-            android:padding="8dp"
             app:layout_constrainedWidth="true"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.0"
             app:layout_constraintStart_toEndOf="@id/avatar"
-            app:layout_constraintTop_toTopOf="parent">
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintWidth_max="@dimen/message_bubble_max_width">
 
-
-            <TextView
-                android:id="@+id/textContent"
+            <ImageView
+                android:id="@+id/image"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="@{message.textContent}"
-                android:textAppearance="?textAppearanceBodyMedium"
-                android:textColor="?colorOnSecondaryContainer"
-                app:layout_constraintBottom_toBottomOf="parent"
+                android:adjustViewBounds="true"
+                app:layout_constraintBottom_toTopOf="@+id/textContentWrapper"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHeight_max="@dimen/message_preview_max_height"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toTopOf="parent"
-                tools:text="Fusce vitae vehicula risus, nec ornare lorem. Quisque facilisis mattis velit ac porttitor. Aenean aliquet pretium varius. Quisque neque felis, mattis sit amet leo ac, tempus dapibus nibh." />
+                app:layout_constraintWidth_max="@dimen/message_preview_max_width" />
+
+            <LinearLayout
+                android:id="@+id/textContentWrapper"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:padding="8dp"
+                android:visibility="visible"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/image">
+
+                <TextView
+                    android:id="@+id/textContent"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@{message.textContent}"
+                    android:textAppearance="?textAppearanceBodyMedium"
+                    android:textColor="?colorOnSecondaryContainer"
+                    tools:text="Quisque sit amet metus faucibus, egestas est eu, hendrerit mauris. Suspendisse pretium nisl purus, vitae vestibulum sapien rhoncus nec. Quisque molestie ante felis, vel dapibus ex mattis a. Morbi venenatis vestibulum neque, vel ornare sapien. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " />
+            </LinearLayout>
+
+
         </androidx.constraintlayout.widget.ConstraintLayout>
 
 
diff --git a/app/src/main/res/layout/item_message_sent.xml b/app/src/main/res/layout/item_message_sent.xml
index 27dad1898..31f029022 100644
--- a/app/src/main/res/layout/item_message_sent.xml
+++ b/app/src/main/res/layout/item_message_sent.xml
@@ -13,7 +13,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginHorizontal="8dp"
-            android:background="@drawable/background_message_received"
+            android:background="@drawable/background_message_bubble"
             android:backgroundTint="?colorTertiaryContainer"
             android:minHeight="40dp"
             android:padding="8dp"
@@ -21,20 +21,42 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="1.0"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent">
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintWidth_max="@dimen/message_bubble_max_width">
 
-
-            <TextView
-                android:id="@+id/textContent"
+            <ImageView
+                android:id="@+id/image"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="@{message.textContent}"
-                android:textAppearance="?textAppearanceBodyMedium"
-                android:textColor="?colorOnSecondaryContainer"
-                app:layout_constraintBottom_toBottomOf="parent"
+                android:adjustViewBounds="true"
+                app:layout_constraintBottom_toTopOf="@+id/textContentWrapper"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHeight_max="@dimen/message_preview_max_height"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toTopOf="parent"
-                tools:text="Fusce vitae!" />
+                app:layout_constraintWidth_max="@dimen/message_preview_max_width" />
+
+            <LinearLayout
+                android:id="@+id/textContentWrapper"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:padding="8dp"
+                android:visibility="visible"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/image">
+
+                <TextView
+                    android:id="@+id/textContent"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@{message.textContent}"
+                    android:textAppearance="?textAppearanceBodyMedium"
+                    android:textColor="?colorOnSecondaryContainer"
+                    tools:text="Quisque sit amet metus faucibus, egestas est eu, hendrerit mauris. Suspendisse pretium nisl purus, vitae vestibulum sapien rhoncus nec. Quisque molestie ante felis, vel dapibus ex mattis a. Morbi venenatis vestibulum neque, vel ornare sapien. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " />
+            </LinearLayout>
+
         </androidx.constraintlayout.widget.ConstraintLayout>
 
 
diff --git a/app/src/main/res/values/message-bubbles.xml b/app/src/main/res/values/message-bubbles.xml
new file mode 100644
index 000000000..38b2b1aca
--- /dev/null
+++ b/app/src/main/res/values/message-bubbles.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="message_bubble_corner_radius">16dp</dimen>
+    <dimen name="message_separator_corner_radius">8dp</dimen>
+    <dimen name="message_bubble_max_width">384dp</dimen>
+    <!-- The difference between bubble_max_width and preview_max_width will become relevant once we
+         support image and description in the same bubble. If there is no text, image bubbles will
+         always be restricted to max_preview_width. -->
+    <dimen name="message_preview_max_width">384dp</dimen>
+    <dimen name="message_preview_max_height">256dp</dimen>
+</resources>
\ No newline at end of file