mobile/divelist: rewrite the QML dive list

This isn't perfect yet, but it looks fairly reasonable.

This commit was mainly written by Dirk, but includes a few fixes from Berthold
which where squashed into this commit as they really should have been part of
the initial version.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
Signed-off-by: Berthold Stoeger <bstoeger@mail.tuwien.ac.at>

mobile-widgets/qml/DiveList.qml

@@ -12,19 +12,8 @@ Kirigami.ScrollablePage {
 	objectName: "DiveList"
 	title: qsTr("Dive list")
 	verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
-	property int numDives: diveListView.count
-	property color textColor: subsurfaceTheme.textColor
-	property color secondaryTextColor: subsurfaceTheme.secondaryTextColor
 	property int horizontalPadding: Kirigami.Units.gridUnit / 2 - Kirigami.Units.smallSpacing  + 1
-	property QtObject diveListModel: diveTripModel
+	property QtObject diveListModel: mobileListModel
-
-	opacity: 0
-	Behavior on opacity {
-		NumberAnimation {
-			duration: 200
-			easing.type: Easing.OutQuad
-		}
-	}
 
 	supportsRefreshing: true
 	onRefreshingChanged: {
@@ -34,377 +23,253 @@ Kirigami.ScrollablePage {
 				manager.saveChangesCloud(true)
 				refreshing = false
 			} else {
-				manager.appendTextToLog("sync with cloud storage requested, but credential status is " + PrefCloudStorage.cloud_verification_status)
+				manager.appendTextToLog("sync with cloud storage requested, but credentialStatus is " + Backend.cloud_verification_status)
 				manager.appendTextToLog("no syncing, turn off spinner")
 				refreshing = false
 			}
 		}
 	}
-	onVisibleChanged: {
-		if (visible) {
-			page.actions.main = page.downloadFromDCAction
-			page.actions.right = page.addDiveAction
-			page.actions.left = page.filterToggleAction
-			page.title = qsTr("Dive list")
-			if (diveListView.count === 0)
-				showPassiveNotification(qsTr("Please tap the '+' button to add a dive (or download dives from a supported dive computer)"), 3000)
-		}
-	}
 
 	Component {
-		id: diveDelegate
+		id: diveOrTripDelegate
 		Kirigami.AbstractListItem {
 			// this allows us to access properties of the currentItem from outside
 			property variant myData: model
-
+			id: diveOrTripDelegateItem
-			leftPadding: 0
+			padding: 0
-			topPadding: 0
-			id: innerListItem
-			enabled: true
 			supportsMouseEvents: true
-			checked: model.selected
+			checked: !isTrip && current
-			width: parent.width
+			anchors {
-			height: (collapsed & 1) ? diveListEntry.height + Kirigami.Units.smallSpacing : 0
+				left: parent.left
-			visible: collapsed & 1
+				right: parent.right
-			backgroundColor: checked ? subsurfaceTheme.primaryColor : subsurfaceTheme.backgroundColor
+			}
-			activeBackgroundColor: subsurfaceTheme.primaryColor
+			height: (isTrip ? 9 : 11) * Kirigami.Units.smallSpacing // delegateInnerItem.height
-			textColor: checked ? subsurfaceTheme.primaryTextColor : subsurfaceTheme.textColor
 
-			states: [
+			// When clicked, a trip expands / unexpands, a dive is opened in DiveDetails
-				State {
-					name: "isHidden";
-					when: (collapsed & 1) == 0
-					PropertyChanges {
-						target: innerListItem
-						height: 0
-						visible: false
-					}
-				},
-				State {
-					name: "isVisible";
-					when: (collapsed & 1) == 1
-					PropertyChanges {
-						target: innerListItem
-						height: diveListEntry.height + Kirigami.Units.smallSpacing
-						visible: true
-					}
-				}
-			]
-			// When clicked, the mode changes to details view
 			onClicked: {
-				if (detailsWindow.state === "view") {
+				if (isTrip) {
-					//diveListView.currentIndex = index
+					manager.appendTextToLog("clicked on trip " + tripTitle)
-					detailsWindow.showDiveIndex(id);
+					// toggle expand (backend to deal with unexpand other trip)
-					// switch to detailsWindow (or push it if it's not in the stack)
+					manager.toggle(model.row);
-					var i = rootItem.pageIndex(detailsWindow)
+				} else {
-					if (i === -1)
+					manager.appendTextToLog("clicked on dive")
-						pageStack.push(detailsWindow)
+					if (detailsWindow.state === "view") {
-					else
+						detailsWindow.showDiveIndex(id); // we need access to dive->id
-						pageStack.currentIndex = i
+						// switch to detailsWindow (or push it if it's not in the stack)
+						var i = rootItem.pageIndex(detailsWindow)
+						if (i === -1)
+							pageStack.push(detailsWindow)
+						else
+							pageStack.currentIndex = i
+					}
 				}
 			}
 
-			property bool deleteButtonVisible: false
+			// first we look at the trip
-			property bool copyButtonVisible: false
-			property bool pasteButtonVisible: false
-
-			onPressAndHold: {
-				deleteButtonVisible = true
-				copyButtonVisible = true
-				pasteButtonVisible = true
-				timer.restart()
-			}
 			Item {
+				id: delegateInnerItem
+				width: page.width
+				height: childrenRect.height
 				Rectangle {
-					id: leftBarDive
+					id: headingBackground
-					width: tripId == "" ? 0 : Kirigami.Units.smallSpacing
+					height: visible ? 8 * Kirigami.Units.smallSpacing : 0
-					height: diveListEntry.height * 0.8
+					anchors {
+						topMargin: Kirigami.Units.smallSpacing / 2
+						left: parent.left
+						right: parent.right
+					}
 					color: subsurfaceTheme.lightPrimaryColor
+					visible: isTrip
+					Rectangle {
+						id: dateBox
+						height: 1.8 * Kirigami.Units.gridUnit
+						width: 2.2 * Kirigami.Units.gridUnit
+						color: subsurfaceTheme.primaryColor
+						radius: Kirigami.Units.smallSpacing * 2
+						antialiasing: true
+						anchors {
+							verticalCenter: parent.verticalCenter
+							left: parent.left
+							leftMargin: Kirigami.Units.smallSpacing
+						}
+						Controls.Label {
+							visible: headingBackground.visible
+							text: visible ? tripShortDate : ""
+							color: subsurfaceTheme.primaryTextColor
+							font.pointSize: subsurfaceTheme.smallPointSize * 0.8
+							lineHeightMode: Text.FixedHeight
+							lineHeight: Kirigami.Units.gridUnit *.8
+							horizontalAlignment: Text.AlignHCenter
+							height: contentHeight
+							anchors {
+								horizontalCenter: parent.horizontalCenter
+								verticalCenter: parent.verticalCenter
+							}
+						}
+					}
+					Controls.Label {
+						text: visible ? tripTitle : ""
+						elide: Text.ElideRight
+						visible: headingBackground.visible
+						font.weight: Font.Medium
+						font.pointSize: subsurfaceTheme.regularPointSize
+						anchors {
+							verticalCenter: parent.verticalCenter
+							left: dateBox.right
+							leftMargin: horizontalPadding * 2
+							right: parent.right
+						}
+						color: subsurfaceTheme.lightPrimaryTextColor
+					}
+				}
+				Rectangle {
+					id: headingBottomLine
+					height: visible ? Kirigami.Units.smallSpacing : 0
+					visible: headingBackground.visible
 					anchors {
 						left: parent.left
-						top: parent.top
-						leftMargin: Kirigami.Units.smallSpacing
-						topMargin: Kirigami.Units.smallSpacing * 2
-						bottomMargin: Kirigami.Units.smallSpacing * 2
-					}
-				}
-				Item {
-					id: diveListEntry
-					width: parent.width - Kirigami.Units.gridUnit * (innerListItem.deleteButtonVisible ? 3 * 3 : 1)
-					height: Math.ceil(childrenRect.height + Kirigami.Units.smallSpacing)
-					anchors.left: leftBarDive.right
-					Controls.Label {
-						id: locationText
-						text: (undefined !== location && "" != location) ? location : qsTr("<unnamed dive site>")
-						font.weight: Font.Bold
-						font.pointSize: subsurfaceTheme.regularPointSize
-						elide: Text.ElideRight
-						maximumLineCount: 1 // needed for elide to work at all
-						color: textColor
-						anchors {
-							left: parent.left
-							leftMargin: horizontalPadding * 2
-							topMargin: Kirigami.Units.smallSpacing
-							top: parent.top
-							right: parent.right
-						}
-					}
-					Row {
-						anchors {
-							left: locationText.left
-							top: locationText.bottom
-							topMargin: Kirigami.Units.smallSpacing
-							bottom: numberText.bottom
-						}
-
-						Controls.Label {
-							id: dateLabel
-							text: (undefined !== dateTime) ? dateTime : ""
-							width: Math.max(locationText.width * 0.45, paintedWidth) // helps vertical alignment throughout listview
-							font.pointSize: subsurfaceTheme.smallPointSize
-							color: innerListItem.checked ? subsurfaceTheme.darkerPrimaryTextColor : secondaryTextColor
-						}
-						// spacer, just in case
-						Controls.Label {
-							text: " "
-							width: Kirigami.Units.largeSpacing
-						}
-						// let's try to show the depth / duration very compact
-						Controls.Label {
-							text: (undefined !== depthDuration) ? depthDuration : ""
-							width: Math.max(Kirigami.Units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview
-							font.pointSize: subsurfaceTheme.smallPointSize
-							color: innerListItem.checked ? subsurfaceTheme.darkerPrimaryTextColor : secondaryTextColor
-						}
-					}
-					Controls.Label {
-						id: numberText
-						text: "#" + number
-						font.pointSize: subsurfaceTheme.smallPointSize
-						color: innerListItem.checked ? subsurfaceTheme.darkerPrimaryTextColor : secondaryTextColor
-						anchors {
-							right: parent.right
-							rightMargin: horizontalPadding
-							top: locationText.bottom
-							topMargin: Kirigami.Units.smallSpacing
-						}
-					}
-				}
-				Rectangle {
-					id: copyButton
-					visible: copyButtonVisible
-					height: diveListEntry.height - 2 * Kirigami.Units.smallSpacing
-					width: height
-					color: subsurfaceTheme.lightDrawerColor
-					antialiasing: true
-					radius: Kirigami.Units.smallSpacing
-					anchors {
-						left: diveListEntry.right
-						verticalCenter: diveListEntry.verticalCenter
-						verticalCenterOffset: Kirigami.Units.smallSpacing / 2
-						rightMargin: horizontalPadding * 2
-						leftMargin: horizontalPadding * 2
-					}
-					Kirigami.Icon {
-						anchors {
-							horizontalCenter: parent.horizontalCenter
-							verticalCenter: parent.verticalCenter
-						}
-						source: ":/icons/edit-copy"
-						width: parent.height
-						height: width
-					}
-					MouseArea {
-						anchors.fill: parent
-						enabled: parent.visible
-						onClicked: {
-							deleteButtonVisible = false
-							copyButtonVisible = false
-							pasteButtonVisible = false
-							timer.stop()
-							manager.copyDiveData(id)
-						}
-						onPressAndHold: {
-								globalDrawer.close()
-								manager.copyDiveData(id)
-								pageStack.push(settingsCopyWindow)
-						}
-					}
-				}
-				Rectangle {
-					id: pasteButton
-					visible: pasteButtonVisible
-					height: diveListEntry.height - 2 * Kirigami.Units.smallSpacing
-					width: height
-					color: subsurfaceTheme.lightDrawerColor
-					antialiasing: true
-					radius: Kirigami.Units.smallSpacing
-					anchors {
-						left: copyButton.right
-						verticalCenter: diveListEntry.verticalCenter
-						verticalCenterOffset: Kirigami.Units.smallSpacing / 2
-						rightMargin: horizontalPadding * 2
-						leftMargin: horizontalPadding * 2
-					}
-					Kirigami.Icon {
-						anchors {
-							horizontalCenter: parent.horizontalCenter
-							verticalCenter: parent.verticalCenter
-						}
-						source: ":/icons/edit-paste"
-						width: parent.height
-						height: width
-					}
-					MouseArea {
-						anchors.fill: parent
-						enabled: parent.visible
-						onClicked: {
-							deleteButtonVisible = false
-							copyButtonVisible = false
-							pasteButtonVisible = false
-							timer.stop()
-							manager.pasteDiveData(id)
-						}
-					}
-				}
-				Rectangle {
-					id: deleteButton
-					visible: deleteButtonVisible
-					height: diveListEntry.height - 2 * Kirigami.Units.smallSpacing
-					width: height
-					color: subsurfaceTheme.contrastAccentColor
-					antialiasing: true
-					radius: Kirigami.Units.smallSpacing
-					anchors {
-						left: pasteButton.right
 						right: parent.right
-						verticalCenter: diveListEntry.verticalCenter
+						top: headingBackground.bottom
-						verticalCenterOffset: Kirigami.Units.smallSpacing / 2
-						rightMargin: horizontalPadding * 2
-						leftMargin: horizontalPadding * 2
 					}
-					Kirigami.Icon {
+					color: "#B2B2B2"
-						anchors {
+				}
-							horizontalCenter: parent.horizontalCenter
+
-							verticalCenter: parent.verticalCenter
+				Rectangle {
-						}
+					id: diveBackground
-						source: ":/icons/trash-empty"
+					height: visible ? diveListEntry.height + Kirigami.Units.smallSpacing : 0
-						width: parent.height
+					anchors {
-						height: width
+						left: parent.left
+						right: parent.right
 					}
-					MouseArea {
+					color: subsurfaceTheme.backgroundColor
+					visible: !isTrip
+					Item {
 						anchors.fill: parent
-						enabled: parent.visible
+						Rectangle {
-						onClicked: {
+							id: leftBarDive
-							deleteButtonVisible = false
+							width: Kirigami.Units.smallSpacing
-							copyButtonVisible = false
+							height: isTopLevel ? 0 : diveListEntry.height * 0.8
-							pasteButtonVisible = false
+							color: subsurfaceTheme.lightPrimaryColor
-							timer.stop()
+							anchors {
-							manager.deleteDive(id)
+								left: parent.left
+								top: parent.top
+								leftMargin: Kirigami.Units.smallSpacing
+								topMargin: Kirigami.Units.smallSpacing * 2
+								bottomMargin: Kirigami.Units.smallSpacing * 2
+							}
+						}
+						Item {
+							id: diveListEntry
+							height: visible ? 10 * Kirigami.Units.smallSpacing : 0
+							anchors {
+								right: parent.right
+								left: leftBarDive.right
+								verticalCenter: parent.verticalCenter
+							}
+							Controls.Label {
+								id: locationText
+								text: (undefined !== location && "" != location) ? location : qsTr("<unnamed dive site>")
+								font.weight: Font.Medium
+								font.pointSize: subsurfaceTheme.smallPointSize
+								elide: Text.ElideRight
+								maximumLineCount: 1 // needed for elide to work at all
+								color: subsurfaceTheme.textColor
+								anchors {
+									left: parent.left
+									leftMargin: horizontalPadding * 2
+									topMargin: Kirigami.Units.smallSpacing / 2
+									top: parent.top
+									right: parent.right
+								}
+							}
+							Row {
+								anchors {
+									left: locationText.left
+									top: locationText.bottom
+									topMargin: Kirigami.Units.smallSpacing / 2
+								}
+
+								Controls.Label {
+									id: dateLabel
+									text: (undefined !== dateTime) ? dateTime : ""
+									width: Math.max(locationText.width * 0.45, paintedWidth) // helps vertical alignment throughout listview
+									font.pointSize: subsurfaceTheme.smallPointSize
+									color: diveOrTripDelegateItem.checked ? subsurfaceTheme.darkerPrimaryTextColor : subsurfaceTheme.secondaryTextColor
+								}
+								// spacer, just in case
+								Controls.Label {
+									text: " "
+									width: Kirigami.Units.largeSpacing
+								}
+								// let's try to show the depth / duration very compact
+								Controls.Label {
+									text: (undefined !== depthDuration) ? depthDuration : ""
+									width: Math.max(Kirigami.Units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview
+									font.pointSize: subsurfaceTheme.smallPointSize
+									color: diveOrTripDelegateItem.checked ? subsurfaceTheme.darkerPrimaryTextColor : subsurfaceTheme.secondaryTextColor
+								}
+							}
+							Controls.Label {
+								id: numberText
+								text: "#" + number
+								font.pointSize: subsurfaceTheme.smallPointSize
+								color: diveOrTripDelegateItem.checked ? subsurfaceTheme.darkerPrimaryTextColor : subsurfaceTheme.secondaryTextColor
+								anchors {
+									right: parent.right
+									rightMargin: Kirigami.Units.smallSpacing
+									top: locationText.bottom
+									topMargin: Kirigami.Units.smallSpacing / 2
+								}
+							}
 						}
 					}
 				}
-				Timer {
+
-					id: timer
-					interval: 4000
-					onTriggered: {
-						deleteButtonVisible = false
-						copyButtonVisible = false
-						pasteButtonVisible = false
-					}
-				}
 			}
 		}
 	}
 
-	Component {
+	StartPage {
-		id: tripHeading
+		id: startPage
-		Item {
+		anchors.fill: parent
-			width: page.width
+		opacity: (Backend.cloud_verification_status === Enums.CS_NOCLOUD ||
-			height: childrenRect.height
+			 Backend.cloud_verification_status === Enums.CS_VERIFIED) ? 0 : 1
-			Rectangle {
+		visible: opacity > 0
-				id: headingBackground
+		Behavior on opacity { NumberAnimation { duration: Kirigami.Units.shortDuration } }
-				height: section == "" ? 0 : sectionText.height + Kirigami.Units.gridUnit
+		function setupActions() {
-				anchors {
+			if (Backend.cloud_verification_status === Enums.CS_VERIFIED ||
-					left: parent.left
+					Backend.cloud_verification_status === Enums.CS_NOCLOUD) {
-					right: parent.right
+				page.actions.main = page.downloadFromDCAction
-				}
+				page.actions.right = page.addDiveAction
-				color: subsurfaceTheme.lightPrimaryColor
+				page.actions.left = page.filterToggleAction
-				visible: section != ""
+				page.title = qsTr("Dive list")
-				Rectangle {
+				if (diveListView.count === 0)
-					id: dateBox
+					showPassiveNotification(qsTr("Please tap the '+' button to add a dive (or download dives from a supported dive computer)"), 3000)
-					visible: section != ""
+			} else {
-					height: section == "" ? 0 : parent.height - Kirigami.Units.smallSpacing
+				page.actions.main = null
-					width: section == "" ? 0 : 2.5 * Kirigami.Units.gridUnit * PrefDisplay.mobile_scale
+				page.actions.right = null
-					color: subsurfaceTheme.primaryColor
+				page.actions.left = null
-					radius: Kirigami.Units.smallSpacing * 2
+				page.title = qsTr("Cloud credentials")
-					antialiasing: true
-					anchors {
-						verticalCenter: parent.verticalCenter
-						left: parent.left
-						leftMargin: Kirigami.Units.smallSpacing
-					}
-					Controls.Label {
-						text: {
-							diveListModel ? diveListModel.tripShortDate(section) : "no data model"
-						}
-						color: subsurfaceTheme.primaryTextColor
-						font.pointSize: subsurfaceTheme.smallPointSize
-						lineHeightMode: Text.FixedHeight
-						lineHeight: Kirigami.Units.gridUnit *.9
-						horizontalAlignment: Text.AlignHCenter
-						anchors {
-							horizontalCenter: parent.horizontalCenter
-							verticalCenter: parent.verticalCenter
-						}
-					}
-				}
-				MouseArea {
-					anchors.fill: headingBackground
-					onClicked: {
-						if (diveListModel) {
-							if (diveListModel.activeTrip()  === section)
-								diveListModel.setActiveTrip("")
-							else
-								diveListModel.setActiveTrip(section)
-						}
-					}
-				}
-				Controls.Label {
-					id: sectionText
-					text: {
-						diveListModel ? diveListModel.tripTitle(section) : "no data model"
-					}
-					wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-					visible: text !== ""
-					font.weight: Font.Bold
-					font.pointSize: subsurfaceTheme.regularPointSize
-					anchors {
-						top: parent.top
-						left: dateBox.right
-						topMargin: Math.max(2, Kirigami.Units.gridUnit / 2)
-						leftMargin: horizontalPadding * 2
-						right: parent.right
-					}
-					color: subsurfaceTheme.lightPrimaryTextColor
-				}
-			}
-			Rectangle {
-				height: section == "" ? 0 : 1
-				width: parent.width
-				anchors.top: headingBackground.bottom
-				color: "#B2B2B2"
 			}
 		}
+		onVisibleChanged: {
+			setupActions();
+		}
+
+		Component.onCompleted: {
+			manager.finishSetup();
+			setupActions();
+		}
 	}
 
 	Controls.Label {
 		anchors.fill: parent
 		horizontalAlignment: Text.AlignHCenter
 		verticalAlignment: Text.AlignVCenter
-		text: diveListModel ? qsTr("No dives in dive list") : qsTr("Please wait, filtering dive list")
+		text: diveListModel ? qsTr("No dives in dive list") : qsTr("Please wait, updating the dive list")
 		visible: diveListView.visible && diveListView.count === 0
 	}
+
 	Component {
 		id: filterHeader
 		Rectangle {
@@ -434,11 +299,8 @@ Kirigami.ScrollablePage {
 
 				]
 				transitions: [
-					Transition {
+					Transition { NumberAnimation { property: "height"; duration: 400; easing.type: Easing.InOutQuad }}
-						NumberAnimation { property: "height"; duration: 400; easing.type: Easing.InOutQuad }
-					}
 				]
-
 				anchors.left: parent.left
 				anchors.right: parent.right
 				anchors.leftMargin: Kirigami.Units.gridUnit / 2
@@ -489,22 +351,19 @@ Kirigami.ScrollablePage {
 	ListView {
 		id: diveListView
 		anchors.fill: parent
+		opacity: 1.0 - startPage.opacity
+		visible: opacity > 0
 		model: diveListModel
 		currentIndex: -1
-		delegate: diveDelegate
+		delegate: diveOrTripDelegate
 		header: filterHeader
 		headerPositioning: ListView.OverlayHeader
 		boundsBehavior: Flickable.DragOverBounds
 		maximumFlickVelocity: parent.height * 5
 		bottomMargin: Kirigami.Units.iconSizes.medium + Kirigami.Units.gridUnit
 		cacheBuffer: 40 // this will increase memory use, but should help with scrolling
-		section.property: "tripId"
+		Component.onCompleted: {
-		section.criteria: ViewSection.FullString
+			manager.appendTextToLog("finished setting up the diveListView")
-		section.delegate: tripHeading
-		section.labelPositioning: ViewSection.CurrentLabelAtStart | ViewSection.InlineLabels
-		Connections {
-			target: detailsWindow
-			onCurrentIndexChanged: diveListView.currentIndex = detailsWindow.currentIndex
 		}
 	}
 
@@ -541,11 +400,18 @@ Kirigami.ScrollablePage {
 	}
 
 	onBackRequested: {
-		if (Qt.platform.os != "ios")
+		if (startPage.visible && diveListView.count > 0 &&
-			manager.quit()
+			Backend.cloud_verification_status !== Enums.CS_INCORRECT_USER_PASSWD) {
-
+			Backend.cloud_verification_status = oldStatus
-		// let's make sure Kirigami doesn't quit on our behalf
+			event.accepted = true;
-		event.accepted = true
+		}
+		if (!startPage.visible) {
+			if (Qt.platform.os != "ios") {
+				manager.quit()
+			}
+			// let's make sure Kirigami doesn't quit on our behalf
+			event.accepted = true
+		}
 	}
 
 	function setCurrentDiveListIndex(idx, noScroll) {

mobile-widgets/qml/main.qml

@@ -55,7 +55,7 @@ Kirigami.ApplicationWindow {
 	}
 
 	function showBusy(msg) {
-		if (msg !== undefined)
+		if (msg !== undefined && msg !== "")
 			showPassiveNotification(msg, 15000) // show for 15 seconds
 		busy.running = true
 	}
@@ -282,7 +282,7 @@ Kirigami.ApplicationWindow {
 							pageStack.pop()
 						}
 						diveList.diveListModel = diveModel
-						pageStack.push(diveList)
+						showDiveList()
 						hideBusy()
 					}
 				}