fix(ChatButtonsPanel): Added pin/unpin and delete buttons

ui/imports/shared/panels/chat/ChatButtonsPanel.qml

@@ -4,6 +4,7 @@ import QtGraphicalEffects 1.13
 import StatusQ.Controls 0.1
 
 import utils 1.0
+import shared.popups 1.0
 
 Rectangle {
     id: buttonsContainer
@@ -14,12 +15,15 @@ Rectangle {
     property bool isCurrentUser: false
     property bool isMessageActive: false
     property var messageContextMenu
-    property bool showMoreButton: true
     property bool isInPinnedPopup: false
     property bool activityCenterMsg
     property bool placeholderMsg
     property string fromAuthor
     property bool editBtnActive: false
+    property bool pinButtonActive: false
+    property bool deleteButtonActive: false
+    property bool pinnedMessage: false
+    property bool canPin: false
     signal replyClicked(string messageId, string author)
     signal hoverChanged(bool hovered)
     signal setMessageActive(string messageId, bool active)
@@ -78,8 +82,7 @@ Rectangle {
                 height: 32
                 icon.name: "reaction-b"
                 type: StatusFlatRoundButton.Type.Tertiary
-                //% "Add reaction"
+                tooltip.text: qsTr("Add reaction")
-                tooltip.text: qsTrId("add-reaction")
                 onClicked: {
                     setMessageActive(messageId, true)
                     // Set parent, X & Y positions for the messageContextMenu
@@ -100,8 +103,7 @@ Rectangle {
                 height: 32
                 icon.name: "reply"
                 type: StatusFlatRoundButton.Type.Tertiary
-                //% "Reply"
+                tooltip.text: qsTr("Reply")
-                tooltip.text: qsTrId("message-reply")
                 onClicked: {
                     buttonsContainer.replyClicked(messageId, fromAuthor);
                     if (messageContextMenu.closeParentPopup) {
@@ -112,43 +114,97 @@ Rectangle {
             }
         }
 
-
         Loader {
-            id: editBtn
             active: buttonsContainer.editBtnActive && !buttonsContainer.isInPinnedPopup
             sourceComponent: StatusFlatRoundButton {
-                id: btn
+                id: editButton
                 width: 32
                 height: 32
                 icon.source: Style.svg("edit-message")
                 type: StatusFlatRoundButton.Type.Tertiary
-                //% "Edit"
+                tooltip.text: qsTr("Edit")
-                tooltip.text: qsTrId("edit")
                 onClicked: messageStore.setEditModeOn(messageId)
-                onHoveredChanged: buttonsContainer.hoverChanged(btn.hovered)
+                onHoveredChanged: buttonsContainer.hoverChanged(editButton.hovered)
             }
         }
 
-        StatusFlatRoundButton {
+        Loader {
-            id: otherBtn
+            active: buttonsContainer.pinButtonActive
-            width: 32
+            sourceComponent: StatusFlatRoundButton {
-            height: 32
+                id: pinButton
-            visible: buttonsContainer.showMoreButton
+                width: 32
-            icon.name: "more"
+                height: 32
-            type: StatusFlatRoundButton.Type.Tertiary
+                icon.name: buttonsContainer.pinnedMessage ? "unpin" : "pin"
-            //% "More"
+                type: StatusFlatRoundButton.Type.Tertiary
-            tooltip.text: qsTrId("more")
+                tooltip.text: buttonsContainer.pinnedMessage ? qsTr("Unpin") : qsTr("Pin")
-            onClicked: {
+                onHoveredChanged: buttonsContainer.hoverChanged(pinButton.hovered)
-                if (typeof isMessageActive !== "undefined") {
+                onClicked: {
-                    setMessageActive(messageId, true)
+                    if (buttonsContainer.pinnedMessage) {
+                        messageStore.unpinMessage(messageId)
+                        return;
+                    }
+
+                    if (buttonsContainer.canPin) {
+                        messageStore.pinMessage(messageId)
+                        return;
+                    }
+
+                    if (!chatContentModule) {
+                        console.warn("error on open pinned messages limit reached from message context menu - chat content module is not set")
+                        return;
+                    }
+
+                    Global.openPopup(pinnedMessagesPopupComponent, {
+                                         store: rootStore,
+                                         messageStore: messageStore,
+                                         pinnedMessagesModel: chatContentModule.pinnedMessagesModel,
+                                         messageToPin: buttonsContainer.messageId
+                                     });
+                }
+            }
+        }
+
+        Loader {
+            active: buttonsContainer.deleteButtonActive && !buttonsContainer.isInPinnedPopup
+            sourceComponent: StatusFlatRoundButton {
+                id: deleteButton
+                width: 32
+                height: 32
+                type: StatusFlatRoundButton.Type.Tertiary
+                icon.name: "delete"
+                tooltip.text: qsTr("Delete")
+                onHoveredChanged: buttonsContainer.hoverChanged(deleteButton.hovered)
+                onClicked: {
+                    if (!localAccountSensitiveSettings.showDeleteMessageWarning) {
+                        messageStore.deleteMessage(messageId)
+                    }
+                    else {
+                        Global.openPopup(deleteMessageConfirmationDialogComponent)
+                    }
+                }
+            }
+        }
+
+        Component {
+            id: deleteMessageConfirmationDialogComponent
+
+            ConfirmationDialog {
+                header.title: qsTrId("Confirm deleting this message")
+                confirmationText: qsTrId("Are you sure you want to delete this message? Be aware that other clients are not guaranteed to delete the message as well.")
+                height: 260
+                checkbox.visible: true
+                executeConfirm: function () {
+                    if (checkbox.checked) {
+                        localAccountSensitiveSettings.showDeleteMessageWarning = false
+                    }
+
+                    close()
+                    messageStore.deleteMessage(messageId)
+                }
+                onClosed: {
+                    destroy()
                 }
-                // Set parent, X & Y positions for the messageContextMenu
-                buttonsContainer.messageContextMenu.parent = buttonsContainer
-                buttonsContainer.messageContextMenu.setXPosition = function() { return (-Math.abs(buttonsContainer.width - 176))}
-                buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)}
-                buttonsContainer.clickMessage(false, isSticker, false, null, false, true);
             }
-            onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
         }
     }
 }

ui/imports/shared/views/chat/CompactMessageView.qml

@@ -41,27 +41,9 @@ Item {
     property string senderIcon: ""
     property bool isHovered: false
     property bool isInPinnedPopup: false
+    property bool pinnedMessage: false
+    property bool canPin: false
     property string communityId
-    property bool showMoreButton: {
-        if(!root.messageStore)
-            return false
-
-        let chatTypeThisMessageBelongsTo = root.messageStore.getChatType()
-        switch (chatTypeThisMessageBelongsTo) {
-        case Constants.chatType.oneToOne:
-            return true
-        case Constants.chatType.privateGroupChat:
-            return messageStore.amIChatAdmin() || amISender
-        case Constants.chatType.publicChat:
-            return amISender
-        case Constants.chatType.communityChat:
-            return messageStore.amIChatAdmin() || amISender || messageStore.pinMessageAllowedForMembers()
-        case Constants.chatType.profile:
-            return false
-        default:
-            return false
-        }
-    }
     property bool editModeOn: false
     property string linkUrls: ""
 
@@ -134,10 +116,37 @@ Item {
         // This is not exactly like the design because the hover becomes messed up with the buttons on top of another Message
         anchors.topMargin: -Style.current.halfPadding
         messageContextMenu: root.messageContextMenu
-        showMoreButton: root.showMoreButton
         isInPinnedPopup: root.isInPinnedPopup
         fromAuthor: senderId
         editBtnActive: isText && !editModeOn && root.amISender
+        pinButtonActive: {
+            if (!root.messageStore)
+                 return false
+
+            const chatType = root.messageStore.getChatType();
+            const amIChatAdmin = root.messageStore.amIChatAdmin();
+            const pinMessageAllowedForMembers = root.messageStore.pinMessageAllowedForMembers()
+
+            return chatType === Constants.chatType.oneToOne ||
+                   chatType === Constants.chatType.privateGroupChat && amIChatAdmin ||
+                   chatType === Constants.chatType.communityChat && (amIChatAdmin || pinMessageAllowedForMembers);
+
+        }
+        deleteButtonActive: {
+            if (!root.messageStore)
+                return false;
+            const isMyMessage = senderId !== "" && senderId === userProfile.pubKey;
+            const chatType = root.messageStore.getChatType();
+            return isMyMessage &&
+                    (contentType === Constants.messageContentType.messageType ||
+                     contentType === Constants.messageContentType.stickerType ||
+                     contentType === Constants.messageContentType.emojiType ||
+                     contentType === Constants.messageContentType.imageType ||
+                     contentType === Constants.messageContentType.audioType);
+        }
+        pinnedMessage: root.pinnedMessage
+        canPin: root.canPin
+
         activityCenterMsg: activityCenterMessage
         placeholderMsg: placeholderMessage
         onClickMessage: {

ui/imports/shared/views/chat/MessageView.qml

@@ -352,6 +352,8 @@ Column {
             editModeOn: root.editModeOn
             linkUrls: root.linkUrls
             isInPinnedPopup: root.isInPinnedPopup
+            pinnedMessage: root.pinnedMessage
+            canPin: messageStore.getNumberOfPinnedMessages() < Constants.maxNumberOfPins
 
             transactionParams: root.transactionParams