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>

qt-mobile/qml/DiveDetails.qml

@@ -56,6 +56,17 @@ MobileComponents.Page {
 				state = "view"
 				Qt.inputMethod.hide()
 			} else {
+				startEditMode()
+			}
+		}
+	}
+
+	function showDiveIndex(index) {
+		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
@@ -80,13 +91,7 @@ MobileComponents.Page {
 
 		diveDetailsPage.state = "edit"
 	}
-		}
-	}
 
-	function showDiveIndex(index) {
-		currentIndex = index;
-		diveDetailsListView.positionViewAtIndex(index, ListView.Beginning);
-	}
 	onWidthChanged: diveDetailsListView.positionViewAtIndex(diveDetailsListView.currentIndex, ListView.Beginning);
 
 	ScrollView {

qt-mobile/qml/TopBar.qml

@@ -81,6 +81,67 @@ Rectangle {
 		Item {
 			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
@@ -108,6 +169,5 @@ Rectangle {
 				}
 			}
 		}
-
 	}
 }

qt-mobile/qml/mobile-resources.qrc

@@ -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>