diff --git a/storybook/pages/MessageContextMenuPage.qml b/storybook/pages/MessageContextMenuPage.qml deleted file mode 100644 index 8872286e45..0000000000 --- a/storybook/pages/MessageContextMenuPage.qml +++ /dev/null @@ -1,157 +0,0 @@ -import QtQuick 2.14 -import QtQuick.Controls 2.14 -import QtQuick.Layouts 1.14 - -import StatusQ.Controls 0.1 -import StatusQ.Core.Theme 0.1 -import StatusQ.Components 0.1 - -import Storybook 1.0 -import Models 1.0 - -import utils 1.0 -import shared.views.chat 1.0 -import shared.status 1.0 - -SplitView { - - QtObject { - id: d - } - - Logs { id: logs } - - SplitView { - orientation: Qt.Vertical - SplitView.fillWidth: true - - Rectangle { - SplitView.fillWidth: true - SplitView.fillHeight: true - color: Theme.palette.statusAppLayout.rightPanelBackgroundColor - clip: true - - ColumnLayout { - anchors.centerIn: parent - spacing: 10 - - RowLayout { - Button { - text: "Message context menu" - onClicked: { - menu1.createObject(this).popup() - } - } - Button { - text: "Message context menu (hide disabled items)" - onClicked: { - menu2.createObject(this).popup() - } - } - } - } - - 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) - } - } - } - } - } - - LogsAndControlsPanel { - id: logsAndControlsPanel - - SplitView.minimumWidth: 150 - SplitView.preferredWidth: 250 - - logsView.logText: logs.logText - - controls: ColumnLayout { - spacing: 16 - - CheckBox { - id: isDebugEnabledCheckBox - text: "Enable Debug" - checked: false - } - } - } - -} - -// category: Views diff --git a/storybook/pages/MessageContextMenuViewPage.qml b/storybook/pages/MessageContextMenuViewPage.qml new file mode 100644 index 0000000000..7d93b3d0df --- /dev/null +++ b/storybook/pages/MessageContextMenuViewPage.qml @@ -0,0 +1,131 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import StatusQ.Core.Theme 0.1 + +import Storybook 1.0 + +import utils 1.0 +import shared.views.chat 1.0 + +SplitView { + id: root + + Logs { id: logs } + + ListModel { + id: emojiReactionsModel + ListElement { + emojiId: 1 + filename: "emojiReactions/heart" + didIReactWithThisEmoji: false + } + ListElement { + emojiId: 2 + filename: "emojiReactions/thumbsUp" + didIReactWithThisEmoji: false + } + ListElement { + emojiId: 3 + filename: "emojiReactions/thumbsDown" + didIReactWithThisEmoji: false + } + ListElement { + emojiId: 4 + filename: "emojiReactions/laughing" + didIReactWithThisEmoji: false + } + ListElement { + emojiId: 5 + filename: "emojiReactions/sad" + didIReactWithThisEmoji: false + } + ListElement { + emojiId: 6 + filename: "emojiReactions/angry" + didIReactWithThisEmoji: false + } + } + + SplitView { + orientation: Qt.Vertical + SplitView.fillWidth: true + + Rectangle { + SplitView.fillWidth: true + SplitView.fillHeight: true + color: Theme.palette.statusAppLayout.rightPanelBackgroundColor + + Button { + anchors.centerIn: parent + text: "Reopen" + onClicked: messageContextMenuView.open() + } + + MessageContextMenuView { + id: messageContextMenuView + anchors.centerIn: parent + visible: true + closePolicy: Popup.NoAutoClose + + messageId: "Oxdeadbeef" + reactionModel: emojiReactionsModel + messageContentType: Constants.messageContentType.messageType + chatType: Constants.chatType.oneToOne + isDebugEnabled: isDebugEnabledCheckBox.checked + hideDisabledItems: ctrlHideDisabled.checked + amIChatAdmin: ctrlChatAdmin.checked + canPin: true + pinnedMessage: ctrlPinned.checked + + onPinMessage: logs.logEvent(`onPinMessage: ${messageContextMenuView.messageId}`) + onUnpinMessage: logs.logEvent(`onUnpinMessage: ${messageContextMenuView.messageId}`) + onPinnedMessagesLimitReached: logs.logEvent(`onPinnedMessagesLimitReached: ${messageContextMenuView.messageId}`) + onMarkMessageAsUnread: logs.logEvent(`onMarkMessageAsUnread: ${messageContextMenuView.messageId}`) + onToggleReaction: (emojiId) => logs.logEvent("onToggleReaction", ["emojiId"], arguments) + onDeleteMessage: logs.logEvent(`onDeleteMessage: ${messageContextMenuView.messageId}`) + onEditClicked: logs.logEvent(`onEditClicked: ${messageContextMenuView.messageId}`) + onShowReplyArea: (senderId) => logs.logEvent("onShowReplyArea", ["senderId"], arguments) + onCopyToClipboard: (text) => logs.logEvent("onCopyToClipboard", ["text"], arguments) + } + } + } + + LogsAndControlsPanel { + id: logsAndControlsPanel + + SplitView.minimumWidth: 150 + SplitView.preferredWidth: 250 + + logsView.logText: logs.logText + + controls: ColumnLayout { + spacing: 16 + + CheckBox { + id: isDebugEnabledCheckBox + text: "Enable Debug" + } + + CheckBox { + id: ctrlHideDisabled + text: "Hide disabled items" + checked: true + } + + CheckBox { + id: ctrlChatAdmin + text: "Chat Admin" + checked: false + } + + CheckBox { + id: ctrlPinned + text: "Pinned message?" + } + } + } +} + +// category: Views diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusMenu.qml b/ui/StatusQ/src/StatusQ/Popups/StatusMenu.qml index 2b99d3de81..ed76fe71b8 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusMenu.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusMenu.qml @@ -95,6 +95,7 @@ Menu { padding: 0 ColumnLayout { + spacing: 0 Repeater { model: root.contentModel diff --git a/ui/imports/shared/controls/chat/MessageReactionsRow.qml b/ui/imports/shared/controls/chat/MessageReactionsRow.qml index 39de61084d..234f9b99c3 100644 --- a/ui/imports/shared/controls/chat/MessageReactionsRow.qml +++ b/ui/imports/shared/controls/chat/MessageReactionsRow.qml @@ -6,7 +6,7 @@ import shared 1.0 Row { id: root - property var reactionsModel: [] + property var reactionsModel signal toggleReaction(int emojiId) @@ -17,7 +17,7 @@ Row { Repeater { model: root.reactionsModel delegate: EmojiReaction { - source: Style.svg(filename) + source: Style.svg(model.filename) emojiId: model.emojiId reactedByUser: model.didIReactWithThisEmoji onCloseModal: { diff --git a/ui/imports/shared/views/chat/MessageContextMenuView.qml b/ui/imports/shared/views/chat/MessageContextMenuView.qml index 83ed744ff3..eb25bd03b3 100644 --- a/ui/imports/shared/views/chat/MessageContextMenuView.qml +++ b/ui/imports/shared/views/chat/MessageContextMenuView.qml @@ -1,24 +1,18 @@ -import QtQuick 2.12 -import QtQuick.Controls 2.3 -import QtQuick.Layouts 1.3 -import QtQml.Models 2.3 +import QtQuick 2.15 +import QtQuick.Controls 2.15 import StatusQ 0.1 import StatusQ.Popups 0.1 import StatusQ.Components 0.1 import utils 1.0 -import shared 1.0 -import shared.panels 1.0 -import shared.popups 1.0 -import shared.status 1.0 import shared.controls.chat 1.0 -import shared.controls.chat.menuItems 1.0 StatusMenu { id: root - property var reactionModel: [] + // expected roles: emojiId:int, filename:string, didIReactWithThisEmoji:bool + property var reactionModel property string myPublicKey: "" property bool amIChatAdmin: false @@ -51,27 +45,19 @@ StatusMenu { signal markMessageAsUnread() signal copyToClipboard(string text) - width: Math.max(emojiContainer.visible ? emojiContainer.width : 0, 230) - - Item { - id: emojiContainer - width: emojiRow.width - height: visible ? emojiRow.height : 0 + MessageReactionsRow { + id: emojiRow visible: !root.disabledForChat || root.forceEnableEmojiReactions - - MessageReactionsRow { - id: emojiRow - reactionsModel: root.reactionModel - bottomPadding: Style.current.padding - onToggleReaction: { - root.toggleReaction(emojiId) - root.close() - } + reactionsModel: root.reactionModel + bottomPadding: Style.current.halfPadding + onToggleReaction: { + root.toggleReaction(emojiId) + root.close() } } StatusMenuSeparator { - visible: emojiContainer.visible + visible: emojiRow.visible } StatusAction { @@ -148,9 +134,10 @@ StatusMenu { visible: deleteMessageAction.enabled && (replyToMenuItem.enabled || copyMessageMenuItem.enabled || - copyMessageIdAction || + copyMessageIdAction.enabled || editMessageAction.enabled || - pinAction.enabled) + pinAction.enabled || + markMessageAsUnreadAction.enabled) } StatusAction {