rework the header and menu
parent
4880f0290b
commit
2e5df1aaab
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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")
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,6 +70,8 @@ Item {
|
|||
text: model.name
|
||||
wrapMode: Text.WordWrap
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
maximumLineCount: 2
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue