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>

1 files changed, 90 insertions, 30 deletions

diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml
index 67d4a7d5c..32fa73042 100644
--- a/qt-mobile/qml/DiveDetails.qml
+++ b/qt-mobile/qml/DiveDetails.qml
@@ -37,46 +37,106 @@ Item {
 			width: parent.width
 			spacing: 8
 
-			Button {
-				text: "Hide Dive Profile"
-				onClicked: {
-					qmlProfile.visible = !qmlProfile.visible
-					if (qmlProfile.visible) {
-						text = "Hide Dive Profile"
-					} else {
-						text = "Show Dive Profile"
-					}
-				}
-			}
 
 			GridLayout {
 				id: editorDetails
 				width: parent.width
 				columns: 2
+
 				Label {
 					Layout.columnSpan: 2
-					Layout.alignment: Qt.AlignHCenter
-					text: "Dive " + number + " (" + date + ")"; font.bold: true
+					font.pointSize: units.titlePointSize
+					text: "Dive " + number + " (" + date + ")"
 				}
-				QMLProfile {
+
+				Item {
 					Layout.columnSpan: 2
 					Layout.fillWidth: true
-					id: qmlProfile
-					height: 500
-				}
-				Label { text: "Location:" }
-				TextField { id: txtLocation; text: location; Layout.fillWidth: true }
-				Label { text: "Air Temp:" }
-				TextField { id: txtAirTemp; text: airtemp; Layout.fillWidth: true }
-				Label { text: "Water Temp:" }
-				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:" }
+					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
+							if (qmlProfile.visible) {
+								text = "Hide Dive Profile"
+							} else {
+								text = "Show Dive Profile"
+							}
+						}
+					}
+				}
+				Label {
+					text: "Location:"
+				}
+				TextField {
+					id: txtLocation; text: location;
+					Layout.fillWidth: true
+				}
+
+				Label {
+					text: "Air Temp:"
+				}
+				TextField {
+					id: txtAirTemp
+					text: airtemp
+					Layout.fillWidth: true
+				}
+
+				Label {
+					text: "Water Temp:"
+				}
+				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