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

refactor: make MessageContextMenu a functional component 

refactor: make MessageContextMenu a functional component

refactor: make MessageContextMenu a functional component

remove root store

simplify signals in message context menu

abstract copyToClipboard as a signal

simplify code

fix menu not closing on emoji reaction
This commit is contained in:
Iuri Matias 2024-09-24 09:20:36 -04:00
parent d2d3a56810
commit 8086e77077
3 changed files with 101 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
storybook/pages/MessageContextMenuPage.qml
View File

@ -54,22 +54,80 @@ SplitView {
Component {
id: menu1
MessageContextMenuView {
id: messageContextMenuView
anchors.centerIn: parent
hideDisabledItems: false
isDebugEnabled: isDebugEnabledCheckBox.checked
onClosed: {
destroy()
}
onPinMessage: () => {
logs.logEvent("Pin message:", messageContextMenuView.messageId)
}
onUnpinMessage: () => {
logs.logEvent("Unpin message:", messageContextMenuView.messageId)
}
onPinnedMessagesLimitReached: () => {
logs.logEvent("Pinned messages limit reached:", messageContextMenuView.messageId)
}
onMarkMessageAsUnread: () => {
logs.logEvent("Mark message as unread:", messageContextMenuView.messageId)
}
onToggleReaction: (emojiId) => {
logs.logEvent("Toggle reaction:", messageContextMenuView.messageId, emojiId)
}
onDeleteMessage: () => {
logs.logEvent("Delete message:", messageContextMenuView.messageId)
}
onEditClicked: () => {
logs.logEvent("Edit message:", messageContextMenuView.messageId)
}
onShowReplyArea: (senderId) => {
logs.logEvent("Show reply area:", messageContextMenuView.messageId, senderId)
}
onCopyToClipboard: (text) => {
logs.logEvent("Copy to clipboard:", text)
}
}
}
Component {
id: menu2
MessageContextMenuView {
id: messageContextMenuView
anchors.centerIn: parent
hideDisabledItems: true
isDebugEnabled: isDebugEnabledCheckBox.checked
onClosed: {
destroy()
}
onPinMessage: () => {
logs.logEvent("Pin message:", messageContextMenuView.messageId)
}
onUnpinMessage: () => {
logs.logEvent("Unpin message:", messageContextMenuView.messageId)
}
onPinnedMessagesLimitReached: () => {
logs.logEvent("Pinned messages limit reached:", messageContextMenuView.messageId)
}
onMarkMessageAsUnread: () => {
logs.logEvent("Mark message as unread:", messageContextMenuView.messageId)
}
onToggleReaction: (emojiId) => {
logs.logEvent("Toggle reaction:", messageContextMenuView.messageId, emojiId)
}
onDeleteMessage: () => {
logs.logEvent("Delete message:", messageContextMenuView.messageId)
}
onEditClicked: () => {
logs.logEvent("Edit message:", messageContextMenuView.messageId)
}
onShowReplyArea: (senderId) => {
logs.logEvent("Show reply area:", messageContextMenuView.messageId, senderId)
}
onCopyToClipboard: (text) => {
logs.logEvent("Copy to clipboard:", text)
}
}
}
}
@ -85,6 +143,12 @@ SplitView {
controls: ColumnLayout {
spacing: 16
CheckBox {
id: isDebugEnabledCheckBox
text: "Enable Debug"
checked: false
}
}
}

69
ui/imports/shared/views/chat/MessageContextMenuView.qml
View File

@ -15,12 +15,9 @@ import shared.status 1.0
import shared.controls.chat 1.0
import shared.controls.chat.menuItems 1.0
import AppLayouts.Chat.stores 1.0 as ChatStores
StatusMenu {
id: root
property ChatStores.RootStore store
property var reactionModel: []
property string myPublicKey: ""
@ -35,7 +32,7 @@ StatusMenu {
property int messageContentType: Constants.messageContentType.unknownContentType
property bool pinMessageAllowedForMembers: false
property bool isDebugEnabled: store && store.isDebugEnabled
property bool isDebugEnabled: false
property bool editRestricted: false
property bool pinnedMessage: false
property bool canPin: false
@ -44,14 +41,15 @@ StatusMenu {
return root.messageSenderId !== "" && root.messageSenderId === root.myPublicKey;
}
signal pinMessage(string messageId)
signal unpinMessage(string messageId)
signal pinnedMessagesLimitReached(string messageId)
signal showReplyArea(string messageId, string messageSenderId)
signal toggleReaction(string messageId, int emojiId)
signal deleteMessage(string messageId)
signal editClicked(string messageId)
signal markMessageAsUnread(string messageId)
signal pinMessage()
signal unpinMessage()
signal pinnedMessagesLimitReached()
signal showReplyArea(string messageSenderId)
signal toggleReaction(int emojiId)
signal deleteMessage()
signal editClicked()
signal markMessageAsUnread()
signal copyToClipboard(string text)
width: Math.max(emojiContainer.visible ? emojiContainer.width : 0, 230)
@ -66,8 +64,8 @@ StatusMenu {
reactionsModel: root.reactionModel
bottomPadding: Style.current.padding
onToggleReaction: {
root.toggleReaction(root.messageId, emojiId)
close()
root.toggleReaction(emojiId)
root.close()
}
}
}
@ -80,19 +78,14 @@ StatusMenu {
id: replyToMenuItem
text: qsTr("Reply to")
icon.name: "chat"
onTriggered: {
root.showReplyArea(root.messageId, root.messageSenderId)
root.close()
}
onTriggered: root.showReplyArea(root.messageSenderId)
enabled: !root.disabledForChat
}
StatusAction {
id: editMessageAction
text: qsTr("Edit message")
onTriggered: {
editClicked(messageId)
}
onTriggered: editClicked()
icon.name: "edit"
enabled: root.isMyMessage &&
!root.editRestricted &&
@ -103,10 +96,7 @@ StatusMenu {
id: copyMessageMenuItem
text: qsTr("Copy message")
icon.name: "copy"
onTriggered: {
ClipboardUtils.setText(root.unparsedText)
close()
}
onTriggered: root.copyToClipboard(root.unparsedText)
enabled: root.messageContentType === Constants.messageContentType.messageType && replyToMenuItem.enabled
}
@ -115,10 +105,7 @@ StatusMenu {
text: qsTr("Copy Message Id")
icon.name: "copy"
enabled: root.isDebugEnabled && replyToMenuItem.enabled
onTriggered: {
ClipboardUtils.setText(root.messageId)
close()
}
onTriggered: root.copyToClipboard(root.messageId)
}
StatusAction {
@ -126,18 +113,9 @@ StatusMenu {
text: root.pinnedMessage ? qsTr("Unpin") : qsTr("Pin")
icon.name: root.pinnedMessage ? "unpin" : "pin"
onTriggered: {
if (root.pinnedMessage) {
root.unpinMessage(root.messageId)
return
}
if (!root.canPin) {
root.pinnedMessagesLimitReached(root.messageId)
return
}
root.pinMessage(root.messageId)
root.close()
if (root.pinnedMessage) return root.unpinMessage()
if (!root.canPin) return root.pinnedMessagesLimitReached()
root.pinMessage()
}
enabled: {
if (root.disabledForChat)
@ -163,10 +141,7 @@ StatusMenu {
text: qsTr("Mark as unread")
icon.name: "hide"
enabled: !root.disabledForChat
onTriggered: {
root.markMessageAsUnread(root.messageId)
root.close()
}
onTriggered: root.markMessageAsUnread()
}
StatusMenuSeparator {
@ -191,8 +166,6 @@ StatusMenu {
text: qsTr("Delete message")
icon.name: "delete"
type: StatusAction.Type.Danger
onTriggered: {
root.deleteMessage(messageId)
}
onTriggered: root.deleteMessage()
}
}

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

@ -10,6 +10,7 @@ import shared.views.chat 1.0
import shared.controls.chat 1.0
import shared.stores 1.0 as SharedStores
import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils
@ -1232,20 +1233,14 @@ Loader {
id: messageContextMenuComponent
MessageContextMenuView {
store: root.rootStore
id: messageContextMenuView
reactionModel: root.emojiReactionsModel
disabledForChat: !root.rootStore.isUserAllowedToSendMessage
forceEnableEmojiReactions: !root.rootStore.isUserAllowedToSendMessage && d.addReactionAllowed
onPinMessage: (messageId) => {
root.messageStore.pinMessage(messageId)
}
onUnpinMessage: (messageId) => {
root.messageStore.unpinMessage(messageId)
}
onPinnedMessagesLimitReached: (messageId) => {
isDebugEnabled: root.rootStore && root.rootStore.isDebugEnabled
onPinMessage: root.messageStore.pinMessage(messageContextMenuView.messageId)
onUnpinMessage: root.messageStore.unpinMessage(messageContextMenuView.messageId)
onPinnedMessagesLimitReached: () => {
if (!root.chatContentModule) {
console.warn("error on open pinned messages limit reached from message context menu - chat content module is not set")
return
@ -1253,30 +1248,21 @@ Loader {
Global.openPinnedMessagesPopupRequested(root.rootStore,
root.messageStore,
root.chatContentModule.pinnedMessagesModel,
messageId,
messageContextMenuView.messageId,
root.chatId)
}
onMarkMessageAsUnread: (messageId) => {
root.messageStore.markMessageAsUnread(messageId)
onMarkMessageAsUnread: root.messageStore.markMessageAsUnread(messageContextMenuView.messageId)
onToggleReaction: (emojiId) => {
root.messageStore.toggleReaction(messageContextMenuView.messageId, emojiId)
}
onToggleReaction: (messageId, emojiId) => {
root.messageStore.toggleReaction(messageId, emojiId)
onDeleteMessage: root.messageStore.warnAndDeleteMessage(messageContextMenuView.messageId)
onEditClicked: root.messageStore.setEditModeOn(messageContextMenuView.messageId)
onShowReplyArea: (senderId) => {
root.showReplyArea(messageContextMenuView.messageId, senderId)
}
onDeleteMessage: (messageId) => {
root.messageStore.warnAndDeleteMessage(messageId)
onCopyToClipboard: (text) => {
ClipboardUtils.setText(text)
}
onEditClicked: (messageId) => {
root.messageStore.setEditModeOn(messageId)
}
onShowReplyArea: (messageId, senderId) => {
root.showReplyArea(messageId, senderId)
}
onOpened: {
root.setMessageActive(model.id, true)
}