improve quoted message design

Resolves  #945

Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>

app/src/main/java/com/nextcloud/talk/adapters/messages/MagicIncomingTextMessageViewHolder.kt

@@ -78,10 +78,6 @@ class MagicIncomingTextMessageViewHolder(incomingView: View) : MessageHolders
     @BindView(R.id.quotedChatMessageView)
     var quotedChatMessageView: RelativeLayout? = null
 
-    @JvmField
-    @BindView(R.id.quotedUserAvatar)
-    var quotedUserAvatar: ImageView? = null
-
     @JvmField
     @BindView(R.id.quotedMessageAuthor)
     var quotedUserName: EmojiTextView? = null
@@ -94,10 +90,6 @@ class MagicIncomingTextMessageViewHolder(incomingView: View) : MessageHolders
     @BindView(R.id.quotedMessage)
     var quotedMessage: EmojiTextView? = null
 
-    @JvmField
-    @BindView(R.id.quotedMessageTime)
-    var quotedMessageTime: TextView? = null
-
     @JvmField
     @BindView(R.id.quoteColoredView)
     var quoteColoredView: View? = null
@@ -236,10 +228,6 @@ class MagicIncomingTextMessageViewHolder(incomingView: View) : MessageHolders
         if (!message.isDeleted && message.parentMessage != null) {
             var parentChatMessage = message.parentMessage
             parentChatMessage.activeUser = message.activeUser
-            quotedUserAvatar?.load(parentChatMessage.user.avatar) {
-                addHeader("Authorization", ApiUtils.getCredentials(message.activeUser.username, message.activeUser.token))
-                transformations(CircleCropTransformation())
-            }
             parentChatMessage.imageUrl?.let {
                 quotedMessagePreview?.visibility = View.VISIBLE
                 quotedMessagePreview?.load(it) {
@@ -254,8 +242,6 @@ class MagicIncomingTextMessageViewHolder(incomingView: View) : MessageHolders
 
             quotedUserName?.setTextColor(context!!.resources.getColor(R.color.textColorMaxContrast))
 
-            quotedMessageTime?.text = DateFormatter.format(parentChatMessage.createdAt, DateFormatter.Template.TIME)
-            quotedMessageTime?.setTextColor(context!!.resources.getColor(R.color.warm_grey_four))
             quoteColoredView?.setBackgroundResource(R.color.textColorMaxContrast)
             quotedChatMessageView?.visibility = View.VISIBLE
         } else {

app/src/main/java/com/nextcloud/talk/adapters/messages/MagicOutcomingTextMessageViewHolder.kt

@@ -65,10 +65,6 @@ class MagicOutcomingTextMessageViewHolder(itemView: View) : OutcomingTextMessage
     @BindView(R.id.quotedChatMessageView)
     var quotedChatMessageView: RelativeLayout? = null
 
-    @JvmField
-    @BindView(R.id.quotedUserAvatar)
-    var quotedUserAvatar: ImageView? = null
-
     @JvmField
     @BindView(R.id.quotedMessageAuthor)
     var quotedUserName: EmojiTextView? = null
@@ -81,10 +77,6 @@ class MagicOutcomingTextMessageViewHolder(itemView: View) : OutcomingTextMessage
     @BindView(R.id.quotedMessage)
     var quotedMessage: EmojiTextView? = null
 
-    @JvmField
-    @BindView(R.id.quotedMessageTime)
-    var quotedMessageTime: TextView? = null
-
     @JvmField
     @BindView(R.id.quoteColoredView)
     var quoteColoredView: View? = null
@@ -165,10 +157,6 @@ class MagicOutcomingTextMessageViewHolder(itemView: View) : OutcomingTextMessage
         if (!message.isDeleted && message.parentMessage != null) {
             var parentChatMessage = message.parentMessage
             parentChatMessage.activeUser = message.activeUser
-            quotedUserAvatar?.load(parentChatMessage.user.avatar) {
-                transformations(CircleCropTransformation())
-                addHeader("Authorization", ApiUtils.getCredentials(message.activeUser.username, message.activeUser.token))
-            }
             parentChatMessage.imageUrl?.let {
                 quotedMessagePreview?.visibility = View.VISIBLE
                 quotedMessagePreview?.load(it) {
@@ -183,8 +171,6 @@ class MagicOutcomingTextMessageViewHolder(itemView: View) : OutcomingTextMessage
             quotedMessage?.setTextColor(context!!.resources.getColor(R.color.nc_outcoming_text_default))
             quotedUserName?.setTextColor(context!!.resources.getColor(R.color.nc_grey))
 
-            quotedMessageTime?.text = DateFormatter.format(parentChatMessage.createdAt, DateFormatter.Template.TIME)
-            quotedMessageTime?.setTextColor(context!!.resources.getColor(R.color.white60))
             quoteColoredView?.setBackgroundResource(R.color.white)
 
             quotedChatMessageView?.visibility = View.VISIBLE

app/src/main/java/com/nextcloud/talk/controllers/ChatController.kt

@@ -1459,17 +1459,11 @@ class ChatController(args: Bundle) : BaseController(args), MessagesListAdapter
                             messageInputView?.findViewById<EmojiTextView>(R.id.quotedMessage)?.maxLines = 2
                             messageInputView?.findViewById<EmojiTextView>(R.id.quotedMessage)?.ellipsize = TextUtils.TruncateAt.END
                             messageInputView?.findViewById<EmojiTextView>(R.id.quotedMessage)?.text = it.text
-                            messageInputView?.findViewById<TextView>(R.id.quotedMessageTime)?.text = DateFormatter.format(it.createdAt, DateFormatter.Template.TIME)
                             messageInputView?.findViewById<EmojiTextView>(R.id.quotedMessageAuthor)?.text = it.actorDisplayName
                                     ?: context!!.getText(R.string.nc_nick_guest)
 
                             conversationUser?.let { currentUser ->
 
-                                messageInputView?.findViewById<ImageView>(R.id.quotedUserAvatar)?.load(it.user.avatar) {
-                                    addHeader("Authorization", credentials!!)
-                                    transformations(CircleCropTransformation())
-                                }
-
                                 chatMessage.imageUrl?.let { previewImageUrl ->
                                     messageInputView?.findViewById<ImageView>(R.id.quotedMessageImage)?.visibility = View.VISIBLE
 

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

@@ -1,4 +1,25 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Nextcloud Talk application
+  ~
+  ~ @author Mario Danic
+  ~ @author Andy Scherzinger
+  ~ Copyright (C) 2021 Andy Scherzinger <info@andy-scherzinger.de>
+  ~ Copyright (C) 2020 Mario Danic <mario@lovelyhq.com>
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
 <RelativeLayout 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"
@@ -14,36 +35,27 @@
         android:layout_alignBottom="@id/flexboxQuoted"
         android:layout_alignParentStart="true"
         android:layout_marginEnd="4dp"
-        android:background="@color/colorPrimary"></View>
-
-    <ImageView
-        android:id="@+id/quotedUserAvatar"
-        android:layout_width="16dp"
-        android:layout_height="16dp"
-        android:layout_alignParentTop="true"
-        android:layout_marginEnd="4dp"
-        android:layout_toEndOf="@id/quoteColoredView"
-        tools:src="@tools:sample/avatars[0]" />
+        android:background="@color/colorPrimary" />
 
     <androidx.emoji.widget.EmojiTextView
         android:id="@+id/quotedMessageAuthor"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_alignBottom="@id/quotedUserAvatar"
+        android:layout_alignParentTop="true"
         android:layout_marginEnd="8dp"
-        android:layout_toEndOf="@id/quotedUserAvatar"
+        android:layout_toEndOf="@id/quoteColoredView"
         android:ellipsize="end"
         android:textSize="12sp"
-        tools:text="Mario" />
+        tools:text="Jane Doe" />
 
     <com.google.android.flexbox.FlexboxLayout
         android:id="@+id/flexboxQuoted"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_below="@id/quotedUserAvatar"
-        android:layout_alignStart="@id/quotedUserAvatar"
-        android:layout_toStartOf="@id/cancelReplyButton"
+        android:layout_below="@id/quotedMessageAuthor"
+        android:layout_alignStart="@id/quotedMessageAuthor"
         android:layout_marginTop="4dp"
+        android:layout_toStartOf="@id/cancelReplyButton"
         android:orientation="vertical"
         app:alignContent="stretch"
         app:alignItems="stretch"
@@ -55,6 +67,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:adjustViewBounds="true"
+            android:contentDescription="@null"
             android:scaleType="fitCenter"
             app:layout_alignSelf="flex_start"
             app:layout_flexGrow="1"
@@ -66,7 +79,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_below="@id/quotedMessageImage"
-            android:layout_alignStart="@id/quotedUserAvatar"
+            android:layout_alignStart="@id/quotedMessageAuthor"
             android:lineSpacingMultiplier="1.2"
             android:textSize="14sp"
             app:layout_alignSelf="flex_start"
@@ -74,27 +87,20 @@
             app:layout_wrapBefore="true"
             tools:text="Hello, this is me!" />
 
-        <TextView
-            android:id="@+id/quotedMessageTime"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="8dp"
-            android:textSize="12sp"
-            app:layout_alignSelf="center"
-            tools:text="16:08" />
-
     </com.google.android.flexbox.FlexboxLayout>
 
     <ImageButton
+        android:id="@+id/cancelReplyButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:visibility="gone"
+        android:layout_alignParentEnd="true"
+        android:layout_centerVertical="true"
         android:layout_marginStart="8dp"
         android:layout_marginEnd="8dp"
-        android:layout_centerVertical="true"
-        android:layout_alignParentEnd="true"
         android:background="@drawable/ic_cancel_black_24dp"
         android:backgroundTint="@color/grey_600"
-        android:id="@+id/cancelReplyButton"/>
+        android:contentDescription="@string/nc_message_quote_cancel_reply"
+        android:visibility="gone"
+        tools:visibility="visible" />
 
-</RelativeLayout>
+</RelativeLayout>

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

@@ -271,6 +271,7 @@
     <string name="nc_sent_a_video_you">You sent a video.</string>
     <string name="nc_sent_an_image_you">You sent an image.</string>
     <string name="nc_formatted_message" translatable="false">%1$s: %2$s</string>
+    <string name="nc_message_quote_cancel_reply">Cancel reply</string>
     <!-- When translating to German, please use non-formal variant -->
     <string name="nc_formatted_message_you">You: %1$s</string>