Merge pull request #1695 from RocketChat/collpasable-quotes

[NEW] Add collapsable feature to quotes

app/src/main/java/chat/rocket/android/chatroom/adapter/MessageAttachmentViewHolder.kt

 package chat.rocket.android.chatroom.adapter
 
+import android.animation.ValueAnimator
 import android.text.method.LinkMovementMethod
 import android.view.View
+import android.view.animation.LinearInterpolator
+import androidx.core.view.isVisible
+import chat.rocket.android.R
 import chat.rocket.android.chatroom.uimodel.MessageAttachmentUiModel
 import chat.rocket.android.emoji.EmojiReactionListener
 import kotlinx.android.synthetic.main.item_message_attachment.view.*
 
 class MessageAttachmentViewHolder(
-        itemView: View,
-        listener: ActionsListener,
-        reactionListener: EmojiReactionListener? = null
+    itemView: View,
+    listener: ActionsListener,
+    reactionListener: EmojiReactionListener? = null
 ) : BaseViewHolder<MessageAttachmentUiModel>(itemView, listener, reactionListener) {
 
+    private var expanded = true
+
     init {
         with(itemView) {
             setupActionMenu(attachment_container)
@@ -21,9 +27,77 @@ class MessageAttachmentViewHolder(
 
     override fun bindViews(data: MessageAttachmentUiModel) {
         with(itemView) {
+            val collapsedHeight = context.resources.getDimensionPixelSize(R.dimen.quote_collapsed_height)
+            val viewMore = context.getString(R.string.msg_view_more)
+            val viewLess = context.getString(R.string.msg_view_less)
             text_message_time.text = data.time
             text_sender.text = data.senderName
             text_content.text = data.content
+            text_view_more.text = viewLess
+            text_content.addOnLayoutChangeListener(object : View.OnLayoutChangeListener {
+
+                override fun onLayoutChange(v: View, left: Int, top: Int, right: Int, bottom: Int,
+                                            oldLeft: Int, oldTop: Int, oldRight: Int, oldBottom: Int) {
+                    val textMeasuredHeight = bottom - top
+                    if (collapsedHeight >= textMeasuredHeight) {
+                        text_view_more.isVisible = false
+                        text_content.removeOnLayoutChangeListener(this)
+                        return
+                    }
+
+                    text_view_more.isVisible = true
+
+                    val expandAnimation = ValueAnimator
+                        .ofInt(collapsedHeight, textMeasuredHeight)
+                        .setDuration(300)
+                    expandAnimation.interpolator = LinearInterpolator()
+
+                    val collapseAnimation = ValueAnimator
+                        .ofInt(textMeasuredHeight, collapsedHeight)
+                        .setDuration(300)
+                    collapseAnimation.interpolator = LinearInterpolator()
+
+                    val lp = text_content.layoutParams
+
+                    expandAnimation.addUpdateListener {
+                        val value = it.animatedValue as Int
+                        lp.height = value
+                        text_content.layoutParams = lp
+                        expanded = if (value == textMeasuredHeight) {
+                            text_view_more.text = viewLess
+                            true
+                        } else {
+                            text_view_more.text = viewMore
+                            false
+                        }
+                    }
+
+                    collapseAnimation.addUpdateListener {
+                        val value = it.animatedValue as Int
+                        lp.height = value
+                        text_content.layoutParams = lp
+                        expanded = if (value == textMeasuredHeight) {
+                            text_view_more.text = viewLess
+                            true
+                        } else {
+                            text_view_more.text = viewMore
+                            false
+                        }
+                    }
+
+                    text_view_more.setOnClickListener {
+                        if (expandAnimation.isRunning) return@setOnClickListener
+
+                        if (expanded) {
+                            collapseAnimation.start()
+                        } else {
+                            expandAnimation.start()
+                        }
+                    }
+
+                    text_content.removeOnLayoutChangeListener(this)
+                }
+            })
         }
     }
 }
\ No newline at end of file

app/src/main/java/chat/rocket/android/chatroom/adapter/MessageReplyViewHolder.kt

@@ -13,9 +13,7 @@ class MessageReplyViewHolder(
 ) : BaseViewHolder<MessageReplyUiModel>(itemView, listener, reactionListener) {
 
     init {
-        with(itemView) {
-            setupActionMenu(itemView)
-        }
+        setupActionMenu(itemView)
     }
 
     override fun bindViews(data: MessageReplyUiModel) {

app/src/main/res/layout/item_message_attachment.xml

@@ -5,13 +5,14 @@
     android:id="@+id/attachment_container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:animateLayoutChanges="true"
     android:background="?android:attr/selectableItemBackground"
     android:clickable="true"
     android:focusable="true"
-    android:paddingBottom="@dimen/message_item_top_and_bottom_padding"
-    android:paddingEnd="@dimen/screen_edge_left_and_right_padding"
     android:paddingStart="@dimen/screen_edge_left_and_right_padding"
-    android:paddingTop="@dimen/message_item_top_and_bottom_padding">
+    android:paddingTop="@dimen/message_item_top_and_bottom_padding"
+    android:paddingEnd="@dimen/screen_edge_left_and_right_padding"
+    android:paddingBottom="@dimen/message_item_top_and_bottom_padding">
 
     <View
         android:id="@+id/quote_bar"
@@ -19,7 +20,7 @@
         android:layout_height="0dp"
         android:layout_marginStart="56dp"
         android:background="@drawable/quote_vertical_gray_bar"
-        app:layout_constraintBottom_toTopOf="@+id/recycler_view_reactions"
+        app:layout_constraintBottom_toTopOf="@+id/text_view_more"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
@@ -28,11 +29,11 @@
         style="@style/Sender.Name.TextView"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:layout_marginStart="8dp"
         android:textColor="@color/colorPrimary"
-        tools:text="Ronald Perkins"
         app:layout_constraintStart_toEndOf="@+id/quote_bar"
         app:layout_constraintTop_toTopOf="parent"
-        android:layout_marginStart="8dp" />
+        tools:text="Ronald Perkins" />
 
     <TextView
         android:id="@+id/text_message_time"
@@ -40,28 +41,39 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginStart="10dp"
-        tools:text="11:45 PM"
+        app:layout_constraintBottom_toBottomOf="@+id/text_sender"
         app:layout_constraintStart_toEndOf="@+id/text_sender"
         app:layout_constraintTop_toTopOf="@+id/text_sender"
-        app:layout_constraintBottom_toBottomOf="@+id/text_sender"/>
+        tools:text="11:45 PM" />
 
     <TextView
         android:id="@+id/text_content"
         style="@style/Message.Quote.TextView"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:ellipsize="end"
-        android:singleLine="true"
+        app:layout_constraintBottom_toTopOf="@id/text_view_more"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="@+id/text_sender"
         app:layout_constraintTop_toBottomOf="@+id/text_sender"
         tools:text="This is a multiline chat message from Bertie that will take more than just one line of text. I have sure that everything is amazing!" />
 
+    <TextView
+        android:id="@+id/text_view_more"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:gravity="end"
+        android:textColor="@color/darkGray"
+        android:textSize="14sp"
+        app:layout_constraintEnd_toEndOf="@+id/text_content"
+        app:layout_constraintStart_toStartOf="@+id/quote_bar"
+        app:layout_constraintTop_toBottomOf="@+id/text_content"
+        tools:text="Visualizar mais" />
+
     <include
         layout="@layout/layout_reactions"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         app:layout_constraintStart_toStartOf="@+id/quote_bar"
-        app:layout_constraintTop_toBottomOf="@+id/text_content" />
+        app:layout_constraintTop_toBottomOf="@+id/text_view_more" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values-de/strings.xml

@@ -142,6 +142,10 @@
     <string name="msg_message_copied">Nachricht kopiert</string>
     <string name="msg_delete_message">Lösche Nachricht</string>
     <string name="msg_delete_description">Sind Sie sicher, dass Sie diese Nachricht löschen wollen?</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_more">view more</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_less">view less</string>
 
     <!-- Preferences messages -->
     <string name="msg_analytics_tracking">Analytics tracking</string> <!-- TODO Add translation -->

app/src/main/res/values-es/strings.xml

@@ -139,6 +139,10 @@
     <string name="msg_member_already_added">Ya has seleccionado este usuario</string>
     <string name="msg_member_not_found">Miembro no encontrado</string>
     <string name="msg_channel_created_successfully">Canal creado con éxito</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_more">view more</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_less">view less</string>
 
     <!-- Preferences messages -->
     <string name="msg_analytics_tracking">Analytics tracking</string> <!-- TODO Add translation -->

app/src/main/res/values-fr/strings.xml

@@ -131,6 +131,10 @@
     <string name="msg_send">envoyer</string>
     <string name="msg_delete_message">Supprimer Message</string>
     <string name="msg_delete_description">Êtes-vous sûr de vouloir supprimer ce message</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_more">view more</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_less">view less</string>
 
     <!-- Create channel messages -->
     <string name="msg_private_channel">Privé</string>

app/src/main/res/values-hi-rIN/strings.xml

@@ -145,6 +145,10 @@
     <string name="msg_member_already_added">आपने पहले से ही इस यूजर को चुन चुके है।</string>
     <string name="msg_member_not_found">सदस्य नहीं मिला</string>
     <string name="msg_channel_created_successfully">चैनल सफलतापूर्वक बनाया गया</string>
+    <!--  TODO - Add proper translation -->
+    <string name="msg_view_more">view more</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_less">view less</string>
 
     <!-- Preferences messages -->
     <string name="msg_analytics_tracking">एनालिटिक्स ट्रैकिंग</string>

app/src/main/res/values-ja/strings.xml

@@ -132,6 +132,10 @@
     <string name="msg_file_description">ファイルの説明</string>
     <string name="msg_send">送信</string>
     <string name="msg_sent_attachment">添付ファイルを送信しました</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_more">view more</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_less">view less</string>
 
     <!-- Create channel messages -->
     <string name="msg_private_channel">プライベート</string>

app/src/main/res/values-pt-rBR/strings.xml

@@ -130,9 +130,10 @@
     <string name="msg_upload_file">Subir arquivo</string>
     <string name="msg_file_description">Descrição do arquivo</string>
     <string name="msg_send">Enviar</string>
-    // TODO: Add proper translation.
-    <string name="msg_delete_message">Delete Message</string>
-    <string name="msg_delete_description">Are you sure you want to delete this message</string>
+    <string name="msg_delete_message">Remove mensagem</string>
+    <string name="msg_delete_description">Tem certeza que quer apagar esta mensagem?</string>
+    <string name="msg_view_more">visualizar mais</string>
+    <string name="msg_view_less">visualizar menos</string>
 
     <!-- Create channel messages -->
     <string name="msg_private_channel">Privado</string>

app/src/main/res/values-ru-rRU/strings.xml

@@ -130,6 +130,10 @@
     <string name="msg_delete_description">Вы уверены, что хотите удалить это сообщение?</string>
     <string name="msg_channel_name">Название канала</string>
     <string name="msg_search">Поиск</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_more">view more</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_less">view less</string>
 
     <!-- Create channel messages -->
     <string name="msg_private_channel">Приватный</string>

app/src/main/res/values-uk/strings.xml

@@ -129,6 +129,10 @@
     <string name="msg_send">Надіслати</string>
     <string name="msg_delete_message">Видалити повідомлення</string>
     <string name="msg_delete_description">Ви впевнені, що хочете видалити це повідомлення?</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_more">view more</string>
+    <!-- TODO - Add proper translation -->
+    <string name="msg_view_less">view less</string>
 
     <!-- Create channel messages -->
     <string name="msg_private_channel">Приватний</string>

app/src/main/res/values/dimens.xml

@@ -44,4 +44,6 @@
     <dimen name="viewer_toolbar_padding">16dp</dimen>
     <dimen name="viewer_toolbar_title">16sp</dimen>
 
+    <dimen name="quote_collapsed_height">32dp</dimen>
+
 </resources>
\ No newline at end of file

app/src/main/res/values/strings.xml

@@ -159,6 +159,8 @@ https://github.com/RocketChat/java-code-styles/blob/master/CODING_STYLE.md#strin
     <string name="msg_message_copied">Message copied</string>
     <string name="msg_delete_message">Delete Message</string>
     <string name="msg_delete_description">Are you sure you want to delete this message</string>
+    <string name="msg_view_more">view more</string>
+    <string name="msg_view_less">view less</string>
     
     <!-- Preferences messages -->
     <string name="msg_analytics_tracking">Analytics tracking</string>