Merge PR #420: Rearrange some connectivity icons

nymea-app/images.qrc

@@ -61,14 +61,10 @@
         <file>ui/images/audio-speakers-muted-symbolic.svg</file>
         <file>ui/images/audio-speakers-symbolic.svg</file>
         <file>ui/images/back.svg</file>
-        <file>ui/images/bluetooth.svg</file>
         <file>ui/images/Built_with_Qt_RGB_logo_vertical.svg</file>
         <file>ui/images/Built_with_Qt_RGB_logo.svg</file>
         <file>ui/images/clock-app-symbolic.svg</file>
         <file>ui/images/close.svg</file>
-        <file>ui/images/cloud-error.svg</file>
-        <file>ui/images/cloud-offline.svg</file>
-        <file>ui/images/cloud.svg</file>
         <file>ui/images/configure.svg</file>
         <file>ui/images/contact-new.svg</file>
         <file>ui/images/delete.svg</file>
@@ -101,21 +97,7 @@
         <file>ui/images/media-skip-forward.svg</file>
         <file>ui/images/media.svg</file>
         <file>ui/images/navigation-menu.svg</file>
-        <file>ui/images/network-secure.svg</file>
-        <file>ui/images/network-vpn.svg</file>
-        <file>ui/images/network-wifi.svg</file>
-        <file>ui/images/network-wired.svg</file>
         <file>ui/images/next.svg</file>
-        <file>ui/images/nm-signal-00-secure.svg</file>
-        <file>ui/images/nm-signal-00.svg</file>
-        <file>ui/images/nm-signal-25-secure.svg</file>
-        <file>ui/images/nm-signal-25.svg</file>
-        <file>ui/images/nm-signal-50-secure.svg</file>
-        <file>ui/images/nm-signal-50.svg</file>
-        <file>ui/images/nm-signal-75-secure.svg</file>
-        <file>ui/images/nm-signal-75.svg</file>
-        <file>ui/images/nm-signal-100-secure.svg</file>
-        <file>ui/images/nm-signal-100.svg</file>
         <file>ui/images/non-starred.svg</file>
         <file>ui/images/notification.svg</file>
         <file>ui/images/nymea-box-setup.svg</file>
@@ -171,8 +153,6 @@
         <file>ui/images/edit-copy.svg</file>
         <file>ui/images/stock_website.svg</file>
         <file>ui/images/sdk.svg</file>
-        <file>ui/images/network-wifi-offline.svg</file>
-        <file>ui/images/network-wired-offline.svg</file>
         <file>ui/images/preferences-look-and-feel.svg</file>
         <file>ui/images/sensors/closable.svg</file>
         <file>ui/images/lock-closed.svg</file>
@@ -235,5 +215,26 @@
         <file>ui/images/navigationpad.svg</file>
         <file>ui/images/qrcode.svg</file>
         <file>ui/images/energy.svg</file>
+        <file>ui/images/connections/cloud.svg</file>
+        <file>ui/images/connections/cloud-error.svg</file>
+        <file>ui/images/connections/cloud-offline.svg</file>
+        <file>ui/images/connections/network-secure.svg</file>
+        <file>ui/images/connections/network-vpn.svg</file>
+        <file>ui/images/connections/network-wifi.svg</file>
+        <file>ui/images/connections/network-wifi-offline.svg</file>
+        <file>ui/images/connections/network-wired.svg</file>
+        <file>ui/images/connections/network-wired-offline.svg</file>
+        <file>ui/images/connections/nm-signal-00.svg</file>
+        <file>ui/images/connections/nm-signal-00-secure.svg</file>
+        <file>ui/images/connections/nm-signal-25.svg</file>
+        <file>ui/images/connections/nm-signal-25-secure.svg</file>
+        <file>ui/images/connections/nm-signal-50.svg</file>
+        <file>ui/images/connections/nm-signal-50-secure.svg</file>
+        <file>ui/images/connections/nm-signal-75.svg</file>
+        <file>ui/images/connections/nm-signal-75-secure.svg</file>
+        <file>ui/images/connections/nm-signal-100.svg</file>
+        <file>ui/images/connections/nm-signal-100-secure.svg</file>
+        <file>ui/images/connections/bluetooth.svg</file>
+        <file>ui/images/connections/network-wired-disabled.svg</file>
     </qresource>
 </RCC>

nymea-app/resources.qrc

@@ -222,5 +222,6 @@
         <file>ui/components/ConnectionStatusIcon.qml</file>
         <file>ui/components/BatteryStatusIcon.qml</file>
         <file>ui/components/SetupStatusIcon.qml</file>
+        <file>ui/components/UpdateStatusIcon.qml</file>
     </qresource>
 </RCC>

nymea-app/ui/MainPage.qml

@@ -52,13 +52,13 @@ Page {
             case Connection.BearerTypeLan:
             case Connection.BearerTypeWan:
                 if (engine.jsonRpcClient.availableBearerTypes & NymeaConnection.BearerTypeEthernet != NymeaConnection.BearerTypeNone) {
-                    return "../images/network-wired.svg"
+                    return "../images/connections/network-wired.svg"
                 }
-                return "../images/network-wifi.svg";
+                return "../images/connections/network-wifi.svg";
             case Connection.BearerTypeBluetooth:
-                return "../images/network-wifi.svg";
+                return "../images/connections/network-wifi.svg";
             case Connection.BearerTypeCloud:
-                return "../images/cloud.svg"
+                return "../images/connections/cloud.svg"
             case Connection.BearerTypeLoopback:
                 return "qrc:/styles/%1/logo.svg".arg(styleController.currentStyle)
             }
@@ -579,15 +579,15 @@ Page {
                 case Connection.BearerTypeLan:
                 case Connection.BearerTypeWan:
                     if (engine.jsonRpcClient.availableBearerTypes & NymeaConnection.BearerTypeEthernet != NymeaConnection.BearerTypeNone) {
-                        return "../images/network-wired.svg"
+                        return "../images/connections/network-wired.svg"
                     }
-                    return "../images/network-wifi.svg";
+                    return "../images/connections/network-wifi.svg";
                 case Connection.BearerTypeBluetooth:
-                    return "../images/network-wifi.svg";
+                    return "../images/connections/bluetooth.svg";
                 case Connection.BearerTypeCloud:
-                    return "../images/cloud.svg"
+                    return "../images/connections/cloud.svg"
                 case Connection.BearerTypeLoopback:
-                    return "../images/network-wired.svg"
+                    return "../images/connections/network-wired.svg"
                 }
                 return ""
             }

nymea-app/ui/Nymea.qml

@@ -271,7 +271,7 @@ ApplicationWindow {
         case "weather":
             return Qt.resolvedUrl("images/weather-app-symbolic.svg")
         case "gateway":
-            return Qt.resolvedUrl("images/network-wired.svg")
+            return Qt.resolvedUrl("images/connections/network-wired.svg")
         case "notifications":
             return Qt.resolvedUrl("images/messaging-app-symbolic.svg")
         case "inputtrigger":

nymea-app/ui/SettingsPage.qml

@@ -94,7 +94,7 @@ Page {
                 padding: 0
                 NymeaListItemDelegate {
                     width: parent.width
-                    iconName: "../images/network-wifi.svg"
+                    iconName: "../images/connections/network-wifi.svg"
                     text: qsTr("Networking")
                     subText: qsTr("Configure the system's network connection")
                     prominentSubText: false
@@ -111,7 +111,7 @@ Page {
                 padding: 0
                 NymeaListItemDelegate {
                     width: parent.width
-                    iconName: "../images/cloud.svg"
+                    iconName: "../images/connections/cloud.svg"
                     text: qsTr("Cloud")
                     subText: qsTr("Connect this %1:core to %1:cloud").arg(app.systemName)
                     prominentSubText: false
@@ -127,7 +127,7 @@ Page {
                 padding: 0
                 NymeaListItemDelegate {
                     width: parent.width
-                    iconName: "../images/network-vpn.svg"
+                    iconName: "../images/connections/network-vpn.svg"
                     text: qsTr("API interfaces")
                     prominentSubText: false
                     wrapTexts: false

nymea-app/ui/appsettings/AppSettingsPage.qml

@@ -78,7 +78,7 @@ Page {
                     width: parent.width
                     text: qsTr("Cloud login")
                     subText: qsTr("Log into %1:cloud and manage connected %1:core systems").arg(app.systemName)
-                    iconName: "../images/cloud.svg"
+                    iconName: "../images/connections/cloud.svg"
                     prominentSubText: false
                     wrapTexts: false
                     onClicked: pageStack.push(Qt.resolvedUrl("CloudLoginPage.qml"))

nymea-app/ui/appsettings/CloudLoginPage.qml

@@ -120,8 +120,8 @@ SettingsPageBase {
                 progressive: false
                 prominentSubText: false
                 canDelete: true
-                iconName: "../images/cloud.svg"
+                iconName: "../images/connections/cloud.svg"
-                secondaryIconName: !model.online ? "../images/cloud-error.svg" : ""
+                secondaryIconName: !model.online ? "../images/connections/cloud-error.svg" : ""
 
                 onClicked: {
                     print("clicked, connected:", engine.jsonRpcClient.connected, model.id)

nymea-app/ui/components/ConnectionStatusIcon.qml

@@ -15,17 +15,17 @@ ColorIcon {
 
     name: {
         if (!isWireless) {
-            return connectedState && connectedState.value === true ? "../images/network-wired.svg" : "../images/network-wired-offline.svg"
+            return connectedState && connectedState.value === true ? "../images/connections/network-wired.svg" : "../images/connections/network-wired-offline.svg"
         }
         if (connectedState && connectedState.value === false) {
-            return "../images/network-wifi-offline.svg"
+            return "../images/connections/nm-signal-00.svg"
         }
 
-        if (signalStrengthState && signalStrengthState.value === -1) {
+        if (!signalStrengthState) {
-            return "../images/network-wifi.svg"
+            return "../images/connections/nm-signal-100.svg"
         }
 
-        return "../images/nm-signal-" + NymeaUtils.pad(Math.round(signalStrengthState.value * 4 / 100) * 25, 2) + ".svg"
+        return "../images/connections/nm-signal-" + NymeaUtils.pad(Math.round(signalStrengthState.value * 4 / 100) * 25, 2) + ".svg"
     }
 
     color: connectedState && connectedState.value === false

nymea-app/ui/components/MainPageTile.qml

@@ -151,7 +151,7 @@ Item {
         ColorIcon {
             height: app.iconSize / 2
             width: height
-            name: root.isWireless ? "../images/network-wifi-offline.svg" : "../images/network-wired-offline.svg"
+            name: root.isWireless ? "../images/connections/nm-signal-00.svg" : "../images/connections/network-wired-offline.svg"
             color: root.disconnected ? "red" : "orange"
             visible: root.setupStatus == Thing.ThingSetupStatusComplete && (root.disconnected || (root.isWireless && root.signalStrength < 20))
         }

nymea-app/ui/components/SetupStatusIcon.qml

@@ -13,4 +13,11 @@ ColorIcon {
     name: setupFailed ? "../images/dialog-warning-symbolic.svg"
                       : setupInProgress ?  "../images/settings.svg" : "../images/tick.svg"
     color: setupFailed ? "red" : keyColor
+
+    RotationAnimation on rotation {
+        from: 0; to: 360
+        duration: 2000
+        running: root.setupInProgress
+        loops: Animation.Infinite
+    }
 }

nymea-app/ui/components/UpdateStatusIcon.qml

@@ -0,0 +1,21 @@
+import QtQuick 2.9
+import Nymea 1.0
+
+ColorIcon {
+    id: root
+
+    property Thing thing: null
+
+    readonly property State updateStatusState: thing.stateByName("updateStatus")
+    readonly property bool updateAvailable: updateStatusState && updateStatusState.value === "available"
+    readonly property bool updateRunning: updateStatusState && updateStatusState.value === "updating"
+
+    name: "../images/system-update.svg"
+
+    RotationAnimation on rotation {
+        from: 0; to: 360
+        duration: 2000
+        running: root.updateRunning
+        loops: Animation.Infinite
+    }
+}

nymea-app/ui/connection/ConnectPage.qml

@@ -72,8 +72,8 @@ Page {
             header: FancyHeader {
                 title: qsTr("Connect %1").arg(app.systemName)
                 model: ListModel {
-                    ListElement { iconSource: "../images/network-vpn.svg"; text: qsTr("Manual connection"); page: "ManualConnectPage.qml" }
+                    ListElement { iconSource: "../images/connections/network-vpn.svg"; text: qsTr("Manual connection"); page: "ManualConnectPage.qml" }
-                    ListElement { iconSource: "../images/bluetooth.svg"; text: qsTr("Wireless setup"); page: "wifisetup/BluetoothDiscoveryPage.qml"; }
+                    ListElement { iconSource: "../images/connections/bluetooth.svg"; text: qsTr("Wireless setup"); page: "wifisetup/BluetoothDiscoveryPage.qml"; }
                     ListElement { iconSource: "../images/private-browsing.svg"; text: qsTr("Demo mode"); page: "" }
                     ListElement { iconSource: "../images/stock_application.svg"; text: qsTr("App settings"); page: "../appsettings/AppSettingsPage.qml" }
                 }
@@ -166,13 +166,13 @@ Page {
                             case Connection.BearerTypeLan:
                             case Connection.BearerTypeWan:
                                 if (engine.jsonRpcClient.availableBearerTypes & NymeaConnection.BearerTypeEthernet != NymeaConnection.BearerTypeNone) {
-                                    return "../images/network-wired.svg"
+                                    return "../images/connections/network-wired.svg"
                                 }
-                                return "../images/network-wifi.svg";
+                                return "../images/connections/network-wifi.svg";
                             case Connection.BearerTypeBluetooth:
-                                return "../images/bluetooth.svg";
+                                return "../images/connections/bluetooth.svg";
                             case Connection.BearerTypeCloud:
-                                return "../images/cloud.svg"
+                                return "../images/connections/cloud.svg"
                             case Connection.BearerTypeLoopback:
                                 return "qrc:/styles/%1/logo.svg".arg(styleController.currentStyle)
                             }
@@ -186,8 +186,8 @@ Page {
                         progressive: false
                         property bool isSecure: nymeaHost.connections.get(defaultConnectionIndex).secure
                         property bool isOnline: nymeaHost.connections.get(defaultConnectionIndex).bearerType !== Connection.BearerTypeWan ? nymeaHost.connections.get(defaultConnectionIndex).online : true
-                        tertiaryIconName: isSecure ? "../images/network-secure.svg" : ""
+                        tertiaryIconName: isSecure ? "../images/connections/network-secure.svg" : ""
-                        secondaryIconName: !isOnline ? "../images/cloud-error.svg" : ""
+                        secondaryIconName: !isOnline ? "../images/connections/cloud-error.svg" : ""
                         secondaryIconColor: "red"
 
                         onClicked: {
@@ -378,21 +378,21 @@ Page {
                                     case Connection.BearerTypeLan:
                                     case Connection.BearerTypeWan:
                                         if (engine.jsonRpcClient.availableBearerTypes & NymeaConnection.BearerTypeEthernet != NymeaConnection.BearerTypeNone) {
-                                            return "../images/network-wired.svg"
+                                            return "../images/connections/network-wired.svg"
                                         }
-                                        return "../images/network-wifi.svg";
+                                        return "../images/connections/network-wifi.svg";
                                     case Connection.BearerTypeBluetooth:
-                                        return "../images/bluetooth.svg";
+                                        return "../images/connections/bluetooth.svg";
                                     case Connection.BearerTypeCloud:
-                                        return "../images/cloud.svg"
+                                        return "../images/connections/cloud.svg"
                                     case Connection.BearerTypeLoopback:
-                                        return "../images/network-wired.svg"
+                                        return "../images/connections/network-wired.svg"
                                     }
                                     return ""
                                 }
 
-                                tertiaryIconName: model.secure ? "../images/network-secure.svg" : ""
+                                tertiaryIconName: model.secure ? "../images/connections/network-secure.svg" : ""
-                                secondaryIconName: !model.online ? "../images/cloud-error.svg" : ""
+                                secondaryIconName: !model.online ? "../images/connections/cloud-error.svg" : ""
                                 secondaryIconColor: "red"
 
                                 onClicked: {

nymea-app/ui/connection/wifisetup/BluetoothDiscoveryPage.qml

@@ -119,7 +119,7 @@ Page {
 
             delegate: NymeaListItemDelegate {
                 width: parent.width
-                iconName: Qt.resolvedUrl("../../images/bluetooth.svg")
+                iconName: Qt.resolvedUrl("../../images/connections/bluetooth.svg")
                 text: model.name
                 subText: model.address
 

nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml

@@ -83,30 +83,30 @@ Page {
                 iconName:  {
                     if (model.protected) {
                         if (model.signalStrength <= 25)
-                            return  Qt.resolvedUrl("../../images/nm-signal-25-secure.svg")
+                            return  Qt.resolvedUrl("../../images/connections/nm-signal-25-secure.svg")
 
                         if (model.signalStrength <= 50)
-                            return  Qt.resolvedUrl("../../images/nm-signal-50-secure.svg")
+                            return  Qt.resolvedUrl("../../images/connections/nm-signal-50-secure.svg")
 
                         if (model.signalStrength <= 75)
-                            return  Qt.resolvedUrl("../../images/nm-signal-75-secure.svg")
+                            return  Qt.resolvedUrl("../../images/connections/nm-signal-75-secure.svg")
 
                         if (model.signalStrength <= 100)
-                            return  Qt.resolvedUrl("../../images/nm-signal-100-secure.svg")
+                            return  Qt.resolvedUrl("../../images/connections/nm-signal-100-secure.svg")
 
                     } else {
 
                         if (model.signalStrength <= 25)
-                            return  Qt.resolvedUrl("../../images/nm-signal-25.svg")
+                            return  Qt.resolvedUrl("../../images/connections/nm-signal-25.svg")
 
                         if (model.signalStrength <= 50)
-                            return  Qt.resolvedUrl("../../images/nm-signal-50.svg")
+                            return  Qt.resolvedUrl("../../images/connections/nm-signal-50.svg")
 
                         if (model.signalStrength <= 75)
-                            return  Qt.resolvedUrl("../../images/nm-signal-75.svg")
+                            return  Qt.resolvedUrl("../../images/connections/nm-signal-75.svg")
 
                         if (model.signalStrength <= 100)
-                            return  Qt.resolvedUrl("../../images/nm-signal-100.svg")
+                            return  Qt.resolvedUrl("../../images/connections/nm-signal-100.svg")
 
                     }
                 }

nymea-app/ui/delegates/ThingDelegate.qml

@@ -40,16 +40,35 @@ NymeaListItemDelegate {
     iconName: thing && thing.thingClass ? app.interfacesToIcon(thing.thingClass.interfaces) : ""
     text: thing ? thing.name : ""
     progressive: true
-    secondaryIconName: batteryCritical ? "../images/battery/battery-010.svg" : ""
+    secondaryIconName: thing.setupStatus == Thing.ThingSetupStatusComplete && batteryCritical ? "../images/battery/battery-010.svg" : ""
-    tertiaryIconName: thing.setupStatus == Thing.ThingSetupStatusFailed
+    tertiaryIconName: {
-                      ? "../images/dialog-warning-symbolic.svg"
+        if (thing.setupStatus == Thing.ThingSetupStatusFailed) {
-                      : thing.setupStatus == Thing.ThingSetupStatusInProgress
+            return "../images/dialog-warning-symbolic.svg";
-                        ? "../images/settings.svg"
+        }
-                        : disconnected
+        if (thing.setupStatus == Thing.ThingSetupStatusInProgress) {
-                          ? isWireless
+            return "../images/settings.svg"
-                            ? "../images/network-wifi-offline.svg" : "../images/network-wired-offline.svg"
+        }
-                          : ""
+        if (connectedState && connectedState.value === false) {
-    tertiaryIconColor: thing.setupStatus == Thing.ThingSetupStatusInProgress ? iconKeyColor : "red"
+            if (!isWireless) {
+                return "../images/connections/network-wired-offline.svg"
+            }
+            return "../images/connections/nm-signal-00.svg"
+        }
+        return ""
+    }
+
+    tertiaryIconColor: {
+        if (thing.setupStatus == Thing.ThingSetupStatusFailed) {
+            return "red"
+        }
+        if (thing.setupStatus == Thing.ThingSetupStatusInProgress) {
+            return iconKeyColor
+        }
+        if (connectedState && connectedState.value === false) {
+            return "red"
+        }
+        return iconKeyColor
+    }
 
     property Device device: null
     property Thing thing: device
@@ -65,6 +84,5 @@ NymeaListItemDelegate {
     readonly property bool disconnected: connectedState && connectedState.value === false ? true : false
 
     readonly property bool isWireless: root.thing.thingClass.interfaces.indexOf("wirelessconnectable") >= 0
-
+    readonly property State signalStrengthState: root.thing.stateByName("signalStrength")
-
 }

nymea-app/ui/devicepages/DevicePageBase.qml

@@ -227,7 +227,7 @@ Page {
 
     Rectangle {
         id: infoPane
-        visible: setupInProgress || setupFailure || batteryState !== null || (connectedState !== null && connectedState.value === false)
+        visible: setupInProgress || setupFailure || batteryState !== null || (connectedState !== null && connectedState.value === false) || isWireless || updateAvailable
         height: visible ? contentRow.implicitHeight : 0
         anchors { left: parent.left; top: parent.top; right: parent.right }
         property bool setupInProgress: root.thing.setupStatus == Thing.ThingSetupStatusInProgress
@@ -235,10 +235,17 @@ Page {
         property State batteryState: root.thing.stateByName("batteryLevel")
         property State batteryCriticalState: root.thing.stateByName("batteryCritical")
         property State connectedState: root.thing.stateByName("connected")
+        property State signalStrengthState: root.thing.stateByName("signalStrength")
+        property State updateStatusState: root.thing.stateByName("updateStatus")
+        property bool updateAvailable: updateStatusState && updateStatusState.value === "available"
+        property bool updateRunning: updateStatusState && updateStatusState.value === "updating"
+        property bool isWireless: root.thingClass.interfaces.indexOf("wirelessconnectable") >= 0
         property bool alertState: setupFailure ||
                                   (connectedState !== null && connectedState.value === false) ||
                                   (batteryCriticalState !== null && batteryCriticalState.value === true)
-        color: alertState ? "red" : "transparent"
+        property bool highlightState: updateAvailable || updateRunning
+        color: alertState ? "red"
+                : infoPane.highlightState ? app.accentColor : "transparent"
         z: 1000
 
         RowLayout {
@@ -256,17 +263,29 @@ Page {
                               (root.device.setupDisplayMessage.length > 0 ? root.device.setupDisplayMessage : qsTr("Thing setup failed!"))
                             : (infoPane.connectedState !== null && infoPane.connectedState.value === false) ?
                                   qsTr("Thing is not connected!")
-                                : qsTr("Thing runs out of battery!")
+                                : infoPane.updateAvailable ?
-                visible: infoPane.alertState
+                                      qsTr("Update available!")
+                                    : infoPane.updateRunning ?
+                                          qsTr("Updating...")
+                                        : qsTr("Thing runs out of battery!")
+                visible: infoPane.alertState || infoPane.updateAvailable || infoPane.updateRunning
                 font.pixelSize: app.smallFont
                 color: "white"
             }
 
+            UpdateStatusIcon {
+                height: app.iconSize / 2
+                width: height
+                thing: root.thing
+                color: infoPane.alertState || infoPane.highlightState ? "white" : keyColor
+                visible: updateAvailable || updateRunning
+            }
+
             BatteryStatusIcon {
                 height: app.iconSize / 2
                 width: height * 1.23
                 thing: root.thing
-                color: infoPane.alertState ? "white" : keyColor
+                color: infoPane.alertState || infoPane.highlightState ? "white" : keyColor
                 visible: thing.setupStatus == Thing.ThingSetupStatusComplete && (hasBatteryLevel || isCritical)
             }
 
@@ -274,7 +293,7 @@ Page {
                 height: app.iconSize / 2
                 width: height
                 thing: root.thing
-                color: infoPane.alertState ? "white" : keyColor
+                color: infoPane.alertState || infoPane.highlightState ? "white" : keyColor
                 visible: thing.setupStatus == Thing.ThingSetupStatusComplete && (hasSignalStrength || !isConnected)
             }
 
@@ -282,7 +301,7 @@ Page {
                 height: app.iconSize / 2
                 width: height
                 thing: root.thing
-                color: infoPane.alertState ? "white" : keyColor
+                color: infoPane.alertState || infoPane.highlightState ? "white" : keyColor
                 visible: setupFailed || setupInProgress
             }
         }

nymea-app/ui/images/connections/network-wired-offline.svg

@@ -0,0 +1,169 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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"
+   sodipodi:docname="network-wired-offline.svg"
+   viewBox="0 0 96 96.000001"
+   inkscape:version="1.0 (1.0+r73+1)"
+   version="1.1"
+   id="svg4874"
+   height="96"
+   width="96">
+  <defs
+     id="defs4876" />
+  <sodipodi:namedview
+     inkscape:window-maximized="1"
+     inkscape:window-y="27"
+     inkscape:window-x="60"
+     inkscape:window-height="873"
+     inkscape:window-width="1380"
+     inkscape:document-rotation="0"
+     inkscape:snap-global="true"
+     inkscape:guide-bbox="true"
+     showguides="true"
+     inkscape:snap-center="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-paths="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="true"
+     inkscape:snap-bbox="true"
+     fit-margin-bottom="0"
+     fit-margin-right="0"
+     fit-margin-left="0"
+     fit-margin-top="0"
+     showborder="true"
+     showgrid="true"
+     inkscape:current-layer="g4780"
+     inkscape:document-units="px"
+     inkscape:cy="67.707189"
+     inkscape:cx="45.817725"
+     inkscape:zoom="3.6960105"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base">
+    <inkscape:grid
+       empspacing="8"
+       id="grid5451"
+       type="xygrid" />
+    <sodipodi:guide
+       id="guide4063"
+       position="8,-8.0000001"
+       orientation="1,0" />
+    <sodipodi:guide
+       id="guide4065"
+       position="4,-8.0000001"
+       orientation="1,0" />
+    <sodipodi:guide
+       id="guide4067"
+       position="-8,88.000001"
+       orientation="0,1" />
+    <sodipodi:guide
+       id="guide4069"
+       position="-8,92.000001"
+       orientation="0,1" />
+    <sodipodi:guide
+       id="guide4071"
+       position="104,4"
+       orientation="0,1" />
+    <sodipodi:guide
+       id="guide4073"
+       position="-5,8.0000001"
+       orientation="0,1" />
+    <sodipodi:guide
+       id="guide4077"
+       position="88,-8.0000001"
+       orientation="1,0" />
+    <sodipodi:guide
+       id="guide4074"
+       position="-8,84.000001"
+       orientation="0,1" />
+    <sodipodi:guide
+       id="guide4076"
+       position="12,-8.0000001"
+       orientation="1,0" />
+    <sodipodi:guide
+       id="guide4080"
+       position="84,-8.0000001"
+       orientation="1,0" />
+    <sodipodi:guide
+       id="guide4170"
+       orientation="1,0"
+       position="48,-8.0000001" />
+    <sodipodi:guide
+       id="guide4172"
+       orientation="0,1"
+       position="-8,48" />
+    <sodipodi:guide
+       id="guide4760"
+       orientation="1,0"
+       position="92,-8.0000001" />
+  </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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(67.857146,-78.50504)"
+     id="layer1"
+     inkscape:groupmode="layer"
+     inkscape:label="Layer 1">
+    <g
+       style="display:inline"
+       id="g4845"
+       transform="matrix(0,-1,-1,0,373.50506,516.50504)">
+      <g
+         inkscape:label="Layer 1"
+         id="g4778"
+         transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)"
+         inkscape:export-filename="next01.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90">
+        <g
+           style="display:inline"
+           id="g4780"
+           transform="matrix(-1,0,0,1,575.99999,611)">
+          <rect
+             transform="scale(-1,1)"
+             y="345.36221"
+             x="-438.00244"
+             height="96"
+             width="96.037987"
+             id="rect4782"
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:4;marker:none;enable-background:accumulate" />
+          <path
+             id="path4156"
+             transform="matrix(0,-1,-1.0003957,0,438.00245,441.36222)"
+             d="M 23.976562 8.0019531 C 18.943803 8.0601301 15.26124 7.8815461 12.25 9.5429688 C 10.74438 10.37368 9.5531413 11.778707 8.8945312 13.533203 C 8.2359313 15.287699 7.9980469 17.369641 7.9980469 20 L 7.9980469 76 C 7.9980469 78.630359 8.2359313 80.714254 8.8945312 82.46875 C 9.5531413 84.223246 10.74438 85.62632 12.25 86.457031 C 15.26124 88.118454 18.943803 87.941823 23.976562 88 L 23.988281 88 L 72.009766 88 L 72.021484 88 C 77.054244 87.941823 80.736807 88.118454 83.748047 86.457031 C 85.253667 85.62632 86.444916 84.223246 87.103516 82.46875 C 87.762116 80.714254 88 78.630359 88 76 L 88 20 C 88 17.369641 87.762116 15.287699 87.103516 13.533203 C 86.444916 11.778707 85.253667 10.37368 83.748047 9.5429688 C 80.736807 7.8815461 77.054244 8.0601301 72.021484 8.0019531 L 72.009766 8.0019531 L 23.988281 8.0019531 L 23.976562 8.0019531 z M 24.021484 12 L 71.998047 12 C 77.036307 12.058777 80.350163 12.237002 81.814453 13.044922 C 82.547973 13.449632 82.967112 13.897711 83.357422 14.9375 C 83.747742 15.977279 83.998047 17.630358 83.998047 20 L 83.998047 76 C 83.998047 78.369642 83.747742 80.022711 83.357422 81.0625 C 82.967112 82.102279 82.547973 82.550368 81.814453 82.955078 C 80.350163 83.762988 77.036307 83.941223 71.998047 84 L 71.974609 84 L 24.021484 84 L 24 84 C 18.96042 83.941223 15.648104 83.763108 14.183594 82.955078 C 13.450074 82.550368 13.030935 82.102279 12.640625 81.0625 C 12.250305 80.022711 12 78.369642 12 76 L 12 20 C 12 17.630358 12.250305 15.977279 12.640625 14.9375 C 13.030935 13.897711 13.450074 13.449632 14.183594 13.044922 C 15.650624 12.235492 18.967304 12.058477 24.021484 12 z "
+             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00000048;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+          <path
+             id="path4297"
+             transform="matrix(0,-1,-1.0003957,0,438.00245,441.36222)"
+             d="M 36 25 L 36 30 L 24 30 L 24 70 L 72 70 L 72 30 L 60 30 L 60 25 L 36 25 z M 40 28.998047 L 55.998047 28.998047 L 55.998047 33.998047 L 67.998047 33.998047 L 67.998047 66.001953 L 28 66.001953 L 28 33.998047 L 40 33.998047 L 40 28.998047 z "
+             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00000048;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

nymea-app/ui/magic/EditRulePage.qml

@@ -416,7 +416,7 @@ Page {
                         }
                     }
                     Repeater {
-                        model: ["light-on", "light-off", "alarm-clock", "media-playback-start", "network-secure", "notification", "sensors", "shutter/shutter-050", "attention", "eye"]
+                        model: ["light-on", "light-off", "alarm-clock", "media-playback-start", "connections/network-secure", "notification", "sensors", "shutter/shutter-050", "attention", "eye"]
                         delegate: Item {
                             Layout.fillWidth: true
                             Layout.preferredHeight: app.iconSize + app.margins

nymea-app/ui/system/CloudSettingsPage.qml

@@ -95,10 +95,10 @@ SettingsPageBase {
             Layout.preferredHeight: busyIndicator.height
             Layout.preferredWidth: height
             name: engine.jsonRpcClient.cloudConnectionState === JsonRpcClient.CloudConnectionStateConnected
-                  ? "../images/cloud.svg"
+                  ? "../images/connections/cloud.svg"
                   : engine.jsonRpcClient.cloudConnectionState === JsonRpcClient.CloudConnectionStateUnconfigured
-                    ? "../images/cloud-error.svg"
+                    ? "../images/connections/cloud-error.svg"
-                    : "../images/cloud-offline.svg"
+                    : "../images/connections/cloud-offline.svg"
         }
 
         Label {

nymea-app/ui/system/ConnectionInterfaceDelegate.qml

@@ -37,10 +37,10 @@ import "../components"
 NymeaListItemDelegate {
     text: qsTr("Interface: %1").arg(model.address === "0.0.0.0" ? qsTr("Any") : model.address === "127.0.0.1" ? qsTr("localhost") : model.address)
     subText: qsTr("Port: %1").arg(model.port)
-    iconName: "../images/network-vpn.svg"
+    iconName: "../images/connections/network-vpn.svg"
     progressive: false
     secondaryIconName: "../images/account.svg"
     secondaryIconColor: model.authenticationEnabled ? app.accentColor : secondaryIconKeyColor
-    tertiaryIconName: "../images/network-secure.svg"
+    tertiaryIconName: "../images/connections/network-secure.svg"
     tertiaryIconColor: model.sslEnabled ? app.accentColor : tertiaryIconKeyColor
 }

nymea-app/ui/system/NetworkSettingsPage.qml

@@ -137,7 +137,7 @@ SettingsPageBase {
         ColorIcon {
             Layout.preferredHeight: app.iconSize
             Layout.preferredWidth: app.iconSize
-            name: "../images/network-wired-offline.svg"
+            name: "../images/connections/network-wired-disabled.svg"
         }
         Label {
             Layout.fillWidth: true
@@ -257,7 +257,7 @@ SettingsPageBase {
 
         NymeaListItemDelegate {
             Layout.fillWidth: true
-            iconName: model.pluggedIn ? "../images/network-wired.svg" : "../images/network-wired-offline.svg"
+            iconName: model.pluggedIn ? "../images/connections/network-wired.svg" : "../images/connections/network-wired-offline.svg"
             text: model.interface + " (" + model.macAddress + ")"
             visible: networkManager.available && networkManager.networkingEnabled
             subText: {
@@ -335,21 +335,21 @@ SettingsPageBase {
                 case NetworkDevice.NetworkDeviceStateDisconnected:
                 case NetworkDevice.NetworkDeviceStateDeactivating:
                 case NetworkDevice.NetworkDeviceStateFailed:
-                    return "../images/network-wifi-offline.svg"
+                    return "../images/connections/network-wifi-offline.svg"
                 case NetworkDevice.NetworkDeviceStatePrepare:
-                    return "../images/network-wifi.svg";
+                    return "../images/connections/network-wifi.svg";
                 case NetworkDevice.NetworkDeviceStateConfig:
-                    return "../images/network-wifi-offline.svg"
+                    return "../images/connections/network-wifi-offline.svg"
                 case NetworkDevice.NetworkDeviceStateNeedAuth:
-                    return "../images/network-wifi.svg";
+                    return "../images/connections/network-wifi.svg";
                 case NetworkDevice.NetworkDeviceStateIpConfig:
-                    return "../images/network-wifi-offline.svg"
+                    return "../images/connections/network-wifi-offline.svg"
                 case NetworkDevice.NetworkDeviceStateIpCheck:
-                    return "../images/network-wifi.svg";
+                    return "../images/connections/network-wifi.svg";
                 case NetworkDevice.NetworkDeviceStateSecondaries:
-                    return "../images/network-wifi-offline.svg"
+                    return "../images/connections/network-wifi-offline.svg"
                 case NetworkDevice.NetworkDeviceStateActivated:
-                    return "../images/network-wifi.svg";
+                    return "../images/connections/network-wifi.svg";
 
                 }
                 console.warn("Unhandled enum", model.state)
@@ -434,7 +434,7 @@ SettingsPageBase {
                     subText: "%1 (%2)".arg(model.macAddress).arg(model.frequency < 3 ? "2.4GHz" : "5GHz")
                     prominentSubText: false
                     iconName: {
-                        var ret = "../images/nm-signal-";
+                        var ret = "../images/connections/nm-signal-";
                         if (model.signalStrength > 90) {
                             ret += "100";
                         } else if (model.signalStrength > 60) {