Overlay image/video items with footer

Change-Id: I353ab5223b60677486d590d7c38a8186e3a8c3db

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

@@ -385,6 +385,9 @@ abstract class AbsMessageItem<H : AbsMessageItem.Holder> : AbsBaseMessageItem<H>
                         (holder.bubbleFootView.layoutParams as RelativeLayout.LayoutParams).addRule(RelativeLayout.ALIGN_BOTTOM, R.id.viewStubContainer)
                         (holder.bubbleFootView.layoutParams as RelativeLayout.LayoutParams).removeRule(RelativeLayout.BELOW)
                         if (needsFooterReservation(holder)) {
+                            // Remove style used when not having reserved space
+                            removeFooterOverlayStyle(holder, density)
+
                             // Calculate required footer space
                             val timeWidth: Int
                             val timeHeight: Int
@@ -416,10 +419,14 @@ abstract class AbsMessageItem<H : AbsMessageItem.Holder> : AbsBaseMessageItem<H>
                                 footerHeight += holder.bubbleFootView.paddingTop + holder.bubbleFootView.paddingBottom
                             }
                             reserveFooterSpace(holder, footerWidth, footerHeight)
+                        } else {
+                            // We have no reserved space -> style it to ensure readability on arbitrary backgrounds
+                            styleFooterOverlay(holder, density)
                         }
                     } else {
                         (holder.bubbleFootView.layoutParams as RelativeLayout.LayoutParams).addRule(RelativeLayout.BELOW, R.id.viewStubContainer)
                         (holder.bubbleFootView.layoutParams as RelativeLayout.LayoutParams).removeRule(RelativeLayout.ALIGN_BOTTOM)
+                        removeFooterOverlayStyle(holder, density)
                     }
                 }
             }
@@ -437,4 +444,33 @@ abstract class AbsMessageItem<H : AbsMessageItem.Holder> : AbsBaseMessageItem<H>
         setFlatRtl(holder.reactionsContainer, if (reverseBubble) reverseDirection else defaultDirection,
                 holder.eventBaseView.resources.configuration.layoutDirection)
     }
+
+    private fun tintFooter(holder: H, color: Int) {
+        val tintList = ColorStateList(arrayOf(intArrayOf(0)), intArrayOf(color))
+        holder.bubbleFooterReadReceipt.imageTintList = tintList
+        holder.bubbleFooterTimeView.setTextColor(tintList)
+    }
+
+    private fun styleFooterOverlay(holder: H, density: Float) {
+        holder.bubbleFootView.setBackgroundResource(R.drawable.timestamp_overlay)
+        tintFooter(holder, ThemeUtils.getColor(holder.bubbleFootView.context, R.attr.timestamp_overlay_fg))
+        val padding = round(2*density).toInt()
+        holder.bubbleFootView.setPaddingRelative(
+                padding,
+                padding,
+                padding + round(4*density).toInt(), // compensate from inner view padding on the other side
+                padding
+        )
+    }
+
+    private fun removeFooterOverlayStyle(holder: H, density: Float) {
+        holder.bubbleFootView.background = null
+        tintFooter(holder, ThemeUtils.getColor(holder.bubbleFootView.context, R.attr.riotx_text_secondary))
+        holder.bubbleFootView.setPaddingRelative(
+                0,
+                round(4*density).toInt(),
+                0,
+                0
+        )
+    }
 }

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

@@ -112,6 +112,11 @@ abstract class MessageImageVideoItem : AbsMessageItem<MessageImageVideoItem.Hold
         (holder.imageView.layoutParams as ConstraintLayout.LayoutParams).horizontalBias = if (reverseBubble) 1f else 0f
     }
 
+    override fun allowFooterOverlay(holder: Holder): Boolean {
+        return true
+    }
+
+
 
     class Holder : AbsMessageItem.Holder(STUB_ID) {
         val progressLayout by bind<ViewGroup>(R.id.messageMediaUploadProgressLayout)

vector/src/main/res/drawable-ldrtl/timestamp_overlay.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="3dp"
+        android:topRightRadius="3dp"/>
+
+</shape>
+

vector/src/main/res/drawable/timestamp_overlay.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="3dp"
+        android:topLeftRadius="3dp"/>
+
+</shape>
+

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

@@ -206,7 +206,7 @@
                 android:layout_marginStart="4dp"
                 android:layout_alignEnd="@id/viewStubContainer"
                 tools:layout_alignBottom="@id/viewStubContainer"
-                android:paddingTop="4dp"
+                tools:paddingTop="4dp"
                 android:id="@+id/bubbleFootView">
                 <TextView
                     android:id="@+id/bubbleFooterMessageTimeView"
@@ -215,7 +215,7 @@
                     android:paddingStart="4dp"
                     android:paddingEnd="0dp"
                     android:maxLines="1"
-                    android:textColor="?riotx_text_secondary"
+                    tools:textColor="?riotx_text_secondary"
                     android:textSize="12sp"
                     android:layout_gravity="bottom"
                     tools:text="@tools:sample/date/hhmm" />
@@ -229,7 +229,7 @@
                     android:paddingStart="4dp"
                     android:paddingEnd="0dp"
                     android:layout_gravity="bottom"
-                    app:tint="?riotx_text_secondary"
+                    tools:tint="?riotx_text_secondary"
                     tools:src="@drawable/ic_processing_msg" />
             </LinearLayout>
 

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

@@ -12,6 +12,9 @@
 
         <attr name="riotx_unread_unimportant_room_badge" format="color" />
 
+        <attr name="timestamp_overlay_fg" format="color" />
+        <attr name="timestamp_overlay_bg" format="color" />
+
     </declare-styleable>
 
 </resources>

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

@@ -21,4 +21,7 @@
     <color name="background_floating_sc">#ff424242</color>
 
     <color name="list_divider_color_sc">#80ffffff</color>
+
+    <color name="timestamp_overlay_fg">#ffffff</color>
+    <color name="timestamp_overlay_bg">#80000000</color>
 </resources>

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

@@ -189,6 +189,8 @@
         <item name="riotx_positive_accent_alpha12">@color/riotx_positive_accent_alpha12</item>
         <item name="riotx_toolbar_bg">?riotx_background</item>
         <item name="riotx_unread_unimportant_room_badge">@color/riotx_unread_room_badge_dark</item>
+        <item name="timestamp_overlay_fg">@color/timestamp_overlay_fg</item>
+        <item name="timestamp_overlay_bg">@color/timestamp_overlay_bg</item>
 
         <item name="android:statusBarColor">@color/riotx_header_panel_background_dark</item>
         <item name="android:navigationBarColor">@color/riotx_header_panel_background_dark</item>

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

@@ -189,6 +189,8 @@
         <item name="riotx_positive_accent_alpha12">@color/riotx_positive_accent_alpha12</item>
         <item name="riotx_toolbar_bg">?riotx_background</item>
         <item name="riotx_unread_unimportant_room_badge">@color/riotx_unread_room_badge_light</item>
+        <item name="timestamp_overlay_fg">@color/timestamp_overlay_fg</item>
+        <item name="timestamp_overlay_bg">@color/timestamp_overlay_bg</item>
 
         <!-- Use dark color, to have enough contrast with icons color. windowLightStatusBar is only available in API 23+ -->
         <item name="android:statusBarColor">@color/riotx_header_panel_background_dark</item>