From eb7fa5be8b5efec28a14ad6ee7bfbe2401a6f78c Mon Sep 17 00:00:00 2001 From: Igor Sirotin Date: Tue, 21 Jun 2022 22:38:47 +0300 Subject: [PATCH] fix(ChatButtonsPanel): Added pin/unpin and delete buttons --- .../shared/panels/chat/ChatButtonsPanel.qml | 114 +++++++++++++----- .../shared/views/chat/CompactMessageView.qml | 51 ++++---- ui/imports/shared/views/chat/MessageView.qml | 2 + 3 files changed, 117 insertions(+), 50 deletions(-) diff --git a/ui/imports/shared/panels/chat/ChatButtonsPanel.qml b/ui/imports/shared/panels/chat/ChatButtonsPanel.qml index cbdf861ba3..92df0bfbb8 100644 --- a/ui/imports/shared/panels/chat/ChatButtonsPanel.qml +++ b/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: qsTrId("add-reaction") + tooltip.text: qsTr("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: qsTrId("message-reply") + tooltip.text: qsTr("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: qsTrId("edit") + tooltip.text: qsTr("Edit") onClicked: messageStore.setEditModeOn(messageId) - onHoveredChanged: buttonsContainer.hoverChanged(btn.hovered) + onHoveredChanged: buttonsContainer.hoverChanged(editButton.hovered) } } - StatusFlatRoundButton { - id: otherBtn - width: 32 - height: 32 - visible: buttonsContainer.showMoreButton - icon.name: "more" - type: StatusFlatRoundButton.Type.Tertiary - //% "More" - tooltip.text: qsTrId("more") - onClicked: { - if (typeof isMessageActive !== "undefined") { - setMessageActive(messageId, true) + Loader { + active: buttonsContainer.pinButtonActive + sourceComponent: StatusFlatRoundButton { + id: pinButton + width: 32 + height: 32 + icon.name: buttonsContainer.pinnedMessage ? "unpin" : "pin" + type: StatusFlatRoundButton.Type.Tertiary + tooltip.text: buttonsContainer.pinnedMessage ? qsTr("Unpin") : qsTr("Pin") + onHoveredChanged: buttonsContainer.hoverChanged(pinButton.hovered) + onClicked: { + 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) } } } diff --git a/ui/imports/shared/views/chat/CompactMessageView.qml b/ui/imports/shared/views/chat/CompactMessageView.qml index 520988c60c..163c6f4a95 100644 --- a/ui/imports/shared/views/chat/CompactMessageView.qml +++ b/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: { diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml index 17900f921f..2ef719c304 100644 --- a/ui/imports/shared/views/chat/MessageView.qml +++ b/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