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>

2 files changed, 61 insertions, 47 deletions

diff --git a/qt-mobile/Preferences.qml b/qt-mobile/Preferences.qml
index 5f089b496..a628384d9 100644
--- a/qt-mobile/Preferences.qml
+++ b/qt-mobile/Preferences.qml
@@ -5,7 +5,7 @@ import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.1
 import org.subsurfacedivelog.mobile 1.0
 
-Window {
+Item {
 	id: loginWindow
 
 	signal accept
@@ -14,8 +14,6 @@ Window {
 	property string password: password.text;
 	property bool issave: savePassword.checked;
 
-	flags: Qt.Dialog
-	modality: Qt.WindowModal
 	GridLayout {
 		columns: 2
 		anchors.centerIn: parent
@@ -66,8 +64,7 @@ Window {
 					manager.cloudUserName = login.text
 					manager.cloudPassword = password.text
 					manager.savePreferences()
-					loginWindow.close();
-					loginWindow.accept();
+					stackView.pop()
 				}
 			}
 		}
@@ -80,7 +77,7 @@ Window {
 				text: "Cancel"
 
 				onClicked: {
-					loginWindow.close();
+					stackView.pop();
 				}
 			}
 		}
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
+	}
+
 }