Simplify layout, use standard BigTile header, prevent labels from overflowing
This commit is contained in:
Michael Zanetti
parent
0686bc2df2
commit
efa4c771ba
@ -246,220 +246,174 @@ SettingsPageBase {
|
|||||||
|
|
||||||
delegate: BigTile {
|
delegate: BigTile {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
Layout.leftMargin: Style.smallMargins
|
||||||
|
Layout.rightMargin: Style.smallMargins
|
||||||
interactive: false
|
interactive: false
|
||||||
|
|
||||||
property ZigbeeNode node: zigbeeNodesProxy.get(index)
|
readonly property ZigbeeNode node: zigbeeNodesProxy.get(index)
|
||||||
|
|
||||||
contentItem: ColumnLayout {
|
header: RowLayout {
|
||||||
spacing: app.margins
|
width: parent.width
|
||||||
|
ColorIcon {
|
||||||
Loader {
|
Layout.preferredHeight: Style.smallIconSize
|
||||||
id: nodeTypeLoader
|
Layout.preferredWidth: Style.smallIconSize
|
||||||
Layout.fillWidth: true
|
name: !node || node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator
|
||||||
sourceComponent: node ? (node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator ? zigbeeCoordinatorComponent : zigbeeDeviceComponent) : null
|
? "/ui/images/zigbee.svg"
|
||||||
|
: node.type === ZigbeeNode.ZigbeeNodeTypeRouter
|
||||||
|
? "/ui/images/zigbee-router.svg"
|
||||||
|
: "/ui/images/zigbee-enddevice.svg"
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
Led {
|
||||||
id: zigbeeCoordinatorComponent
|
Layout.preferredHeight: Style.smallIconSize
|
||||||
ColumnLayout {
|
Layout.preferredWidth: Style.smallIconSize
|
||||||
RowLayout {
|
state: {
|
||||||
|
if (!node) {
|
||||||
|
return "off"
|
||||||
|
}
|
||||||
|
|
||||||
ColorIcon {
|
if (node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator) {
|
||||||
id: coordinatorIcon
|
switch (network.networkState) {
|
||||||
Layout.preferredHeight: Style.iconSize
|
case ZigbeeNetwork.ZigbeeNetworkStateOnline:
|
||||||
Layout.preferredWidth: Style.iconSize
|
return "on"
|
||||||
name: "/ui/images/zigbee.svg"
|
case ZigbeeNetwork.ZigbeeNetworkStateOffline:
|
||||||
}
|
return "off"
|
||||||
|
case ZigbeeNetwork.ZigbeeNetworkStateStarting:
|
||||||
Led {
|
return "orange"
|
||||||
Layout.preferredHeight: Style.iconSize
|
case ZigbeeNetwork.ZigbeeNetworkStateUpdating:
|
||||||
Layout.preferredWidth: Style.iconSize
|
return "orange"
|
||||||
state: {
|
case ZigbeeNetwork.ZigbeeNetworkStateError:
|
||||||
switch (network.networkState) {
|
return "red"
|
||||||
case ZigbeeNetwork.ZigbeeNetworkStateOnline:
|
|
||||||
return "on"
|
|
||||||
case ZigbeeNetwork.ZigbeeNetworkStateOffline:
|
|
||||||
return "off"
|
|
||||||
case ZigbeeNetwork.ZigbeeNetworkStateStarting:
|
|
||||||
return "orange"
|
|
||||||
case ZigbeeNetwork.ZigbeeNetworkStateUpdating:
|
|
||||||
return "orange"
|
|
||||||
case ZigbeeNetwork.ZigbeeNetworkStateError:
|
|
||||||
return "red"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Label {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
text: network.backend + " " + qsTr("network coordinator")
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Label {
|
if (node.state !== ZigbeeNode.ZigbeeNodeStateInitialized) {
|
||||||
visible: node.version !== ""
|
return "orange"
|
||||||
text: qsTr("Version") + ": " + network.firmwareVersion
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Label {
|
if (node.reachable) {
|
||||||
text: qsTr("IEEE address") + ": " + node.ieeeAddress
|
return "on"
|
||||||
}
|
} else {
|
||||||
|
return "red"
|
||||||
Label {
|
|
||||||
text: qsTr("Network address") + ": 0x" + (node.networkAddress + Math.pow(16, 4)).toString(16).slice(-4).toUpperCase();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
|
||||||
id: zigbeeDeviceComponent
|
|
||||||
|
|
||||||
ColumnLayout {
|
Label {
|
||||||
RowLayout {
|
Layout.fillWidth: true
|
||||||
id: nodeHeaderRowLayout
|
text: node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator
|
||||||
ColorIcon {
|
? network.backend + " " + qsTr("network coordinator")
|
||||||
id: deviceTypeIcon
|
: node ? node.model : ""
|
||||||
Layout.preferredHeight: Style.iconSize
|
elide: Text.ElideRight
|
||||||
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 {
|
BusyIndicator {
|
||||||
id: reachableLed
|
Layout.preferredHeight: Style.smallIconSize
|
||||||
Layout.preferredHeight: Style.iconSize
|
Layout.preferredWidth: Style.smallIconSize
|
||||||
Layout.preferredWidth: Style.iconSize
|
running: visible
|
||||||
state: {
|
visible: node && node.state !== ZigbeeNode.ZigbeeNodeStateInitialized
|
||||||
if (!node)
|
}
|
||||||
return "off"
|
|
||||||
|
|
||||||
if (node.state !== ZigbeeNode.ZigbeeNodeStateInitialized) {
|
Label {
|
||||||
return "orange"
|
text: signalStrengthIcon.signalStrength + "%"
|
||||||
}
|
font: Style.smallFont
|
||||||
|
visible: node && node.type !== ZigbeeNode.ZigbeeNodeTypeCoordinator
|
||||||
|
}
|
||||||
|
|
||||||
if (node.reachable) {
|
ColorIcon {
|
||||||
return "on"
|
id: signalStrengthIcon
|
||||||
} else {
|
Layout.preferredHeight: Style.smallIconSize
|
||||||
return "red"
|
Layout.preferredWidth: Style.smallIconSize
|
||||||
}
|
visible: node && node.type !== ZigbeeNode.ZigbeeNodeTypeCoordinator
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Connections {
|
property int signalStrength: node ? Math.round(node.lqi * 100.0 / 255.0) : 0
|
||||||
target: node
|
|
||||||
onLastSeenChanged: {
|
|
||||||
communicationIndicatorLed.state = "on"
|
|
||||||
communicationIndicatorLedTimer.start()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Timer {
|
name: {
|
||||||
id: communicationIndicatorLedTimer
|
if (!node || !node.reachable)
|
||||||
interval: 200
|
return "/ui/images/connections/nm-signal-00.svg"
|
||||||
repeat: false
|
|
||||||
onTriggered: communicationIndicatorLed.state = "off"
|
|
||||||
}
|
|
||||||
|
|
||||||
Led {
|
if (signalStrength <= 25)
|
||||||
id: communicationIndicatorLed
|
return "/ui/images/connections/nm-signal-25.svg"
|
||||||
Layout.preferredHeight: Style.iconSize
|
|
||||||
Layout.preferredWidth: Style.iconSize
|
|
||||||
state: "off"
|
|
||||||
}
|
|
||||||
|
|
||||||
BusyIndicator {
|
if (signalStrength <= 50)
|
||||||
Layout.preferredHeight: Style.iconSize
|
return "/ui/images/connections/nm-signal-50.svg"
|
||||||
Layout.preferredWidth: Style.iconSize
|
|
||||||
running: visible
|
|
||||||
visible: node ? node.state !== ZigbeeNode.ZigbeeNodeStateInitialized : false
|
|
||||||
}
|
|
||||||
|
|
||||||
Label {
|
if (signalStrength <= 75)
|
||||||
Layout.fillWidth: true
|
return "/ui/images/connections/nm-signal-75.svg"
|
||||||
text: node ? node.model : ""
|
|
||||||
}
|
|
||||||
|
|
||||||
Label {
|
if (signalStrength <= 100)
|
||||||
text: signalStrengthIcon.signalStrength + "%"
|
return "/ui/images/connections/nm-signal-100.svg"
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ColorIcon {
|
ColorIcon {
|
||||||
id: signalStrengthIcon
|
id: sleepyIconLoader
|
||||||
Layout.preferredHeight: Style.iconSize
|
Layout.preferredHeight: Style.smallIconSize
|
||||||
Layout.preferredWidth: Style.iconSize
|
Layout.preferredWidth: Style.smallIconSize
|
||||||
|
visible: node && !node.rxOnWhenIdle
|
||||||
|
name: "/ui/images/system-suspend.svg"
|
||||||
|
}
|
||||||
|
|
||||||
property int signalStrength: node ? Math.round(node.lqi * 100.0 / 255.0) : 0
|
Led {
|
||||||
|
id: communicationIndicatorLed
|
||||||
|
Layout.preferredWidth: Style.smallIconSize
|
||||||
|
Layout.preferredHeight: Style.smallIconSize
|
||||||
|
state: "off"
|
||||||
|
|
||||||
name: {
|
Connections {
|
||||||
if (!node || !node.reachable)
|
target: node
|
||||||
return "/ui/images/connections/nm-signal-00.svg"
|
onLastSeenChanged: {
|
||||||
|
communicationIndicatorLed.state = "on"
|
||||||
if (signalStrength <= 25)
|
communicationIndicatorLedTimer.start()
|
||||||
return "/ui/images/connections/nm-signal-25.svg"
|
|
||||||
|
|
||||||
if (signalStrength <= 50)
|
|
||||||
return "/ui/images/connections/nm-signal-50.svg"
|
|
||||||
|
|
||||||
if (signalStrength <= 75)
|
|
||||||
return "/ui/images/connections/nm-signal-75.svg"
|
|
||||||
|
|
||||||
if (signalStrength <= 100)
|
|
||||||
return "/ui/images/connections/nm-signal-100.svg"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Loader {
|
|
||||||
id: sleepyIconLoader
|
|
||||||
Layout.preferredHeight: Style.iconSize
|
|
||||||
Layout.preferredWidth: Style.iconSize
|
|
||||||
active: node ? !node.rxOnWhenIdle : false
|
|
||||||
visible: active
|
|
||||||
sourceComponent: sleepyDeviceComponent
|
|
||||||
}
|
|
||||||
|
|
||||||
Component {
|
|
||||||
id: sleepyDeviceComponent
|
|
||||||
ColorIcon {
|
|
||||||
name: "/ui/images/system-suspend.svg"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
RowLayout {
|
Timer {
|
||||||
id: nodeDescriptionRow
|
id: communicationIndicatorLedTimer
|
||||||
ColumnLayout {
|
interval: 200
|
||||||
Layout.fillWidth: true
|
repeat: false
|
||||||
|
onTriggered: communicationIndicatorLed.state = "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Label {
|
contentItem: ColumnLayout {
|
||||||
text: node ? node.manufacturer + (node.version !== "" ? " (" + node.version + ")" : "") : ""
|
Label {
|
||||||
}
|
Layout.fillWidth: true
|
||||||
|
elide: Text.ElideRight
|
||||||
|
visible: node && node.type !== ZigbeeNode.ZigbeeNodeTypeCoordinator
|
||||||
|
text: node.manufacturer
|
||||||
|
}
|
||||||
|
|
||||||
Label {
|
Label {
|
||||||
text: qsTr("IEEE address") + ": " + (node ? node.ieeeAddress : "")
|
Layout.fillWidth: true
|
||||||
}
|
elide: Text.ElideRight
|
||||||
|
visible: node && (node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator || node.version !== "")
|
||||||
|
text: qsTr("Version") + ": " + (node.type === ZigbeeNode.ZigbeeNodeTypeCoordinator ? network.firmwareVersion : node.version)
|
||||||
|
}
|
||||||
|
|
||||||
Label {
|
Label {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
text: qsTr("Network address") + (node ? ": 0x" + (node.networkAddress + Math.pow(16, 4)).toString(16).slice(-4).toUpperCase() : "")
|
text: qsTr("IEEE address") + ": " + node.ieeeAddress
|
||||||
}
|
elide: Text.ElideRight
|
||||||
}
|
}
|
||||||
|
|
||||||
ColumnLayout {
|
Label {
|
||||||
Item {
|
Layout.fillWidth: true
|
||||||
// Spacing item
|
text: qsTr("Network address") + ": 0x" + (node.networkAddress + Math.pow(16, 4)).toString(16).slice(-4).toUpperCase();
|
||||||
Layout.fillHeight: true
|
elide: Text.ElideRight
|
||||||
}
|
}
|
||||||
|
|
||||||
ProgressButton {
|
Button {
|
||||||
size: Style.iconSize
|
// size: Style.iconSize
|
||||||
imageSource: "/ui/images/delete.svg"
|
visible: node && node.type !== ZigbeeNode.ZigbeeNodeTypeCoordinator
|
||||||
longpressEnabled: false
|
// imageSource: "/ui/images/delete.svg"
|
||||||
onClicked: {
|
text: qsTr("Remove")
|
||||||
var dialog = removeZigbeeNodeDialogComponent.createObject(app, {zigbeeNode: node})
|
Layout.alignment: Qt.AlignRight
|
||||||
dialog.open()
|
onClicked: {
|
||||||
}
|
var dialog = removeZigbeeNodeDialogComponent.createObject(app, {zigbeeNode: node})
|
||||||
}
|
dialog.open()
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -83,22 +83,23 @@ SettingsPageBase {
|
|||||||
|
|
||||||
onClicked: pageStack.push(Qt.resolvedUrl("ZigbeeNetworkPage.qml"), { zigbeeManager: zigbeeManager, network: zigbeeManager.networks.get(index) })
|
onClicked: pageStack.push(Qt.resolvedUrl("ZigbeeNetworkPage.qml"), { zigbeeManager: zigbeeManager, network: zigbeeManager.networks.get(index) })
|
||||||
|
|
||||||
|
header: RowLayout {
|
||||||
|
ColorIcon {
|
||||||
|
name: "/ui/images/zigbee/" + model.backend + ".svg"
|
||||||
|
Layout.preferredWidth: Style.iconSize
|
||||||
|
Layout.preferredHeight: Style.iconSize
|
||||||
|
}
|
||||||
|
|
||||||
|
Label {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
text: model.backend
|
||||||
|
font.pixelSize: app.largeFont
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
contentItem: ColumnLayout {
|
contentItem: ColumnLayout {
|
||||||
spacing: app.margins
|
spacing: app.margins
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
ColorIcon {
|
|
||||||
name: "/ui/images/zigbee/" + model.backend + ".svg"
|
|
||||||
Layout.preferredWidth: Style.iconSize
|
|
||||||
Layout.preferredHeight: Style.iconSize
|
|
||||||
}
|
|
||||||
|
|
||||||
Label {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
text: model.backend
|
|
||||||
font.pixelSize: app.largeFont
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
Label {
|
Label {
|
||||||
|
|||||||
Reference in New Issue
Block a user