rework the header and menu

pull/14/head
Michael Zanetti 2018-07-06 18:53:20 +02:00
parent 4880f0290b
commit 2e5df1aaab
6 changed files with 139 additions and 36 deletions

View File

@ -212,5 +212,6 @@
<file>ui/components/AutoSizeMenu.qml</file>
<file>ui/components/EmptyViewPlaceholder.qml</file>
<file>ui/components/RemoveDeviceMethodDialog.qml</file>
<file>ui/components/FancyHeader.qml</file>
</qresource>
</RCC>

View File

@ -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

View File

@ -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";
}

View File

@ -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
}
}
}
}
}
}
}
}

View File

@ -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")
}

View File

@ -70,6 +70,8 @@ Item {
text: model.name
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
maximumLineCount: 2
elide: Text.ElideRight
}
}
}