split divedetails into view and edit parts

This splits the dive detail page into two modes: view and edit

- The edit part loses the profile (it's not editable anyway)

- The view part gets a new layout, friendlier for viewing

- Properties for diveNumber, duration, depth and weight are added

Signed-off-by: Sebastian Kügler <sebas@kde.org>

5 files changed, 168 insertions, 127 deletions

diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml
index 10fe57c01..28646fd89 100644
--- a/qt-mobile/qml/DiveDetails.qml
+++ b/qt-mobile/qml/DiveDetails.qml
@@ -13,15 +13,22 @@ MobileComponents.Page {
 	flickable: flick
 
 	property string location
+	property string depth
 	property string dive_id
+	property string diveNumber
+	property string duration
 	property string airtemp
 	property string watertemp
 	property string suit
+	property int rating
 	property string buddy
 	property string divemaster;
 	property string notes;
 	property string date
 	property string number
+	property string weight
+
+	state: "view"
 
 	states: [
 		State {
@@ -35,10 +42,6 @@ MobileComponents.Page {
 			PropertyChanges { target: detailsEdit; opacity: 1 }
 		}
 	]
-	onDive_idChanged: {
-		qmlProfile.diveId = dive_id
-		qmlProfile.update()
-	}
 
 	ScrollView {
 		anchors.fill: parent
@@ -79,8 +82,7 @@ MobileComponents.Page {
 						NumberAnimation { duration: MobileComponents.Units.shortDuration }
 					}
 				}
-
-				ColumnLayout {
+				DiveDetailsView {
 					id: detailsView
 					anchors {
 						left: parent.left
@@ -88,116 +90,11 @@ MobileComponents.Page {
 						top: parent.top
 						margins: MobileComponents.Units.smallSpacing
 					}
-					spacing: MobileComponents.Units.smallSpacing
 
 					Behavior on opacity {
 						NumberAnimation { duration: MobileComponents.Units.shortDuration }
 					}
 
-
-					GridLayout {
-						id: editorDetails
-						width: parent.width
-						columns: 2
-
-						MobileComponents.Heading {
-							Layout.columnSpan: 2
-							text: "VIEW Dive " + number + " (" + date + ")"
-						}
-
-						Item {
-							Layout.columnSpan: 2
-							Layout.fillWidth: true
-							Layout.preferredHeight: qmlProfile.height
-							QMLProfile {
-								id: qmlProfile
-								height: MobileComponents.Units.gridUnit * 25
-								anchors {
-									top: parent.top
-									left: parent.left
-									right: parent.right
-								}
-								//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
-							}
-						}
-						MobileComponents.Label {
-							Layout.alignment: Qt.AlignRight
-							text: "Location:"
-						}
-						TextField {
-							id: txtLocation; text: location;
-							Layout.fillWidth: true
-						}
-
-						MobileComponents.Label {
-							Layout.alignment: Qt.AlignRight
-							text: "Air Temp:"
-						}
-						TextField {
-							id: txtAirTemp
-							text: airtemp
-							Layout.fillWidth: true
-						}
-
-						MobileComponents.Label {
-							Layout.alignment: Qt.AlignRight
-							text: "Water Temp:"
-						}
-						TextField {
-							id: txtWaterTemp
-							text: watertemp
-							Layout.fillWidth: true
-						}
-
-						MobileComponents.Label {
-							Layout.alignment: Qt.AlignRight
-							text: "Suit:"
-
-						}
-						TextField {
-							id: txtSuit
-							text: suit
-							Layout.fillWidth: true
-						}
-
-						MobileComponents.Label {
-							Layout.alignment: Qt.AlignRight
-							text: "Buddy:"
-						}
-						TextField {
-							id: txtBuddy
-							text: buddy
-							Layout.fillWidth: true
-						}
-
-						MobileComponents.Label {
-							Layout.alignment: Qt.AlignRight
-							text: "Dive Master:"
-						}
-						TextField {
-							id: txtDiveMaster
-							text: divemaster
-							Layout.fillWidth: true
-						}
-
-						MobileComponents.Label {
-							Layout.alignment: Qt.AlignRight
-							text: "Notes:"
-						}
-						TextArea {
-							id: txtNotes
-							text: notes
-							focus: true
-							Layout.fillWidth: true
-							Layout.fillHeight: true
-							selectByMouse: true
-							wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
-						}
-					}
-					Item {
-						height: MobileComponents.Units.gridUnit * 3
-						width: height // just to make sure the spacer doesn't produce scrollbars, but also isn't null
-					}
 				}
 			}
 		}
diff --git a/qt-mobile/qml/DiveDetailsEdit.qml b/qt-mobile/qml/DiveDetailsEdit.qml
index 2618baae7..7648eaf3f 100644
--- a/qt-mobile/qml/DiveDetailsEdit.qml
+++ b/qt-mobile/qml/DiveDetailsEdit.qml
@@ -27,21 +27,6 @@ Item {
 				text: "Dive " + number + " (" + date + ")"
 			}
 
-			Item {
-				Layout.columnSpan: 2
-				Layout.fillWidth: true
-				Layout.preferredHeight: qmlProfile.height
-				QMLProfile {
-					id: qmlProfile
-					height: MobileComponents.Units.gridUnit * 25
-					anchors {
-						top: parent.top
-						left: parent.left
-						right: parent.right
-					}
-					//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
-				}
-			}
 			MobileComponents.Label {
 				Layout.alignment: Qt.AlignRight
 				text: "Location:"
diff --git a/qt-mobile/qml/DiveDetailsView.qml b/qt-mobile/qml/DiveDetailsView.qml
new file mode 100644
index 000000000..867761c05
--- /dev/null
+++ b/qt-mobile/qml/DiveDetailsView.qml
@@ -0,0 +1,154 @@
+import QtQuick 2.3
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+import QtQuick.Dialogs 1.2
+import QtQuick.Layouts 1.1
+import org.subsurfacedivelog.mobile 1.0
+import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
+
+ColumnLayout {
+	id: detailsView
+
+	spacing: MobileComponents.Units.smallSpacing
+
+	Connections {
+		target: diveDetailsWindow
+		onDive_idChanged: {
+			qmlProfile.diveId = diveDetailsWindow.dive_id
+			qmlProfile.update()
+		}
+	}
+
+	MobileComponents.Heading {
+		id: detailsViewHeading
+		Layout.columnSpan: 2
+		text: location
+	}
+	RowLayout {
+// 			anchors {
+// 				left: parent.left
+// 				right: parent.right
+// 				bottom: numberText.bottom
+// 			}
+		Layout.columnSpan: 2
+		MobileComponents.Label {
+			text: 'Depth: '
+			opacity: 0.6
+		}
+		MobileComponents.Label {
+			text: depth
+			Layout.minimumWidth: Math.max(MobileComponents.Units.gridUnit * 4, paintedWidth) // helps vertical alignment throughout listview
+		}
+		MobileComponents.Label {
+			text: 'Duration: '
+			opacity: 0.6
+		}
+		MobileComponents.Label {
+			text: duration
+		}
+		Item {
+			Layout.fillWidth: true
+			height: parent.height
+		}
+		MobileComponents.Label {
+			id: numberText
+			text: "#" + diveNumber
+			color: MobileComponents.Theme.textColor
+			//opacity: 0.6
+		}
+	}
+
+	Item {
+		Layout.columnSpan: 2
+		Layout.fillWidth: true
+		Layout.preferredHeight: qmlProfile.height
+		QMLProfile {
+			id: qmlProfile
+			//height: MobileComponents.Units.gridUnit * 25
+			height: width * 0.66
+			anchors {
+				top: parent.top
+				left: parent.left
+				right: parent.right
+			}
+			//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
+		}
+	}
+	MobileComponents.Label {
+		Layout.alignment: Qt.AlignRight
+		text: "Location:"
+	}
+	MobileComponents.Label {
+		id: txtLocation; text: location;
+		Layout.fillWidth: true
+	}
+
+	MobileComponents.Label {
+		Layout.alignment: Qt.AlignRight
+		text: "Air Temp:"
+	}
+	MobileComponents.Label {
+		id: txtAirTemp
+		text: airtemp
+		Layout.fillWidth: true
+	}
+
+	MobileComponents.Label {
+		Layout.alignment: Qt.AlignRight
+		text: "Water Temp:"
+	}
+	MobileComponents.Label {
+		id: txtWaterTemp
+		text: watertemp
+		Layout.fillWidth: true
+	}
+
+	MobileComponents.Label {
+		Layout.alignment: Qt.AlignRight
+		text: "Suit:"
+
+	}
+	MobileComponents.Label {
+		id: txtSuit
+		text: suit
+		Layout.fillWidth: true
+	}
+
+	MobileComponents.Label {
+		Layout.alignment: Qt.AlignRight
+		text: "Buddy:"
+	}
+	MobileComponents.Label {
+		id: txtBuddy
+		text: buddy
+		Layout.fillWidth: true
+	}
+
+	MobileComponents.Label {
+		Layout.alignment: Qt.AlignRight
+		text: "Dive Master:"
+	}
+	MobileComponents.Label {
+		id: txtDiveMaster
+		text: divemaster
+		Layout.fillWidth: true
+	}
+
+	MobileComponents.Label {
+		Layout.alignment: Qt.AlignRight
+		text: "Notes:"
+	}
+	MobileComponents.Label {
+		id: txtNotes
+		text: notes
+		focus: true
+		Layout.fillWidth: true
+		Layout.fillHeight: true
+		//selectByMouse: true
+		wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+	}
+	Item {
+		height: MobileComponents.Units.gridUnit * 3
+		width: height // just to make sure the spacer doesn't produce scrollbars, but also isn't null
+	}
+}
diff --git a/qt-mobile/qml/DiveList.qml b/qt-mobile/qml/DiveList.qml
index 77e8802f0..5532ea77d 100644
--- a/qt-mobile/qml/DiveList.qml
+++ b/qt-mobile/qml/DiveList.qml
@@ -28,6 +28,10 @@ MobileComponents.Page {
 				detailsWindow.width = parent.width
 				detailsWindow.location = location
 				detailsWindow.dive_id = id
+				detailsWindow.diveNumber = diveNumber
+				detailsWindow.duration = duration
+				detailsWindow.depth = depth
+				detailsWindow.rating = rating
 				detailsWindow.buddy = buddy
 				detailsWindow.suit = suit
 				detailsWindow.airtemp = airtemp
@@ -36,6 +40,7 @@ MobileComponents.Page {
 				detailsWindow.notes = notes
 				detailsWindow.number = diveNumber
 				detailsWindow.date = date
+				detailsWindow.weight = weight
 				stackView.push(detailsWindow)
 			}
 
@@ -66,7 +71,6 @@ MobileComponents.Page {
 					}
 				}
 				Row {
-					id: descriptionText
 					anchors {
 						left: parent.left
 						right: parent.right
diff --git a/qt-mobile/qml/mobile-resources.qrc b/qt-mobile/qml/mobile-resources.qrc
index 028dd0cef..6eb2eb9d9 100644
--- a/qt-mobile/qml/mobile-resources.qrc
+++ b/qt-mobile/qml/mobile-resources.qrc
@@ -7,6 +7,7 @@
 		<file>DiveList.qml</file>
 		<file>DiveDetails.qml</file>
 		<file>DiveDetailsEdit.qml</file>
+		<file>DiveDetailsView.qml</file>
 		<file>DownloadFromDiveComputer.qml</file>
 		<file>Log.qml</file>
 		<file>TopBar.qml</file>