diff --git a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml index d9d20c4a1d..73c3b7fa6a 100644 --- a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml @@ -32,6 +32,7 @@ Item { property var rootStore property var contactsStore property var emojiPopup + property var stickersPopup // Not Refactored Yet //property int chatGroupsListViewCount: 0 @@ -215,6 +216,7 @@ Item { rootStore: root.rootStore contactsStore: root.contactsStore emojiPopup: root.emojiPopup + stickersPopup: root.stickersPopup sendTransactionNoEnsModal: cmpSendTransactionNoEns receiveTransactionModal: cmpReceiveTransaction sendTransactionWithEnsModal: cmpSendTransactionWithEns @@ -263,6 +265,7 @@ Item { rootStore: root.rootStore contactsStore: root.contactsStore emojiPopup: root.emojiPopup + stickersPopup: root.stickersPopup sendTransactionNoEnsModal: cmpSendTransactionNoEns receiveTransactionModal: cmpReceiveTransaction sendTransactionWithEnsModal: cmpSendTransactionWithEns diff --git a/ui/app/AppLayouts/Chat/views/ChatContentView.qml b/ui/app/AppLayouts/Chat/views/ChatContentView.qml index d3175283d7..a12a62b40a 100644 --- a/ui/app/AppLayouts/Chat/views/ChatContentView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatContentView.qml @@ -36,6 +36,7 @@ ColumnLayout { property var contactsStore property bool isActiveChannel: false property var emojiPopup + property var stickersPopup property alias textInputField: chatInput property UsersStore usersStore: UsersStore {} @@ -145,6 +146,7 @@ ColumnLayout { messageContextMenu: contextmenu messageStore: messageStore emojiPopup: root.emojiPopup + stickersPopup: root.stickersPopup usersStore: root.usersStore stickersLoaded: root.stickersLoaded isChatBlocked: root.isBlocked @@ -183,11 +185,10 @@ ColumnLayout { messageContextMenu: contextmenu emojiPopup: root.emojiPopup + stickersPopup: root.stickersPopup isContactBlocked: root.isBlocked isActiveChannel: root.isActiveChannel anchors.bottom: parent.bottom - recentStickers: root.rootStore.stickersModuleInst.recent - stickerPackList: root.rootStore.stickersModuleInst.stickerPacks chatType: chatContentModule? chatContentModule.chatDetails.type : Constants.chatType.unknown Binding on chatInputPlaceholder { diff --git a/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml b/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml index eb785d7e6f..9e196def77 100644 --- a/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml @@ -33,6 +33,7 @@ Item { property string channelEmoji property var emojiPopup + property var stickersPopup property bool stickersLoaded: false property alias chatLogView: chatLogView @@ -265,6 +266,7 @@ Item { contactsStore: root.contactsStore channelEmoji: root.channelEmoji emojiPopup: root.emojiPopup + stickersPopup: root.stickersPopup chatLogView: ListView.view isActiveChannel: root.isActiveChannel diff --git a/ui/app/AppLayouts/Chat/views/ChatView.qml b/ui/app/AppLayouts/Chat/views/ChatView.qml index 09bc1aafac..a50d1d1da6 100644 --- a/ui/app/AppLayouts/Chat/views/ChatView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatView.qml @@ -31,6 +31,7 @@ StatusSectionLayout { property Component membershipRequestPopup property var emojiPopup + property var stickersPopup property bool stickersLoaded: false signal communityInfoButtonClicked() @@ -84,6 +85,7 @@ StatusSectionLayout { contactsStore: root.contactsStore stickersLoaded: root.stickersLoaded emojiPopup: root.emojiPopup + stickersPopup: root.stickersPopup onOpenStickerPackPopup: { Global.openPopup(statusStickerPackClickPopup, {packId: stickerPackId} ) } diff --git a/ui/app/AppLayouts/Chat/views/CreateChatView.qml b/ui/app/AppLayouts/Chat/views/CreateChatView.qml index 70f7a4488f..04c7ef4b11 100644 --- a/ui/app/AppLayouts/Chat/views/CreateChatView.qml +++ b/ui/app/AppLayouts/Chat/views/CreateChatView.qml @@ -153,8 +153,6 @@ Page { visible: membersSelector.model.count > 0 chatType: membersSelector.model.count === 1? Constants.chatType.oneToOne : Constants.chatType.privateGroupChat emojiPopup: root.emojiPopup - recentStickers: root.rootStore.stickersModuleInst.recent - stickerPackList: root.rootStore.stickersModuleInst.stickerPacks closeGifPopupAfterSelection: true onSendTransactionCommandButtonClicked: { root.rootStore.createChatStartSendTransactionProcess = true; diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml index a4f252d90b..5136404dc6 100644 --- a/ui/app/mainui/AppMain.qml +++ b/ui/app/mainui/AppMain.qml @@ -311,6 +311,11 @@ Item { height: 440 } + StatusStickersPopup { + id: statusStickersPopup + store: chatLayoutContainer.rootStore + } + StatusMainLayout { id: appLayout @@ -801,6 +806,7 @@ Item { id: chatLayoutContainer chatView.emojiPopup: statusEmojiPopup + chatView.stickersPopup: statusStickersPopup contactsStore: appMain.rootStore.contactStore rootStore.emojiReactionsModel: appMain.rootStore.emojiReactionsModel @@ -899,6 +905,7 @@ Item { sourceComponent: ChatLayout { chatView.emojiPopup: statusEmojiPopup + chatView.stickersPopup: statusStickersPopup contactsStore: appMain.rootStore.contactStore rootStore.emojiReactionsModel: appMain.rootStore.emojiReactionsModel diff --git a/ui/imports/shared/status/StatusChatInput.qml b/ui/imports/shared/status/StatusChatInput.qml index e57f3784d6..2da2567c1b 100644 --- a/ui/imports/shared/status/StatusChatInput.qml +++ b/ui/imports/shared/status/StatusChatInput.qml @@ -33,8 +33,10 @@ Rectangle { property var store property var emojiPopup: null + property var stickersPopup: null // Use this to only enable the Connections only when this Input opens the Emoji popup property bool emojiPopupOpened: false + property bool stickersPopupOpened: false property bool closeGifPopupAfterSelection: true property bool emojiEvent: false @@ -47,9 +49,6 @@ Rectangle { property bool isContactBlocked: false property bool isActiveChannel: false - property var recentStickers - property var stickerPackList - property int messageLimit: 2000 property int messageLimitVisible: 200 @@ -149,6 +148,20 @@ Rectangle { } } } + readonly property StateGroup stickersPopupTakeover: StateGroup { + states: State { + when: control.stickersPopupOpened + + PropertyChanges { + target: stickersPopup + + parent: control + closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent + x: control.width - stickersPopup.width - Style.current.halfPadding + y: -stickersPopup.height + } + } + } function copyMentions(start, end) { copiedMentionsPos = [] @@ -212,8 +225,8 @@ Rectangle { } function togglePopup(popup, btn) { - if (popup !== stickersPopup) { - stickersPopup.close() + if (popup !== control.stickersPopup) { + control.stickersPopup.close() } if (popup !== gifPopup) { @@ -248,6 +261,21 @@ Rectangle { } } + Connections { + enabled: control.stickersPopupOpened + target: control.stickersPopup + + onStickerSelected: { + control.stickerSelected(hashId, packId, url) + control.hideExtendedArea(); + messageInputField.forceActiveFocus(); + } + onClosed: { + stickersBtn.highlighted = false + control.stickersPopupOpened = false + } + } + property var mentionsPos: [] function insertMention(aliasName, publicKey, lastAtPosition, lastCursorPosition) { @@ -955,24 +983,6 @@ Rectangle { } } - StatusStickersPopup { - id: stickersPopup - x: control.width - width - Style.current.halfPadding - y: -height - store: control.store - enabled: !!control.recentStickers && !!control.stickerPackList - recentStickers: control.recentStickers - stickerPackList: control.stickerPackList - onStickerSelected: { - control.stickerSelected(hashId, packId, url) - control.hideExtendedArea(); - messageInputField.forceActiveFocus(); - } - onClosed: { - stickersBtn.highlighted = false - } - } - RowLayout { id: layout anchors.fill: parent @@ -1407,7 +1417,11 @@ Rectangle { type: StatusQ.StatusFlatRoundButton.Type.Tertiary visible: !isEdit && emojiBtn.visible color: "transparent" - onClicked: togglePopup(stickersPopup, stickersBtn) + onClicked: { + control.stickersPopupOpened = true + + togglePopup(control.stickersPopup, stickersBtn) + } } } } diff --git a/ui/imports/shared/status/StatusStickersPopup.qml b/ui/imports/shared/status/StatusStickersPopup.qml index 041f95ce4c..8f23f79e9a 100644 --- a/ui/imports/shared/status/StatusStickersPopup.qml +++ b/ui/imports/shared/status/StatusStickersPopup.qml @@ -15,11 +15,12 @@ import AppLayouts.Chat.stores 1.0 Popup { id: root property var store - property var recentStickers: StickerData {} - property var stickerPackList: StickerPackData {} + property var recentStickers: store.stickersModuleInst.recent + property var stickerPackList: store.stickersModuleInst.stickerPacks signal stickerSelected(string hashId, string packId, string url) property int installedPacksCount: stickersModule.numInstalledStickerPacks property bool stickerPacksLoaded: false + enabled: !!recentStickers && !!stickerPackList width: 360 height: 440 modal: false diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml index 250bf4e540..185bc5c76c 100644 --- a/ui/imports/shared/views/chat/MessageView.qml +++ b/ui/imports/shared/views/chat/MessageView.qml @@ -29,6 +29,7 @@ Loader { property var chatLogView property var emojiPopup + property var stickersPopup // Once we redo qml we will know all section/chat related details in each message form the parent components // without an explicit need to fetch those details via message store/module. @@ -678,6 +679,7 @@ Loader { store: root.rootStore usersStore: root.usersStore emojiPopup: root.emojiPopup + stickersPopup: root.stickersPopup messageContextMenu: root.messageContextMenu chatType: root.messageStore.getChatType()