Simplify layout, use standard BigTile header, prevent labels from overflowing

nymea-app/ui/system/ZigbeeNetworkPage.qml

@@ -246,35 +246,33 @@ SettingsPageBase {
 
         delegate: BigTile {
             Layout.fillWidth: true
+            Layout.leftMargin: Style.smallMargins
+            Layout.rightMargin: Style.smallMargins
             interactive: false
 
-            property ZigbeeNode node: zigbeeNodesProxy.get(index)
+            readonly property ZigbeeNode node: zigbeeNodesProxy.get(index)
-
-            contentItem: ColumnLayout {
-                spacing: app.margins
-
-                Loader {
-                    id: nodeTypeLoader
-                    Layout.fillWidth: true
-                    sourceComponent: node ? (node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator ? zigbeeCoordinatorComponent : zigbeeDeviceComponent) : null
-                }
-
-                Component {
-                    id: zigbeeCoordinatorComponent
-                    ColumnLayout {
-                        RowLayout {
 
+            header: RowLayout {
+                width: parent.width
                 ColorIcon {
-                                id: coordinatorIcon
+                    Layout.preferredHeight: Style.smallIconSize
-                                Layout.preferredHeight: Style.iconSize
+                    Layout.preferredWidth: Style.smallIconSize
-                                Layout.preferredWidth: Style.iconSize
+                    name: !node || node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator
-                                name: "/ui/images/zigbee.svg"
+                          ? "/ui/images/zigbee.svg"
+                          : node.type === ZigbeeNode.ZigbeeNodeTypeRouter
+                            ? "/ui/images/zigbee-router.svg"
+                            : "/ui/images/zigbee-enddevice.svg"
                 }
 
                 Led {
-                                Layout.preferredHeight: Style.iconSize
+                    Layout.preferredHeight: Style.smallIconSize
-                                Layout.preferredWidth: Style.iconSize
+                    Layout.preferredWidth: Style.smallIconSize
                     state: {
+                        if (!node) {
+                            return "off"
+                        }
+
+                        if (node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator) {
                             switch (network.networkState) {
                             case ZigbeeNetwork.ZigbeeNetworkStateOnline:
                                 return "on"
@@ -288,49 +286,6 @@ SettingsPageBase {
                                 return "red"
                             }
                         }
-                            }
-
-                            Label {
-                                Layout.fillWidth: true
-                                text: network.backend + " " + qsTr("network coordinator")
-                            }
-                        }
-
-                        Label {
-                            visible: node.version !== ""
-                            text: qsTr("Version") + ": " + network.firmwareVersion
-                        }
-
-                        Label {
-                            text: qsTr("IEEE address") + ": " + node.ieeeAddress
-                        }
-
-                        Label {
-                            text: qsTr("Network address") +  ": 0x" + (node.networkAddress + Math.pow(16, 4)).toString(16).slice(-4).toUpperCase();
-                        }
-                    }
-                }
-
-                Component {
-                    id: zigbeeDeviceComponent
-
-                    ColumnLayout {
-                        RowLayout {
-                            id: nodeHeaderRowLayout
-                            ColorIcon {
-                                id: deviceTypeIcon
-                                Layout.preferredHeight: Style.iconSize
-                                Layout.preferredWidth: Style.iconSize
-                                name: node ? (node.type === ZigbeeNode.ZigbeeNodeTypeRouter ? "/ui/images/zigbee-router.svg" : "/ui/images/zigbee-enddevice.svg") : "/ui/images/zigbee-enddevice.svg"
-                            }
-
-                            Led {
-                                id: reachableLed
-                                Layout.preferredHeight: Style.iconSize
-                                Layout.preferredWidth: Style.iconSize
-                                state: {
-                                    if (!node)
-                                        return "off"
 
                         if (node.state !== ZigbeeNode.ZigbeeNodeStateInitialized) {
                             return "orange"
@@ -344,48 +299,33 @@ SettingsPageBase {
                     }
                 }
 
-                            Connections {
-                                target: node
-                                onLastSeenChanged: {
-                                    communicationIndicatorLed.state = "on"
-                                    communicationIndicatorLedTimer.start()
-                                }
-                            }
-
-                            Timer {
-                                id: communicationIndicatorLedTimer
-                                interval: 200
-                                repeat: false
-                                onTriggered: communicationIndicatorLed.state = "off"
-                            }
-
-                            Led {
-                                id: communicationIndicatorLed
-                                Layout.preferredHeight: Style.iconSize
-                                Layout.preferredWidth: Style.iconSize
-                                state: "off"
-                            }
-
-                            BusyIndicator {
-                                Layout.preferredHeight: Style.iconSize
-                                Layout.preferredWidth: Style.iconSize
-                                running: visible
-                                visible: node ? node.state !== ZigbeeNode.ZigbeeNodeStateInitialized : false
-                            }
 
                 Label {
                     Layout.fillWidth: true
-                                text: node ? node.model : ""
+                    text: node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator
+                          ? network.backend + " " + qsTr("network coordinator")
+                          : node ? node.model : ""
+                    elide: Text.ElideRight
+                }
+
+                BusyIndicator {
+                    Layout.preferredHeight: Style.smallIconSize
+                    Layout.preferredWidth: Style.smallIconSize
+                    running: visible
+                    visible: node && node.state !== ZigbeeNode.ZigbeeNodeStateInitialized
                 }
 
                 Label {
                     text: signalStrengthIcon.signalStrength + "%"
+                    font: Style.smallFont
+                    visible: node && node.type !== ZigbeeNode.ZigbeeNodeTypeCoordinator
                 }
 
                 ColorIcon {
                     id: signalStrengthIcon
-                                Layout.preferredHeight: Style.iconSize
+                    Layout.preferredHeight: Style.smallIconSize
-                                Layout.preferredWidth: Style.iconSize
+                    Layout.preferredWidth: Style.smallIconSize
+                    visible: node && node.type !== ZigbeeNode.ZigbeeNodeTypeCoordinator
 
                     property int signalStrength: node ? Math.round(node.lqi * 100.0 / 255.0) : 0
 
@@ -407,52 +347,70 @@ SettingsPageBase {
                     }
                 }
 
-                            Loader {
-                                id: sleepyIconLoader
-                                Layout.preferredHeight: Style.iconSize
-                                Layout.preferredWidth: Style.iconSize
-                                active: node ? !node.rxOnWhenIdle : false
-                                visible: active
-                                sourceComponent: sleepyDeviceComponent
-                            }
-
-                            Component {
-                                id: sleepyDeviceComponent
                 ColorIcon {
+                    id: sleepyIconLoader
+                    Layout.preferredHeight: Style.smallIconSize
+                    Layout.preferredWidth: Style.smallIconSize
+                    visible: node && !node.rxOnWhenIdle
                     name: "/ui/images/system-suspend.svg"
                 }
+
+                Led {
+                    id: communicationIndicatorLed
+                    Layout.preferredWidth: Style.smallIconSize
+                    Layout.preferredHeight: Style.smallIconSize
+                    state: "off"
+
+                    Connections {
+                        target: node
+                        onLastSeenChanged: {
+                            communicationIndicatorLed.state = "on"
+                            communicationIndicatorLedTimer.start()
                         }
                     }
 
-                        RowLayout {
+                    Timer {
-                            id: nodeDescriptionRow
+                        id: communicationIndicatorLedTimer
-                            ColumnLayout {
+                        interval: 200
+                        repeat: false
+                        onTriggered: communicationIndicatorLed.state = "off"
+                    }
+                }
+            }
+
+            contentItem: ColumnLayout {
+                Label {
                     Layout.fillWidth: true
-
+                    elide: Text.ElideRight
-                                Label {
+                    visible: node && node.type !== ZigbeeNode.ZigbeeNodeTypeCoordinator
-                                    text: node ? node.manufacturer + (node.version !== "" ? " (" +  node.version + ")" : "") : ""
+                    text: node.manufacturer
-                                }
-
-                                Label {
-                                    text: qsTr("IEEE address") + ": " + (node ? node.ieeeAddress : "")
                 }
 
                 Label {
                     Layout.fillWidth: true
-                                    text: qsTr("Network address") + (node ?  ": 0x" + (node.networkAddress + Math.pow(16, 4)).toString(16).slice(-4).toUpperCase() : "")
+                    elide: Text.ElideRight
-                                }
+                    visible: node && (node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator || node.version !== "")
+                    text: qsTr("Version") + ": " + (node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator ? network.firmwareVersion : node.version)
                 }
 
-                            ColumnLayout {
+                Label {
-                                Item {
+                    Layout.fillWidth: true
-                                    // Spacing item
+                    text: qsTr("IEEE address") + ": " + node.ieeeAddress
-                                    Layout.fillHeight: true
+                    elide: Text.ElideRight
                 }
 
-                                ProgressButton {
+                Label {
-                                    size: Style.iconSize
+                    Layout.fillWidth: true
-                                    imageSource: "/ui/images/delete.svg"
+                    text: qsTr("Network address") +  ": 0x" + (node.networkAddress + Math.pow(16, 4)).toString(16).slice(-4).toUpperCase();
-                                    longpressEnabled: false
+                    elide: Text.ElideRight
+                }
+
+                Button {
+//                    size: Style.iconSize
+                    visible: node && node.type !== ZigbeeNode.ZigbeeNodeTypeCoordinator
+//                    imageSource: "/ui/images/delete.svg"
+                    text: qsTr("Remove")
+                    Layout.alignment: Qt.AlignRight
                     onClicked: {
                         var dialog = removeZigbeeNodeDialogComponent.createObject(app, {zigbeeNode: node})
                         dialog.open()
@@ -461,10 +419,6 @@ SettingsPageBase {
             }
         }
     }
-                }
-            }
-        }
-    }
 
     Component {
         id: removeZigbeeNodeDialogComponent

nymea-app/ui/system/ZigbeeSettingsPage.qml

@@ -83,10 +83,7 @@ SettingsPageBase {
 
                 onClicked: pageStack.push(Qt.resolvedUrl("ZigbeeNetworkPage.qml"), { zigbeeManager: zigbeeManager, network: zigbeeManager.networks.get(index) })
 
-                contentItem: ColumnLayout {
+                header: RowLayout {
-                    spacing: app.margins
-
-                    RowLayout {
                     ColorIcon {
                         name: "/ui/images/zigbee/" + model.backend + ".svg"
                         Layout.preferredWidth: Style.iconSize
@@ -100,6 +97,10 @@ SettingsPageBase {
                     }
                 }
 
+                contentItem: ColumnLayout {
+                    spacing: app.margins
+
+
                     RowLayout {
                         Label {
                             Layout.fillWidth: true