Port the page navigation to ApplicationWindow's one

The ApplicationWindow component has an internal PageRow for the
management of the application's pages, use that instead of an
own StackView.
Use shared components for common things in the app
ListItem for the dive list
Page for application pages, for correct background color
and moving of the action button

Signed-off-by: Marco Martin <notmart@gmail.com>
Signed-off-by: Sebastian Kügler <sebas@kde.org>

qt-mobile/qml/DiveDetails.qml

@@ -3,13 +3,14 @@ import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
 import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.1
-import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
 import org.subsurfacedivelog.mobile 1.0
+import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
 
-Item {
+MobileComponents.Page {
 	id: diveDetailsWindow
 	width: parent.width
 	objectName: "DiveDetails"
+	flickable: flick
 
 	property string location
 	property string dive_id
@@ -30,11 +31,21 @@ Item {
 	Flickable {
 		id: flick
 		anchors.fill: parent
-		contentHeight: parent.height
+		contentHeight: content.height
 		clip: true
+		Item {
+			id: content
+			width: flick.width
+			height: contentRect.height + MobileComponents.Units.smallSpacing * 2
+
 			ColumnLayout {
-			width: parent.width
+				anchors {
-			spacing: 8
+					left: parent.left
+					right: parent.right
+					top: parent.top
+					margins: MobileComponents.Units.smallSpacing
+				}
+				spacing: MobileComponents.Units.smallSpacing
 
 
 				GridLayout {
@@ -42,9 +53,8 @@ Item {
 					width: parent.width
 					columns: 2
 
-				Label {
+					MobileComponents.Heading {
 						Layout.columnSpan: 2
-					font.pointSize: subsurfaceTheme.titlePointSize
 						text: "Dive " + number + " (" + date + ")"
 					}
 
@@ -148,4 +158,5 @@ Item {
 				}
 			}
 		}
+	}
 }

qt-mobile/qml/DiveList.qml

@@ -6,24 +6,25 @@ import QtQuick.Dialogs 1.2
 import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
 import org.subsurfacedivelog.mobile 1.0
 
-Rectangle {
+MobileComponents.Page {
 	id: page
 	objectName: "DiveList"
+	color: MobileComponents.Theme.viewBackgroundColor
+	flickable: diveListView
 
 	Component {
 		id: diveDelegate
-		Item {
+		MobileComponents.ListItem {
 			id: dive
+			enabled: true
+			checked: diveListView.currentIndex == model.index
 
 			property real detailsOpacity : 0
 
-			width: diveListView.width - MobileComponents.Units.smallSpacing
+			//When clicked, the mode changes to details view
-			height: childrenRect.height
 
-			//Mouse region: When clicked, the mode changes to details view
-			MouseArea {
-				anchors.fill: parent
 			onClicked: {
+				diveListView.currentIndex = model.index
 				detailsWindow.width = parent.width
 				detailsWindow.location = location
 				detailsWindow.dive_id = id
@@ -37,7 +38,6 @@ Rectangle {
 				detailsWindow.date = date
 				stackView.push(detailsWindow)
 			}
-			}
 
 			//Layout of the page: (mini profile, dive no, date at the top
 			//And other details at the bottom.
@@ -115,17 +115,6 @@ Rectangle {
 						top: locationText.bottom
 					}
 				}
-				//Text { text: location; width: parent.width }
-				Rectangle {
-					color: MobileComponents.Theme.textColor
-					opacity: .2
-					height: Math.max(1, MobileComponents.Units.gridUnit / 24) // we really want a thin line
-					anchors {
-						left: parent.left
-						right: parent.right
-						top: numberText.bottom
-					}
-				}
 			}
 		}
 	}
@@ -136,7 +125,7 @@ Rectangle {
 			width: page.width - MobileComponents.Units.smallSpacing * 2
 			height: childrenRect.height + MobileComponents.Units.smallSpacing * 2
 
-			Text {
+			MobileComponents.Heading {
 				id: sectionText
 				text: section
 				anchors {
@@ -145,8 +134,7 @@ Rectangle {
 					leftMargin: MobileComponents.Units.smallSpacing
 					right: parent.right
 				}
-				color: MobileComponents.Theme.textColor
+				level: 2
-				font.pointSize: 16
 			}
 			Rectangle {
 				height: Math.max(2, MobileComponents.Units.gridUnit / 12) // we want a thicker line
@@ -161,10 +149,21 @@ Rectangle {
 		}
 	}
 
+	Connections {
+		target: stackView
+		onDepthChanged: {
+			if (stackView.depth == 1) {
+				diveListView.currentIndex = -1;
+			}
+		}
+	}
+	ScrollView {
+		anchors.fill: parent
 		ListView {
 			id: diveListView
 			anchors.fill: parent
 			model: diveModel
+			currentIndex: -1
 			delegate: diveDelegate
 			boundsBehavior: Flickable.StopAtBounds
 			//highlight: Rectangle { color: MobileComponents.Theme.highlightColor; width: MobileComponents.Units.smallSpacing }
@@ -174,6 +173,7 @@ Rectangle {
 			section.criteria: ViewSection.FullString
 			section.delegate: tripHeading
 		}
+	}
 	StartPage {
 		anchors.fill: parent
 		opacity: (diveListView.count == 0) ? 1.0 : 0

qt-mobile/qml/main.qml

@@ -202,23 +202,13 @@ MobileComponents.ApplicationWindow {
 		}
 	}
 
-	ColumnLayout {
+	toolBar: TopBar {
-		anchors.fill: parent
+		width: parent.width
-
+		height: Layout.minimumHeight
-		TopBar {
-
 	}
 
-		StackView {
+	property Item stackView: pageStack
-			id: stackView
+	initialPage: Item {
-			Layout.preferredWidth: parent.width
-			Layout.fillHeight: true
-			focus: true
-			Keys.onReleased: if (event.key == Qt.Key_Back && stackView.depth > 1) {
-						stackView.pop()
-						event.accepted = true;
-					}
-			initialItem: Item {
 		width: parent.width
 		height: parent.height
 
@@ -239,6 +229,7 @@ MobileComponents.ApplicationWindow {
 				}
 			}
 
+
 			Rectangle {
 				id: messageArea
 				height: childrenRect.height
@@ -250,9 +241,7 @@ MobileComponents.ApplicationWindow {
 					color: MobileComponents.Theme.textColor
 					wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
 					styleColor: MobileComponents.Theme.textColor
-							font.pointSize: subsurfaceTheme.smallPointSize
+					font.pointSize: MobileComponents.Units.smallPointSize
-						}
-					}
 				}
 			}
 		}

qt-mobile/qml/mobile-resources.qrc

@@ -19,6 +19,7 @@
 		<file alias="org/kde/plasma/mobilecomponents/ActionGroup.qml">mobilecomponents/ActionGroup.qml</file>
 		<file alias="org/kde/plasma/mobilecomponents/ApplicationWindow.qml">mobilecomponents/ApplicationWindow.qml</file>
 		<file alias="org/kde/plasma/mobilecomponents/GlobalDrawer.qml">mobilecomponents/GlobalDrawer.qml</file>
+		<file alias="org/kde/plasma/mobilecomponents/Page.qml">mobilecomponents/Page.qml</file>
 		<file alias="org/kde/plasma/mobilecomponents/Icon.qml">mobilecomponents/Icon.qml</file>
 		<file alias="org/kde/plasma/mobilecomponents/Heading.qml">mobilecomponents/Heading.qml</file>
 		<file alias="org/kde/plasma/mobilecomponents/PageRow.qml">mobilecomponents/PageRow.qml</file>