QML UI: use stackView to show sub windows

QML on Android doesn't support multiple windows, so dialogs that work on
the desktop are not a good solution on Android. A much more natural way to
present sub windows is a stackView.

In order to do this Preferences needs to be an item and the structure of
the ApplicationWindow needs to change a bit.

This also removes the hard coded sizes and instead tries to design this in
a resolution independent manner.

The diff appears larger than the actual change because of an increase of
indentation for the ApplicationWindow content.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

1 files changed, 58 insertions, 41 deletions

diff --git a/qt-mobile/main.qml b/qt-mobile/main.qml
index 42e17945f..ffe83d19b 100644
--- a/qt-mobile/main.qml
+++ b/qt-mobile/main.qml
@@ -10,58 +10,75 @@ ApplicationWindow {
 	property bool fullscreen: true
 	visible: true
 
-	QMLManager {
-		id: manager
-	}
-
-	Preferences {
-		id: prefsWindow
-	}
-
-	ColumnLayout {
-		id: layout
+	StackView {
+		id: stackView
 		anchors.fill: parent
-		spacing: 4
+		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
 
-		Rectangle {
-			id: topPart
-			height: 35
-			Layout.fillWidth: true
-			Layout.maximumHeight: 35
+			ColumnLayout {
+				id: awLayout
+				anchors.fill: parent
+				spacing: prefsButton.height * 0.1
+				Rectangle {
+					id: topPart
+					Layout.minimumHeight: prefsButton.height * 1.2
+					Layout.fillWidth: true
+					anchors.bottom: detailsPage.top
+					anchors.bottomMargin: prefsButton.height * 0.1
 
-			RowLayout {
-				Button {
-					id: prefsButton
-					text: "Preferences"
-					onClicked: {
-						prefsWindow.show()
-					}
-				}
+					RowLayout {
+						anchors.bottom: topPart.bottom
+						anchors.bottomMargin: prefsButton.height * 0.1
+						anchors.left: topPart.left
+						anchors.leftMargin: prefsButton.height * 0.1
+						Button {
+							id: prefsButton
+							text: "Preferences"
+							onClicked: {
+								stackView.push(prefsWindow)
+							}
+						}
 
-				Button {
-					id: loadDivesButton
-					text: "Load Dives"
-					onClicked: {
-						manager.loadDives();
+						Button {
+							id: loadDivesButton
+							text: "Load Dives"
+							onClicked: {
+								manager.loadDives();
+							}
+						}
 					}
+
 				}
-			}
 
-		}
+				Rectangle {
+					id: detailsPage
+					Layout.fillHeight: true
+					Layout.fillWidth: true
 
-		Rectangle {
-			id: detailsPage
-			Layout.fillHeight: true
-			Layout.fillWidth: true
-			Layout.minimumWidth: 100
-			Layout.preferredHeight: 400
-			Layout.preferredWidth: 200
+					DiveList {
+						anchors.fill: detailsPage
+						id: diveDetails
+					}
+				}
 
-			DiveList {
-				anchors.fill: detailsPage
-				id: diveDetails
 			}
 		}
+	}
 
+	QMLManager {
+		id: manager
 	}
+
+	Preferences {
+		id: prefsWindow
+		visible: false
+	}
+
 }