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>

qt-mobile/qml/DiveDetails.qml

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

qt-mobile/qml/TopBar.qml

@@ -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 {
+		Image {
-			id: backButton
+			source: "qrc:/qml/subsurface-mobile-icon.png"
-			Layout.maximumHeight: prefsButton.height
+			Layout.maximumWidth: units.gridUnit * 2
-			Layout.minimumHeight: prefsButton.height
 			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")
+				if (topPart.goBack) {
-				{
+					stackView.pop()
-				manager.commitChanges(
+				} else {
-							dive_id,
+					prefsMenu.popup()
-							suit,
-							buddy,
-							divemaster,
-							notes
-							)
-				}
-				stackView.pop();
-			}
-		}
-		Text {
-			text: qsTr("Subsurface mobile")
-			font.pointSize: 18
-			color: theme.accentTextColor
-			anchors.left: backButton.right
-			anchors.leftMargin: units.smallSpacing
-			//horizontalAlignment: Text.AlignHCenter
 				}
 			}
 		}
+
+	}
+
+}

qt-mobile/qml/main.qml

@@ -17,6 +17,9 @@ ApplicationWindow {
 
 	Theme.Units {
 		id: units
+
+		property int titlePointSize: fontMetrics.font.pointSize * 1.5
+
 	}
 
 	Theme.Theme {
@@ -81,9 +84,17 @@ ApplicationWindow {
 		}
 	}
 
+	ColumnLayout {
+		anchors.fill: parent
+
+		TopBar {
+
+		}
+
 		StackView {
 			id: stackView
-		anchors.fill: parent
+			Layout.preferredWidth: parent.width
+			Layout.fillHeight: true
 			focus: true
 			Keys.onReleased: if (event.key == Qt.Key_Back && stackView.depth > 1) {
 						stackView.pop()
@@ -97,62 +108,6 @@ ApplicationWindow {
 					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
-						}
-						Text {
-							text: qsTr("Subsurface mobile")
-							font.pointSize: 18
-							Layout.fillWidth: false
-							color: theme.accentTextColor
-						}
-						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
@@ -183,6 +138,7 @@ ApplicationWindow {
 				}
 			}
 		}
+	}
 
 	QMLManager {
 		id: manager