QML UI: better list of downloaded dives

Not the lsit is much more compact and shows a lot more dives even on
smaller screens. And it's similar in style to the dive list.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

1 files changed, 21 insertions, 51 deletions

diff --git a/mobile-widgets/qml/DownloadedDiveDelegate.qml b/mobile-widgets/qml/DownloadedDiveDelegate.qml
index 34c567a0c..a842684db 100644
--- a/mobile-widgets/qml/DownloadedDiveDelegate.qml
+++ b/mobile-widgets/qml/DownloadedDiveDelegate.qml
@@ -17,16 +17,19 @@ Kirigami.AbstractListItem {
 	enabled: true
 	supportsMouseEvents: true
 	width: parent.width
+	height: Math.round(Kirigami.Units.gridUnit * 1.8)
+	padding: 0
 
 	property real detailsOpacity : 0
-	property int horizontalPadding: Kirigami.Units.gridUnit / 2 - Kirigami.Units.smallSpacing  + 1
-	property color textColor: subsurfaceTheme.textColor
+	property color textColor: subsurfaceTheme.secondaryTextColor
 
 	Row {
+		id: downloadedDive
 		width: parent.width
-		height: childrenRect.height + Kirigami.Units.smallSpacing
-		spacing: horizontalPadding
-
+		spacing: Kirigami.Units.largeSpacing
+		padding: 0
+		anchors.leftMargin: Math.round (Kirigami.Units.largeSpacing / 2)
+		anchors.fill: parent
 		add: Transition {
 			NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
 			NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
@@ -36,6 +39,7 @@ Kirigami.AbstractListItem {
 			checked: innerListItem.selected;
 			width: childrenRect.width - Kirigami.Units.smallSpacing;
 			height: childrenRect.heigh - Kirigami.Units.smallSpacing;
+			anchors.verticalCenter: parent.verticalCenter
 			indicator: Rectangle {
 				visible: diveIsSelected
 				implicitWidth: 20
@@ -61,52 +65,18 @@ Kirigami.AbstractListItem {
 				importModel.selectRow(index)
 			}
 		}
-		Item {
-			id: diveListEntry
-			width: parent.width - diveIsSelected.width - Kirigami.Units.gridUnit * (innerListItem.deleteButtonVisible ? 3 : 1)
-			height: childrenRect.height - Kirigami.Units.smallSpacing
-
-			Kirigami.Label {
-				id: depthLabel
-				text: "Depth " + innerListItem.depth
-				font.weight: Font.Light
-				elide: Text.ElideRight
-				maximumLineCount: 1 // needed for elide to work at all
-				anchors {
-					left: parent.left
-					leftMargin: horizontalPadding
-					top: parent.top
-					right: dateLabel.left
-				}
-			}
-			Kirigami.Label {
-				id: dateLabel
-				text: innerListItem.datetime
-				font.pointSize: subsurfaceTheme.smallPointSize
-				anchors {
-					bottom: parent.bottom
-					right: parent.right
-					top: parent.top
-				}
-			}
-			Row {
-				anchors {
-					top: depthLabel.bottom
-					left: parent.left
-					leftMargin: horizontalPadding
-					right: parent.right
-					rightMargin: horizontalPadding
-					topMargin: - Kirigami.Units.smallSpacing * 2
-				}
-				Kirigami.Label {
-					text: qsTr('Duration: ')
-					font.pointSize: subsurfaceTheme.smallPointSize
-				}
-				Kirigami.Label {
-					text: innerListItem.duration
-					font.pointSize: subsurfaceTheme.smallPointSize
-				}
-			}
+		Kirigami.Label {
+			id: dateLabel
+			text: innerListItem.datetime
+			width: Math.round(parent.width * 0.35)
+			font.pointSize: subsurfaceTheme.smallPointSize
+			color: textColor
+		}
+		Kirigami.Label {
+			text: innerListItem.depth + ' / ' + innerListItem.duration
+			width: Math.round(parent.width * 0.35)
+			font.pointSize: subsurfaceTheme.smallPointSize
+			color: textColor
 		}
 	}
 }