From 22398284e9c01ec4f0ffcab59d3e8c559773c56d Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Fri, 30 Apr 2021 10:45:13 -0400
Subject: [PATCH] fix(CompactChat): fix margins for images and invites

Fixes #2407
---
 ui/app/AppLayouts/Chat/ChatColumn/Message.qml | 11 -----------
 .../MessageComponents/CompactMessage.qml      | 19 +++++++++++++++++--
 .../MessageComponents/InvitationBubble.qml    | 14 +-------------
 3 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
index 9e1dbf786c..ef4777eb03 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
@@ -171,8 +171,6 @@ Item {
                     return fetchMoreMessagesButtonComponent
                 case Constants.systemMessagePrivateGroupType:
                     return privateGroupHeaderComponent
-                case Constants.communityInviteType:
-                    return invitationBubble
                 default:
                     return isStatusUpdate ? statusUpdateComponent :
                                             (appSettings.useCompactMode ? compactMessageComponent : messageComponent)
@@ -302,15 +300,6 @@ Item {
             container: root
         }
     }
-
-    Component {
-        id: invitationBubble
-        InvitationBubble {
-            communityId: root.communityId
-            anchors.right: !appSettings.useCompactMode && isCurrentUser ? parent.right : undefined
-            anchors.rightMargin: Style.current.padding
-        }
-    }
 }
 
 /*##^##
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
index 931eba6b1e..a2466bb19a 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
@@ -62,8 +62,9 @@ Item {
         anchors.top: dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
         anchors.topMargin: dateGroupLbl.visible ? Style.current.padding : 0
         height: childrenRect.height
-                + (chatName.visible || emojiReactionLoader.active ? Style.current.smallPadding : 0)
+                + (chatName.visible || emojiReactionLoader.active ? Style.current.halfPadding : 0)
                 + (chatName.visible && emojiReactionLoader.active ? Style.current.padding : 0)
+                + (!chatName.visible && chatImageContent.active ? 6 : 0)
                 + (emojiReactionLoader.active ? emojiReactionLoader.height: 0)
                 + (retry.visible && !chatTime.visible ? Style.current.smallPadding : 0)
         width: parent.width
@@ -134,6 +135,7 @@ Item {
                 id: chatImageContent
                 active: isImage
                 anchors.top: parent.top
+                anchors.topMargin: active ? 6 : 0
                 z: 51
 
                 sourceComponent: Component {
@@ -216,6 +218,19 @@ Item {
                     TransactionBubble {}
                 }
             }
+
+            Loader {
+                active: contentType === Constants.communityInviteType
+                anchors.left: parent.left
+                anchors.top: parent.top
+                anchors.topMargin: active ? 8 : 0
+                sourceComponent: Component {
+                    id: invitationBubble
+                    InvitationBubble {
+                        communityId: container.communityId
+                    }
+                }
+            }
         }
 
 
@@ -253,7 +268,7 @@ Item {
         id: emojiReactionLoader
         active: emojiReactionsModel.length
         anchors.bottom: messageContainer.bottom
-        anchors.bottomMargin: Style.current.smallPadding
+        anchors.bottomMargin: Style.current.halfPadding
         anchors.left: messageContainer.left
         anchors.leftMargin: messageContainer.chatText.textField.leftPadding
 
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/InvitationBubble.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/InvitationBubble.qml
index 8558b450a9..2bc982a4c8 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/InvitationBubble.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/InvitationBubble.qml
@@ -15,7 +15,7 @@ Item {
     id: root
     anchors.left: parent.left
     height: childrenRect.height
-    width: rectangleBubbleLoader.width + chatImage.width
+    width: rectangleBubbleLoader.width
 
     Component.onCompleted: {
         chatsModel.communities.setObservedCommunity(root.communityId)
@@ -23,23 +23,11 @@ Item {
         root.invitedCommunity = chatsModel.communities.observedCommunity
     }
 
-    UserImage {
-        id: chatImage
-        visible: (!isLink && authorCurrentMsg !== authorPrevMsg && !isCurrentUser) ||
-                 (appSettings.useCompactMode && isCurrentUser && authorCurrentMsg !== authorPrevMsg)
-        anchors.left: parent.left
-        anchors.leftMargin: visible ? Style.current.padding : 0
-        anchors.top: parent.top
-    }
-
     Loader {
         id: rectangleBubbleLoader
         active: !!invitedCommunity
         width: item.width
         height: item.height
-        anchors.left: !isLink && (!isCurrentUser || (isCurrentUser === appSettings.useCompactMode)) ? chatImage.right : undefined
-        anchors.leftMargin: isLink ? 0 : Style.current.smallPadding
-        anchors.right: !appSettings.useCompactMode && isCurrentUser ? parent.right : undefined
 
         sourceComponent: Component {
             Rectangle {