From 2e5df1aaab6902e976d974aabf09ac18994c1a21 Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Fri, 6 Jul 2018 18:53:20 +0200 Subject: [PATCH] rework the header and menu --- nymea-app/resources.qrc | 1 + nymea-app/ui/MainPage.qml | 43 ++---- nymea-app/ui/Nymea.qml | 2 + nymea-app/ui/components/FancyHeader.qml | 124 ++++++++++++++++++ .../devicelistpages/GenericDeviceListPage.qml | 3 +- nymea-app/ui/mainviews/ScenesView.qml | 2 + 6 files changed, 139 insertions(+), 36 deletions(-) create mode 100644 nymea-app/ui/components/FancyHeader.qml diff --git a/nymea-app/resources.qrc b/nymea-app/resources.qrc index 2f5f1d03..06696919 100644 --- a/nymea-app/resources.qrc +++ b/nymea-app/resources.qrc @@ -212,5 +212,6 @@ ui/components/AutoSizeMenu.qml ui/components/EmptyViewPlaceholder.qml ui/components/RemoveDeviceMethodDialog.qml + ui/components/FancyHeader.qml diff --git a/nymea-app/ui/MainPage.qml b/nymea-app/ui/MainPage.qml index bb56ae2c..a957a272 100644 --- a/nymea-app/ui/MainPage.qml +++ b/nymea-app/ui/MainPage.qml @@ -10,11 +10,15 @@ import "mainviews" Page { id: root - header: GuhHeader { - text: swipeView.currentItem.title - backButtonVisible: false - menuButtonVisible: true - onMenuPressed: mainMenu.open() + header: FancyHeader { + title: swipeView.currentItem.title + + model: ListModel { + ListElement { iconSource: "../images/share.svg"; text: qsTr("Configure things"); page: "EditDevicesPage" } + ListElement { iconSource: "../images/magic.svg"; text: qsTr("Magic"); page: "MagicPage" } + ListElement { iconSource: "../images/settings.svg"; text: qsTr("System settings"); page: "SettingsPage" } + ListElement { iconSource: "../images/stock_application.svg"; text: qsTr("App settings"); page: "AppSettingsPage" } + } } // FIXME: Currently we don't have any feedback for executeAction @@ -37,35 +41,6 @@ Page { // } // } - AutoSizeMenu { - id: mainMenu - IconMenuItem { - iconSource: "../images/share.svg" - text: qsTr("Configure things") - width: parent.width - onTriggered: pageStack.push(Qt.resolvedUrl("EditDevicesPage.qml")) - } - IconMenuItem { - iconSource: "../images/magic.svg" - text: qsTr("Magic") - width: parent.width - onTriggered: pageStack.push(Qt.resolvedUrl("MagicPage.qml")) - } - MenuSeparator { width: parent.width } - IconMenuItem { - iconSource: "../images/settings.svg" - text: qsTr("System settings") - width: parent.width - onTriggered: pageStack.push(Qt.resolvedUrl("SettingsPage.qml")) - } - MenuSeparator { width: parent.width } - IconMenuItem { - iconSource: "../images/stock_application.svg" - text: qsTr("App settings") - width: parent.width - onTriggered: pageStack.push(Qt.resolvedUrl("AppSettingsPage.qml")) - } - } ColumnLayout { anchors.fill: parent diff --git a/nymea-app/ui/Nymea.qml b/nymea-app/ui/Nymea.qml index 7d30812f..82ff28ba 100644 --- a/nymea-app/ui/Nymea.qml +++ b/nymea-app/ui/Nymea.qml @@ -253,6 +253,8 @@ ApplicationWindow { page = "ShutterDevicePage.qml"; } else if (interfaceList.indexOf("garagegate") >= 0 ) { page = "GarageGateDevicePage.qml"; + } else if (interfaceList.indexOf("light")) { + page = "ColorLightDevicePage.qml" } else { page = "GenericDevicePage.qml"; } diff --git a/nymea-app/ui/components/FancyHeader.qml b/nymea-app/ui/components/FancyHeader.qml new file mode 100644 index 00000000..274360af --- /dev/null +++ b/nymea-app/ui/components/FancyHeader.qml @@ -0,0 +1,124 @@ +import QtQuick 2.9 +import QtQuick.Controls 2.2 +import QtQuick.Layouts 1.3 + +ToolBar { + id: root + height: 50 + (d.menuOpen ? app.iconSize * 3 + app.margins / 2 : 0) + Behavior on height { NumberAnimation { easing.type: Easing.InOutQuad; duration: 200 } } + + property string title + property alias model: menuRepeater.model + + QtObject { + id: d + property bool menuOpen: false + } + + RowLayout { + id: mainRow + height: 50 + width: parent.width + opacity: d.menuOpen ? 0 : 1 + Behavior on opacity { NumberAnimation { easing.type: Easing.InOutQuad; duration: 200 } } + + Label { + id: label + Layout.fillWidth: true + Layout.fillHeight: true + Layout.margins: app.margins + verticalAlignment: Text.AlignVCenter + font.pixelSize: app.largeFont + elide: Text.ElideRight + text: root.title + } + + HeaderButton { + id: menuButton + imageSource: "../images/navigation-menu.svg" + onClicked: d.menuOpen = true + } + } + + RowLayout { + height: 50 + anchors.bottom: menuPanel.top + width: parent.width + opacity: d.menuOpen ? 1 : 0 + visible: opacity > 0 + Behavior on opacity { NumberAnimation { easing.type: Easing.InOutQuad; duration: 200 } } + + Label { + Layout.fillWidth: true + Layout.fillHeight: true + Layout.margins: app.margins + verticalAlignment: Text.AlignVCenter + font.pixelSize: app.largeFont + elide: Text.ElideRight + text: qsTr("Menu") + } + + HeaderButton { + imageSource:"../images/close.svg" + onClicked: d.menuOpen = false + } + } + + Flickable { + id: menuPanel + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottomMargin: app.margins / 2 + width: Math.min(menuRow.childrenRect.width, parent.width) + height: app.iconSize * 3 + contentWidth: menuRow.childrenRect.width + opacity: d.menuOpen ? 1 : 0 + visible: opacity > 0 + Behavior on opacity { NumberAnimation { easing.type: Easing.InOutQuad; duration: 200 } } + + Row { + id: menuRow + Repeater { + id: menuRepeater + + MouseArea { + height: app.iconSize * 3 + width: app.iconSize * 3 + + onClicked: { + header.menuOpen = false + pageStack.push(Qt.resolvedUrl(model.page + ".qml")) + } + + Rectangle { + anchors.fill: parent + anchors.margins: app.margins / 2 + border.width: 1 + border.color: app.guhAccent + color: "transparent" + ColumnLayout { + anchors.fill: parent + anchors.margins: app.margins / 2 + ColorIcon { + name: model.iconSource + Layout.preferredHeight: app.iconSize + Layout.preferredWidth: app.iconSize + Layout.alignment: Qt.AlignHCenter + } + Label { + text: model.text + Layout.fillWidth: true + wrapMode: Text.WrapAtWordBoundaryOrAnywhere + maximumLineCount: 2 + elide: Text.ElideRight + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.pixelSize: app.smallFont - 2 + } + } + } + } + } + } + } +} diff --git a/nymea-app/ui/devicelistpages/GenericDeviceListPage.qml b/nymea-app/ui/devicelistpages/GenericDeviceListPage.qml index 80df16f3..a792d936 100644 --- a/nymea-app/ui/devicelistpages/GenericDeviceListPage.qml +++ b/nymea-app/ui/devicelistpages/GenericDeviceListPage.qml @@ -20,10 +20,9 @@ Page { text: { if (subPage.shownInterfaces.length === 1) { return qsTr("My %1 things").arg(interfaceToString(subPage.filterInterface)) - } else if (subPage.shownInterfaces.length > 1) { + } else if (subPage.shownInterfaces.length > 1 || subPage.hiddenInterfaces.length > 0) { return qsTr("My things") } - return qsTr("All my things") } diff --git a/nymea-app/ui/mainviews/ScenesView.qml b/nymea-app/ui/mainviews/ScenesView.qml index 44e2691a..62714156 100644 --- a/nymea-app/ui/mainviews/ScenesView.qml +++ b/nymea-app/ui/mainviews/ScenesView.qml @@ -70,6 +70,8 @@ Item { text: model.name wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter + maximumLineCount: 2 + elide: Text.ElideRight } } }