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>

4 files changed, 194 insertions, 193 deletions

diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml
index 401921c9f..e69d0e672 100644
--- a/qt-mobile/qml/DiveDetails.qml
+++ b/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,120 +31,130 @@ Item {
 	Flickable {
 		id: flick
 		anchors.fill: parent
-		contentHeight: parent.height
+		contentHeight: content.height
 		clip: true
-		ColumnLayout {
-			width: parent.width
-			spacing: 8
+		Item {
+			id: content
+			width: flick.width
+			height: contentRect.height + MobileComponents.Units.smallSpacing * 2
 
+			ColumnLayout {
+				anchors {
+					left: parent.left
+					right: parent.right
+					top: parent.top
+					margins: MobileComponents.Units.smallSpacing
+				}
+				spacing: MobileComponents.Units.smallSpacing
 
-			GridLayout {
-				id: editorDetails
-				width: parent.width
-				columns: 2
 
-				Label {
-					Layout.columnSpan: 2
-					font.pointSize: subsurfaceTheme.titlePointSize
-					text: "Dive " + number + " (" + date + ")"
-				}
+				GridLayout {
+					id: editorDetails
+					width: parent.width
+					columns: 2
 
-				Item {
-					Layout.columnSpan: 2
-					Layout.fillWidth: true
-					Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height
-					QMLProfile {
-						id: qmlProfile
-						height: MobileComponents.Units.gridUnit * 25
-						anchors {
-							top: parent.top
-							left: parent.left
-							right: parent.right
-						}
-						//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
+					MobileComponents.Heading {
+						Layout.columnSpan: 2
+						text: "Dive " + number + " (" + date + ")"
 					}
-					Button {
-						id: profileHideButton
-						anchors {
-							right: parent.right
-							top: parent.top
+
+					Item {
+						Layout.columnSpan: 2
+						Layout.fillWidth: true
+						Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height
+						QMLProfile {
+							id: qmlProfile
+							height: MobileComponents.Units.gridUnit * 25
+							anchors {
+								top: parent.top
+								left: parent.left
+								right: parent.right
+							}
+							//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
 						}
-						text: "Hide Dive Profile"
-						onClicked: {
-							qmlProfile.visible = !qmlProfile.visible
-							if (qmlProfile.visible) {
-								text = "Hide Dive Profile"
-							} else {
-								text = "Show Dive Profile"
+						Button {
+							id: profileHideButton
+							anchors {
+								right: parent.right
+								top: parent.top
+							}
+							text: "Hide Dive Profile"
+							onClicked: {
+								qmlProfile.visible = !qmlProfile.visible
+								if (qmlProfile.visible) {
+									text = "Hide Dive Profile"
+								} else {
+									text = "Show Dive Profile"
+								}
 							}
 						}
 					}
-				}
-				Label {
-					text: "Location:"
-				}
-				TextField {
-					id: txtLocation; text: location;
-					Layout.fillWidth: true
-				}
+					Label {
+						text: "Location:"
+					}
+					TextField {
+						id: txtLocation; text: location;
+						Layout.fillWidth: true
+					}
 
-				Label {
-					text: "Air Temp:"
-				}
-				TextField {
-					id: txtAirTemp
-					text: airtemp
-					Layout.fillWidth: true
-				}
+					Label {
+						text: "Air Temp:"
+					}
+					TextField {
+						id: txtAirTemp
+						text: airtemp
+						Layout.fillWidth: true
+					}
 
-				Label {
-					text: "Water Temp:"
-				}
-				TextField {
-					id: txtWaterTemp
-					text: watertemp
-					Layout.fillWidth: true
-				}
+					Label {
+						text: "Water Temp:"
+					}
+					TextField {
+						id: txtWaterTemp
+						text: watertemp
+						Layout.fillWidth: true
+					}
 
-				Label {
-					text: "Suit:"
+					Label {
+						text: "Suit:"
 
-				}
-				TextField {
-					id: txtSuit
-					text: suit
-					Layout.fillWidth: true
-				}
+					}
+					TextField {
+						id: txtSuit
+						text: suit
+						Layout.fillWidth: true
+					}
 
-				Label {
-					text: "Buddy:"
-				}
-				TextField {
-					id: txtBuddy
-					text: buddy
-					Layout.fillWidth: true
-				}
+					Label {
+						text: "Buddy:"
+					}
+					TextField {
+						id: txtBuddy
+						text: buddy
+						Layout.fillWidth: true
+					}
 
-				Label {
-					text: "Dive Master:"
-				}
-				TextField {
-					id: txtDiveMaster
-					text: divemaster
-					Layout.fillWidth: true
-				}
+					Label {
+						text: "Dive Master:"
+					}
+					TextField {
+						id: txtDiveMaster
+						text: divemaster
+						Layout.fillWidth: true
+					}
 
-				Label {
-					text: "Notes:"
-				}
-				TextEdit{
-					id: txtNotes
-					text: notes
-					focus: true
-					Layout.fillWidth: true
-					Layout.fillHeight: true
-					selectByMouse: true
-					wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+					Label {
+						text: "Notes:"
+					}
+					TextEdit{
+						id: txtNotes
+						text: notes
+						focus: true
+						Layout.fillWidth: true
+						Layout.fillHeight: true
+						selectByMouse: true
+						wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+					}
 				}
 			}
 		}
diff --git a/qt-mobile/qml/DiveList.qml b/qt-mobile/qml/DiveList.qml
index e0c8f4251..75f4f809e 100644
--- a/qt-mobile/qml/DiveList.qml
+++ b/qt-mobile/qml/DiveList.qml
@@ -6,37 +6,37 @@ 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
-			height: childrenRect.height
+			//When clicked, the mode changes to details view
 
-			//Mouse region: When clicked, the mode changes to details view
-			MouseArea {
-				anchors.fill: parent
-				onClicked: {
-					detailsWindow.width = parent.width
-					detailsWindow.location = location
-					detailsWindow.dive_id = id
-					detailsWindow.buddy = buddy
-					detailsWindow.suit = suit
-					detailsWindow.airtemp = airtemp
-					detailsWindow.watertemp = watertemp
-					detailsWindow.divemaster = divemaster
-					detailsWindow.notes = notes
-					detailsWindow.number = diveNumber
-					detailsWindow.date = date
-					stackView.push(detailsWindow)
-				}
+			onClicked: {
+				diveListView.currentIndex = model.index
+				detailsWindow.width = parent.width
+				detailsWindow.location = location
+				detailsWindow.dive_id = id
+				detailsWindow.buddy = buddy
+				detailsWindow.suit = suit
+				detailsWindow.airtemp = airtemp
+				detailsWindow.watertemp = watertemp
+				detailsWindow.divemaster = divemaster
+				detailsWindow.notes = notes
+				detailsWindow.number = diveNumber
+				detailsWindow.date = date
+				stackView.push(detailsWindow)
 			}
 
 			//Layout of the page: (mini profile, dive no, date at the top
@@ -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
-				font.pointSize: 16
+				level: 2
 			}
 			Rectangle {
 				height: Math.max(2, MobileComponents.Units.gridUnit / 12) // we want a thicker line
@@ -161,18 +149,30 @@ Rectangle {
 		}
 	}
 
-	ListView {
-		id: diveListView
+	Connections {
+		target: stackView
+		onDepthChanged: {
+			if (stackView.depth == 1) {
+				diveListView.currentIndex = -1;
+			}
+		}
+	}
+	ScrollView {
 		anchors.fill: parent
-		model: diveModel
-		delegate: diveDelegate
-		boundsBehavior: Flickable.StopAtBounds
-		//highlight: Rectangle { color: MobileComponents.Theme.highlightColor; width: MobileComponents.Units.smallSpacing }
-		focus: true
-		clip: true
-		section.property: "trip"
-		section.criteria: ViewSection.FullString
-		section.delegate: tripHeading
+		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 }
+			focus: true
+			clip: true
+			section.property: "trip"
+			section.criteria: ViewSection.FullString
+			section.delegate: tripHeading
+		}
 	}
 	StartPage {
 		anchors.fill: parent
diff --git a/qt-mobile/qml/main.qml b/qt-mobile/qml/main.qml
index ac2e3eefd..53d872743 100644
--- a/qt-mobile/qml/main.qml
+++ b/qt-mobile/qml/main.qml
@@ -202,57 +202,46 @@ MobileComponents.ApplicationWindow {
 		}
 	}
 
-	ColumnLayout {
-		anchors.fill: parent
+	toolBar: TopBar {
+		width: parent.width
+		height: Layout.minimumHeight
+	}
 
-		TopBar {
+	property Item stackView: pageStack
+	initialPage: Item {
+		width: parent.width
+		height: parent.height
+
+		ColumnLayout {
+			id: awLayout
+			anchors.fill: parent
+			spacing: MobileComponents.Units.gridUnit / 2
+
+			Rectangle {
+				id: detailsPage
+				Layout.fillHeight: true
+				Layout.fillWidth: true
+
+				DiveList {
+					anchors.fill: detailsPage
+					id: diveDetails
+					color: MobileComponents.Theme.backgroundColor
+				}
+			}
 
-		}
 
-		StackView {
-			id: stackView
-			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
-
-				ColumnLayout {
-					id: awLayout
-					anchors.fill: parent
-					spacing: MobileComponents.Units.gridUnit / 2
-
-					Rectangle {
-						id: detailsPage
-						Layout.fillHeight: true
-						Layout.fillWidth: true
-
-						DiveList {
-							anchors.fill: detailsPage
-							id: diveDetails
-							color: MobileComponents.Theme.backgroundColor
-						}
-					}
-
-					Rectangle {
-						id: messageArea
-						height: childrenRect.height
-						Layout.fillWidth: true
-						color: MobileComponents.Theme.backgroundColor
-
-						Text {
-							id: message
-							color: MobileComponents.Theme.textColor
-							wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
-							styleColor: MobileComponents.Theme.textColor
-							font.pointSize: subsurfaceTheme.smallPointSize
-						}
-					}
+			Rectangle {
+				id: messageArea
+				height: childrenRect.height
+				Layout.fillWidth: true
+				color: MobileComponents.Theme.backgroundColor
+
+				Text {
+					id: message
+					color: MobileComponents.Theme.textColor
+					wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+					styleColor: MobileComponents.Theme.textColor
+					font.pointSize: MobileComponents.Units.smallPointSize
 				}
 			}
 		}
diff --git a/qt-mobile/qml/mobile-resources.qrc b/qt-mobile/qml/mobile-resources.qrc
index d6c0825d4..971c2e427 100644
--- a/qt-mobile/qml/mobile-resources.qrc
+++ b/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>