From 7ccda01e7e9a9be74c4a6461df4d002100e3ac5e Mon Sep 17 00:00:00 2001
From: Dirk Hohndel <dirk@hohndel.org>
Date: Tue, 20 Jun 2017 12:02:30 -0700
Subject: QML UI: DiveDetailsView: make key dive info consistent with dive list

Remove the grid layout and replace it with code that is derived from the delegate
that we use in the dive list. In order to look proportional I ended up using a
larger font for the location and therefore decided to allow that text to wrap
instead of forcing single line.

This implements a good chunk of another one of Davide's great
suggestions.

See #431

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
---
 mobile-widgets/qml/DiveDetailsView.qml | 94 ++++++++++++++++------------------
 1 file changed, 45 insertions(+), 49 deletions(-)

(limited to 'mobile-widgets/qml')

diff --git a/mobile-widgets/qml/DiveDetailsView.qml b/mobile-widgets/qml/DiveDetailsView.qml
index 63eb8675d..b2ad2d4cd 100644
--- a/mobile-widgets/qml/DiveDetailsView.qml
+++ b/mobile-widgets/qml/DiveDetailsView.qml
@@ -16,7 +16,7 @@ Item {
 	property real col3Width: gridWidth * 0.30
 
 	width: diveDetailsPage.width - diveDetailsPage.leftPadding - diveDetailsPage.rightPadding
-	height: mainLayout.implicitHeight + bottomLayout.implicitHeight + Kirigami.Units.iconSizes.large
+	height: divePlate.implicitHeight + bottomLayout.implicitHeight + Kirigami.Units.iconSizes.large
 	Rectangle {
 		z: 99
 		color: Kirigami.Theme.textColor
@@ -28,73 +28,69 @@ Item {
 			bottom: parent.bottom
 		}
 	}
-	GridLayout {
-		id: mainLayout
-		anchors {
-			top: parent.top
-			left: parent.left
-			right: parent.right
-			margins: Kirigami.Units.gridUnit
-		}
-		columns: 4
-		rowSpacing: Kirigami.Units.smallSpacing * 2
-		columnSpacing: Kirigami.Units.smallSpacing
-
-		Kirigami.Heading {
-			id: detailsViewHeading
-			Layout.fillWidth: true
+	Item {
+		id: divePlate
+		width: parent.width - Kirigami.Units.gridUnit
+		height: childrenRect.height - Kirigami.Units.smallSpacing
+		anchors.left: parent.left
+		Kirigami.Label {
+			id: locationText
 			text: dive.location
-			Layout.columnSpan: 4
-			wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
-			Layout.topMargin: Kirigami.Units.largeSpacing
+			font.weight: Font.Bold
+			font.pointSize: subsurfaceTheme.titlePointSize
+			wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+			color: Kirigami.Theme.textColor
+			anchors {
+				left: parent.left
+				top: parent.top
+				right: parent.right
+				margins: Math.round(Kirigami.Units.gridUnit / 2)
+			}
 			MouseArea {
 				anchors.fill: parent
+				visible: dive.gps_decimal !== ""
 				onClicked: {
 					if (dive.gps_decimal !== "")
 						showMap(dive.gps_decimal)
 				}
 			}
 		}
-		Kirigami.Label {
-			id: dateLabel
-			text: qsTr("Date: ")
-			opacity: 0.6
-		}
-		Kirigami.Label {
-			text: dive.date + " " + dive.time
-			wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
-			Layout.columnSpan: 2
+		Row {
+			anchors {
+				left: locationText.left
+				top: locationText.bottom
+				bottom: numberText.bottom
+			}
+
+			Kirigami.Label {
+				text: dive.date + " " + dive.time
+				width: Math.max(locationText.width * 0.45, paintedWidth)
+				font.pointSize: subsurfaceTheme.smallPointSize
+				color: Kirigami.Theme.textColor
+			}
+			// let's try to show the depth / duration very compact
+			Kirigami.Label {
+				text: dive.depth + ' / ' + dive.duration
+				width: Math.max(Kirigami.Units.gridUnit * 3, paintedWidth)
+				font.pointSize: subsurfaceTheme.smallPointSize
+				color: Kirigami.Theme.textColor
+			}
 		}
 		Kirigami.Label {
 			id: numberText
 			text: "#" + dive.number
+			font.pointSize: subsurfaceTheme.smallPointSize
 			color: Kirigami.Theme.textColor
-			wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
-		}
-
-		Kirigami.Label {
-			id: depthLabel
-			text: qsTr("Depth: ")
-			opacity: 0.6
-		}
-		Kirigami.Label {
-			text: dive.depth
-			Layout.fillWidth: true
-			wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
-		}
-		Kirigami.Label {
-			text: qsTr("Duration: ")
-			opacity: 0.6
-			Layout.alignment: Qt.AlignRight
+			anchors {
+				right: parent.right
+				top: locationText.bottom
+			}
 		}
-		Kirigami.Label {
-			text: dive.duration
-			wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
 	}
 	GridLayout {
 		id: bottomLayout
 		anchors {
-			top: mainLayout.bottom
+			top: divePlate.bottom
 			left: parent.left
 			right: parent.right
 			margins: Math.round(Kirigami.Units.gridUnit / 2)
-- 
cgit v1.2.3-70-g09d2