status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Alex Jbanca 2022-12-20 15:21:33 +02:00 committed by Alex Jbanca
parent e378cb4fd9
commit 94b911a986
2 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/StatusQ/src/StatusQ/Components/StatusMessage.qml
View File

@ -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 {

26
ui/imports/shared/views/chat/MessageView.qml
View File

@ -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: {
@ -463,6 +471,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")
@ -500,7 +517,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 ||