diff --git a/ui/StatusQ/sandbox/DemoApp.qml b/ui/StatusQ/sandbox/DemoApp.qml index 4c0dbf4a7b..711103930c 100644 --- a/ui/StatusQ/sandbox/DemoApp.qml +++ b/ui/StatusQ/sandbox/DemoApp.qml @@ -181,6 +181,7 @@ Rectangle { chatListItems.model: demoChatListItems selectedChatId: "0" + onChatItemSelected: selectedChatId = id onChatItemUnmuted: { for (var i = 0; i < demoChatListItems.count; i++) { @@ -190,6 +191,41 @@ Rectangle { } } } + + popupMenu: StatusPopupMenu { + + property string chatId + + StatusMenuItem { + text: "View Profile" + icon.name: "group-chat" + } + + StatusMenuSeparator {} + + StatusMenuItem { + text: "Mute chat" + icon.name: "notification" + } + + StatusMenuItem { + text: "Mark as Read" + icon.name: "checkmark-circle" + } + + StatusMenuItem { + text: "Clear history" + icon.name: "close-circle" + } + + StatusMenuSeparator {} + + StatusMenuItem { + text: "Delete chat" + icon.name: "delete" + type: StatusMenuItem.Type.Danger + } + } } } @@ -334,6 +370,33 @@ Rectangle { } } + chatListPopupMenu: StatusPopupMenu { + + property string chatId + + StatusMenuItem { + text: "Mute chat" + icon.name: "notification" + } + + StatusMenuItem { + text: "Mark as Read" + icon.name: "checkmark-circle" + } + + StatusMenuItem { + text: "Clear history" + icon.name: "close-circle" + } + + StatusMenuSeparator {} + + StatusMenuItem { + text: "Delete chat" + icon.name: "delete" + type: StatusMenuItem.Type.Danger + } + } popupMenu: StatusPopupMenu { StatusMenuItem { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusChatList.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatList.qml index 28e448766e..5dc4af1aa2 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusChatList.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusChatList.qml @@ -15,15 +15,24 @@ Column { property string selectedChatId: "" property alias chatListItems: statusChatListItems + property Component popupMenu + property var filterFn signal chatItemSelected(string id) signal chatItemUnmuted(string id) + onPopupMenuChanged: { + if (!!popupMenu) { + popupMenuSlot.sourceComponent = popupMenu + } + } + Repeater { id: statusChatListItems delegate: StatusChatListItem { - chatId: model.chatId + id: statusChatListItem + chatId: model.chatId || model.id name: model.name type: model.chatType muted: !!model.muted @@ -35,8 +44,36 @@ Column { icon.color: model.color || "" image.source: model.identicon || "" - onClicked: statusChatList.chatItemSelected(model.chatId) - onUnmute: statusChatList.chatItemUnmuted(model.chatId) + onClicked: { + if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) { + highlighted = true + + let originalOpenHandler = popupMenuSlot.item.openHandler + let originalCloseHandler = popupMenuSlot.item.closeHandler + + popupMenuSlot.item.openHandler = function () { + if (popupMenuSlot.item.hasOwnProperty('chatId')) { + popupMenuSlot.item.chatId = model.chatId || model.id + } + if (!!originalOpenHandler) { + originalOpenHandler() + } + } + + popupMenuSlot.item.closeHandler = function () { + highlighted = false + if (!!originalCloseHandler) { + originalCloseHandler() + } + } + + popupMenuSlot.item.popup(mouse.x + 4, statusChatListItem.y + mouse.y + 6) + popupMenuSlot.item.openHandler = originalOpenHandler + return + } + statusChatList.chatItemSelected(model.chatId || model.id) + } + onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id) visible: { if (!!statusChatList.filterFn) { return statusChatList.filterFn(model, statusChatList.categoryId) @@ -45,4 +82,9 @@ Column { } } } + + Loader { + id: popupMenuSlot + active: !!statusChatList.popupMenu + } } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusChatListAndCategories.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatListAndCategories.qml index 1f5fa65350..9bcd835317 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusChatListAndCategories.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusChatListAndCategories.qml @@ -17,6 +17,7 @@ Item { property alias sensor: sensor property Component categoryPopupMenu + property Component chatListPopupMenu property Component popupMenu signal chatItemSelected(string id) @@ -76,6 +77,7 @@ Item { chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id) popupMenu: statusChatListAndCategories.categoryPopupMenu + chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu } } } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusChatListCategory.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatListCategory.qml index a24279ea62..0078019878 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusChatListCategory.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusChatListCategory.qml @@ -18,6 +18,7 @@ Column { property alias toggleButton: statusChatListCategoryItem.toggleButton property alias chatList: statusChatList + property Component chatListPopupMenu property Component popupMenu onPopupMenuChanged: { @@ -59,6 +60,8 @@ Column { filterFn: function (model) { return !!model.categoryId && model.categoryId == statusChatList.categoryId } + + popupMenu: statusChatListCategory.chatListPopupMenu } Loader {