Fix various layout issues in chat

Signed-off-by: Mario Danic <mario@lovelyhq.com>

app/src/main/java/com/nextcloud/talk/newarch/features/chat/ChatPresenter.kt

@@ -46,6 +46,7 @@ open class ChatPresenter<T : Any>(context: Context, private val onElementClickPa
     override fun onBind(page: Page, holder: Holder, element: Element<T>, payloads: List<Any>) {
         super.onBind(page, holder, element, payloads)
 
+
         holder.itemView.setOnLongClickListener {
             onElementLongClick?.invoke(page, holder, element, mapOf())
             true
@@ -64,114 +65,131 @@ open class ChatPresenter<T : Any>(context: Context, private val onElementClickPa
                 val elementType = chatElement!!.elementType
                 chatMessage.let {
                     if (elementType == ChatElementTypes.CHAT_MESSAGE) {
-                    holder.itemView.authorName?.text = it.actorDisplayName
-                    holder.itemView.messageTime?.text = DateFormatter.format(it.createdAt, DateFormatter.Template.TIME)
-                    holder.itemView.chatMessage.text = it.text
-
-                    if (it.actorType == "bots" && it.actorId == "changelog") {
-                        val layers = arrayOfNulls<Drawable>(2)
-                        layers[0] = context.getDrawable(R.drawable.ic_launcher_background)
-                        layers[1] = context.getDrawable(R.drawable.ic_launcher_foreground)
-                        val layerDrawable = LayerDrawable(layers)
-                        val loadBuilder = imageLoader.getImageLoader().newLoadBuilder(context).target(holder.itemView.authorAvatar).data(DisplayUtils.getRoundedDrawable(layerDrawable))
-                        imageLoader.getImageLoader().load(loadBuilder.build())
-                    } else if (it.actorType == "bots") {
-                        val drawable = TextDrawable.builder()
-                                .beginConfig()
-                                .bold()
-                                .endConfig()
-                                .buildRound(
-                                        ">",
-                                        context.resources.getColor(R.color.black)
-                                )
-                        val loadBuilder = imageLoader.getImageLoader().newLoadBuilder(context).target(holder.itemView.authorAvatar).data(DisplayUtils.getRoundedDrawable(drawable))
-                        imageLoader.getImageLoader().load(loadBuilder.build())
-                    } else {
-                        imageLoader.loadImage(holder.itemView.authorAvatar, it.user.avatar)
-                    }
-
-                    it.parentMessage?.let { parentMessage ->
-                        holder.itemView.quotedMessageLayout.isVisible = true
-                        holder.itemView.quoteColoredView.setBackgroundResource(R.color.colorPrimary)
-                        holder.itemView.quotedPreviewImage.setOnClickListener {
-                            onElementClickPass?.invoke(page, holder, element, mapOf("parentMessage" to "yes"))
-                            true
+                        var shouldShowNameAndAvatar = true
+                        val previousElement = getAdapter().elementAt(holder.adapterPosition - 1)
+                        if (previousElement != null && previousElement.element.data != null && previousElement.element.data is ChatElement) {
+                            val previousChatElement = previousElement.element.data as ChatElement
+                            if (previousChatElement.elementType == ChatElementTypes.CHAT_MESSAGE) {
+                                val previousChatMessage = previousChatElement.data as ChatMessage
+                                if (previousChatMessage.actorId == it.actorId) {
+                                    shouldShowNameAndAvatar = false
+                                }
+                            }
                         }
 
-                        parentMessage.imageUrl?.let { previewMessageUrl ->
-                            if (previewMessageUrl == "no-preview") {
+                        holder.itemView.messageTime?.text = DateFormatter.format(it.createdAt, DateFormatter.Template.TIME)
+                        holder.itemView.chatMessage.text = it.text
 
-                                if (it.selectedIndividualHashMap?.containsKey("mimetype") == true) {
+                        if (shouldShowNameAndAvatar) {
+                            holder.itemView.authorLayout.isVisible = true
+                            holder.itemView.authorName?.text = it.actorDisplayName
+                            if (it.actorType == "bots" && it.actorId == "changelog") {
+                                val layers = arrayOfNulls<Drawable>(2)
+                                layers[0] = context.getDrawable(R.drawable.ic_launcher_background)
+                                layers[1] = context.getDrawable(R.drawable.ic_launcher_foreground)
+                                val layerDrawable = LayerDrawable(layers)
+                                val loadBuilder = imageLoader.getImageLoader().newLoadBuilder(context).target(holder.itemView.authorAvatar).data(DisplayUtils.getRoundedDrawable(layerDrawable))
+                                imageLoader.getImageLoader().load(loadBuilder.build())
+                            } else if (it.actorType == "bots") {
+                                val drawable = TextDrawable.builder()
+                                        .beginConfig()
+                                        .bold()
+                                        .endConfig()
+                                        .buildRound(
+                                                ">",
+                                                context.resources.getColor(R.color.black)
+                                        )
+                                val loadBuilder = imageLoader.getImageLoader().newLoadBuilder(context).target(holder.itemView.authorAvatar).data(DisplayUtils.getRoundedDrawable(drawable))
+                                imageLoader.getImageLoader().load(loadBuilder.build())
+                            } else {
+                                imageLoader.loadImage(holder.itemView.authorAvatar, it.user.avatar)
+                            }
+                        } else {
+                            holder.itemView.authorLayout.isVisible = false
+                        }
+
+                        it.parentMessage?.let { parentMessage ->
+                            holder.itemView.quotedMessageLayout.isVisible = true
+                            holder.itemView.quoteColoredView.setBackgroundResource(R.color.colorPrimary)
+                            holder.itemView.quotedPreviewImage.setOnClickListener {
+                                onElementClickPass?.invoke(page, holder, element, mapOf("parentMessage" to "yes"))
+                                true
+                            }
+
+                            parentMessage.imageUrl?.let { previewMessageUrl ->
+                                if (previewMessageUrl == "no-preview") {
+
+                                    if (it.selectedIndividualHashMap?.containsKey("mimetype") == true) {
+                                        holder.itemView.quotedPreviewImage.visibility = View.VISIBLE
+                                        imageLoader.getImageLoader().loadAny(context, getDrawableResourceIdForMimeType(parentMessage.selectedIndividualHashMap!!["mimetype"])) {
+                                            target(holder.itemView.previewImage)
+                                        }
+                                    } else {
+                                        holder.itemView.quotedPreviewImage.visibility = View.GONE
+                                    }
+                                } else {
                                     holder.itemView.quotedPreviewImage.visibility = View.VISIBLE
-                                    imageLoader.getImageLoader().loadAny(context, getDrawableResourceIdForMimeType(parentMessage.selectedIndividualHashMap!!["mimetype"])) {
+                                    val mutableMap = mutableMapOf<String, String>()
+                                    if (parentMessage.selectedIndividualHashMap?.containsKey("mimetype") == true) {
+                                        mutableMap["mimetype"] = it.selectedIndividualHashMap!!["mimetype"]!!
+                                    }
+
+                                    imageLoader.loadImage(holder.itemView.previewImage, previewMessageUrl, mutableMap)
+                                }
+                            } ?: run {
+                                holder.itemView.quotedPreviewImage.visibility = View.GONE
+                            }
+
+                            imageLoader.loadImage(holder.itemView.quotedUserAvatar, parentMessage.user.avatar)
+                            holder.itemView.quotedAuthor.text = parentMessage.actorDisplayName
+                                    ?: context.getText(R.string.nc_nick_guest)
+                            holder.itemView.quotedChatText.text = parentMessage.text
+                            holder.itemView.messageTime?.text = DateFormatter.format(it.createdAt, DateFormatter.Template.TIME)
+                        } ?: run {
+                            holder.itemView.quotedMessageLayout.isVisible = false
+                        }
+
+                        it.imageUrl?.let { imageUrl ->
+                            holder.itemView.previewImage.setOnClickListener {
+                                onElementClickPass?.invoke(page, holder, element, emptyMap())
+                                true
+                            }
+
+                            if (imageUrl == "no-preview") {
+                                if (it.selectedIndividualHashMap?.containsKey("mimetype") == true) {
+                                    holder.itemView.previewImage.visibility = View.VISIBLE
+                                    imageLoader.getImageLoader().loadAny(context, getDrawableResourceIdForMimeType(it.selectedIndividualHashMap!!["mimetype"])) {
                                         target(holder.itemView.previewImage)
                                     }
                                 } else {
-                                    holder.itemView.quotedPreviewImage.visibility = View.GONE
+                                    holder.itemView.previewImage.visibility = View.GONE
                                 }
                             } else {
-                                holder.itemView.quotedPreviewImage.visibility = View.VISIBLE
+                                holder.itemView.previewImage.visibility = View.VISIBLE
                                 val mutableMap = mutableMapOf<String, String>()
-                                if (parentMessage.selectedIndividualHashMap?.containsKey("mimetype") == true) {
+                                if (it.selectedIndividualHashMap?.containsKey("mimetype") == true) {
                                     mutableMap["mimetype"] = it.selectedIndividualHashMap!!["mimetype"]!!
                                 }
 
-                                imageLoader.loadImage(holder.itemView.previewImage, previewMessageUrl, mutableMap)
+                                imageLoader.loadImage(holder.itemView.previewImage, imageUrl, mutableMap)
                             }
                         } ?: run {
-                            holder.itemView.quotedPreviewImage.visibility = View.GONE
+                            holder.itemView.previewImage.visibility = View.GONE
                         }
 
-                        imageLoader.loadImage(holder.itemView.quotedUserAvatar, parentMessage.user.avatar)
-                        holder.itemView.quotedAuthor.text = parentMessage.actorDisplayName
-                                ?: context.getText(R.string.nc_nick_guest)
-                        holder.itemView.quotedChatText.text = parentMessage.text
-                        holder.itemView.messageTime?.text = DateFormatter.format(it.createdAt, DateFormatter.Template.TIME)
-                    } ?: run {
-                        holder.itemView.quotedMessageLayout.isVisible = false
+                    } else {
+                        holder.itemView.systemMessageText.text = it.text
+                        holder.itemView.systemItemTime.text = DateFormatter.format(it.createdAt, DateFormatter.Template.TIME)
                     }
-
-                    it.imageUrl?.let { imageUrl ->
-                        holder.itemView.previewImage.setOnClickListener {
-                            onElementClickPass?.invoke(page, holder, element, emptyMap())
-                            true
-                        }
-
-                        if (imageUrl == "no-preview") {
-                            if (it.selectedIndividualHashMap?.containsKey("mimetype") == true) {
-                                holder.itemView.previewImage.visibility = View.VISIBLE
-                                imageLoader.getImageLoader().loadAny(context, getDrawableResourceIdForMimeType(it.selectedIndividualHashMap!!["mimetype"])) {
-                                    target(holder.itemView.previewImage)
-                                }
-                            } else {
-                                holder.itemView.previewImage.visibility = View.GONE
-                            }
-                        } else {
-                            holder.itemView.previewImage.visibility = View.VISIBLE
-                            val mutableMap = mutableMapOf<String, String>()
-                            if (it.selectedIndividualHashMap?.containsKey("mimetype") == true) {
-                                mutableMap["mimetype"] = it.selectedIndividualHashMap!!["mimetype"]!!
-                            }
-
-                            imageLoader.loadImage(holder.itemView.previewImage, imageUrl, mutableMap)
-                        }
-                    } ?: run {
-                        holder.itemView.previewImage.visibility = View.GONE
-                    }
-
-                } else {
-                    holder.itemView.systemMessageText.text = it.text
-                    holder.itemView.systemItemTime.text = DateFormatter.format(it.createdAt, DateFormatter.Template.TIME)
                 }
             }
-        }
-        element.type == ChatElementTypes.UNREAD_MESSAGE_NOTICE.ordinal -> {
-            holder.itemView.noticeText.text = context.resources.getString(R.string.nc_new_messages)
-        }
-        else -> {
-            // Date header
-            holder.itemView.noticeText.text = (element.data as HeaderSource.Data<*, *>).header.toString()
+            element.type == ChatElementTypes.UNREAD_MESSAGE_NOTICE.ordinal -> {
+                holder.itemView.noticeText.text = context.resources.getString(R.string.nc_new_messages)
+            }
+            else -> {
+                // Date header
+                holder.itemView.noticeText.text = (element.data as HeaderSource.Data<*, *>).header.toString()
+            }
         }
     }
 }
-}

app/src/main/java/com/nextcloud/talk/newarch/features/conversationsList/ConversationsListViewModel.kt

@@ -31,6 +31,7 @@ import androidx.lifecycle.viewModelScope
 import coil.Coil
 import coil.api.get
 import coil.transform.CircleCropTransformation
+import com.nextcloud.talk.R
 import com.nextcloud.talk.models.json.conversations.Conversation
 import com.nextcloud.talk.models.json.generic.GenericOverall
 import com.nextcloud.talk.newarch.conversationsList.mvp.BaseViewModel
@@ -178,7 +179,7 @@ class ConversationsListViewModel (
 
         operationUser?.let {
             viewModelScope.launch {
-                val url = ApiUtils.getUrlForAvatarWithNameAndPixels(it.baseUrl, it.userId, 256)
+                val url = ApiUtils.getUrlForAvatarWithName(it.baseUrl, it.userId, R.dimen.avatar_size)
                 try {
                     val drawable = Coil.get((url)) {
                         addHeader("Authorization", it.getCredentials())

app/src/main/java/com/nextcloud/talk/newarch/utils/NetworkComponents.kt

@@ -84,8 +84,7 @@ class NetworkComponents(
         }
 
         okHttpClientBuilder.dispatcher(dispatcher)
-
-
+        
         return okHttpClientBuilder.build()
     }
 

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

@@ -36,7 +36,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_toEndOf="@id/quotedUserAvatar"
-            android:textSize="12sp"
+            android:textSize="14sp"
             android:id="@+id/quotedAuthor"
             android:layout_alignBaseline="@id/quotedUserAvatar"
             tools:text="Another user"/>
@@ -63,6 +63,7 @@
         android:layout_marginTop="8dp"
         android:layout_toStartOf="@id/cancelReplyButton"
         android:id="@+id/quotedChatText"
+        android:textSize="12sp"
         android:layout_below="@id/quotedPreviewImage"
         tools:text="Just another chat message"/>
 
@@ -71,7 +72,8 @@
         android:layout_height="wrap_content"
         android:layout_alignParentEnd="true"
         android:layout_below="@id/quotedChatText"
-        android:textSize="12sp"
+        android:textSize="10sp"
+        android:textAlignment="textEnd"
         android:id="@+id/quotedMessageTime"
         android:layout_marginEnd="8dp"
         tools:text="12:30"/>

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

@@ -3,8 +3,7 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     xmlns:tools="http://schemas.android.com/tools"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_marginTop="4dp">
+    xmlns:app="http://schemas.android.com/apk/res-auto">
 
     <RelativeLayout
         android:layout_width="match_parent"
@@ -26,7 +25,7 @@
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_toEndOf="@id/authorAvatar"
-            android:textSize="12sp"
+            android:textSize="14sp"
             android:id="@+id/authorName"
             android:layout_centerVertical="true"
             android:gravity="center_vertical"
@@ -36,7 +35,6 @@
 
     <include layout="@layout/item_message_quote"
         android:layout_below="@id/authorLayout"
-        android:layout_marginTop="4dp"
         android:layout_marginStart="40dp"
         android:layout_marginEnd="8dp"
         android:layout_height="wrap_content"
@@ -47,7 +45,6 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
-        android:layout_marginTop="4dp"
         android:layout_alignParentStart="true"
         android:scaleType="fitCenter"
         android:layout_below="@id/quotedMessageLayout"
@@ -60,6 +57,7 @@
         android:layout_height="wrap_content"
         android:layout_marginStart="40dp"
         android:layout_marginEnd="8dp"
+        android:textSize="12sp"
         android:id="@+id/chatMessage"
         android:layout_below="@id/previewImage"
         tools:text="Just another chat message"/>
@@ -69,7 +67,7 @@
         android:layout_height="wrap_content"
         android:layout_alignParentEnd="true"
         android:layout_below="@id/chatMessage"
-        android:textSize="12sp"
+        android:textSize="10sp"
         android:id="@+id/messageTime"
         android:layout_marginEnd="8dp"
         tools:text="12:30"/>

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

@@ -58,10 +58,10 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="@color/warm_grey_four"
-            android:textSize="12sp"
+            android:textSize="10sp"
             tools:text="17:30"
             android:layout_marginStart="8dp"
-            app:layout_alignSelf="center"
+            app:layout_alignSelf="flex_end"
             app:layout_flexGrow="1"
             app:layout_wrapBefore="false"/>
     </com.google.android.flexbox.FlexboxLayout>

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

@@ -30,7 +30,7 @@
     <!-- Custom transition dimensions -->
     <dimen name="margin_between_elements">8dp</dimen>
     <dimen name="double_margin_between_elements">16dp</dimen>
-    <dimen name="avatar_size">40dp</dimen>
+    <dimen name="avatar_size">48dp</dimen>
     <dimen name="avatar_size_big">96dp</dimen>
     <dimen name="avatar_size_very_big">@dimen/avatar_fetching_size_very_big</dimen>
     <dimen name="avatar_fetching_size_very_big">180dp</dimen>