fix(messagesView): Increase spacing between chat messages

Added padding between messages as specified in Figma: topPadding - 8 if the current message has header, 2 otherwise bottomPadding - 8 if both current and next message have header, 2 otherwise
status-im · Dec 20, 2022 · 3b72588 · 3b72588
1 parent 7563fe6
commit 3b72588
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml
@@ -117,14 +117,6 @@ Control {
         })
     }
 
-    implicitWidth: messageLayout.implicitWidth
-                   + messageLayout.anchors.leftMargin
-                   + messageLayout.anchors.rightMargin
-
-    implicitHeight: messageLayout.implicitHeight
-                    + messageLayout.anchors.topMargin
-                    + messageLayout.anchors.bottomMargin
-
     hoverEnabled: (!root.isActiveMessage && !root.disableHover)
     background: Rectangle {
         color: {
@@ -151,6 +143,10 @@ Control {
     }
 
     contentItem: Item {
+
+        implicitWidth: messageLayout.implicitWidth
+        implicitHeight: messageLayout.implicitHeight
+
         Rectangle {
             anchors {
                 top: parent.top
@@ -212,8 +208,6 @@ Control {
         ColumnLayout {
             id: messageLayout
             anchors.fill: parent
-            anchors.topMargin: 2
-            anchors.bottomMargin: 2
             spacing: 2
 
             Loader {

diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml
@@ -91,7 +91,7 @@ Loader {
     property double prevMsgTimestamp: prevMessageAsJsonObj ? prevMessageAsJsonObj.timestamp : 0
     property double nextMsgTimestamp: nextMessageAsJsonObj ? nextMessageAsJsonObj.timestamp : 0
 
-    property bool shouldRepeatHeader: ((messageTimestamp - prevMsgTimestamp) / 60 / 1000) > Constants.repeatHeaderInterval || isExpired
+    property bool shouldRepeatHeader: d.getShouldRepeatHeader(messageTimestamp, prevMsgTimestamp, messageOutgoingStatus)
 
     property bool hasMention: false
 
@@ -109,7 +109,7 @@ Loader {
     property bool isMessage: isEmoji || isImage || isSticker || isText || isAudio
                              || messageContentType === Constants.messageContentType.communityInviteType || messageContentType === Constants.messageContentType.transactionType
 
-    readonly property bool isExpired: (messageOutgoingStatus === Constants.sending && (Math.floor(messageTimestamp) + 180000) < Date.now()) || messageOutgoingStatus === Constants.expired
+    readonly property bool isExpired: d.getIsExpired(messageOutgoingStatus, messageTimestamp)
     readonly property bool isSending: messageOutgoingStatus === Constants.sending && !isExpired
     property int statusAgeEpoch: 0
 
@@ -182,7 +182,6 @@ Loader {
     }
     /////////////////////////////////////////////
 
-
     signal openStickerPackPopup(string stickerPackId)
     // Not Refactored Yet
     //    Connections {
@@ -269,6 +268,15 @@ Loader {
                 return;
             }
         }
+
+        function getShouldRepeatHeader(messageTimeStamp, prevMessageTimeStamp, messageOutgoingStatus) {
+            return ((messageTimeStamp - prevMessageTimeStamp) / 60 / 1000) > Constants.repeatHeaderInterval 
+                || d.getIsExpired(messageTimeStamp, messageOutgoingStatus)
+        }
+
+        function getIsExpired(messageTimeStamp, messageOutgoingStatus) {
+            return (messageOutgoingStatus === Constants.sending && (Math.floor(messageTimeStamp) + 180000) < Date.now()) || messageOutgoingStatus === Constants.expired
+        }
     }
 
     onLinkUrlsChanged: {
@@ -451,6 +459,15 @@ Loader {
                     root.messageStore.editMessage(root.messageId, root.messageContentType, interpretedMessage)
                 }
 
+                function nextMessageHasHeader() {
+                    if(!root.nextMessageAsJsonObj) {
+                        return false
+                    }
+                    return root.senderId !== root.nextMessageAsJsonObj.senderId ||
+                           d.getShouldRepeatHeader(root.nextMessageAsJsonObj.timeStamp, root.messageTimestamp, root.nextMessageAsJsonObj.outgoingStatus) ||
+                           root.nextMessageAsJsonObj.responseToMessageWithId !== ""
+                }
+
                 audioMessageInfoText: qsTr("Audio Message")
                 cancelButtonText: qsTr("Cancel")
                 saveButtonText: qsTr("Save")
@@ -488,7 +505,8 @@ Loader {
                 showHeader: root.senderId !== root.authorPrevMsg ||
                             root.shouldRepeatHeader || dateGroupLabel.visible || isAReply
                 isActiveMessage: d.isMessageActive
-
+                topPadding: showHeader ? Style.current.halfPadding : 2
+                bottomPadding: showHeader && nextMessageHasHeader() ? Style.current.halfPadding : 2
                 disableHover: root.disableHover ||
                               (root.chatLogView && root.chatLogView.flickingVertically) ||
                               activityCenterMessage ||