From 11e3a5def87aac2dcbbe90b8d525428c87aaccfd Mon Sep 17 00:00:00 2001
From: Valere <valeref@matrix.org>
Date: Wed, 15 May 2019 13:24:13 +0200
Subject: [PATCH] Moved reactions view to a stub

---
 .../detail/timeline/item/AbsMessageItem.kt    |  22 ++--
 .../res/layout/item_timeline_event_base.xml   | 105 +-----------------
 ...m_timeline_event_bottom_reactions_stub.xml | 102 +++++++++++++++++
 vector/src/main/res/values/styles_riot.xml    |   2 +-
 4 files changed, 123 insertions(+), 108 deletions(-)
 create mode 100644 vector/src/main/res/layout/item_timeline_event_bottom_reactions_stub.xml

diff --git a/vector/src/main/java/im/vector/riotredesign/features/home/room/detail/timeline/item/AbsMessageItem.kt b/vector/src/main/java/im/vector/riotredesign/features/home/room/detail/timeline/item/AbsMessageItem.kt
index 94492e36..045bb1c7 100644
--- a/vector/src/main/java/im/vector/riotredesign/features/home/room/detail/timeline/item/AbsMessageItem.kt
+++ b/vector/src/main/java/im/vector/riotredesign/features/home/room/detail/timeline/item/AbsMessageItem.kt
@@ -19,6 +19,7 @@ package im.vector.riotredesign.features.home.room.detail.timeline.item
 import android.os.Build
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewStub
 import android.widget.ImageView
 import android.widget.TextView
 import androidx.constraintlayout.helper.widget.Flow
@@ -76,14 +77,19 @@ abstract class AbsMessageItem<H : AbsMessageItem.Holder> : BaseEventItem<H>() {
         holder.view.setOnLongClickListener(longClickListener)
 
         if (informationData.orderedReactionList.isNullOrEmpty()) {
-            holder.reactionWrapper.isVisible = false
+            holder.reactionWrapper?.isVisible = false
         } else {
-            holder.reactionWrapper.isVisible = true
+            //inflate if needed
+            if (holder.reactionFlowHelper == null) {
+                holder.reactionWrapper = holder.view.findViewById<ViewStub>(R.id.messageBottomInfo).inflate() as? ViewGroup
+                holder.reactionFlowHelper = holder.view.findViewById(R.id.reactionsFlowHelper)
+            }
+            holder.reactionWrapper?.isVisible = true
             //clear all reaction buttons (but not the Flow helper!)
-            holder.reactionWrapper.children.forEach { (it as? ReactionButton)?.isGone = true }
+            holder.reactionWrapper?.children?.forEach { (it as? ReactionButton)?.isGone = true }
             val idToRefInFlow = ArrayList<Int>()
             informationData.orderedReactionList?.forEachIndexed { index, reaction ->
-                (holder.reactionWrapper.children.elementAt(index) as? ReactionButton)?.let { reactionButton ->
+                (holder.reactionWrapper?.children?.elementAt(index) as? ReactionButton)?.let { reactionButton ->
                     reactionButton.isVisible = true
                     idToRefInFlow.add(reactionButton.id)
                     reactionButton.reactionString = reaction.first
@@ -93,9 +99,9 @@ abstract class AbsMessageItem<H : AbsMessageItem.Holder> : BaseEventItem<H>() {
             }
             // Just setting the view as gone will break the FlowHelper (and invisible will take too much space),
             // so have to update ref ids
-            holder.reactionFlowHelper.referencedIds = idToRefInFlow.toIntArray()
+            holder.reactionFlowHelper?.referencedIds = idToRefInFlow.toIntArray()
             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2 && !holder.view.isInLayout) {
-                holder.reactionFlowHelper.requestLayout()
+                holder.reactionFlowHelper?.requestLayout()
             }
 
         }
@@ -112,8 +118,8 @@ abstract class AbsMessageItem<H : AbsMessageItem.Holder> : BaseEventItem<H>() {
         val memberNameView by bind<TextView>(R.id.messageMemberNameView)
         val timeView by bind<TextView>(R.id.messageTimeView)
 
-        val reactionWrapper: ViewGroup by bind(R.id.messageBottomInfo)
-        val reactionFlowHelper: Flow by bind(R.id.reactionsFlowHelper)
+        var reactionWrapper: ViewGroup? = null
+        var reactionFlowHelper: Flow? = null
     }
 
 }
\ No newline at end of file
diff --git a/vector/src/main/res/layout/item_timeline_event_base.xml b/vector/src/main/res/layout/item_timeline_event_base.xml
index 89c3b318..dc2e2ed6 100644
--- a/vector/src/main/res/layout/item_timeline_event_base.xml
+++ b/vector/src/main/res/layout/item_timeline_event_base.xml
@@ -82,116 +82,23 @@
         tools:ignore="MissingConstraints" />
 
 
+
     <!-- TODO: For now we show 8 reactions maximum, this will need rework when needed-->
-    <androidx.constraintlayout.widget.ConstraintLayout
+    <ViewStub
         android:id="@+id/messageBottomInfo"
+        android:inflatedId="@+id/messageBottomInfo"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
+        android:layout="@layout/item_timeline_event_bottom_reactions_stub"
         android:visibility="gone"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@id/messageStartGuideline"
         app:layout_constraintVertical_chainStyle="packed"
+        android:layout_marginBottom="4dp"
         tools:visibility="visible">
 
-        <im.vector.riotredesign.features.reactions.widget.ReactionButton
-            android:id="@+id/messageBottomReaction1"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:visibility="gone"
-            tools:emoji="👍"
-            tools:ignore="MissingConstraints"
-            tools:reaction_count="3"
-            tools:visibility="visible" />
-
-
-        <im.vector.riotredesign.features.reactions.widget.ReactionButton
-            android:id="@+id/messageBottomReaction2"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:visibility="gone"
-            tools:emoji="👎"
-            tools:ignore="MissingConstraints"
-            tools:reaction_count="10"
-            tools:visibility="visible" />
-
-
-        <im.vector.riotredesign.features.reactions.widget.ReactionButton
-            android:id="@+id/messageBottomReaction3"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:visibility="gone"
-            tools:emoji="😀"
-            tools:ignore="MissingConstraints"
-            tools:visibility="visible" />
-
-
-        <im.vector.riotredesign.features.reactions.widget.ReactionButton
-            android:id="@+id/messageBottomReaction4"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:visibility="gone"
-            tools:emoji="☹️"
-            tools:ignore="MissingConstraints"
-            tools:visibility="visible" />
-
-
-        <im.vector.riotredesign.features.reactions.widget.ReactionButton
-            android:id="@+id/messageBottomReaction5"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:visibility="gone"
-            tools:emoji="😱"
-            tools:ignore="MissingConstraints"
-            tools:visibility="visible" />
-
-
-        <im.vector.riotredesign.features.reactions.widget.ReactionButton
-            android:id="@+id/messageBottomReaction6"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:visibility="gone"
-            tools:emoji="❌"
-            tools:ignore="MissingConstraints"
-            tools:visibility="visible" />
-
-
-        <im.vector.riotredesign.features.reactions.widget.ReactionButton
-            android:id="@+id/messageBottomReaction7"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:visibility="gone"
-            tools:emoji="✔️"
-            tools:ignore="MissingConstraints"
-            tools:visibility="visible" />
-
-        <im.vector.riotredesign.features.reactions.widget.ReactionButton
-            android:id="@+id/messageBottomReaction8"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:visibility="gone"
-            tools:emoji="♥️"
-            tools:ignore="MissingConstraints"
-            tools:visibility="visible" />
-
-
-        <androidx.constraintlayout.helper.widget.Flow
-            android:id="@+id/reactionsFlowHelper"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:padding="2dp"
-            app:constraint_referenced_ids="messageBottomReaction1,messageBottomReaction2,messageBottomReaction3,messageBottomReaction4,messageBottomReaction5,messageBottomReaction6,messageBottomReaction7,messageBottomReaction8"
-            app:flow_horizontalBias="0"
-            app:flow_horizontalGap="8dp"
-            app:flow_horizontalStyle="packed"
-            app:flow_verticalBias="0"
-            app:flow_verticalGap="4dp"
-            app:flow_wrapMode="chain"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
+    </ViewStub>
 
 
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/vector/src/main/res/layout/item_timeline_event_bottom_reactions_stub.xml b/vector/src/main/res/layout/item_timeline_event_bottom_reactions_stub.xml
new file mode 100644
index 00000000..13ca78ae
--- /dev/null
+++ b/vector/src/main/res/layout/item_timeline_event_bottom_reactions_stub.xml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/messageBottomInfo"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <im.vector.riotredesign.features.reactions.widget.ReactionButton
+        android:id="@+id/messageBottomReaction1"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        tools:emoji="👍"
+        tools:ignore="MissingConstraints"
+        tools:reaction_count="3"
+        tools:visibility="visible" />
+
+    <im.vector.riotredesign.features.reactions.widget.ReactionButton
+        android:id="@+id/messageBottomReaction2"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        tools:emoji="👎"
+        tools:ignore="MissingConstraints"
+        tools:reaction_count="10"
+        tools:visibility="visible" />
+
+    <im.vector.riotredesign.features.reactions.widget.ReactionButton
+        android:id="@+id/messageBottomReaction3"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        tools:emoji="😀"
+        tools:ignore="MissingConstraints"
+        tools:visibility="visible" />
+
+    <im.vector.riotredesign.features.reactions.widget.ReactionButton
+        android:id="@+id/messageBottomReaction4"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        tools:emoji="☹️"
+        tools:ignore="MissingConstraints"
+        tools:visibility="visible" />
+
+    <im.vector.riotredesign.features.reactions.widget.ReactionButton
+        android:id="@+id/messageBottomReaction5"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        tools:emoji="😱"
+        tools:ignore="MissingConstraints"
+        tools:visibility="visible" />
+
+
+    <im.vector.riotredesign.features.reactions.widget.ReactionButton
+        android:id="@+id/messageBottomReaction6"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        tools:emoji="❌"
+        tools:ignore="MissingConstraints"
+        tools:visibility="visible" />
+
+
+    <im.vector.riotredesign.features.reactions.widget.ReactionButton
+        android:id="@+id/messageBottomReaction7"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        tools:emoji="✔️"
+        tools:ignore="MissingConstraints"
+        tools:visibility="visible" />
+
+    <im.vector.riotredesign.features.reactions.widget.ReactionButton
+        android:id="@+id/messageBottomReaction8"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        tools:emoji="♥️"
+        tools:ignore="MissingConstraints"
+        tools:visibility="visible" />
+
+
+    <androidx.constraintlayout.helper.widget.Flow
+        android:id="@+id/reactionsFlowHelper"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:padding="2dp"
+        app:constraint_referenced_ids="messageBottomReaction1,messageBottomReaction2,messageBottomReaction3,messageBottomReaction4,messageBottomReaction5,messageBottomReaction6,messageBottomReaction7,messageBottomReaction8"
+        app:flow_horizontalBias="0"
+        app:flow_horizontalGap="8dp"
+        app:flow_horizontalStyle="packed"
+        app:flow_verticalBias="0"
+        app:flow_verticalGap="4dp"
+        app:flow_wrapMode="chain"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ 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 7ab2caa1..530108f3 100644
--- a/vector/src/main/res/values/styles_riot.xml
+++ b/vector/src/main/res/values/styles_riot.xml
@@ -252,7 +252,7 @@
         <item name="android:layout_height">wrap_content</item>
         <item name="android:layout_marginStart">8dp</item>
         <item name="android:layout_marginLeft">8dp</item>
-        <item name="android:layout_marginBottom">8dp</item>
+        <item name="android:layout_marginBottom">4dp</item>
         <item name="android:layout_marginTop">4dp</item>
         <item name="layout_constraintBottom_toBottomOf">parent</item>
         <item name="layout_constraintEnd_toEndOf">parent</item>