redesign dive details view

This change cleans up the layout optimized for viewing dive details. The
top part contains brief and essential dive info (location, depth,
duration, dive no.), then the profile, then a table with more details,
and finally the notes.

The goal here is to present the dive's data more efficiently and
attractively now that the edit part is factored out.

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

qt-mobile/qml/DiveDetails.qml

@@ -45,11 +45,12 @@ MobileComponents.Page {
 
 	contextualActions: [
 		Action {
-			text: "Save Changes"
+			text: "Save"
 			enabled: diveDetailsWindow.state == "edit"
 			iconName: "document-save"
 			onTriggered: {
 				manager.saveChanges();
+				contextDrawer.close();
 			}
 		},
 		Action {
@@ -57,7 +58,9 @@ MobileComponents.Page {
 			checkable: true
 			iconName: checked ? "view-readermode" : "document-edit"
 			onTriggered: {
-				diveDetailsWindow.state = checked ? "edit" : "view"
+				diveDetailsWindow.state = checked ? "edit" : "view";
+				contextDrawer.close();
+				// close drawer?
 			}
 		}
 
@@ -69,6 +72,7 @@ MobileComponents.Page {
 			id: flick
 			anchors.fill: parent
 			contentHeight: content.height
+			interactive: contentHeight > height
 			clip: true
 			Item {
 				id: content
@@ -81,8 +85,9 @@ MobileComponents.Page {
 						left: parent.left
 						right: parent.right
 						top: parent.top
-						margins: MobileComponents.Units.smallSpacing
+						margins: MobileComponents.Units.gridUnit / 2
 					}
+					visible: opacity > 0
 
 					Behavior on opacity {
 						NumberAnimation { duration: MobileComponents.Units.shortDuration }
@@ -94,8 +99,9 @@ MobileComponents.Page {
 						left: parent.left
 						right: parent.right
 						top: parent.top
-						margins: MobileComponents.Units.smallSpacing
+						margins: MobileComponents.Units.gridUnit / 2
 					}
+					visible: opacity > 0
 
 					Behavior on opacity {
 						NumberAnimation { duration: MobileComponents.Units.shortDuration }

qt-mobile/qml/DiveDetailsView.qml

@@ -6,10 +6,14 @@ import QtQuick.Layouts 1.1
 import org.subsurfacedivelog.mobile 1.0
 import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
 
-ColumnLayout {
+GridLayout {
 	id: detailsView
 
-	spacing: MobileComponents.Units.smallSpacing
+	columns: 4
+	rowSpacing: MobileComponents.Units.smallSpacing * 2
+	columnSpacing: MobileComponents.Units.smallSpacing
+
+	property int labelWidth: MobileComponents.Units.gridUnit * 10
 
 	Connections {
 		target: diveDetailsWindow
@@ -21,28 +25,27 @@ ColumnLayout {
 
 	MobileComponents.Heading {
 		id: detailsViewHeading
-		Layout.columnSpan: 2
+		Layout.fillWidth: true
 		text: location
+		Layout.columnSpan: 4
+	}
+
+	MobileComponents.Label {
+		Layout.alignment: Qt.AlignRight
+		id: depthLabel
+		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 {
+		Layout.alignment: Qt.AlignRight
+		text: "Duration: "
+		opacity: 0.6
 	}
 	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
 		}
@@ -54,38 +57,37 @@ ColumnLayout {
 			id: numberText
 			text: "#" + diveNumber
 			color: MobileComponents.Theme.textColor
-			//opacity: 0.6
 		}
 	}
 
-	Item {
+	QMLProfile {
-		Layout.columnSpan: 2
+		id: qmlProfile
 		Layout.fillWidth: true
-		Layout.preferredHeight: qmlProfile.height
+		Layout.preferredHeight: width * 0.66
-		QMLProfile {
+		Layout.columnSpan: 4
-			id: qmlProfile
+
-			//height: MobileComponents.Units.gridUnit * 25
+		Rectangle {
-			height: width * 0.66
+			color: "transparent"
-			anchors {
+			opacity: 0.6
-				top: parent.top
+			border.width: 1
-				left: parent.left
+			border.color: MobileComponents.Theme.textColor;
-				right: parent.right
+			anchors.fill: parent
-			}
+
-			//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
 		}
+		//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
+	MobileComponents.Heading {
-		text: "Location:"
-	}
-	MobileComponents.Label {
-		id: txtLocation; text: location;
 		Layout.fillWidth: true
+		level: 3
+		text: "Dive Details"
+		Layout.columnSpan: 4
 	}
 
 	MobileComponents.Label {
 		Layout.alignment: Qt.AlignRight
 		text: "Air Temp:"
+		opacity: 0.6
 	}
 	MobileComponents.Label {
 		id: txtAirTemp
@@ -96,6 +98,7 @@ ColumnLayout {
 	MobileComponents.Label {
 		Layout.alignment: Qt.AlignRight
 		text: "Water Temp:"
+		opacity: 0.6
 	}
 	MobileComponents.Label {
 		id: txtWaterTemp
@@ -106,7 +109,7 @@ ColumnLayout {
 	MobileComponents.Label {
 		Layout.alignment: Qt.AlignRight
 		text: "Suit:"
-
+		opacity: 0.6
 	}
 	MobileComponents.Label {
 		id: txtSuit
@@ -114,9 +117,21 @@ ColumnLayout {
 		Layout.fillWidth: true
 	}
 
+	MobileComponents.Label {
+		Layout.alignment: Qt.AlignRight
+		text: "Weight:"
+		opacity: 0.6
+	}
+	MobileComponents.Label {
+		id: txtWeight
+		text: weight
+		Layout.fillWidth: true
+	}
+
 	MobileComponents.Label {
 		Layout.alignment: Qt.AlignRight
 		text: "Buddy:"
+		opacity: 0.6
 	}
 	MobileComponents.Label {
 		id: txtBuddy
@@ -127,6 +142,7 @@ ColumnLayout {
 	MobileComponents.Label {
 		Layout.alignment: Qt.AlignRight
 		text: "Dive Master:"
+		opacity: 0.6
 	}
 	MobileComponents.Label {
 		id: txtDiveMaster
@@ -134,21 +150,26 @@ ColumnLayout {
 		Layout.fillWidth: true
 	}
 
-	MobileComponents.Label {
+	MobileComponents.Heading {
-		Layout.alignment: Qt.AlignRight
+		Layout.fillWidth: true
-		text: "Notes:"
+		level: 3
+		text: "Notes"
+		Layout.columnSpan: 4
 	}
+
 	MobileComponents.Label {
 		id: txtNotes
 		text: notes
 		focus: true
+		Layout.columnSpan: 4
 		Layout.fillWidth: true
 		Layout.fillHeight: true
 		//selectByMouse: true
 		wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
 	}
 	Item {
-		height: MobileComponents.Units.gridUnit * 3
+		Layout.columnSpan: 4
-		width: height // just to make sure the spacer doesn't produce scrollbars, but also isn't null
+		Layout.fillWidth: true
+		Layout.minimumHeight: MobileComponents.Units.gridUnit * 3
 	}
 }