QML UI: add DownloadDiveDelegate

A delegate to display the dives in a better way,
based on the code from DiveList.qml

Signed-off-by: Tomaz Canabrava <tcanabrava@kde.org>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

mobile-widgets/qml/DownloadFromDiveComputer.qml

@@ -1,6 +1,5 @@
 // SPDX-License-Identifier: GPL-2.0
 import QtQuick 2.6
-import QtQuick.Controls 1.4 as QQC1
 import QtQuick.Controls 2.0
 import QtQuick.Window 2.2
 import QtQuick.Dialogs 1.2
@@ -93,29 +92,19 @@ Kirigami.Page {
 				text: qsTr(" Downloaded dives")
 			}
 		}
-		QQC1.TableView {
-			width: parent.width
-			Layout.fillWidth: true  // The tableview should fill
-			Layout.fillHeight: true // all remaining vertical space
-			height: parent.height   // on this screen
-			model : importModel
 
-			QQC1.TableViewColumn {
-				width: parent.width / 2
-				role: "datetime"
-				title: qsTr("Date / Time")
-			}
-			QQC1.TableViewColumn {
-				width: parent.width / 4
-				role: "duration"
-				title: qsTr("Duration")
-			}
-			QQC1.TableViewColumn {
-				width: parent.width / 4
-				role: "depth"
-				title: qsTr("Depth")
+		ListView {
+			Layout.fillWidth: true
+			Layout.fillHeight: true
+
+			model : importModel
+			delegate : DownloadedDiveDelegate {
+				datetime: model.datetime
+				duration: model.duration
+				depth: model.depth
 			}
 		}
+
 		RowLayout {
 			Layout.fillWidth: true
 			Button {

mobile-widgets/qml/DownloadedDiveDelegate.qml

@@ -0,0 +1,81 @@
+import QtQuick 2.6
+import QtQuick.Controls 2.0
+import QtQuick.Window 2.2
+import QtQuick.Dialogs 1.2
+import QtQuick.Layouts 1.3
+import org.subsurfacedivelog.mobile 1.0
+import org.kde.kirigami 2.0 as Kirigami
+
+Kirigami.AbstractListItem {
+	id: innerListItem
+
+	property string depth
+	property string datetime
+	property string duration
+
+	enabled: true
+	supportsMouseEvents: true
+	width: parent.width
+
+	property real detailsOpacity : 0
+	property int horizontalPadding: Kirigami.Units.gridUnit / 2 - Kirigami.Units.smallSpacing  + 1
+	property color textColor: subsurfaceTheme.diveListTextColor
+
+	Row {
+		width: parent.width
+		height: childrenRect.height + Kirigami.Units.smallSpacing
+		spacing: horizontalPadding
+
+		add: Transition {
+			NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
+			NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
+		}
+		Item {
+			id: diveListEntry
+			width: parent.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
+				}
+			}
+		}
+	}
+}

mobile-widgets/qml/mobile-resources.qrc

@@ -9,6 +9,7 @@
 		<file>DiveDetailsEdit.qml</file>
 		<file>DiveDetailsView.qml</file>
 		<file>DownloadFromDiveComputer.qml</file>
+		<file>DownloadedDiveDelegate.qml</file>
 		<file>GpsList.qml</file>
 		<file>HintsTextEdit.qml</file>
 		<file>Log.qml</file>