From ea8c793880d2aef7e1d4853dbe814b94882b8bf8 Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Mon, 3 Feb 2020 19:57:44 +0100 Subject: [PATCH] Open context menu on longpress in list items --- .../ui/components/NymeaListItemDelegate.qml | 80 +++++++++++++++---- nymea-app/ui/connection/ConnectPage.qml | 21 ++--- .../ui/customviews/GenericTypeLogView.qml | 45 +++-------- .../ui/devicepages/GenericDevicePage.qml | 2 +- .../ui/magic/SimpleStateEvaluatorDelegate.qml | 1 + 5 files changed, 85 insertions(+), 64 deletions(-) diff --git a/nymea-app/ui/components/NymeaListItemDelegate.qml b/nymea-app/ui/components/NymeaListItemDelegate.qml index 9d1a4c16..c1a7a36e 100644 --- a/nymea-app/ui/components/NymeaListItemDelegate.qml +++ b/nymea-app/ui/components/NymeaListItemDelegate.qml @@ -29,6 +29,8 @@ SwipeDelegate { property alias tertiaryIconKeyColor: tertiaryIcon.keyColor property alias tertiaryIconClickable: tertiaryIconMouseArea.enabled + property var contextOptions: [] + property alias additionalItem: additionalItemContainer.children property alias busy: busyIndicator.running @@ -36,6 +38,25 @@ SwipeDelegate { signal deleteClicked() signal secondaryIconClicked() + onPressAndHold: swipe.open(SwipeDelegate.Right) + + QtObject { + id: d + property var deleteContextOption: [{ + text: qsTr("Delete"), + icon: "../images/delete.svg", + backgroundColor: "red", + foregroundColor: "white", + visible: canDelete, + callback: function deleteClicked() { + root.deleteClicked(); + swipe.close(); + } + }] + + property var finalContextOptions: root.contextOptions.concat(d.deleteContextOption) + } + contentItem: RowLayout { id: innerLayout spacing: app.margins @@ -142,25 +163,54 @@ SwipeDelegate { } } - swipe.enabled: canDelete - swipe.right: MouseArea { + swipe.right: Row { height: root.height - width: height anchors.right: parent.right - Rectangle { - anchors.fill: parent - color: "red" - } + width: height * d.finalContextOptions.count + Repeater { + model: d.finalContextOptions - ColorIcon { - anchors.fill: parent - anchors.margins: app.margins - name: "../images/delete.svg" - color: "white" + delegate: MouseArea { + height: root.height + width: height + property var entry: d.finalContextOptions[index] + visible: entry.hasOwnProperty("visible") ? entry.visible : true + Rectangle { + anchors.fill: parent + color: entry.hasOwnProperty("backgroundColor") ? entry.backgroundColor : "transparent" + } + + ColorIcon { + anchors.fill: parent + anchors.margins: app.margins + name: entry.icon + color: entry.hasOwnProperty("foregroundColor") ? entry.foregroundColor : keyColor + } + onClicked: { + swipe.close(); + entry.callback() + } + } } - onClicked: { - swipe.close(); - root.deleteClicked() + } + + Component { + id: contextMenu + Dialog { + width: 300 + height: 200 + x: (parent.width - width) / 2 + ColumnLayout { + width: parent.width + Repeater { + model: root.contextOptions + delegate: ItemDelegate { + property var entry: root.contextOptions[index] + width: parent.width + text: entry.text + } + } + } } } } diff --git a/nymea-app/ui/connection/ConnectPage.qml b/nymea-app/ui/connection/ConnectPage.qml index 5f66613d..362d0c16 100644 --- a/nymea-app/ui/connection/ConnectPage.qml +++ b/nymea-app/ui/connection/ConnectPage.qml @@ -172,31 +172,22 @@ Page { tertiaryIconColor: isTrusted ? app.accentColor : Material.foreground secondaryIconName: !isOnline ? "../images/cloud-error.svg" : "" secondaryIconColor: "red" - swipe.enabled: nymeaHostDelegate.nymeaHost.deviceType === NymeaHost.DeviceTypeNetwork onClicked: { root.connectToHost2(nymeaHostDelegate.nymeaHost) } - swipe.right: MouseArea { - height: parent.height - width: height - anchors.right: parent.right - ColorIcon { - anchors.fill: parent - anchors.margins: app.margins - name: "../images/info.svg" - } - onClicked: { - if (model.deviceType === NymeaHost.DeviceTypeNetwork) { - swipe.close() + contextOptions: [ + { + text: qsTr("Info"), + icon: Qt.resolvedUrl("../images/info.svg"), + callback: function() { var nymeaHost = hostsProxy.get(index); - print("Getting info for", nymeaHost.name) var popup = infoDialog.createObject(app,{nymeaHost: nymeaHost}) popup.open() } } - } + ] } Column { diff --git a/nymea-app/ui/customviews/GenericTypeLogView.qml b/nymea-app/ui/customviews/GenericTypeLogView.qml index 1706a509..fd6da50a 100644 --- a/nymea-app/ui/customviews/GenericTypeLogView.qml +++ b/nymea-app/ui/customviews/GenericTypeLogView.qml @@ -31,45 +31,24 @@ Item { } } - delegate: SwipeDelegate { + delegate: NymeaListItemDelegate { id: logEntryDelegate width: parent.width implicitHeight: app.delegateHeight property var device: engine.deviceManager.devices.getDevice(model.deviceId) property var deviceClass: engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId) - contentItem: RowLayout { - ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: height - name: "../images/event.svg" - color: app.accentColor + iconName: "../images/event.svg" + text: Qt.formatDateTime(model.timestamp,"dd.MM.yy - hh:mm:ss") + subText: deviceClass.eventTypes.getEventType(model.typeId).displayName + (model.value.length > 0 ? (": " + model.value.trim()) : "") + prominentSubText: true + progressive: false + contextOptions: [ + { + text: qsTr("Magic"), + icon: "../images/magic.svg", + callback: function() { root.addRuleClicked(index) } } - - ColumnLayout { - Label { - id: timeStampLabel - Layout.fillWidth: true - text: Qt.formatDateTime(model.timestamp,"dd.MM.yy - hh:mm:ss") - } - Label { - Layout.fillWidth: true - text: deviceClass.eventTypes.getEventType(model.typeId).displayName + (model.value.length > 0 ? (": " + model.value.trim()) : "") - elide: Text.ElideRight - font.pixelSize: app.smallFont - } - } - } - swipe.right: MouseArea { - height: logEntryDelegate.height - width: height - anchors.right: parent.right - ColorIcon { - anchors.fill: parent - anchors.margins: app.margins - name: "../images/magic.svg" - } - onClicked: root.addRuleClicked(index) - } + ] onClicked: { if (swipe.complete) { swipe.close() diff --git a/nymea-app/ui/devicepages/GenericDevicePage.qml b/nymea-app/ui/devicepages/GenericDevicePage.qml index 1cdc099f..033751df 100644 --- a/nymea-app/ui/devicepages/GenericDevicePage.qml +++ b/nymea-app/ui/devicepages/GenericDevicePage.qml @@ -84,7 +84,7 @@ DevicePageBase { } onClicked: swipe.close() - + onPressAndHold: swipe.open(SwipeDelegate.Right) swipe.right: RowLayout { height: delegate.height anchors.right: parent.right diff --git a/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml b/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml index 1d310bfb..bbf1e2da 100644 --- a/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml +++ b/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml @@ -128,6 +128,7 @@ SwipeDelegate { } } + onPressAndHold: swipe.open(SwipeDelegate.Right) swipe.right: MouseArea { height: parent.height width: height