diff --git a/nymea-app/styles.qrc b/nymea-app/styles.qrc index 5d39fea5..c61fc393 100644 --- a/nymea-app/styles.qrc +++ b/nymea-app/styles.qrc @@ -37,5 +37,6 @@ styles/lime/logo-wide.svg styles/noir/logo-wide.svg ui/Configuration.qml + styles/dark/Dialog.qml diff --git a/nymea-app/styles/dark/Dialog.qml b/nymea-app/styles/dark/Dialog.qml new file mode 100644 index 00000000..85ed9852 --- /dev/null +++ b/nymea-app/styles/dark/Dialog.qml @@ -0,0 +1,105 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.9 +import QtQuick.Templates 2.2 as T +import QtQuick.Controls 2.2 +import QtQuick.Controls.Material 2.2 +import QtQuick.Controls.Material.impl 2.2 +import Nymea 1.0 + +T.Dialog { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, + header && header.visible ? header.implicitWidth : 0, + footer && footer.visible ? footer.implicitWidth : 0, + contentWidth > 0 ? contentWidth + leftPadding + rightPadding : 0) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + (header && header.visible ? header.implicitHeight + spacing : 0) + + (footer && footer.visible ? footer.implicitHeight + spacing : 0) + + (contentHeight > 0 ? contentHeight + topPadding + bottomPadding : 0)) + + contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0) + contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0) + + padding: 24 + topPadding: 20 + + Material.elevation: 24 + + enter: Transition { + // grow_fade_in + NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 } + NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 } + } + + exit: Transition { + // shrink_fade_out + NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 } + NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 } + } + + background: Rectangle { + radius: Style.smallCornerRadius + color: control.Material.dialogColor + + layer.enabled: control.Material.elevation > 0 + layer.effect: ElevationEffect { + elevation: control.Material.elevation + } + } + + header: Label { + text: control.title + visible: control.title + elide: Label.ElideRight + padding: 24 + bottomPadding: 0 + // TODO: QPlatformTheme::TitleBarFont + font.bold: true + font.pixelSize: 16 + background: Rectangle { + radius: 2 + color: control.Material.dialogColor + clip: true + } + } + + footer: DialogButtonBox { + visible: count > 0 + } +} diff --git a/nymea-app/ui/system/ZigbeeNetworkPage.qml b/nymea-app/ui/system/ZigbeeNetworkPage.qml index 2a11dd23..10b996be 100644 --- a/nymea-app/ui/system/ZigbeeNetworkPage.qml +++ b/nymea-app/ui/system/ZigbeeNetworkPage.qml @@ -269,12 +269,15 @@ SettingsPageBase { engine: _engine paramsFilter: {"ieeeAddress": nodeDelegate.node.ieeeAddress} } - readonly property Thing nodeThing: nodeThings.count === 1 ? nodeThings.get(0) : null + readonly property Thing nodeThing: nodeThings.count >= 1 ? nodeThings.get(0) : null property int signalStrength: node ? Math.round(node.lqi * 100.0 / 255.0) : 0 Layout.fillWidth: true - text: nodeThing ? nodeThing.name : node.model - subText: node.manufacturer || node.ieeeAddress + text: node.model + " - " + node.manufacturer// nodeThing ? nodeThing.name : node.model + subText: node.state == ZigbeeNode.ZigbeeNodeStateInitializing ? + qsTr("Initialiazing...") + : nodeThings.count == 1 ? nodeThing.name : + nodeThings.count > 1 ? qsTr("%1 things").arg(nodeThings.count) : qsTr("Unrecognized device") iconName: nodeThing ? app.interfacesToIcon(nodeThing.thingClass.interfaces) : "/ui/images/zigbee.svg" iconColor: busy ? Style.tileOverlayColor @@ -327,11 +330,10 @@ SettingsPageBase { ? "/ui/images/zigbee-router.svg" : "/ui/images/zigbee-enddevice.svg" color: communicationIndicatorLedTimer.running ? Style.accentColor : Style.iconColor - Component.onCompleted: print("************+ node type", node.type) } onClicked: { - var popup = nodeInfoComponent.createObject(app, {node: node, nodeThing: nodeThing}) + var popup = nodeInfoComponent.createObject(app, {node: node, nodeThings: nodeThings}) popup.open() } } @@ -342,9 +344,10 @@ SettingsPageBase { MeaDialog { id: nodeInfoDialog property ZigbeeNode node: null - property Thing nodeThing: null + property ThingsProxy nodeThings: null + readonly property Thing nodeThing: nodeThings.count > 0 ? nodeThings.get(0) : null header: Item { - implicitHeight: headerRow.height + Style.margins + implicitHeight: headerRow.height implicitWidth: parent.width RowLayout { id: headerRow @@ -352,65 +355,98 @@ SettingsPageBase { spacing: Style.margins ColorIcon { id: headerColorIcon - Layout.preferredHeight: Style.hugeIconSize + Layout.preferredHeight: Style.bigIconSize Layout.preferredWidth: height color: Style.accentColor - name: nodeThing ? app.interfacesToIcon(nodeThing.thingClass.interfaces) : "/ui/images/zigbee.svg" - visible: name.length > 0 + name: "/ui/images/zigbee.svg" } - - TextField { - id: titleLabel - Layout.fillWidth: true + ColumnLayout { Layout.margins: Style.margins - wrapMode: Text.WrapAtWordBoundaryOrAnywhere - text: nodeThing ? nodeThing.name : node.model - color: Style.accentColor - font.pixelSize: app.largeFont - readOnly: nodeInfoDialog.nodeThing == null - onEditingFinished: engine.thingManager.editThing(nodeInfoDialog.nodeThing.id, text) + Label { + Layout.fillWidth: true + wrapMode: Text.WrapAtWordBoundaryOrAnywhere + text: nodeInfoDialog.node.model + } + Label { + Layout.fillWidth: true + wrapMode: Text.WrapAtWordBoundaryOrAnywhere + text: nodeInfoDialog.node.manufacturer + } } } } standardButtons: Dialog.NoButton - NymeaItemDelegate { - text: qsTr("Model") - Layout.fillWidth: true - progressive: false - subText: nodeInfoDialog.node.model + GridLayout { + columns: 2 + Label { + text: qsTr("IEEE address:") + font: Style.smallFont + } + Label { + Layout.fillWidth: true + text: nodeInfoDialog.node.ieeeAddress + font: Style.smallFont + horizontalAlignment: Text.AlignRight + } + Label { + text: qsTr("Network address:") + font: Style.smallFont + } + Label { + Layout.fillWidth: true + text: "0x" + nodeInfoDialog.node.networkAddress.toString(16) + font: Style.smallFont + horizontalAlignment: Text.AlignRight + } + Label { + text: qsTr("Signal strength:") + font: Style.smallFont + } + Label { + Layout.fillWidth: true + text: (nodeInfoDialog.node.lqi * 100 / 255).toFixed(0) + " %" + font: Style.smallFont + horizontalAlignment: Text.AlignRight + } + Label { + text: qsTr("Version:") + font: Style.smallFont + } + Label { + Layout.fillWidth: true + text: nodeInfoDialog.node.version.length > 0 ? nodeInfoDialog.node.version : qsTr("Unknown") + font: Style.smallFont + horizontalAlignment: Text.AlignRight + } } - NymeaItemDelegate { - text: qsTr("Manufacturer") - Layout.fillWidth: true - progressive: false - subText: nodeInfoDialog.node.manufacturer + + SettingsPageSectionHeader { + text: qsTr("Associated things") + Layout.leftMargin: 0 + Layout.rightMargin: 0 } - NymeaItemDelegate { - text: qsTr("IEEE address") - Layout.fillWidth: true - progressive: false - subText: nodeInfoDialog.node.ieeeAddress - } - NymeaItemDelegate { - text: qsTr("Network address") - Layout.fillWidth: true - progressive: false - subText: "0x" + nodeInfoDialog.node.networkAddress.toString(16) - } - NymeaItemDelegate { - text: qsTr("Signal strength") - Layout.fillWidth: true - progressive: false - subText: (nodeInfoDialog.node.lqi * 100 / 255).toFixed(0) + " %" - } - NymeaItemDelegate { - text: qsTr("Version") - Layout.fillWidth: true - progressive: false - subText: nodeInfoDialog.node.version + + Repeater { + model: nodeInfoDialog.nodeThings + delegate: RowLayout { + id: thingDelegate + property Thing thing: nodeInfoDialog.nodeThings.get(index) + Layout.fillWidth: true + ColorIcon { + size: Style.iconSize + source: app.interfacesToIcon(thing.thingClass.interfaces) + color: Style.accentColor + } + TextField { + text: thingDelegate.thing.name + Layout.fillWidth: true + onEditingFinished: engine.thingManager.editThing(thingDelegate.thing.id, text) + } + } } + RowLayout { Layout.fillWidth: true