Move event dashboard tiles via buttons

src/CMakeLists.txt

@@ -105,7 +105,9 @@ qt_add_resources(appOPC_UA_Browser "icons"
     PREFIX "/"
     FILES font/Swansea.ttf
           font/SwanseaBold.ttf
+          icons/keyboard_arrow_down.svg
           icons/arrow_right.svg
+          icons/keyboard_arrow_up.svg
           icons/back.svg
           icons/bolt.svg
           icons/cancel.svg

src/icons/keyboard_arrow_down.svg.license

@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2023 Google LLC
+
+SPDX-License-Identifier: Apache-2.0

src/icons/keyboard_arrow_up.svg.license

@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2023 Google LLC
+
+SPDX-License-Identifier: Apache-2.0

src/languages/English_en_GB.ts

@@ -389,7 +389,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+365"/>
+        <location line="+369"/>
         <location/>
         <source>All selected event fields</source>
         <translation type="unfinished"></translation>
@@ -491,7 +491,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../qml/DashboardView.qml" line="-350"/>
+        <location filename="../qml/DashboardView.qml" line="-354"/>
         <location/>
         <source>Delete</source>
         <translation type="unfinished"></translation>

src/languages/German_de_DE.ts

@@ -389,7 +389,7 @@
         <translation>Hinzufügen</translation>
     </message>
     <message>
-        <location line="+365"/>
+        <location line="+369"/>
         <location/>
         <source>All selected event fields</source>
         <translation>Alle ausgewählten Eventfelder</translation>
@@ -491,7 +491,7 @@
         <translation>Zurück</translation>
     </message>
     <message>
-        <location filename="../qml/DashboardView.qml" line="-350"/>
+        <location filename="../qml/DashboardView.qml" line="-354"/>
         <location/>
         <source>Delete</source>
         <translation>Löschen</translation>

src/monitoreditemmodel.cpp

@@ -176,3 +176,14 @@ QList<QOpcUaMonitoringParameters::EventFilter> MonitoredItemModel::eventFilters(
 
     return filters;
 }
+
+void MonitoredItemModel::moveItem(int currentIndex, int newIndex)
+{
+    if (currentIndex < 0 || newIndex < 0 || newIndex == currentIndex || newIndex >= mItems.size())
+        return;
+
+    beginMoveRows(QModelIndex(), currentIndex, currentIndex, QModelIndex(),
+                  newIndex > currentIndex ? newIndex + 1 : newIndex);
+    mItems.move(currentIndex, newIndex);
+    endMoveRows();
+}

src/monitoreditemmodel.h

@@ -39,6 +39,8 @@ class MonitoredItemModel : public QAbstractListModel
 
     QList<QOpcUaMonitoringParameters::EventFilter> eventFilters();
 
+    Q_INVOKABLE void moveItem(int currentIndex, int newIndex);
+
 signals:
     void updated();
 

src/qml/DashboardView.qml

@@ -239,10 +239,10 @@ Rectangle {
     }
 
     Component {
-        id: eventDragDelegate
+        id: eventDelegate
 
         MouseArea {
-            id: eventDragArea
+            id: eventMouseArea
 
             property bool held: false
             required property string name
@@ -291,61 +291,35 @@ Rectangle {
 
             height: content.height
             width: content.width
-            cursorShape: eventDragArea.isAddItem ? Qt.PointingHandCursor : Qt.ArrowCursor
-
-            drag.target: held ? content : undefined
-
-            onPressAndHold: held = !eventDragArea.isAddItem
-            onReleased: held = false
+            cursorShape: eventMouseArea.isAddItem ? Qt.PointingHandCursor : Qt.ArrowCursor
 
             onClicked: {
-                if (eventDragArea.isAddItem) {
+                if (eventMouseArea.isAddItem) {
                     view.addEvents()
                 }
             }
 
             Rectangle {
                 id: content
 
-                Drag.active: eventDragArea.held
-                Drag.source: eventDragArea
-                Drag.hotSpot.x: width / 2
-                Drag.hotSpot.y: height / 2
-
                 width: itemWidth * 2 + 10
                 implicitHeight: Math.max(80, eventColumn.height)
                 radius: 5
-                color: eventDragArea.held ? view.theme.item.backgroundHeld : eventDragArea.hasError ? view.theme.item.backgroundError : view.theme.item.background
+                color: eventMouseArea.hasError ? view.theme.item.backgroundError : view.theme.item.background
 
                 Behavior on color {
                     ColorAnimation {
                         duration: 100
                     }
                 }
 
-                states: State {
-                    when: eventDragArea.held
-
-                    ParentChange {
-                        target: content
-                        parent: view
-                    }
-                    AnchorChanges {
-                        target: content
-                        anchors {
-                            horizontalCenter: undefined
-                            verticalCenter: undefined
-                        }
-                    }
-                }
-
                 Column {
                     id: eventColumn
 
                     width: parent.width
                     padding: 5
                     spacing: 5
-                    visible: !eventDragArea.isAddItem
+                    visible: !eventMouseArea.isAddItem
 
                     RowLayout {
                         id: eventRow
@@ -354,14 +328,44 @@ Rectangle {
                         Text {
                             Layout.fillWidth: true
                             color: view.theme.item.textColor
-                            text: eventDragArea.name
+                            text: eventMouseArea.name
                             font {
                                 pointSize: 12
                                 bold: true
                             }
                             elide: Text.ElideRight
                         }
 
+                        IconImage {
+                            Layout.alignment: Qt.AlignVCenter
+                            sourceSize.width: 24
+                            sourceSize.height: 24
+                            source: "qrc:/icons/keyboard_arrow_down.svg"
+                            color: view.theme.item.textColor
+                            visible: index !== visualModel.count - 2
+
+                            MouseArea {
+                                anchors.fill: parent
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: visualModel.model.moveItem(index, index + 1)
+                            }
+                        }
+
+                        IconImage {
+                            Layout.alignment: Qt.AlignVCenter
+                            sourceSize.width: 24
+                            sourceSize.height: 24
+                            source: "qrc:/icons/keyboard_arrow_up.svg"
+                            color: view.theme.item.textColor
+                            visible: index !== 0
+
+                            MouseArea {
+                                anchors.fill: parent
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: visualModel.model.moveItem(index, index - 1)
+                            }
+                        }
+
                         IconImage {
                             Layout.alignment: Qt.AlignVCenter
                             sourceSize.width: 24
@@ -373,7 +377,7 @@ Rectangle {
                                 anchors.fill: parent
                                 cursorShape: Qt.PointingHandCursor
                                 onClicked: visualModel.model.clearEventsForItem(
-                                               eventDragArea.index)
+                                               eventMouseArea.index)
                             }
                         }
 
@@ -388,13 +392,13 @@ Rectangle {
                                 anchors.fill: parent
                                 cursorShape: Qt.PointingHandCursor
                                 onClicked: visualModel.model.disableMonitoring(
-                                               eventDragArea.index)
+                                               eventMouseArea.index)
                             }
                         }
                     }
 
                     Repeater {
-                        model: eventDragArea.lastEventStrings
+                        model: eventMouseArea.lastEventStrings
 
                         delegate: Rectangle {
                             required property string modelData
@@ -432,32 +436,19 @@ Rectangle {
                     anchors.centerIn: parent
                     sourceSize.width: 48
                     sourceSize.height: 48
-                    visible: eventDragArea.isAddItem
+                    visible: eventMouseArea.isAddItem
                     source: "qrc:/icons/plus.svg"
                     color: view.theme.item.textColor
                 }
             }
-
-            DropArea {
-                anchors.fill: parent
-                anchors.margins: 10
-
-                onEntered: drag => {
-                               if (!eventDragArea.isAddItem) {
-                                   visualModel.items.move(
-                                       drag.source.DelegateModel.itemsIndex,
-                                       eventDragArea.DelegateModel.itemsIndex)
-                               }
-                           }
-            }
         }
     }
 
     DelegateModel {
         id: visualModel
 
         model: (tabBar.currentItem === null) ? null : tabBar.currentMonitoringModel
-        delegate: tabBar.currentType === DashboardItem.DashboardType.Events ? eventDragDelegate : dragDelegate
+        delegate: tabBar.currentType === DashboardItem.DashboardType.Events ? eventDelegate : dragDelegate
     }
 
     Flickable {