QML UI: Move top bar to its own file

Move the QML top panel to its own file, so that it can be used in
other files.

Signed-off-by: Grace Karanja <gracie.karanja89@gmail.com>

2 files changed, 68 insertions, 54 deletions

diff --git a/qt-mobile/DiveDetails.qml b/qt-mobile/DiveDetails.qml
index 21127f470..6f42f20d0 100644
--- a/qt-mobile/DiveDetails.qml
+++ b/qt-mobile/DiveDetails.qml
@@ -36,61 +36,11 @@ Item {
 		ColumnLayout {
 			width: parent.width
 			spacing: 8
-			Rectangle {
-				id: topBar
-				color: "#2C4882"
-				Layout.fillWidth: true
-				Layout.margins: 0
-				Layout.minimumHeight: prefsButton.height * 1.2
-				RowLayout {
-					anchors.bottom: topBar.bottom
-					anchors.bottomMargin: prefsButton.height * 0.1
-					anchors.left: topBar.left
-					anchors.leftMargin: prefsButton.height * 0.1
-					anchors.right: topBar.right
-					anchors.rightMargin: prefsButton.height * 0.1
-					Button {
-						id: backButton
-						Layout.maximumHeight: prefsButton.height
-						Layout.minimumHeight: prefsButton.height
-						Layout.preferredWidth: Screen.width * 0.1
-						text: "\u2190"
-						style: ButtonStyle {
-							background: Rectangle {
-								color: "#2C4882"
-								implicitWidth: 50
-							}
-							label: Text {
-								id: txt
-								color: "white"
-								font.pointSize: 18
-								font.bold: true
-								text: control.text
-								horizontalAlignment: Text.AlignHCenter
-								verticalAlignment: Text.AlignVCenter
-							}
-						}
-						onClicked: {
-							manager.commitChanges(
-										dive_id,
-										suit,
-										buddy,
-										divemaster,
-										notes
-										)
-							stackView.pop();
-						}
-					}
-					Text {
-						text: qsTr("Subsurface mobile")
-						font.pointSize: 18
-						font.bold: true
-						color: "white"
-						anchors.horizontalCenter: parent.horizontalCenter
-						horizontalAlignment: Text.AlignHCenter
-					}
-				}
+
+			TopBar {
+
 			}
+
 			Button {
 				text: "Hide Dive Profile"
 				onClicked: {
diff --git a/qt-mobile/TopBar.qml b/qt-mobile/TopBar.qml
new file mode 100644
index 000000000..1e34fcebc
--- /dev/null
+++ b/qt-mobile/TopBar.qml
@@ -0,0 +1,64 @@
+import QtQuick 2.3
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+import QtQuick.Window 2.2
+import QtQuick.Dialogs 1.2
+import QtQuick.Layouts 1.1
+import QtQuick.Window 2.2
+import org.subsurfacedivelog.mobile 1.0
+
+Rectangle {
+	id: topBar
+	color: "#2C4882"
+	Layout.fillWidth: true
+	Layout.margins: 0
+	Layout.minimumHeight: prefsButton.height * 1.2
+	RowLayout {
+		anchors.bottom: topBar.bottom
+		anchors.bottomMargin: prefsButton.height * 0.1
+		anchors.left: topBar.left
+		anchors.leftMargin: prefsButton.height * 0.1
+		anchors.right: topBar.right
+		anchors.rightMargin: prefsButton.height * 0.1
+		Button {
+			id: backButton
+			Layout.maximumHeight: prefsButton.height
+			Layout.minimumHeight: prefsButton.height
+			Layout.preferredWidth: Screen.width * 0.1
+			text: "\u2190"
+			style: ButtonStyle {
+				background: Rectangle {
+					color: "#2C4882"
+					implicitWidth: 50
+				}
+				label: Text {
+					id: txt
+					color: "white"
+					font.pointSize: 18
+					font.bold: true
+					text: control.text
+					horizontalAlignment: Text.AlignHCenter
+					verticalAlignment: Text.AlignVCenter
+				}
+			}
+			onClicked: {
+				manager.commitChanges(
+							dive_id,
+							suit,
+							buddy,
+							divemaster,
+							notes
+							)
+				stackView.pop();
+			}
+		}
+		Text {
+			text: qsTr("Subsurface mobile")
+			font.pointSize: 18
+			font.bold: true
+			color: "white"
+			anchors.horizontalCenter: parent.horizontalCenter
+			horizontalAlignment: Text.AlignHCenter
+		}
+	}
+}