Rejig navigation

This change streamlines the navigation across the pages to be in line
with the stackview organization. The top bar becomes a static element
with the title and a button that either opens the preferences or shows
the back arrow.

This makes it a bit more efficient, since we load the title bar only
one, and there are no strange animations in the title. The stackview
gets the role of content container, the "chrome" around it is laid out
in main.qml.

Most of the churn in this patch comes from moving large blocks of code
between files with different indentation levels.

Signed-off-by: Sebastian Kügler <sebas@kde.org>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Sebastian Kügler 2015-11-07 03:08:05 +01:00 committed by Dirk Hohndel
parent 0e26afbf0a
commit 2b70b76133
3 changed files with 84 additions and 125 deletions

View file

@ -38,10 +38,6 @@ Item {
width: parent.width
spacing: 8
TopBar {
}
Button {
text: "Hide Dive Profile"
onClicked: {

View file

@ -8,33 +8,52 @@ import QtQuick.Window 2.2
import org.subsurfacedivelog.mobile 1.0
Rectangle {
id: topBar
id: topPart
property bool goBack: (stackView.depth > 1)
color: theme.accentColor
Layout.minimumHeight: units.gridUnit * 2 + units.smallSpacing * 2
Layout.fillWidth: true
Layout.margins: 0
Layout.minimumHeight: prefsButton.height + units.smallSpacing * 2
RowLayout {
anchors.bottom: topBar.bottom
anchors.bottom: topPart.bottom
anchors.bottomMargin: units.smallSpacing
anchors.left: topBar.left
anchors.left: topPart.left
anchors.leftMargin: units.smallSpacing
anchors.right: topBar.right
anchors.right: topPart.right
anchors.rightMargin: units.smallSpacing
Button {
id: backButton
Layout.maximumHeight: prefsButton.height
Layout.minimumHeight: prefsButton.height
Image {
source: "qrc:/qml/subsurface-mobile-icon.png"
Layout.maximumWidth: units.gridUnit * 2
Layout.preferredWidth: units.gridUnit * 2
text: "\u2190"
Layout.preferredHeight: units.gridUnit * 2
}
Text {
text: qsTr("Subsurface")
font.pointSize: units.fontMetrics.font.pointSize * 2
Layout.fillWidth: false
color: theme.accentTextColor
}
Item {
Layout.fillWidth: true
}
Button {
id: prefsButton
// Display back arrow or menu button
text: topPart.goBack ? "\u2190" : "\u22ee"
anchors.right: parent.right
Layout.preferredWidth: units.gridUnit * 2
Layout.preferredHeight: parent.height
style: ButtonStyle {
background: Rectangle {
color: theme.accentColor
implicitWidth: units.gridUnit * 2
color: theme.accentColor
}
label: Text {
id: txt
color: theme.accentTextColor
font.pointSize: 18
font.pointSize: units.fontMetrics.font.pointSize * 2
font.bold: true
text: control.text
horizontalAlignment: Text.AlignHCenter
@ -42,26 +61,14 @@ Rectangle {
}
}
onClicked: {
if (stackView.currentItem.objectName == "DiveDetails")
{
manager.commitChanges(
dive_id,
suit,
buddy,
divemaster,
notes
)
if (topPart.goBack) {
stackView.pop()
} else {
prefsMenu.popup()
}
stackView.pop();
}
}
Text {
text: qsTr("Subsurface mobile")
font.pointSize: 18
color: theme.accentTextColor
anchors.left: backButton.right
anchors.leftMargin: units.smallSpacing
//horizontalAlignment: Text.AlignHCenter
}
}
}

View file

@ -17,6 +17,9 @@ ApplicationWindow {
Theme.Units {
id: units
property int titlePointSize: fontMetrics.font.pointSize * 1.5
}
Theme.Theme {
@ -81,105 +84,58 @@ ApplicationWindow {
}
}
StackView {
id: stackView
ColumnLayout {
anchors.fill: parent
focus: true
Keys.onReleased: if (event.key == Qt.Key_Back && stackView.depth > 1) {
stackView.pop()
event.accepted = true;
}
initialItem: Item {
width: parent.width
height: parent.height
ColumnLayout {
id: awLayout
anchors.fill: parent
spacing: units.gridUnit / 2
Rectangle {
id: topPart
color: theme.accentColor
Layout.minimumHeight: units.gridUnit * 2 + units.smallSpacing * 2
Layout.fillWidth: true
Layout.margins: 0
RowLayout {
anchors.bottom: topPart.bottom
anchors.bottomMargin: units.smallSpacing
anchors.left: topPart.left
anchors.leftMargin: units.smallSpacing
anchors.right: topPart.right
anchors.rightMargin: units.smallSpacing
Image {
source: "qrc:/qml/subsurface-mobile-icon.png"
Layout.maximumWidth: units.gridUnit * 2
Layout.preferredWidth: units.gridUnit * 2
Layout.preferredHeight: units.gridUnit * 2
TopBar {
}
StackView {
id: stackView
Layout.preferredWidth: parent.width
Layout.fillHeight: true
focus: true
Keys.onReleased: if (event.key == Qt.Key_Back && stackView.depth > 1) {
stackView.pop()
event.accepted = true;
}
initialItem: Item {
width: parent.width
height: parent.height
ColumnLayout {
id: awLayout
anchors.fill: parent
spacing: units.gridUnit / 2
Rectangle {
id: detailsPage
Layout.fillHeight: true
Layout.fillWidth: true
DiveList {
anchors.fill: detailsPage
id: diveDetails
color: theme.backgroundColor
}
}
Rectangle {
id: messageArea
height: childrenRect.height
Layout.fillWidth: true
Text {
text: qsTr("Subsurface mobile")
font.pointSize: 18
Layout.fillWidth: false
color: theme.accentTextColor
id: message
color: theme.textColor
text: ""
styleColor: theme.textColor
font.pointSize: 10
}
Item {
Layout.fillWidth: true
}
Button {
id: prefsButton
text: "\u22ee"
anchors.right: parent.right
Layout.preferredWidth: units.gridUnit * 2
Layout.preferredHeight: units.gridUnit * 2
style: ButtonStyle {
background: Rectangle {
implicitWidth: units.gridUnit * 2
color: theme.accentColor
}
label: Text {
id: txt
color: theme.accentTextColor
font.pointSize: 18
font.bold: true
text: control.text
horizontalAlignment: Text.AlignHCenter
}
}
onClicked: {
prefsMenu.popup()
}
}
}
}
Rectangle {
id: detailsPage
Layout.fillHeight: true
Layout.fillWidth: true
DiveList {
anchors.fill: detailsPage
id: diveDetails
color: theme.backgroundColor
}
}
Rectangle {
id: messageArea
height: childrenRect.height
Layout.fillWidth: true
Text {
id: message
color: theme.textColor
text: ""
styleColor: theme.textColor
font.pointSize: 10
}
}
}
}
}