Rework central navigation

This patch is the part implementing the drawers and in-app page
navigation. In more detail:

- main.qml uses the mobilecomponents plugin and the APIs as already
  changed in the other components

- The extended properties have moved into the root item (for now,
  they'll get properly encapsulated later)
- A menu can be swiped in from the left

- The application makes better use when used horizontally (if there's
  enough space, so depending on the display you can get divelist and
  -details next to each other, one phone/portrait formfactor, the layout
  stays in a single column.

- The options for GPS have been grouped into a submenu

This change follows the Plasma mobile human interface guidelines. These
changes are actually relatively small considered what they're doing,
most of the logic is encapsulated in mobilecomponents' PageRow and *Drawer
classes.

The previous navigation pattern is actually a subset of this
one, so it still works.

Signed-off-by: Sebastian Kügler <sebas@kde.org>

qt-mobile/qml/main.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.3
+import QtQuick 2.4
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
 import QtQuick.Window 2.2
@@ -6,29 +6,125 @@ import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.1
 import QtQuick.Window 2.2
 import org.subsurfacedivelog.mobile 1.0
-import "qrc:/qml/theme" as Theme
+import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
 
-
+MobileComponents.ApplicationWindow {
-Window {
 	title: qsTr("Subsurface mobile")
 	property bool fullscreen: true
 	property alias messageText: message.text
+
+	property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5)
+	property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7)
+
+	FontMetrics {
+		id: fontMetrics
+	}
+
 	visible: true
 
-	Theme.Units {
+	globalDrawer: MobileComponents.GlobalDrawer{
-		id: units
+		title: "Subsurface"
+		titleIcon: "qrc:/qml/subsurface-mobile-icon.png"
 
-		property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5)
+		bannerImageSource: "dive.jpg"
-		property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7)
+		actions: [
+		Action {
+			text: "Preferences"
+			onTriggered: {
+				stackView.push(prefsWindow)
+			}
+		},
 
+		Action {
+			text: "Load Dives"
+			onTriggered: {
+				manager.loadDives();
+			}
+		},
+
+		Action {
+			text: "Download Dives"
+			onTriggered: {
+				stackView.push(downloadDivesWindow)
+			}
+		},
+
+		Action {
+			text: "Add Dive"
+			onTriggered: {
+				manager.addDive();
+				stackView.push(detailsWindow)
+			}
+		},
+
+		Action {
+			text: "Save Changes"
+			onTriggered: {
+				manager.saveChanges();
+			}
+		},
+
+		MobileComponents.ActionGroup {
+			text: "GPS"
+			Action {
+			text: "Run location service"
+			checkable: true
+			checked: manager.locationServiceEnabled
+			onToggled: {
+				manager.locationServiceEnabled = checked;
+			}
+		}
+		Action {
+				text: "Apply GPS data to dives"
+				onTriggered: {
+						manager.applyGpsData();
+				}
+		}
+
+		Action {
+				text: "Send GPS data to server"
+				onTriggered: {
+						manager.sendGpsData();
+				}
+		}
+
+		Action {
+				text: "Clear stored GPS data"
+				onTriggered: {
+						manager.clearGpsData();
+				}
+		}
+	},
+
+		Action {
+			text: "View Log"
+			onTriggered: {
+				stackView.push(logWindow)
+			}
+		},
+
+		Action {
+			text: "Theme Information"
+			onTriggered: {
+				stackView.push(themetest)
+			}
+		}
+            ]
 	}
-
+// 	MobileComponents.Units {
-	Theme.Theme {
+// 		id: units
-		id: theme
+//
-		/* Added for subsurface */
+// 		property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5)
-		property color accentColor: "#2d5b9a"
+// 		property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7)
-		property color accentTextColor: "#ececec"
+//
-	}
+// 	}
+//
+// 	MobileComponents.Theme {
+// 		id: theme
+// 		/* Added for subsurface */
+// 		property color accentColor: "#2d5b9a"
+// 		property color accentTextColor: "#ececec"
+// 	}
 
 	Menu {
 		id: prefsMenu
@@ -138,7 +234,7 @@ Window {
 				ColumnLayout {
 					id: awLayout
 					anchors.fill: parent
-					spacing: units.gridUnit / 2
+					spacing: MobileComponents.Units.gridUnit / 2
 
 					Rectangle {
 						id: detailsPage
@@ -148,7 +244,7 @@ Window {
 						DiveList {
 							anchors.fill: detailsPage
 							id: diveDetails
-							color: theme.backgroundColor
+							color: MobileComponents.Theme.backgroundColor
 						}
 					}
 
@@ -156,14 +252,14 @@ Window {
 						id: messageArea
 						height: childrenRect.height
 						Layout.fillWidth: true
-						color: theme.backgroundColor
+						color: MobileComponents.Theme.backgroundColor
 
 						Text {
 							id: message
-							color: theme.textColor
+							color: MobileComponents.Theme.textColor
 							wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
-							styleColor: theme.textColor
+							styleColor: MobileComponents.Theme.textColor
-							font.pointSize: units.smallPointSize
+							font.pointSize: MobileComponents.Units.smallPointSize
 						}
 					}
 				}
@@ -201,6 +297,6 @@ Window {
 	}
 
 	Component.onCompleted: {
-		print("units.gridUnit is: " + units.gridUnit);
+		print("MobileComponents.Units.gridUnit is: " + MobileComponents.Units.gridUnit);
 	}
 }