Add top-right edit and back buttons for mobile

Adds a back button in edit mode, and an edit button for view mode.

Signed-off-by: Henrik Brautaset Aronsen <subsurface@henrik.synth.no>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

5 files changed, 92 insertions, 25 deletions

diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml
index ef51a71b2..b2744ec1e 100644
--- a/qt-mobile/qml/DiveDetails.qml
+++ b/qt-mobile/qml/DiveDetails.qml
@@ -56,29 +56,7 @@ MobileComponents.Page {
 				state = "view"
 				Qt.inputMethod.hide()
 			} else {
-				// set things up for editing - so make sure that the detailsEdit has
-				// all the right data (using the property aliases set up above)
-				dive_id = diveDetailsListView.currentItem.modelData.dive.id
-				number = diveDetailsListView.currentItem.modelData.dive.number
-				date = diveDetailsListView.currentItem.modelData.dive.date + " " + diveDetailsListView.currentItem.modelData.dive.time
-				location = diveDetailsListView.currentItem.modelData.dive.location
-				duration = diveDetailsListView.currentItem.modelData.dive.duration
-				depth = diveDetailsListView.currentItem.modelData.dive.depth
-				airtemp = diveDetailsListView.currentItem.modelData.dive.airTemp
-				watertemp = diveDetailsListView.currentItem.modelData.dive.waterTemp
-				suit = diveDetailsListView.currentItem.modelData.dive.suit
-				buddy = diveDetailsListView.currentItem.modelData.dive.buddy
-				divemaster = diveDetailsListView.currentItem.modelData.dive.divemaster
-				notes = diveDetailsListView.currentItem.modelData.dive.notes
-				if (diveDetailsListView.currentItem.modelData.dive.singleWeight) {
-					// we have only one weight, go ahead, have fun and edit it
-					weight = diveDetailsListView.currentItem.modelData.dive.sumWeight
-				} else {
-					// careful when translating, this text is "magic" in DiveDetailsEdit.qml
-					weight = "cannot edit multiple weight systems"
-				}
-
-				diveDetailsPage.state = "edit"
+				startEditMode()
 			}
 		}
 	}
@@ -87,6 +65,33 @@ MobileComponents.Page {
 		currentIndex = index;
 		diveDetailsListView.positionViewAtIndex(index, ListView.Beginning);
 	}
+
+	function startEditMode() {
+		// set things up for editing - so make sure that the detailsEdit has
+		// all the right data (using the property aliases set up above)
+		dive_id = diveDetailsListView.currentItem.modelData.dive.id
+		number = diveDetailsListView.currentItem.modelData.dive.number
+		date = diveDetailsListView.currentItem.modelData.dive.date + " " + diveDetailsListView.currentItem.modelData.dive.time
+		location = diveDetailsListView.currentItem.modelData.dive.location
+		duration = diveDetailsListView.currentItem.modelData.dive.duration
+		depth = diveDetailsListView.currentItem.modelData.dive.depth
+		airtemp = diveDetailsListView.currentItem.modelData.dive.airTemp
+		watertemp = diveDetailsListView.currentItem.modelData.dive.waterTemp
+		suit = diveDetailsListView.currentItem.modelData.dive.suit
+		buddy = diveDetailsListView.currentItem.modelData.dive.buddy
+		divemaster = diveDetailsListView.currentItem.modelData.dive.divemaster
+		notes = diveDetailsListView.currentItem.modelData.dive.notes
+		if (diveDetailsListView.currentItem.modelData.dive.singleWeight) {
+			// we have only one weight, go ahead, have fun and edit it
+			weight = diveDetailsListView.currentItem.modelData.dive.sumWeight
+		} else {
+			// careful when translating, this text is "magic" in DiveDetailsEdit.qml
+			weight = "cannot edit multiple weight systems"
+		}
+
+		diveDetailsPage.state = "edit"
+	}
+
 	onWidthChanged: diveDetailsListView.positionViewAtIndex(diveDetailsListView.currentIndex, ListView.Beginning);
 
 	ScrollView {
diff --git a/qt-mobile/qml/TopBar.qml b/qt-mobile/qml/TopBar.qml
index 5eeef7da8..4f3f6fef8 100644
--- a/qt-mobile/qml/TopBar.qml
+++ b/qt-mobile/qml/TopBar.qml
@@ -82,6 +82,67 @@ Rectangle {
 			Layout.fillWidth: true
 		}
 		Item {
+			id: editButton
+			anchors.right: parent.right
+			anchors.top: parent.top
+			Layout.preferredHeight: editButtonIcon.height
+			width: editButtonIcon.width
+			visible: (detailsWindow.state === "view" && detailsWindow.visible)
+			Image {
+				id: editButtonIcon
+				source: "qrc:/qml/menu-edit.png"
+				anchors {
+					top: parent.top
+					right: parent.right
+					topMargin: MobileComponents.Units.smallSpacing * -1
+					rightMargin: MobileComponents.Units.smallSpacing
+				}
+				width: Math.round(MobileComponents.Units.gridUnit * 1.7)
+				height: width
+			}
+			MouseArea {
+				height: parent.height
+				width: parent.width
+				onClicked: {
+					detailsWindow.open()
+				}
+			}
+			MouseArea {
+				height: parent.height
+				width: parent.width
+				onClicked: {
+					detailsWindow.startEditMode()
+				}
+			}
+		}
+		Item {
+			id: backButton
+			anchors.right: parent.right
+			anchors.top: parent.top
+			Layout.preferredHeight: backButtonIcon.height
+			width: backButtonIcon.width
+			visible: (detailsWindow.state === "edit" && detailsWindow.visible)
+			Image {
+				id: backButtonIcon
+				source: "qrc:/qml/menu-back.png"
+				anchors {
+					top: parent.top
+					right: parent.right
+					topMargin: MobileComponents.Units.smallSpacing * -1
+					rightMargin: MobileComponents.Units.smallSpacing
+				}
+				width: Math.round(MobileComponents.Units.gridUnit * 1.7)
+				height: width
+			}
+			MouseArea {
+				height: parent.height
+				width: parent.width
+				onClicked: {
+					endEditMode()
+				}
+			}
+		}
+		Item {
 			id: contextMenu
 			visible: contextDrawer.enabled
 			anchors.right: parent.right
@@ -108,6 +169,5 @@ Rectangle {
 				}
 			}
 		}
-
 	}
 }
diff --git a/qt-mobile/qml/icons/menu-back.png b/qt-mobile/qml/icons/menu-back.png
new file mode 100644
index 000000000..dc96b7728
--- /dev/null
+++ b/qt-mobile/qml/icons/menu-back.png
diff --git a/qt-mobile/qml/icons/menu-edit.png b/qt-mobile/qml/icons/menu-edit.png
new file mode 100644
index 000000000..ea7dd055a
--- /dev/null
+++ b/qt-mobile/qml/icons/menu-edit.png
diff --git a/qt-mobile/qml/mobile-resources.qrc b/qt-mobile/qml/mobile-resources.qrc
index 50565e0a8..e57fa5e13 100644
--- a/qt-mobile/qml/mobile-resources.qrc
+++ b/qt-mobile/qml/mobile-resources.qrc
@@ -1,5 +1,5 @@
 <RCC>
-<qresource prefix="/qml">
+	<qresource prefix="/qml">
 		<file>main.qml</file>
 		<file>TextButton.qml</file>
 		<file>Preferences.qml</file>
@@ -19,6 +19,8 @@
 		<file alias="subsurface-mobile-icon.png">../../icons/subsurface-mobile-icon.png</file>
 		<file alias="main-menu.png">icons/main-menu.png</file>
 		<file alias="context-menu.png">icons/context-menu.png</file>
+		<file alias="menu-edit.png">icons/menu-edit.png</file>
+		<file alias="menu-back.png">icons/menu-back.png</file>
 	</qresource>
 	<qresource prefix="/imports">
 		<file alias="org/kde/plasma/mobilecomponents/qmldir">mobilecomponents/qmldir</file>