Rework divedetails page

- Styled texts
- don't put all the properties of the text items in one long line, makes
  the code more readable and is in line with coding style used
  throughout.
- button and profile move into their own items, button moves to the
  right (it's more of a contextual item, so it's better placed top
  right, further more, a control is generally easier to reach on the
  right without covering information unnecessarily. Code-wise, it's also
  a more logical encapsulation.
- dpi-aware sizing of dive profile, use units.gridUnit instead of
  hard-coded pixels.

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

qt-mobile/qml/DiveDetails.qml

@@ -37,7 +37,38 @@ Item {
 			width: parent.width
 			spacing: 8
 
+
+			GridLayout {
+				id: editorDetails
+				width: parent.width
+				columns: 2
+
+				Label {
+					Layout.columnSpan: 2
+					font.pointSize: units.titlePointSize
+					text: "Dive " + number + " (" + date + ")"
+				}
+
+				Item {
+					Layout.columnSpan: 2
+					Layout.fillWidth: true
+					Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height
+					QMLProfile {
+						id: qmlProfile
+						height: 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
+					}
 					Button {
+						id: profileHideButton
+						anchors {
+							right: parent.right
+							top: parent.top
+						}
 						text: "Hide Dive Profile"
 						onClicked: {
 							qmlProfile.visible = !qmlProfile.visible
@@ -48,35 +79,64 @@ Item {
 							}
 						}
 					}
-
+				}
-			GridLayout {
-				id: editorDetails
-				width: parent.width
-				columns: 2
 				Label {
-					Layout.columnSpan: 2
+					text: "Location:"
-					Layout.alignment: Qt.AlignHCenter
-					text: "Dive " + number + " (" + date + ")"; font.bold: true
 				}
-				QMLProfile {
+				TextField {
-					Layout.columnSpan: 2
+					id: txtLocation; text: location;
 					Layout.fillWidth: true
-					id: qmlProfile
-					height: 500
 				}
-				Label { text: "Location:" }
+
-				TextField { id: txtLocation; text: location; Layout.fillWidth: true }
+				Label {
-				Label { text: "Air Temp:" }
+					text: "Air Temp:"
-				TextField { id: txtAirTemp; text: airtemp; Layout.fillWidth: true }
+				}
-				Label { text: "Water Temp:" }
+				TextField {
-				TextField { id: txtWaterTemp; text: watertemp; Layout.fillWidth: true }
+					id: txtAirTemp
-				Label { text: "Suit:" }
+					text: airtemp
-				TextField { id: txtSuit; text: suit; Layout.fillWidth: true }
+					Layout.fillWidth: true
-				Label { text: "Buddy:" }
+				}
-				TextField { id: txtBuddy; text: buddy; Layout.fillWidth: true }
+
-				Label { text: "Dive Master:" }
+				Label {
-				TextField { id: txtDiveMaster; text: divemaster; Layout.fillWidth: true}
+					text: "Water Temp:"
-				Label { text: "Notes:" }
+				}
+				TextField {
+					id: txtWaterTemp
+					text: watertemp
+					Layout.fillWidth: true
+				}
+
+				Label {
+					text: "Suit:"
+
+				}
+				TextField {
+					id: txtSuit
+					text: suit
+					Layout.fillWidth: true
+				}
+
+				Label {
+					text: "Buddy:"
+				}
+				TextField {
+					id: txtBuddy
+					text: buddy
+					Layout.fillWidth: true
+				}
+
+				Label {
+					text: "Dive Master:"
+				}
+				TextField {
+					id: txtDiveMaster
+					text: divemaster
+					Layout.fillWidth: true
+				}
+
+				Label {
+					text: "Notes:"
+				}
 				TextEdit{
 					id: txtNotes
 					text: notes