Open context menu on longpress in list items

This commit is contained in:
Michael Zanetti 2020-02-03 19:57:44 +01:00
parent 4f9c405d46
commit ea8c793880
5 changed files with 85 additions and 64 deletions

View File

@ -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
}
}
}
}
}
}

View File

@ -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 {

View File

@ -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()

View File

@ -84,7 +84,7 @@ DevicePageBase {
}
onClicked: swipe.close()
onPressAndHold: swipe.open(SwipeDelegate.Right)
swipe.right: RowLayout {
height: delegate.height
anchors.right: parent.right

View File

@ -128,6 +128,7 @@ SwipeDelegate {
}
}
onPressAndHold: swipe.open(SwipeDelegate.Right)
swipe.right: MouseArea {
height: parent.height
width: height