Allow ordering the hosts list

nymea-app/configuredhostsmodel.cpp

@@ -115,6 +115,20 @@ void ConfiguredHostsModel::removeHost(int index)
     }
 }
 
+void ConfiguredHostsModel::move(int from, int to)
+{
+    // QList's and QAbstractItemModel's move implementation differ when moving an item up the list :/
+    // While QList needs the index in the resulting list, beginMoveRows expects it to be in the current list
+    // adjust the model's index by +1 in case we're moving upwards
+    int newModelIndex = to > from ? to+1 : to;
+
+    qWarning() << "from:" << from << "to" << to << "modelTo" << newModelIndex;
+    beginMoveRows(QModelIndex(), from, from, QModelIndex(), newModelIndex);
+    m_list.move(from, to);
+    saveToDisk();
+    endMoveRows();
+}
+
 int ConfiguredHostsModel::indexOf(ConfiguredHost *host) const
 {
     return m_list.indexOf(host);

nymea-app/configuredhostsmodel.h

@@ -60,6 +60,7 @@ public:
     Q_INVOKABLE ConfiguredHost* get(int index) const;
     Q_INVOKABLE ConfiguredHost* createHost();
     Q_INVOKABLE void removeHost(int index);
+    Q_INVOKABLE void move(int from, int to);
 
 signals:
     void countChanged();

nymea-app/images.qrc

@@ -304,5 +304,6 @@
         <file>ui/images/sensors/window-open.svg</file>
         <file>ui/images/infinity.svg</file>
         <file>ui/images/edit-paste.svg</file>
+        <file>ui/images/list-move.svg</file>
     </qresource>
 </RCC>

nymea-app/ui/MainMenu.qml

@@ -33,6 +33,7 @@ Drawer {
         spacing: 0
 
         Rectangle {
+            id: upperPart
             Layout.fillWidth: true
             Layout.preferredHeight: topSectionLayout.implicitHeight
             color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.05))
@@ -66,21 +67,31 @@ Drawer {
                     }
                 }
 
-
+                ListView {
-                Repeater {
+                    id: hostsListView
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: count * Style.smallDelegateHeight
                     model: root.configuredHosts
+                    clip: true
+                    interactive: false
+                    moveDisplaced: Transition {
+                        NumberAnimation { property: "y"; duration: Style.animationDuration; easing.type: Easing.InOutQuad }
+                    }
+
                     delegate: NymeaItemDelegate {
                         id: hostDelegate
+                        width: hostsListView.width
+                        visible: !dndArea.dragging || dndArea.draggedIndex !== index
 
                         readonly property ConfiguredHost configuredHost: root.configuredHosts.get(index)
 
-                        Layout.fillWidth: true
                         text: model.name.length > 0 ? model.name : qsTr("New connection")
                         subText: configuredHost.engine.jsonRpcClient.currentConnection ? configuredHost.engine.jsonRpcClient.currentConnection.url : ""
                         prominentSubText: false
                         progressive: false
                         additionalItem: RowLayout {
                             anchors.verticalCenter: parent.verticalCenter
+                            visible: !dndArea.dragging
                             Rectangle {
                                 height: Style.smallIconSize
                                 width: height
@@ -97,7 +108,7 @@ Drawer {
                                 onClicked: {
                                     tokenSettings.setValue(hostDelegate.configuredHost.uuid, "")
                                     configuredHostsModel.removeHost(index)
-                                }                                
+                                }
 
                                 Settings {
                                     id: tokenSettings
@@ -105,26 +116,94 @@ Drawer {
                                 }
                             }
                         }
-                        onClicked: {
+
-                            if (topSectionLayout.configureConnections) {
+                        MouseArea {
-                                var nymeaHost = nymeaDiscovery.nymeaHosts.find(hostDelegate.configuredHost.uuid);
+                            anchors.fill: parent
-                                if (nymeaHost) {
+
-                                    var connectionInfoDialog = Qt.createComponent("/ui/components/ConnectionInfoDialog.qml")
+                            onClicked: {
-                                    var popup = connectionInfoDialog.createObject(app,{nymeaEngine: configuredHost.engine, nymeaHost: nymeaHost})
+                                if (topSectionLayout.configureConnections) {
-                                    popup.open()
+                                    var nymeaHost = nymeaDiscovery.nymeaHosts.find(hostDelegate.configuredHost.uuid);
-                                    popup.connectionSelected.connect(function(connection) {
+                                    if (nymeaHost) {
-                                        print("...")
+                                        var connectionInfoDialog = Qt.createComponent("/ui/components/ConnectionInfoDialog.qml")
-                                        configuredHost.engine.jsonRpcClient.disconnectFromHost();
+                                        var popup = connectionInfoDialog.createObject(app,{nymeaEngine: configuredHost.engine, nymeaHost: nymeaHost})
-                                        configuredHost.engine.jsonRpcClient.connectToHost(nymeaHost, connection)
+                                        popup.open()
-                                        configuredHostsModel.currentIndex = index
+                                        popup.connectionSelected.connect(function(connection) {
-                                        root.close()
+                                            print("...")
-                                    })
+                                            configuredHost.engine.jsonRpcClient.disconnectFromHost();
+                                            configuredHost.engine.jsonRpcClient.connectToHost(nymeaHost, connection)
+                                            configuredHostsModel.currentIndex = index
+                                            root.close()
+                                        })
+                                    }
+                                } else {
+                                    configuredHostsModel.currentIndex = index
+                                    root.close()
                                 }
-                            } else {
-                                configuredHostsModel.currentIndex = index
-                                root.close()
                             }
                         }
+
+                    }
+
+                    NymeaItemDelegate {
+                        id: fakeDragItem
+                        visible: dndArea.dragging
+                        width: hostsListView.width
+                        prominentSubText: false
+                        progressive: false
+                        background: Rectangle {
+                            color: Style.tileBackgroundColor
+                        }
+                        additionalItem: ColorIcon {
+                            anchors.verticalCenter: parent.verticalCenter
+                            size: Style.iconSize
+                            name: "list-move"
+                        }
+                    }
+
+                    MouseArea {
+                        id: dndArea
+                        anchors.fill: parent
+                        propagateComposedEvents: true
+                        preventStealing: dragging
+                        property int draggedIndex: -1
+                        property bool dragging: false
+                        property int startY: 0
+                        property int originY: 0
+
+                        onPressed: {
+                            startY = mouseY
+                        }
+
+                        onPressAndHold: {
+                            draggedIndex = hostsListView.indexAt(mouseX, startY)
+                            var draggedItem = hostsListView.itemAt(mouseX, startY)
+                            fakeDragItem.text = draggedItem.text
+                            fakeDragItem.subText = draggedItem.subText
+                            fakeDragItem.y = draggedItem.y
+                            originY = draggedItem.y
+                            dragging = true
+                        }
+
+                        onMouseYChanged: {
+                            if (!dragging) {
+                                return;
+                            }
+                            var diff = startY - mouseY
+                            fakeDragItem.y = Math.max(0, Math.min(hostsListView.height - fakeDragItem.height, originY - diff))
+
+                            var hoveredIdx = hostsListView.indexAt(mouseX, mouseY)
+                            if (hoveredIdx >= 0 && draggedIndex != hoveredIdx) {
+                                print("moved", draggedIndex, "to", hoveredIdx)
+                                root.configuredHosts.move(draggedIndex, hoveredIdx)
+                                draggedIndex = hoveredIdx;
+                            }
+                        }
+
+                        onReleased: {
+                            dragging = false
+                        }
+
+
                     }
                 }
 
@@ -148,6 +227,7 @@ Drawer {
             }
         }
 
+
         Flickable {
             Layout.fillWidth: true
             Layout.fillHeight: true
@@ -181,8 +261,8 @@ Drawer {
                     iconName: "../images/magic.svg"
                     progressive: false
                     visible: root.currentEngine && root.currentEngine.jsonRpcClient.currentHost
-                                 && NymeaUtils.hasPermissionScope(root.currentEngine.jsonRpcClient.permissions, UserInfo.PermissionScopeConfigureRules)
+                             && NymeaUtils.hasPermissionScope(root.currentEngine.jsonRpcClient.permissions, UserInfo.PermissionScopeConfigureRules)
-                                 && root.currentEngine.jsonRpcClient.connected && Configuration.magicEnabled
+                             && root.currentEngine.jsonRpcClient.connected && Configuration.magicEnabled
                     onClicked: {
                         root.openMagicSettings();
                         root.close();
@@ -252,11 +332,11 @@ Drawer {
         }
     }
 
-//    Component {
+    //    Component {
-//        id: hostConnectionInfoComponent
+    //        id: hostConnectionInfoComponent
-//        MeaDialog {
+    //        MeaDialog {
 
-//        }
+    //        }
-//    }
+    //    }
 }
 

nymea-app/ui/images/list-move.svg

@@ -0,0 +1,187 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="96"
+   height="96"
+   id="svg4874"
+   version="1.1"
+   inkscape:version="0.91+devel r"
+   viewBox="0 0 96 96.000001"
+   sodipodi:docname="sort-listitem03a.svg">
+  <defs
+     id="defs4876">
+    <clipPath
+       id="clipPath16"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18"
+         d="m 0,595.28 841.89,0 L 841.89,0 0,0 0,595.28 Z" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.2057594"
+     inkscape:cx="79.211024"
+     inkscape:cy="71.001013"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4780"
+     showgrid="true"
+     showborder="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5451"
+       empspacing="8" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="8,-8.0000001"
+       id="guide4063" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,-8.0000001"
+       id="guide4065" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,88.000001"
+       id="guide4067" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,92.000001"
+       id="guide4069" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="104,4"
+       id="guide4071" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,8.0000001"
+       id="guide4073" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="92,-8.0000001"
+       id="guide4075" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="88,-8.0000001"
+       id="guide4077" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,84.000001"
+       id="guide4074" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="12,-8.0000001"
+       id="guide4076" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,12"
+       id="guide4078" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="84,-9.0000001"
+       id="guide4080" />
+    <sodipodi:guide
+       position="48,-8.0000001"
+       orientation="1,0"
+       id="guide4170" />
+    <sodipodi:guide
+       position="-8,48"
+       orientation="0,1"
+       id="guide4172" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(67.857146,-78.50504)">
+    <g
+       transform="matrix(0,-1,-1,0,373.50506,516.50504)"
+       id="g4845"
+       style="display:inline">
+      <g
+         inkscape:export-ydpi="90"
+         inkscape:export-xdpi="90"
+         inkscape:export-filename="next01.png"
+         transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)"
+         id="g4778"
+         inkscape:label="Layer 1">
+        <g
+           transform="matrix(-1,0,0,1,575.99999,611)"
+           id="g4780"
+           style="display:inline">
+          <rect
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:4;marker:none;enable-background:accumulate"
+             id="rect4782"
+             width="96.037987"
+             height="96"
+             x="-438.00244"
+             y="345.36221"
+             transform="scale(-1,1)" />
+          <path
+             inkscape:connector-curvature="0"
+             id="path4225"
+             d="m 381.98021,433.36221 v -80"
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:4.00079107;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+          <path
+             style="display:inline;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999988"
+             d="m 429.99874,393.36619 -0.18503,0.41182 c -0.66598,1.46989 -1.50147,3.11592 -2.60689,5.03834 -1.19645,2.0804 -2.54815,4.22409 -4.05415,6.4305 -1.36027,1.9933 -2.83398,3.9407 -4.36191,5.8638 l -1.79717,2.26134 v -6.11344 l 0.20885,-0.26786 h -0.002 c 0.87152,-1.13758 1.72636,-2.30012 2.55925,-3.51136 1.05357,-1.53141 2.0436,-3.09704 2.96963,-4.69942 0.92293,-1.59751 2.05054,-3.84298 2.77725,-5.37363 l 0.004,-0.009 0.011,-0.02 0.004,-0.009 -0.009,-0.02 0.0348,0.0601 c -0.0419,-0.0625 -0.0284,-0.0296 -0.0586,-0.11662 l 0.0201,0.0474 c -0.72653,-1.53107 -1.85811,-3.78441 -2.78276,-5.38457 -0.92602,-1.60235 -1.91602,-3.1695 -2.96962,-4.70124 -0.83267,-1.2106 -1.68805,-2.37236 -2.55926,-3.50953 l -0.20701,-0.26969 v -3.23073 -2.88088 l 1.79715,2.25951 c 1.52786,1.92297 3.00168,3.87243 4.36192,5.86562 v 0.002 l 0.0806,0.11662 v 0.0109 c 1.46987,2.15951 2.80105,4.26225 3.97363,6.30114 1.10507,1.92178 1.94085,3.56666 2.6069,5.03653 l 0.0989,0.22048 z"
+             id="path5751"
+             inkscape:connector-curvature="0" />
+          <path
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:4.00079107;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+             d="m 397.98657,433.36221 v -80"
+             id="path4324"
+             inkscape:connector-curvature="0" />
+          <path
+             inkscape:connector-curvature="0"
+             id="path4226"
+             d="m 349.96763,393.36619 0.18503,0.41182 c 0.66598,1.46989 1.50147,3.11592 2.60689,5.03834 1.19645,2.0804 2.54815,4.22409 4.05415,6.4305 1.36027,1.9933 2.83398,3.9407 4.36191,5.8638 l 1.79717,2.26134 v -6.11344 l -0.20885,-0.26786 h 0.002 c -0.87152,-1.13758 -1.72636,-2.30012 -2.55925,-3.51136 -1.05357,-1.53141 -2.0436,-3.09704 -2.96963,-4.69942 -0.92293,-1.59751 -2.05054,-3.84298 -2.77725,-5.37363 l -0.004,-0.009 -0.011,-0.02 -0.004,-0.009 0.009,-0.02 -0.0348,0.0601 c 0.0419,-0.0625 0.0284,-0.0296 0.0586,-0.11662 l -0.0201,0.0474 c 0.72653,-1.53107 1.85811,-3.78441 2.78276,-5.38457 0.92602,-1.60235 1.91602,-3.1695 2.96962,-4.70124 0.83267,-1.2106 1.68805,-2.37236 2.55926,-3.50953 l 0.20701,-0.26969 v -3.23073 -2.88088 l -1.79715,2.25951 c -1.52786,1.92297 -3.00168,3.87243 -4.36192,5.86562 v 0.002 l -0.0806,0.11662 v 0.0109 c -1.46987,2.15951 -2.80105,4.26225 -3.97363,6.30114 -1.10507,1.92178 -1.94085,3.56666 -2.6069,5.03653 l -0.0989,0.22048 z"
+             style="display:inline;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999988" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>