Merge PR #420: Rearrange some connectivity icons

2020-09-06 04:31:27 +02:00 · 2020-09-06 04:31:27 +02:00 · d441c9878d
commit d441c9878d
parent b46cafdd5c 530657b2da
41 changed files with 338 additions and 102 deletions
--- a/nymea-app/images.qrc
+++ b/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>
--- a/nymea-app/resources.qrc
+++ b/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>
--- a/nymea-app/ui/MainPage.qml
+++ b/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 ""
            }
--- a/nymea-app/ui/Nymea.qml
+++ b/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":
--- a/nymea-app/ui/SettingsPage.qml
+++ b/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
--- a/nymea-app/ui/appsettings/AppSettingsPage.qml
+++ b/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"))
--- a/nymea-app/ui/appsettings/CloudLoginPage.qml
+++ b/nymea-app/ui/appsettings/CloudLoginPage.qml
@ -120,8 +120,8 @@ SettingsPageBase {
                progressive: false
                prominentSubText: false
                canDelete: true
-                iconName: "../images/cloud.svg"
-                secondaryIconName: !model.online ? "../images/cloud-error.svg" : ""
+                iconName: "../images/connections/cloud.svg"
+                secondaryIconName: !model.online ? "../images/connections/cloud-error.svg" : ""

                onClicked: {
                    print("clicked, connected:", engine.jsonRpcClient.connected, model.id)
--- a/nymea-app/ui/components/ConnectionStatusIcon.qml
+++ b/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) {
-            return "../images/network-wifi.svg"
+        if (!signalStrengthState) {
+            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
--- a/nymea-app/ui/components/MainPageTile.qml
+++ b/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))
        }
--- a/nymea-app/ui/components/SetupStatusIcon.qml
+++ b/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
+    }
 }
--- a/nymea-app/ui/components/UpdateStatusIcon.qml
+++ b/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
+    }
+}
--- a/nymea-app/ui/connection/ConnectPage.qml
+++ b/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/bluetooth.svg"; text: qsTr("Wireless setup"); page: "wifisetup/BluetoothDiscoveryPage.qml"; }
+                    ListElement { iconSource: "../images/connections/network-vpn.svg"; text: qsTr("Manual connection"); page: "ManualConnectPage.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" : ""
-                        secondaryIconName: !isOnline ? "../images/cloud-error.svg" : ""
+                        tertiaryIconName: isSecure ? "../images/connections/network-secure.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" : ""
-                                secondaryIconName: !model.online ? "../images/cloud-error.svg" : ""
+                                tertiaryIconName: model.secure ? "../images/connections/network-secure.svg" : ""
+                                secondaryIconName: !model.online ? "../images/connections/cloud-error.svg" : ""
                                secondaryIconColor: "red"

                                onClicked: {
--- a/nymea-app/ui/connection/wifisetup/BluetoothDiscoveryPage.qml
+++ b/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

--- a/nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml
+++ b/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")

                    }
                }
--- a/nymea-app/ui/delegates/ThingDelegate.qml
+++ b/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" : ""
-    tertiaryIconName: thing.setupStatus == Thing.ThingSetupStatusFailed
-                      ? "../images/dialog-warning-symbolic.svg"
-                      : thing.setupStatus == Thing.ThingSetupStatusInProgress
-                        ? "../images/settings.svg"
-                        : disconnected
-                          ? isWireless
-                            ? "../images/network-wifi-offline.svg" : "../images/network-wired-offline.svg"
-                          : ""
-    tertiaryIconColor: thing.setupStatus == Thing.ThingSetupStatusInProgress ? iconKeyColor : "red"
+    secondaryIconName: thing.setupStatus == Thing.ThingSetupStatusComplete && batteryCritical ? "../images/battery/battery-010.svg" : ""
+    tertiaryIconName: {
+        if (thing.setupStatus == Thing.ThingSetupStatusFailed) {
+            return "../images/dialog-warning-symbolic.svg";
+        }
+        if (thing.setupStatus == Thing.ThingSetupStatusInProgress) {
+            return "../images/settings.svg"
+        }
+        if (connectedState && connectedState.value === false) {
+            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")
 }
--- a/nymea-app/ui/devicepages/DevicePageBase.qml
+++ b/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!")
-                visible: infoPane.alertState
+                                : infoPane.updateAvailable ?
+                                      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
            }
        }
--- a/nymea-app/ui/images/connections/bluetooth.svg
+++ b/nymea-app/ui/images/connections/bluetooth.svg
--- a/nymea-app/ui/images/connections/cloud-error.svg
+++ b/nymea-app/ui/images/connections/cloud-error.svg
--- a/nymea-app/ui/images/connections/cloud-offline.svg
+++ b/nymea-app/ui/images/connections/cloud-offline.svg
--- a/nymea-app/ui/images/connections/cloud.svg
+++ b/nymea-app/ui/images/connections/cloud.svg
--- a/nymea-app/ui/images/connections/network-secure.svg
+++ b/nymea-app/ui/images/connections/network-secure.svg
--- a/nymea-app/ui/images/connections/network-vpn.svg
+++ b/nymea-app/ui/images/connections/network-vpn.svg
--- a/nymea-app/ui/images/connections/network-wifi-offline.svg
+++ b/nymea-app/ui/images/connections/network-wifi-offline.svg
--- a/nymea-app/ui/images/connections/network-wifi.svg
+++ b/nymea-app/ui/images/connections/network-wifi.svg
--- a/nymea-app/ui/images/connections/network-wired-disabled.svg
+++ b/nymea-app/ui/images/connections/network-wired-disabled.svg
--- a/nymea-app/ui/images/connections/network-wired-offline.svg
+++ b/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>
--- a/nymea-app/ui/images/connections/network-wired.svg
+++ b/nymea-app/ui/images/connections/network-wired.svg
--- a/nymea-app/ui/images/connections/nm-signal-00-secure.svg
+++ b/nymea-app/ui/images/connections/nm-signal-00-secure.svg
--- a/nymea-app/ui/images/connections/nm-signal-00.svg
+++ b/nymea-app/ui/images/connections/nm-signal-00.svg
--- a/nymea-app/ui/images/connections/nm-signal-100-secure.svg
+++ b/nymea-app/ui/images/connections/nm-signal-100-secure.svg
--- a/nymea-app/ui/images/connections/nm-signal-100.svg
+++ b/nymea-app/ui/images/connections/nm-signal-100.svg
--- a/nymea-app/ui/images/connections/nm-signal-25-secure.svg
+++ b/nymea-app/ui/images/connections/nm-signal-25-secure.svg
--- a/nymea-app/ui/images/connections/nm-signal-25.svg
+++ b/nymea-app/ui/images/connections/nm-signal-25.svg
--- a/nymea-app/ui/images/connections/nm-signal-50-secure.svg
+++ b/nymea-app/ui/images/connections/nm-signal-50-secure.svg
--- a/nymea-app/ui/images/connections/nm-signal-50.svg
+++ b/nymea-app/ui/images/connections/nm-signal-50.svg
--- a/nymea-app/ui/images/connections/nm-signal-75-secure.svg
+++ b/nymea-app/ui/images/connections/nm-signal-75-secure.svg
--- a/nymea-app/ui/images/connections/nm-signal-75.svg
+++ b/nymea-app/ui/images/connections/nm-signal-75.svg
--- a/nymea-app/ui/magic/EditRulePage.qml
+++ b/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
--- a/nymea-app/ui/system/CloudSettingsPage.qml
+++ b/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/cloud-offline.svg"
+                    ? "../images/connections/cloud-error.svg"
+                    : "../images/connections/cloud-offline.svg"
        }

        Label {
--- a/nymea-app/ui/system/ConnectionInterfaceDelegate.qml
+++ b/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
 }
--- a/nymea-app/ui/system/NetworkSettingsPage.qml
+++ b/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) {