From 6e1c07047e7a85b37212b9bf73e1aa6a186390ad Mon Sep 17 00:00:00 2001 From: Carl Schwan Date: Sun, 12 Dec 2021 17:27:14 +0100 Subject: [PATCH] Add a mobile oriented context menu for the room list It works similarly as in the timeline with a bottom based drawer on mobile and a normal context menu on desktop Signed-off-by: Carl Schwan --- imports/NeoChat/Menu/RoomListContextMenu.qml | 162 ++++++++++++++----- imports/NeoChat/Page/RoomListPage.qml | 16 +- 2 files changed, 139 insertions(+), 39 deletions(-) diff --git a/imports/NeoChat/Menu/RoomListContextMenu.qml b/imports/NeoChat/Menu/RoomListContextMenu.qml index 3efe8c281..80c8e501e 100644 --- a/imports/NeoChat/Menu/RoomListContextMenu.qml +++ b/imports/NeoChat/Menu/RoomListContextMenu.qml @@ -4,67 +4,157 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 import org.kde.kirigami 2.19 as Kirigami import org.kde.neochat 1.0 import NeoChat.Page 1.0 - /** * Context menu when clicking on a room in the room list */ -Menu { +Loader { id: root property var room + signal closed() - MenuItem { - id: newWindow - text: i18n("Open in new window") - onTriggered: RoomManager.openWindow(room); - visible: !Kirigami.Settings.isMobile - } + Component { + id: regularMenu + Menu { + MenuItem { + id: newWindow + text: i18n("Open in new window") + onTriggered: RoomManager.openWindow(room); + visible: !Kirigami.Settings.isMobile + } - MenuSeparator { - visible: newWindow.visible - } + MenuSeparator { + visible: newWindow.visible + } - MenuItem { - text: room.isFavourite ? i18n("Remove from Favourites") : i18n("Add to Favourites") + MenuItem { + text: room.isFavourite ? i18n("Remove from Favourites") : i18n("Add to Favourites") + onTriggered: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0) + } - onTriggered: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0) - } + MenuItem { + text: room.isLowPriority ? i18n("Reprioritize") : i18n("Deprioritize") + onTriggered: room.isLowPriority ? room.removeTag("m.lowpriority") : room.addTag("m.lowpriority", 1.0) + } - MenuItem { - text: room.isLowPriority ? i18n("Reprioritize") : i18n("Deprioritize") + MenuItem { + text: i18n("Mark as Read") + onTriggered: room.markAllMessagesAsRead() + } - onTriggered: room.isLowPriority ? room.removeTag("m.lowpriority") : room.addTag("m.lowpriority", 1.0) - } + MenuItem { + text: i18nc("@action:inmenu", "Copy address to clipboard") + onTriggered: if (room.canonicalAlias.length === 0) { + Clipboard.saveText(room.id) + } else { + Clipboard.saveText(room.canonicalAlias) + } + } - MenuItem { - text: i18n("Mark as Read") + MenuSeparator {} - onTriggered: room.markAllMessagesAsRead() - } + MenuItem { + text: i18n("Leave Room") + onTriggered: RoomManager.leaveRoom(room) + } - MenuItem { - text: i18nc("@action:inmenu", "Copy address to clipboard") - - onTriggered: { - if (room.canonicalAlias.length === 0) { - Clipboard.saveText(room.id) - } else { - Clipboard.saveText(room.canonicalAlias) + onClosed: { + root.closed() + destroy() } } } - MenuSeparator {} + Component { + id: mobileMenu - MenuItem { - text: i18n("Leave Room") - onTriggered: RoomManager.leaveRoom(room) + Kirigami.OverlayDrawer { + id: drawer + height: popupContent.implicitHeight + edge: Qt.BottomEdge + padding: 0 + leftPadding: 0 + rightPadding: 0 + bottomPadding: 0 + topPadding: 0 + + parent: applicationWindow().overlay + + ColumnLayout { + id: popupContent + width: parent.width + spacing: 0 + RowLayout { + id: headerLayout + Layout.fillWidth: true + Layout.margins: Kirigami.Units.largeSpacing + spacing: Kirigami.Units.largeSpacing + Kirigami.Avatar { + id: avatar + source: room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : "" + Layout.preferredWidth: Kirigami.Units.gridUnit * 3 + Layout.preferredHeight: Kirigami.Units.gridUnit * 3 + Layout.alignment: Qt.AlignTop + } + Kirigami.Heading { + level: 5 + Layout.fillWidth: true + text: room.displayName + wrapMode: Text.WordWrap + } + ToolButton { + checked: room.isFavourite + checkable: true + icon.name: 'favorite' + Accessible.name: room.isFavourite ? i18n("Remove from Favourites") : i18n("Add to Favourites") + onClicked: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0) + } + + ToolButton { + icon.name: 'settings-configure' + onClicked: ApplicationWindow.window.pageStack.pushDialogLayer('qrc:/imports/NeoChat/RoomSettings/Categories.qml', {room: room}) + } + } + + Kirigami.BasicListItem { + text: room.isLowPriority ? i18n("Reprioritize") : i18n("Deprioritize") + onClicked: room.isLowPriority ? room.removeTag("m.lowpriority") : room.addTag("m.lowpriority", 1.0) + implicitHeight: visible ? Kirigami.Units.gridUnit * 3 : 0 + } + + Kirigami.BasicListItem { + text: i18n("Mark as Read") + onClicked: room.markAllMessagesAsRead() + implicitHeight: visible ? Kirigami.Units.gridUnit * 3 : 0 + } + Kirigami.BasicListItem { + text: i18n("Leave Room") + onClicked: RoomManager.leaveRoom(room) + implicitHeight: visible ? Kirigami.Units.gridUnit * 3 : 0 + } + } + onClosed: root.closed() + } } - onClosed: destroy() + asynchronous: true + sourceComponent: Kirigami.Settings.isMobile ? mobileMenu : regularMenu + + function open() { + active = true; + } + + onStatusChanged: if (status == Loader.Ready) { + if (Kirigami.Settings.isMobile) { + item.open(); + } else { + item.popup(); + } + } } diff --git a/imports/NeoChat/Page/RoomListPage.qml b/imports/NeoChat/Page/RoomListPage.qml index 2a84f06e0..c19c5fb28 100644 --- a/imports/NeoChat/Page/RoomListPage.qml +++ b/imports/NeoChat/Page/RoomListPage.qml @@ -237,12 +237,22 @@ Kirigami.ScrollablePage { bold: unreadCount > 0 label: name ?? "" subtitle: { - let txt = (lastEvent.length === 0 ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm, " ") + const txt = (lastEvent.length === 0 ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm, " ") if (txt.length) { return txt } return " " } + onPressAndHold: { + const menu = roomListContextMenu.createObject(page, {"room": currentRoom}) + configButton.visible = true + configButton.down = true + menu.closed.connect(function() { + configButton.down = undefined + configButton.visible = Qt.binding(function() { return roomListItem.hovered || Kirigami.Settings.isMobile }) + }) + menu.open() + } leading: Kirigami.Avatar { source: avatar ? "image://mxc/" + avatar : "" @@ -269,7 +279,7 @@ Kirigami.ScrollablePage { } QQC2.Button { id: configButton - visible: roomListItem.hovered || Kirigami.Settings.isMobile + visible: roomListItem.hovered Accessible.name: i18n("Configure room") action: Kirigami.Action { @@ -283,7 +293,7 @@ Kirigami.ScrollablePage { configButton.down = undefined configButton.visible = Qt.binding(function() { return roomListItem.hovered || Kirigami.Settings.isMobile }) }) - menu.popup() + menu.open() } } }