Apply corner roundness to image-related drawables

Background outline and time overlay

Change-Id: If6715bf11489609a9ad2aad831db9ee608c803b6

generate_bubbles.sh

@@ -6,7 +6,7 @@ my_dir="$(dirname "$(realpath "$0")")"
 pushd "$my_dir" > /dev/null
 
 res_dir="vector/src/main/res"
-god_bubble="vector/src/main/res/drawable/msg_godbubble.xml"
+god_bubble="$res_dir/drawable/msg_godbubble.xml"
 
 # Multiline sed -i
 function mised() {
@@ -91,6 +91,17 @@ function create_msg_bubble() {
     sed -i 's|<size.*/>||g' "$out_bubble"
 }
 
+function create_rounded_xml() {
+    local roundness="$1"
+    local infile="$2"
+    if [ ! -z "$roundness" ]; then
+        local outfile="$(dirname "$infile")/$(basename "$infile" .xml)_$roundness.xml"
+        cp "$infile" "$outfile"
+        echo "$outfile"
+        sed -i "s|sc_bubble_radius|sc_bubble_${roundness}_radius|g" "$outfile"
+    fi
+}
+
 for roundness in "" "r1" "r2"; do
     for is_outgoing in 0 1; do
         for is_rtl in 0 1; do
@@ -103,6 +114,10 @@ for roundness in "" "r1" "r2"; do
             #done
         done
     done
+    create_rounded_xml "$roundness" "$res_dir/drawable/timestamp_overlay.xml"
+    create_rounded_xml "$roundness" "$res_dir/drawable-ldrtl/timestamp_overlay.xml"
+    create_rounded_xml "$roundness" "$res_dir/drawable/background_image_border_incoming.xml"
+    create_rounded_xml "$roundness" "$res_dir/drawable/background_image_border_outgoing.xml"
 done
 
 

vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/MessageImageVideoItem.kt

@@ -197,15 +197,14 @@ abstract class MessageImageVideoItem : AbsMessageItem<MessageImageVideoItem.Hold
         when {
             // Don't show it for non-bubble layouts, don't show for Stickers, ...
             // Also only supported for default corner radius
-            !(messageLayout.isRealBubble || messageLayout.isPseudoBubble) || mode != ImageContentRenderer.Mode.THUMBNAIL
+            !(messageLayout.isRealBubble || messageLayout.isPseudoBubble) || mode != ImageContentRenderer.Mode.THUMBNAIL -> {
-                    || messageLayout.bubbleAppearance != defaultScBubbleAppearance -> {
                 holder.mediaContentView.background = null
             }
             attributes.informationData.sentByMe                                    -> {
-                holder.mediaContentView.setBackgroundResource(R.drawable.background_image_border_outgoing)
+                holder.mediaContentView.setBackgroundResource(messageLayout.bubbleAppearance.imageBorderOutgoing)
             }
             else                                                                   -> {
-                holder.mediaContentView.setBackgroundResource(R.drawable.background_image_border_incoming)
+                holder.mediaContentView.setBackgroundResource(messageLayout.bubbleAppearance.imageBorderIncoming)
             }
         }
     }

vector/src/main/java/im/vector/app/features/home/room/detail/timeline/view/ScMessageBubbleWrapView.kt

@@ -339,7 +339,7 @@ class ScMessageBubbleWrapView @JvmOverloads constructor(context: Context, attrs:
                         bubbleDependentView.reserveFooterSpace(holder, footerWidth, footerHeight)
                     } else {
                         // We have no reserved space -> style it to ensure readability on arbitrary backgrounds
-                        styleFooterOverlay()
+                        styleFooterOverlay(messageLayout)
                     }
                 } else {
                     when {
@@ -437,8 +437,8 @@ class ScMessageBubbleWrapView @JvmOverloads constructor(context: Context, attrs:
         views.bubbleFooterMessageTimeView.setTextColor(tintList)
     }
 
-    private fun styleFooterOverlay() {
+    private fun styleFooterOverlay(messageLayout: TimelineMessageLayout.ScBubble) {
-        views.bubbleFootView.setBackgroundResource(R.drawable.timestamp_overlay)
+        views.bubbleFootView.setBackgroundResource(messageLayout.bubbleAppearance.timestampOverlay)
         tintFooter(ThemeUtils.getColor(views.bubbleFootView.context, R.attr.timestamp_overlay_fg))
         val padding = views.bubbleFootView.resources.getDimensionPixelSize(R.dimen.sc_footer_overlay_padding)
         views.bubbleFootView.setPaddingRelative(

vector/src/main/java/im/vector/app/features/themes/BubbleThemeUtils.kt

@@ -116,6 +116,12 @@ data class ScBubbleAppearance(
         val textBubbleOutgoingNoTail: Int,
         @DrawableRes
         val textBubbleIncomingNoTail: Int,
+        @DrawableRes
+        val timestampOverlay: Int,
+        @DrawableRes
+        val imageBorderOutgoing: Int,
+        @DrawableRes
+        val imageBorderIncoming: Int,
 ) : Parcelable {
     fun getBubbleRadiusPx(context: Context): Int {
         return context.resources.getDimensionPixelSize(roundness)
@@ -131,6 +137,9 @@ val defaultScBubbleAppearance = ScBubbleAppearance(
         R.drawable.msg_bubble_text_incoming,
         R.drawable.msg_bubble_text_outgoing_notail,
         R.drawable.msg_bubble_text_incoming_notail,
+        R.drawable.timestamp_overlay,
+        R.drawable.background_image_border_outgoing,
+        R.drawable.background_image_border_incoming,
 )
 
 val r1ScBubbleAppearance = ScBubbleAppearance(
@@ -139,6 +148,9 @@ val r1ScBubbleAppearance = ScBubbleAppearance(
         R.drawable.msg_bubble_r1_text_incoming,
         R.drawable.msg_bubble_r1_text_outgoing_notail,
         R.drawable.msg_bubble_r1_text_incoming_notail,
+        R.drawable.timestamp_overlay_r1,
+        R.drawable.background_image_border_outgoing_r1,
+        R.drawable.background_image_border_incoming_r1,
 )
 
 
@@ -148,4 +160,7 @@ val r2ScBubbleAppearance = ScBubbleAppearance(
         R.drawable.msg_bubble_r2_text_incoming,
         R.drawable.msg_bubble_r2_text_outgoing_notail,
         R.drawable.msg_bubble_r2_text_incoming_notail,
+        R.drawable.timestamp_overlay_r2,
+        R.drawable.background_image_border_outgoing_r2,
+        R.drawable.background_image_border_incoming_r2,
 )

vector/src/main/res/drawable-ldrtl/timestamp_overlay.xml

@@ -3,8 +3,8 @@
 
     <solid android:color="?timestamp_overlay_bg" />
 
-    <corners android:bottomLeftRadius="3dp"
+    <corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
-        android:topRightRadius="3dp"/>
+        android:topRightRadius="@dimen/sc_bubble_radius" />
 
 </shape>
 

vector/src/main/res/drawable-ldrtl/timestamp_overlay_r1.xml

@@ -0,0 +1,10 @@
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="?timestamp_overlay_bg" />
+
+    <corners android:bottomLeftRadius="@dimen/sc_bubble_r1_radius"
+        android:topRightRadius="@dimen/sc_bubble_r1_radius" />
+
+</shape>
+

vector/src/main/res/drawable-ldrtl/timestamp_overlay_r2.xml

@@ -0,0 +1,10 @@
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="?timestamp_overlay_bg" />
+
+    <corners android:bottomLeftRadius="@dimen/sc_bubble_r2_radius"
+        android:topRightRadius="@dimen/sc_bubble_r2_radius" />
+
+</shape>
+

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

@@ -6,8 +6,8 @@
     <padding android:left="1dp" android:top="1dp" android:right="1dp"
         android:bottom="1dp" />
     <!-- rounded corners like for message bubbles and the image itself -->
-    <corners android:bottomRightRadius="3dp"
+    <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
-        android:bottomLeftRadius="3dp"
+        android:bottomLeftRadius="@dimen/sc_bubble_radius"
-        android:topLeftRadius="3dp"
+        android:topLeftRadius="@dimen/sc_bubble_radius"
-        android:topRightRadius="3dp"/>
+        android:topRightRadius="@dimen/sc_bubble_radius"/>
-</shape>
+</shape>

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

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@android:color/transparent" />
+    <stroke android:width="1dp" android:color="?sc_message_bg_incoming" />
+    <!-- add padding to actually draw around the image -->
+    <padding android:left="1dp" android:top="1dp" android:right="1dp"
+        android:bottom="1dp" />
+    <!-- rounded corners like for message bubbles and the image itself -->
+    <corners android:bottomRightRadius="@dimen/sc_bubble_r1_radius"
+        android:bottomLeftRadius="@dimen/sc_bubble_r1_radius"
+        android:topLeftRadius="@dimen/sc_bubble_r1_radius"
+        android:topRightRadius="@dimen/sc_bubble_r1_radius"/>
+</shape>

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

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@android:color/transparent" />
+    <stroke android:width="1dp" android:color="?sc_message_bg_incoming" />
+    <!-- add padding to actually draw around the image -->
+    <padding android:left="1dp" android:top="1dp" android:right="1dp"
+        android:bottom="1dp" />
+    <!-- rounded corners like for message bubbles and the image itself -->
+    <corners android:bottomRightRadius="@dimen/sc_bubble_r2_radius"
+        android:bottomLeftRadius="@dimen/sc_bubble_r2_radius"
+        android:topLeftRadius="@dimen/sc_bubble_r2_radius"
+        android:topRightRadius="@dimen/sc_bubble_r2_radius"/>
+</shape>

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

@@ -6,8 +6,8 @@
     <padding android:left="1dp" android:top="1dp" android:right="1dp"
         android:bottom="1dp" />
     <!-- rounded corners like for message bubbles and the image itself -->
-    <corners android:bottomRightRadius="3dp"
+    <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
-        android:bottomLeftRadius="3dp"
+        android:bottomLeftRadius="@dimen/sc_bubble_radius"
-        android:topLeftRadius="3dp"
+        android:topLeftRadius="@dimen/sc_bubble_radius"
-        android:topRightRadius="3dp"/>
+        android:topRightRadius="@dimen/sc_bubble_radius"/>
-</shape>
+</shape>

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

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@android:color/transparent" />
+    <stroke android:width="1dp" android:color="?sc_message_bg_outgoing" />
+    <!-- add padding to actually draw around the image -->
+    <padding android:left="1dp" android:top="1dp" android:right="1dp"
+        android:bottom="1dp" />
+    <!-- rounded corners like for message bubbles and the image itself -->
+    <corners android:bottomRightRadius="@dimen/sc_bubble_r1_radius"
+        android:bottomLeftRadius="@dimen/sc_bubble_r1_radius"
+        android:topLeftRadius="@dimen/sc_bubble_r1_radius"
+        android:topRightRadius="@dimen/sc_bubble_r1_radius"/>
+</shape>

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

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@android:color/transparent" />
+    <stroke android:width="1dp" android:color="?sc_message_bg_outgoing" />
+    <!-- add padding to actually draw around the image -->
+    <padding android:left="1dp" android:top="1dp" android:right="1dp"
+        android:bottom="1dp" />
+    <!-- rounded corners like for message bubbles and the image itself -->
+    <corners android:bottomRightRadius="@dimen/sc_bubble_r2_radius"
+        android:bottomLeftRadius="@dimen/sc_bubble_r2_radius"
+        android:topLeftRadius="@dimen/sc_bubble_r2_radius"
+        android:topRightRadius="@dimen/sc_bubble_r2_radius"/>
+</shape>

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

@@ -3,8 +3,8 @@
 
     <solid android:color="?timestamp_overlay_bg" />
 
-    <corners android:bottomRightRadius="3dp"
+    <corners android:bottomRightRadius="@dimen/sc_bubble_radius"
-        android:topLeftRadius="3dp"/>
+        android:topLeftRadius="@dimen/sc_bubble_radius" />
 
 </shape>
 

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

@@ -0,0 +1,10 @@
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="?timestamp_overlay_bg" />
+
+    <corners android:bottomRightRadius="@dimen/sc_bubble_r1_radius"
+        android:topLeftRadius="@dimen/sc_bubble_r1_radius" />
+
+</shape>
+

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

@@ -0,0 +1,10 @@
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="?timestamp_overlay_bg" />
+
+    <corners android:bottomRightRadius="@dimen/sc_bubble_r2_radius"
+        android:topLeftRadius="@dimen/sc_bubble_r2_radius" />
+
+</shape>
+