QML UI: add button to show the preferences window

Add a button in the main qml file to show the preferences window. This
window is linked to the QMLManager class, so any changes made will be
saved to the user's settings file.

Signed-off-by: Grace Karanja <gracie.karanja89@gmail.com>

1 files changed, 160 insertions, 138 deletions

diff --git a/qt-mobile/main.qml b/qt-mobile/main.qml
index 4efa34093..d3447a0c7 100644
--- a/qt-mobile/main.qml
+++ b/qt-mobile/main.qml
@@ -2,12 +2,12 @@ import QtQuick 2.3
 import QtQuick.Controls 1.2
 import QtQuick.Window 2.2
 import QtQuick.Dialogs 1.2
+import QtQuick.Layouts 1.1
 import org.subsurfacedivelog.mobile 1.0
 
 ApplicationWindow {
 	title: qsTr("Subsurface")
 	width: 500;
-	height: 700
 
 	FileDialog {
 		id: fileOpen
@@ -23,179 +23,201 @@ ApplicationWindow {
 		id: manager
 	}
 
-	menuBar: MenuBar {
-		Menu {
-			title: qsTr("File")
-			MenuItem {
-				text: qsTr("Open")
-				onTriggered: fileOpen.open()
-			}
-
-			MenuItem {
-				text: qsTr("Exit")
-				onTriggered: Qt.quit();
-			}
-		}
+	Preferences {
+		id: prefsWindow
 	}
 
-	Rectangle {
-		id: page
-		width: parent.width; height: parent.height
+	ColumnLayout {
+		id: layout
+		anchors.fill: parent
+		spacing: 4
+
+		Rectangle {
+			id: topPart
+			height: 35
+			Layout.fillWidth: true
+			Layout.maximumHeight: 35
+
+			RowLayout {
+				Button {
+					id: prefsButton
+					text: "Preferences"
+					onClicked: {
+						prefsWindow.show()
+					}
+				}
 
-		Component {
-			id: diveDelegate
+				Button {
+					id: openFile
+					text: "Open File"
+					onClicked: {
+						fileOpen.open();
+					}
+				}
+			}
 
-			Item {
-				id: dive
+		}
 
-				property real detailsOpacity : 0
+		Rectangle {
+			id: page
+			Layout.fillHeight: true
+			Layout.fillWidth: true
 
-				width: diveListView.width
-				height: 70
+			Component {
+				id: diveDelegate
 
-				//Bounded rect for the background
-				Rectangle {
-					id: background
-					x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2;
-					color: "ivory"
-					border.color: "orange"
-					radius: 5
-				}
+				Item {
+					id: dive
 
-				//Mouse region: When clicked, the mode changes to details view
-				MouseArea {
-					anchors.fill: parent
-					onClicked: dive.state = 'Details'
-				}
+					property real detailsOpacity : 0
 
-				//Layout of the page: (mini profile, dive no, date at the tio
-				//And other details at the bottom.
-				Row {
-					id: topLayout
-					x: 10; y: 10; height: 60; width: parent.width
-					spacing: 10
+					width: diveListView.width
+					height: 70
 
-					Column {
-						width: background.width; height: 60
-						spacing: 5
+					//Bounded rect for the background
+					Rectangle {
+						id: background
+						x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2;
+						color: "ivory"
+						border.color: "orange"
+						radius: 5
+					}
 
-						Text {
-							text: diveNumber + ' (' + date + ')'
+					//Mouse region: When clicked, the mode changes to details view
+					MouseArea {
+						anchors.fill: parent
+						onClicked: dive.state = 'Details'
+					}
+
+					//Layout of the page: (mini profile, dive no, date at the tio
+					//And other details at the bottom.
+					Row {
+						id: topLayout
+						x: 10; y: 10; height: 60; width: parent.width
+						spacing: 10
+
+						Column {
+							width: background.width; height: 60
+							spacing: 5
+
+							Text {
+								text: diveNumber + ' (' + date + ')'
+							}
+							Text { text: location; width: details.width }
+							Text { text: '<b>Depth:</b> ' + depth + ' <b>Duration:</b>' + duration; width: details.width }
 						}
-						Text { text: location; width: details.width }
-						Text { text: '<b>Depth:</b> ' + depth + ' <b>Duration:</b>' + duration; width: details.width }
 					}
-				}
 
-				Item {
-					id: details
-					x: 10; width: parent.width - 20
-					anchors { top: topLayout.bottom; topMargin: 10; bottom:parent.bottom; bottomMargin: 10 }
-					opacity: dive.detailsOpacity
+					Item {
+						id: details
+						x: 10; width: parent.width - 20
+						anchors { top: topLayout.bottom; topMargin: 10; bottom:parent.bottom; bottomMargin: 10 }
+						opacity: dive.detailsOpacity
 
-					Text {
-						id: detailsTitle
-						anchors.top: parent.top
-						text: "Dive Details"
-						font.pointSize: 12; font.bold: true
-					}
+						Text {
+							id: detailsTitle
+							anchors.top: parent.top
+							text: "Dive Details"
+							font.pointSize: 12; font.bold: true
+						}
 
-					Flickable {
-						id: flick
-						width: parent.width
-						anchors { top: detailsTitle.bottom; bottom: parent.bottom }
-						contentHeight: detailsView.height
-						clip: true
-						Row {
-							Text { text:
-								    '<b>Location: </b>' + location +
-								    '<br><b>Air temp: </b>' + airtemp + ' <b> Water temp: </b>' + watertemp +
-								    '<br><b>Suit: </b>' + suit +
-								    '<br><b>Buddy: </b>' + buddy +
-								    '<br><b>Dive Master: </b>' + divemaster +
-								    '<br/><b>Notes:</b><br/>' + notes; wrapMode: Text.WordWrap; width: details.width }
+						Flickable {
+							id: flick
+							width: parent.width
+							anchors { top: detailsTitle.bottom; bottom: parent.bottom }
+							contentHeight: detailsView.height
+							clip: true
+							Row {
+								Text { text:
+									    '<b>Location: </b>' + location +
+									    '<br><b>Air temp: </b>' + airtemp + ' <b> Water temp: </b>' + watertemp +
+									    '<br><b>Suit: </b>' + suit +
+									    '<br><b>Buddy: </b>' + buddy +
+									    '<br><b>Dive Master: </b>' + divemaster +
+									    '<br/><b>Notes:</b><br/>' + notes; wrapMode: Text.WordWrap; width: details.width }
+							}
 						}
 					}
-				}
 
-				TextButton {
-					y: 10
-					anchors { right: background.right; rightMargin: 10 }
-					opacity: dive.detailsOpacity
-					text: "Close"
+					TextButton {
+						y: 10
+						anchors { right: background.right; rightMargin: 10 }
+						opacity: dive.detailsOpacity
+						text: "Close"
 
-					onClicked: dive.state = '';
-				}
+						onClicked: dive.state = '';
+					}
 
-				states: State {
-					name: "Details"
+					states: State {
+						name: "Details"
 
-					PropertyChanges {
-						target: background
-						color: "white"
-					}
+						PropertyChanges {
+							target: background
+							color: "white"
+						}
 
-					PropertyChanges {
-						target: dive
-						detailsOpacity: 1; x:0 //Make details visible
-						height: diveListView.height //Fill entire list area with the details
-					}
+						PropertyChanges {
+							target: dive
+							detailsOpacity: 1; x:0 //Make details visible
+							height: diveListView.height //Fill entire list area with the details
+						}
 
-					//Move the list so that this item is at the top
-					PropertyChanges {
-						target: dive.ListView.view
-						explicit: true
-						contentY: dive.y
-					}
+						//Move the list so that this item is at the top
+						PropertyChanges {
+							target: dive.ListView.view
+							explicit: true
+							contentY: dive.y
+						}
 
-					//Disable flicking while we are in detailed view
-					PropertyChanges {
-						target: dive.ListView.view
-						interactive: false
+						//Disable flicking while we are in detailed view
+						PropertyChanges {
+							target: dive.ListView.view
+							interactive: false
+						}
 					}
-				}
 
-				transitions: Transition {
-					//make the state changes smooth
-					ParallelAnimation {
-						ColorAnimation {
-							property: "color"
-							duration: 500
-						}
-						NumberAnimation {
-							duration: 300
-							properties: "detailsOpacity,x,contentY,height,width"
+					transitions: Transition {
+						//make the state changes smooth
+						ParallelAnimation {
+							ColorAnimation {
+								property: "color"
+								duration: 500
+							}
+							NumberAnimation {
+								duration: 300
+								properties: "detailsOpacity,x,contentY,height,width"
+							}
 						}
 					}
 				}
 			}
-		}
 
-		Component {
-			id: tripHeading
-			Rectangle {
-				width: page.width
-				height: childrenRect.height
-				color: "lightsteelblue"
-
-				Text {
-					text: section
-					font.bold: true
-					font.pointSize: 16
+			Component {
+				id: tripHeading
+				Rectangle {
+					width: page.width
+					height: childrenRect.height
+					color: "lightsteelblue"
+
+					Text {
+						text: section
+						font.bold: true
+						font.pointSize: 16
+					}
 				}
 			}
-		}
 
-		ListView {
-			id: diveListView
-			anchors.fill: parent
-			model: diveModel
-			delegate: diveDelegate
-			focus: true
+			ListView {
+				id: diveListView
+				anchors.fill: parent
+				model: diveModel
+				delegate: diveDelegate
+				focus: true
 
-			section.property: "trip"
-			section.criteria: ViewSection.FullString
-			section.delegate: tripHeading
+				section.property: "trip"
+				section.criteria: ViewSection.FullString
+				section.delegate: tripHeading
+			}
 		}
 	}
 }