fix: Pinning messages - tweaks to UI and interactions

... to help align with original design intent - dropped date breaks before msg groups - show full date/timestamp in the msg header - floating "Unpin" button on mouse hover - no padding/spacing between messages - some smaller code cleanups and dead code removals Fixes #9396
2023-02-15 12:12:12 +01:00 · 2023-02-15 12:12:12 +01:00 · 31be818e0e
parent 165271dbea
commit 31be818e0e
16 changed files with 109 additions and 103 deletions
--- a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml
@ -60,6 +60,7 @@ Control {
    property bool overrideBackground: false
    property bool profileClickable: true
    property bool hideMessage: false
+    property bool isInPinnedPopup

    property StatusMessageDetails messageDetails: StatusMessageDetails {}
    property StatusMessageDetails replyDetails: StatusMessageDetails {}
@ -76,7 +77,7 @@ Control {
    signal stickerClicked()
    signal resendClicked()

-    signal editCompleted(var newMsgText)
+    signal editCompleted(string newMsgText)
    signal editCancelled()
    signal stickerLoaded()
    signal linkActivated(string link)
@ -242,42 +243,43 @@ Control {
                            sender: root.messageDetails.sender
                            amISender: root.messageDetails.amISender
                            messageOriginInfo: root.messageDetails.messageOriginInfo
-                            showResendButton: root.hasExpired && root.messageDetails.amISender && !editMode
+                            showResendButton: root.hasExpired && root.messageDetails.amISender && !editMode && !root.isInPinnedPopup
                            showSendingLoader: root.isSending && root.messageDetails.amISender && !editMode
                            resendError: root.messageDetails.amISender && !editMode ? root.resendError : ""
                            onClicked: root.senderNameClicked(sender, mouse)
                            onResendClicked: root.resendClicked()
                            timestamp: root.timestamp
+                            showFullTimestamp: root.isInPinnedPopup
                            displayNameClickable: root.profileClickable
                        }
                    }
                    Loader {
                        Layout.fillWidth: true
                        active: (!root.editMode && !!root.messageDetails.messageText && !root.hideMessage
-                             && ((root.messageDetails.contentType === StatusMessage.ContentType.Text)
-                             || (root.messageDetails.contentType === StatusMessage.ContentType.Emoji) ||
-                                (root.messageDetails.contentType === StatusMessage.ContentType.DiscordMessage)))
+                                 && ((root.messageDetails.contentType === StatusMessage.ContentType.Text)
+                                     || (root.messageDetails.contentType === StatusMessage.ContentType.Emoji) ||
+                                     (root.messageDetails.contentType === StatusMessage.ContentType.DiscordMessage)))
                        visible: active
                        sourceComponent: StatusTextMessage {
                            objectName: "StatusMessage_textMessage"
                            messageDetails: root.messageDetails
                            isEdited: root.isEdited
+                            allowShowMore: !root.isInPinnedPopup
+                            textField.anchors.rightMargin: root.isInPinnedPopup ? /*Style.current.xlPadding*/ 32 : 0 // margin for the "Unpin" floating button
                            onLinkActivated: {
                                root.linkActivated(link);
                            }
                        }
                    }
-
                    Loader {
                        active: root.messageDetails.contentType === StatusMessage.ContentType.Image && !editMode
                        visible: active
                        sourceComponent: StatusImageMessage {
-                            source: root.messageDetails.contentType === StatusMessage.ContentType.Image ? root.messageDetails.messageContent : ""
+                            source: root.messageDetails.messageContent
                            onClicked: root.imageClicked(image, mouse, imageSource)
                            shapeType: root.messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
                        }
                    }
-
                    Loader {
                        active: root.messageAttachments && !editMode
                        visible: active
@ -294,18 +296,13 @@ Control {
                            }
                        }
                    }
-
-                    Loader {
+                    StatusSticker {
                        active: root.messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
                        visible: active
-                        sourceComponent: StatusSticker {
-                            asset.isImage: true
-                            asset.name: root.messageDetails.messageContent
-                            onLoaded: root.stickerLoaded()
-                            onClicked: {
-                                root.stickerClicked()
-                            }
-                        }
+                        asset.isImage: true
+                        asset.name: root.messageDetails.messageContent
+                        onStickerLoaded: root.stickerLoaded()
+                        onClicked: root.stickerClicked()
                    }
                    Loader {
                        active: root.messageDetails.contentType === StatusMessage.ContentType.Audio && !editMode
@ -371,11 +368,8 @@ Control {
            anchors.rightMargin: 20
            anchors.top: parent.top
            anchors.topMargin: -8
-            sourceComponent: Component {
-                StatusMessageQuickActions {
-                    id: quickActionsPanel
-                    items: root.quickActions
-                }
+            sourceComponent: StatusMessageQuickActions {
+                items: root.quickActions
            }
        }
    }
--- a/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml
@ -27,6 +27,7 @@ Item {
    property bool amISender: false
    property bool displayNameClickable: true
    property string messageOriginInfo: ""
+    property bool showFullTimestamp

    signal clicked(var sender, var mouse)
    signal resendClicked()
@ -131,6 +132,7 @@ Item {
            verticalAlignment: Text.AlignVCenter
            id: timestampText
            timestamp: root.timestamp
+            showFullTimestamp: root.showFullTimestamp
        }

        Loader {
--- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml
+++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml
@ -14,7 +14,7 @@ Item {
    property string messageText: ""

    signal editCancelled()
-    signal editCompleted(var newMsgText)
+    signal editCompleted(string newMsgText)

    implicitHeight: layout.implicitHeight
    implicitWidth: layout.implicitWidth
--- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusSticker.qml
+++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusSticker.qml
@ -1,5 +1,4 @@
-import QtQuick 2.3
-import QtGraphicalEffects 1.13
+import QtQuick 2.14

 import StatusQ.Components 0.1
 import StatusQ.Core 0.1
@ -15,11 +14,9 @@ Loader {
        height: 140
    }

-    signal loaded()
+    signal stickerLoaded()
    signal clicked()

-    active: visible
-
    sourceComponent: Rectangle {
        id: root

@ -52,12 +49,11 @@ Loader {
            anchors.fill: parent
            horizontalAlignment: Image.AlignHCenter
            verticalAlignment: Image.AlignVCenter
-            cache: true
            source: asset.name

            onStatusChanged: {
                if (status === Image.Ready) {
-                    statusSticker.loaded()
+                    statusSticker.stickerLoaded()
                }
            }
            MouseArea {
--- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
+++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
@ -80,10 +80,10 @@ Item {
                                               ? 200
                                               : chatText.implicitHeight

-        width: parent.width
        height: effectiveHeight + d.showMoreHeight / 2
        anchors.left: parent.left
        anchors.leftMargin: d.isQuote ? 8 : 0
+        anchors.right: parent.right
        opacity: !showMoreOpacityMask.active && !horizontalOpacityMask.active ? 1 : 0
        text: d.text
        selectedTextColor: Theme.palette.directColor1
--- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml
+++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml
@ -7,11 +7,12 @@ import StatusQ.Core.Theme 0.1
 StatusBaseText {
    id: root
    property double timestamp: 0
+    property bool showFullTimestamp

    color: Theme.palette.baseColor1
    font.pixelSize: 10
    visible: !!text
-    text: LocaleUtils.formatTime(timestamp, Locale.ShortFormat)
+    text: showFullTimestamp ? LocaleUtils.formatDateTime(timestamp) : LocaleUtils.formatTime(timestamp, Locale.ShortFormat)
    StatusToolTip {
        id: tooltip
        visible: hhandler.hovered && !!text
@ -19,6 +20,7 @@ StatusBaseText {
    }
    HoverHandler {
        id: hhandler
+        enabled: !root.showFullTimestamp
        onHoveredChanged: {
            if(hhandler.hovered && timestamp) {
                tooltip.text = LocaleUtils.formatDateTime(timestamp)
--- a/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml
@ -5,6 +5,7 @@ import QtQml.Models 2.14
 import QtGraphicalEffects 1.14

 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups.Dialog 0.1

@ -19,7 +20,6 @@ StatusDialog {
    property var pinnedMessagesModel //this doesn't belong to the messageStore, it is a part of the ChatContentStore, but we didn't introduce it yet.
    property string messageToPin
    property string messageToUnpin
-    property var emojiReactionsModel

    width: 800
    height: 428
@ -83,6 +83,8 @@ StatusDialog {
                    messageContentType: model.contentType
                    pinnedMessage: model.pinned
                    messagePinnedBy: model.pinnedBy
+                    sticker: model.sticker
+                    stickerPack: model.stickerPack
                    linkUrls: model.links
                    transactionParams: model.transactionParameters
                    quotedMessageText: model.quotedMessageParsedText
@ -105,12 +107,13 @@ StatusDialog {

                    // Additional params
                    isInPinnedPopup: true
-                    disableHover: !!root.messageToPin
                    shouldRepeatHeader: true
                }

                MouseArea {
+                    id: mouseArea
                    anchors.fill: parent
+                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    z: 55
                    onClicked: {
@ -124,9 +127,27 @@ StatusDialog {
                    }
                }

+                StatusFlatRoundButton {
+                    id: unpinButton
+                    anchors.top: parent.top
+                    anchors.topMargin: Style.current.bigPadding
+                    anchors.right: parent.right
+                    anchors.rightMargin: Style.current.bigPadding
+                    z: mouseArea.z + 1
+                    width: 32
+                    height: 32
+                    visible: !root.messageToPin && (hovered || mouseArea.containsMouse)
+                    icon.name: "unpin"
+                    tooltip.text: qsTr("Unpin")
+                    color: hovered ? Theme.palette.primaryColor2 : Theme.palette.indirectColor1
+                    onClicked: {
+                        root.messageStore.unpinMessage(model.id)
+                    }
+                }
+
                StatusRadioButton {
                    id: radio
-                    visible: !!root.messageToPin
+                    visible: root.messageToPin
                    anchors.right: parent.right
                    anchors.rightMargin: Style.current.bigPadding
                    anchors.verticalCenter: parent.verticalCenter
@ -140,7 +161,6 @@ StatusDialog {

        MessageContextMenuView {
            id: msgContextMenu
-            reactionModel: root.emojiReactionsModel
            store: root.store
            pinnedPopup: true
            pinnedMessage: true
@ -157,7 +177,7 @@ StatusDialog {
            }
        }

-        layer.enabled: root.visible
+        layer.enabled: root.visible && !root.messageToPin
        layer.effect: OpacityMask {
            maskSource: Rectangle {
                width: column.width
--- a/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml
+++ b/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml
@ -174,8 +174,6 @@ Item {
        Button {
            id: scrollDownButton

-            readonly property int buttonPadding: 5
-
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            anchors.rightMargin: Style.current.padding
--- a/ui/app/mainui/Popups.qml
+++ b/ui/app/mainui/Popups.qml
@ -344,7 +344,6 @@ QtObject {
        Component {
            id: pinnedMessagesPopup
            PinnedMessagesPopup {
-                emojiReactionsModel: rootStore.emojiReactionsModel
                onClosed: destroy()
            }
        },
--- a/ui/imports/shared/panels/ProfileBioSocialsPanel.qml
+++ b/ui/imports/shared/panels/ProfileBioSocialsPanel.qml
@ -101,6 +101,7 @@ Control {
            Layout.maximumHeight: 108
            Layout.fillWidth: true
            contentHeight: bioText.height
+            implicitHeight: contentHeight
            ScrollBar.vertical: StatusScrollBar {
                id: scrollBar

--- a/ui/imports/shared/status/StatusChatImage.qml
+++ b/ui/imports/shared/status/StatusChatImage.qml
@ -3,7 +3,7 @@ import QtQuick 2.3
 StatusChatImageLoader {
    property int chatVerticalPadding: 12
    property int chatHorizontalPadding: 12
-    property string imageSource: "data:image/jpeg;base64,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"
+    property string imageSource

    id: imageMessage
    verticalPadding: chatVerticalPadding
--- a/ui/imports/shared/status/StatusChatImageLoader.qml
+++ b/ui/imports/shared/status/StatusChatImageLoader.qml
@ -15,7 +15,6 @@ Item {
    property bool isActiveChannel: false
    property bool playing: Global.applicationWindow.active
    property bool isAnimated: !!source && source.toString().endsWith('.gif')
-    property var container
    property alias imageAlias: imageMessage
    property bool allCornersRounded: false
    property bool isOnline: true // TODO: mark as required when migrating to 5.15 or above
--- a/ui/imports/shared/status/StatusChatInputReplyArea.qml
+++ b/ui/imports/shared/status/StatusChatInputReplyArea.qml
@ -81,7 +81,6 @@ Rectangle {
        imageWidth: 64
        imageSource: root.image
        chatHorizontalPadding: 0
-        container: root.container
        visible: root.contentType === Constants.messageContentType.imageType
        playing: false
    }
--- a/ui/imports/shared/status/StatusSticker.qml
+++ b/ui/imports/shared/status/StatusSticker.qml
@ -1,6 +1,6 @@
-import QtQuick 2.3
-import shared.panels 1.0
+import QtQuick 2.14

+import shared.panels 1.0
 import utils 1.0

 Loader {
@ -9,7 +9,8 @@ Loader {
    property string stickerData: ""
    property int imageHeight: 140
    property int imageWidth: 140
-    signal loaded()
+
+    signal stickerLoaded()

    id: root
    active: contentType === Constants.messageContentType.stickerType
@ -17,7 +18,7 @@ Loader {
    sourceComponent: Component {
        ImageLoader {
            color: root.color
-            onLoaded: root.loaded()
+            onLoaded: root.stickerLoaded()

            width: imageWidth
            height: this.visible ? imageHeight : 0
--- a/ui/imports/shared/views/chat/LinksMessageView.qml
+++ b/ui/imports/shared/views/chat/LinksMessageView.qml
@ -18,7 +18,6 @@ Column {

    property var store
    property var messageStore
-    property var container

    //receiving space separated url list
    property string links: ""
@ -132,7 +131,6 @@ Column {
                property bool localAnimationEnabled: true
                objectName: "LinksMessageView_unfurledImageComponent_linkImage"
                anchors.centerIn: parent
-                container: root.container
                source: result.thumbnailUrl
                imageWidth: 300
                isCurrentUser: root.isCurrentUser
@ -214,7 +212,6 @@ Column {
            StatusChatImageLoader {
                id: linkImage
                objectName: "LinksMessageView_unfurledLinkComponent_linkImage"
-                container: root.container
                source: result.thumbnailUrl
                visible: result.thumbnailUrl.length
                readonly property int previewWidth: parseInt(result.width)
--- a/ui/imports/shared/views/chat/MessageView.qml
+++ b/ui/imports/shared/views/chat/MessageView.qml
@ -100,7 +100,7 @@ Loader {
    property bool hasMention: false

    property bool stickersLoaded: false
-    property string sticker: "Qme8vJtyrEHxABcSVGPF95PtozDgUyfr1xGjePmFdZgk9v"
+    property string sticker
    property int stickerPack: -1

    property bool isEmoji: messageContentType === Constants.messageContentType.emojiType
@ -229,6 +229,15 @@ Loader {
            }
        }

+        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 !== ""
+        }
+
        function getShouldRepeatHeader(messageTimeStamp, prevMessageTimeStamp, messageOutgoingStatus) {
            return ((messageTimeStamp - prevMessageTimeStamp) / 60 / 1000) > Constants.repeatHeaderInterval 
                || d.getIsExpired(messageTimeStamp, messageOutgoingStatus)
@ -237,6 +246,36 @@ Loader {
        function getIsExpired(messageTimeStamp, messageOutgoingStatus) {
            return (messageOutgoingStatus === Constants.sending && (Math.floor(messageTimeStamp) + 180000) < Date.now()) || messageOutgoingStatus === Constants.expired
        }
+
+        function convertContentType(value) {
+            switch (value) {
+            case Constants.messageContentType.messageType:
+                return StatusMessage.ContentType.Text;
+            case Constants.messageContentType.stickerType:
+                return StatusMessage.ContentType.Sticker;
+            case Constants.messageContentType.emojiType:
+                return StatusMessage.ContentType.Emoji;
+            case Constants.messageContentType.transactionType:
+                return StatusMessage.ContentType.Transaction;
+            case Constants.messageContentType.imageType:
+                return StatusMessage.ContentType.Image;
+            case Constants.messageContentType.audioType:
+                return StatusMessage.ContentType.Audio;
+            case Constants.messageContentType.communityInviteType:
+                return StatusMessage.ContentType.Invitation;
+            case Constants.messageContentType.discordMessageType:
+                return StatusMessage.ContentType.DiscordMessage;
+            case Constants.messageContentType.fetchMoreMessagesButton:
+            case Constants.messageContentType.chatIdentifier:
+            case Constants.messageContentType.unknownContentType:
+            case Constants.messageContentType.statusType:
+            case Constants.messageContentType.systemMessagePrivateGroupType:
+            case Constants.messageContentType.gapType:
+            case Constants.messageContentType.editType:
+            default:
+                return StatusMessage.ContentType.Unknown;
+            }
+        }
    }


@ -341,48 +380,16 @@ Loader {
                Layout.bottomMargin: 16
                messageTimestamp: root.messageTimestamp
                previousMessageTimestamp: root.prevMessageIndex === -1 ? 0 : root.prevMessageTimestamp
-                visible: text !== ""
+                visible: text !== "" && !root.isInPinnedPopup
            }

            StatusMessage {
                id: delegate
                Layout.fillWidth: true
-                Layout.topMargin: 2
-                Layout.bottomMargin: 2
-
-                function convertContentType(value) {
-                    switch (value) {
-                    case Constants.messageContentType.messageType:
-                        return StatusMessage.ContentType.Text;
-                    case Constants.messageContentType.stickerType:
-                        return StatusMessage.ContentType.Sticker;
-                    case Constants.messageContentType.emojiType:
-                        return StatusMessage.ContentType.Emoji;
-                    case Constants.messageContentType.transactionType:
-                        return StatusMessage.ContentType.Transaction;
-                    case Constants.messageContentType.imageType:
-                        return StatusMessage.ContentType.Image;
-                    case Constants.messageContentType.audioType:
-                        return StatusMessage.ContentType.Audio;
-                    case Constants.messageContentType.communityInviteType:
-                        return StatusMessage.ContentType.Invitation;
-                    case Constants.messageContentType.discordMessageType:
-                        return StatusMessage.ContentType.DiscordMessage;
-                    case Constants.messageContentType.fetchMoreMessagesButton:
-                    case Constants.messageContentType.chatIdentifier:
-                    case Constants.messageContentType.unknownContentType:
-                    case Constants.messageContentType.statusType:
-                    case Constants.messageContentType.systemMessagePrivateGroupType:
-                    case Constants.messageContentType.gapType:
-                    case Constants.messageContentType.editType:
-                    default:
-                        return StatusMessage.ContentType.Unknown;
-                    }
-                }
-
-                readonly property int contentType: convertContentType(root.messageContentType)
-                readonly property bool isReply: root.responseToMessageWithId !== ""
+                Layout.topMargin: showHeader && !root.isInPinnedPopup ? 2 : 0
+                Layout.bottomMargin: !root.isInPinnedPopup ? 2 : 0

+                readonly property int contentType: d.convertContentType(root.messageContentType)
                property string originalMessageText: ""

                function editCancelledHandler() {
@ -406,15 +413,6 @@ 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 !== ""
-                }
-
                pinnedMsgInfoText: root.isDiscordMessage ? qsTr("Pinned") : qsTr("Pinned by")
                reactionIcons: [
                    Style.svg("emojiReactions/heart"),
@ -427,7 +425,7 @@ Loader {

                timestamp: root.messageTimestamp
                editMode: root.editModeOn
-                isAReply: delegate.isReply
+                isAReply: root.responseToMessageWithId !== ""
                isEdited: root.isEdited
                hasMention: root.hasMention
                isPinned: root.pinnedMessage
@ -438,6 +436,7 @@ Loader {
                    const ensName = contact.ensVerified ? contact.name : ""
                    return ProfileUtils.displayName(contact.localNickname, ensName, contact.displayName, contact.alias)
                }
+                isInPinnedPopup: root.isInPinnedPopup
                hasExpired: root.isExpired
                isSending: root.isSending
                resendError: root.resendError
@ -446,8 +445,8 @@ Loader {
                showHeader: root.shouldRepeatHeader || dateGroupLabel.visible || isAReply ||
                            (root.prevMessageContentType !== Constants.messageContentType.systemMessagePrivateGroupType && root.senderId !== root.prevMessageSenderId)
                isActiveMessage: d.isMessageActive
-                topPadding: showHeader ? Style.current.halfPadding : 2
-                bottomPadding: showHeader && nextMessageHasHeader() ? Style.current.halfPadding : 2
+                topPadding: showHeader ? Style.current.halfPadding : 0
+                bottomPadding: showHeader && d.nextMessageHasHeader() ? Style.current.halfPadding : 2
                disableHover: root.disableHover ||
                              (root.chatLogView && root.chatLogView.moving) ||
                              (root.messageContextMenu && root.messageContextMenu.opened) ||
@ -572,7 +571,7 @@ Loader {
                            return root.messageImage;
                        }
                        if (root.isDiscordMessage && root.messageImage != "") {
-                          return root.messageImage
+                            return root.messageImage
                        }
                        return "";
                    }
@ -606,7 +605,7 @@ Loader {
                        }
                        return root.quotedMessageText
                    }
-                    contentType: delegate.convertContentType(root.quotedMessageContentType)
+                    contentType: d.convertContentType(root.quotedMessageContentType)
                    messageContent: {
                        if (contentType !== StatusMessage.ContentType.Sticker && contentType !== StatusMessage.ContentType.Image) {
                            return ""
@ -683,7 +682,6 @@ Loader {
                    LinksMessageView {
                        id: linksMessageView
                        links: root.linkUrls
-                        container: root
                        messageStore: root.messageStore
                        store: root.rootStore
                        isCurrentUser: root.amISender