QML UI: Move DiveDetails to the StackView

Add a DiveDetails.qml to hold the dive details, and display it in
the stack view when the user taps on a dive.

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

qt-mobile/DiveDetails.qml

@@ -0,0 +1,85 @@
+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
+
+Item {
+	id: diveDetailsWindow
+	width: parent.width
+
+	property string location
+	property string dive_id
+	property string airtemp
+	property string watertemp
+	property string suit
+	property string buddy
+	property string divemaster;
+	property string notes;
+
+	onDive_idChanged: {
+		qmlProfile.diveId = dive_id
+		qmlProfile.update()
+	}
+
+	Flickable {
+		id: flick
+		width: parent.width
+		anchors { top: parent.top; bottom: parent.bottom }
+		contentHeight: parent.height
+		clip: true
+		ColumnLayout {
+			width: parent.width
+			RowLayout {
+				Button {
+					text: "Back"
+					onClicked: {
+						manager.commitChanges(
+									dive_id,
+									suit,
+									buddy,
+									divemaster,
+									notes
+									)
+						stackView.pop();
+					}
+				}
+			}
+
+			GridLayout {
+				id: editorDetails
+				width: parent.width
+				columns: 2
+				Text { }
+				QMLProfile {
+					id: qmlProfile
+					height: 500
+					Layout.fillWidth: true
+				}
+				Text { text: "Location:"; font.bold: true }
+				TextField { id: txtLocation; text: location; Layout.fillWidth: true }
+				Text { text: "Air Temp:"; font.bold: true }
+				TextField { id: txtAirTemp; text: airtemp; Layout.fillWidth: true }
+				Text { text: "Water Temp:"; font.bold: true }
+				TextField { id: txtWaterTemp; text: watertemp; Layout.fillWidth: true }
+				Text { text: "Suit:"; font.bold: true }
+				TextField { id: txtSuit; text: suit; Layout.fillWidth: true }
+				Text { text: "Buddy:"; font.bold: true }
+				TextField { id: txtBuddy; text: buddy; Layout.fillWidth: true }
+				Text { text: "Dive Master:"; font.bold: true }
+				TextField { id: txtDiveMaster; text: divemaster; Layout.fillWidth: true}
+				Text { text: "Notes:"; font.bold: true }
+				TextEdit{
+					id: txtNotes
+					text: notes
+					focus: true
+					Layout.fillWidth: true
+					Layout.fillHeight: true
+					selectByMouse: true
+					wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+				}
+			}
+		}
+	}
+}

qt-mobile/DiveList.qml

@@ -10,7 +10,6 @@ Rectangle {
 
 	Component {
 		id: diveDelegate
-
 		Item {
 			id: dive
 
@@ -24,14 +23,25 @@ Rectangle {
 				id: background
 				x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2;
 				color: "ivory"
-				border.color: "orange"
+				border.color: "lightblue"
 				radius: 5
 			}
 
 			//Mouse region: When clicked, the mode changes to details view
 			MouseArea {
 				anchors.fill: parent
-				onClicked: dive.state = 'Details'
+				onClicked: {
+					detailsWindow.width = parent.width
+					detailsWindow.location = location
+					detailsWindow.dive_id = id
+					detailsWindow.buddy = buddy
+					detailsWindow.suit = suit
+					detailsWindow.airtemp = airtemp
+					detailsWindow.watertemp = watertemp
+					detailsWindow.divemaster = divemaster
+					detailsWindow.notes = notes
+					stackView.push(detailsWindow)
+				}
 			}
 
 			//Layout of the page: (mini profile, dive no, date at the tio
@@ -39,7 +49,6 @@ Rectangle {
 			Row {
 				id: topLayout
 				x: 10; y: 10; height: childrenRect.height; width: parent.width
-				spacing: 10
 
 				Column {
 					width: background.width; height: childrenRect.height * 1.1
@@ -48,125 +57,8 @@ Rectangle {
 					Text {
 						text: diveNumber + ' (' + date + ')'
 					}
-					Text { text: location; width: details.width }
+					Text { text: location; width: parent.width }
-					Text { text: '<b>Depth:</b> ' + depth + ' <b>Duration:</b>' + duration; width: details.width }
+					Text { text: '<b>Depth:</b> ' + depth + ' <b>Duration:</b>' + duration; width: parent.width }
-				}
-			}
-
-			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
-				}
-
-				Flickable {
-					id: flick
-					width: parent.width
-					anchors { top: detailsTitle.bottom; bottom: parent.bottom }
-					contentHeight: editorDetails.height
-					clip: true
-
-					GridLayout {
-						id: editorDetails
-						width: detailsPage.width
-						columns: 2
-						Text { }
-						QMLProfile {
-							diveId: id
-							height: 400
-							Layout.fillWidth: true
-						}
-
-						Text { text: "Location:"; font.bold: true }
-						TextField { id: txtLocation; text: location; Layout.fillWidth: true }
-						Text { text: "Air Temp:"; font.bold: true }
-						TextField { id: txtAirTemp; text: airtemp; Layout.fillWidth: true }
-						Text { text: "Water Temp:"; font.bold: true }
-						TextField { id: txtWaterTemp; text: watertemp; Layout.fillWidth: true }
-						Text { text: "Suit:"; font.bold: true }
-						TextField { id: txtSuit; text: suit; Layout.fillWidth: true }
-						Text { text: "Buddy:"; font.bold: true }
-						TextField { id: txtBuddy; text: buddy; Layout.fillWidth: true }
-						Text { text: "Dive Master:"; font.bold: true }
-						TextField { id: txtDiveMaster; text: divemaster; Layout.fillWidth: true}
-						Text { text: "Notes:"; font.bold: true }
-						TextEdit{
-							id: txtNotes
-							text: notes
-							focus: true
-							Layout.fillWidth: true
-							Layout.fillHeight: true
-							selectByMouse: true
-							wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
-						}
-					}
-				}
-			}
-
-			TextButton {
-				y: 10
-				anchors { right: background.right; rightMargin: 10 }
-				opacity: dive.detailsOpacity
-				text: "Close"
-
-				onClicked: {
-					manager.commitChanges(
-								id,
-								txtSuit.text,
-								txtBuddy.text,
-								txtDiveMaster.text,
-								txtNotes.text
-								)
-					dive.state = '';
-				}
-			}
-
-			states: State {
-				name: "Details"
-
-				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
-				}
-
-				//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
-				}
-			}
-
-			transitions: Transition {
-				//make the state changes smooth
-				ParallelAnimation {
-					ColorAnimation {
-						property: "color"
-						duration: 500
-					}
-					NumberAnimation {
-						duration: 300
-						properties: "detailsOpacity,x,contentY,height,width"
-					}
 				}
 			}
 		}

qt-mobile/main.qml

@@ -104,4 +104,8 @@ ApplicationWindow {
 		visible: false
 	}
 
+	DiveDetails {
+		id: detailsWindow
+		visible: false
+	}
 }

qt-mobile/mobile-resources.qrc

@@ -4,5 +4,6 @@
         <file>TextButton.qml</file>
         <file>Preferences.qml</file>
         <file>DiveList.qml</file>
+        <file>DiveDetails.qml</file>
     </qresource>
 </RCC>