use a ScrollView for the main flickable

It managed the styled scroll indicator and the
behavior.

Signed-off-by: Marco Martin <notmart@gmail.com>

1 files changed, 119 insertions, 116 deletions

diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml
index a905064d7..14cf8dcc4 100644
--- a/qt-mobile/qml/DiveDetails.qml
+++ b/qt-mobile/qml/DiveDetails.qml
@@ -28,138 +28,141 @@ MobileComponents.Page {
 		qmlProfile.update()
 	}
 
-	Flickable {
-		id: flick
+	ScrollView {
 		anchors.fill: parent
-		contentHeight: content.height
-		clip: true
-		Item {
-			id: content
-			width: flick.width
-			height: childrenRect.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
-
-					MobileComponents.Heading {
-						Layout.columnSpan: 2
-						text: "Dive " + number + " (" + date + ")"
-					}
-
-					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
+		Flickable {
+			id: flick
+			anchors.fill: parent
+			contentHeight: content.height
+			clip: true
+			Item {
+				id: content
+				width: flick.width
+				height: childrenRect.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
+
+						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"
+									}
 								}
 							}
 						}
-					}
-					MobileComponents.Label {
-						text: "Location:"
-					}
-					TextField {
-						id: txtLocation; text: location;
-						Layout.fillWidth: true
-					}
+						MobileComponents.Label {
+							text: "Location:"
+						}
+						TextField {
+							id: txtLocation; text: location;
+							Layout.fillWidth: true
+						}
 
-					MobileComponents.Label {
-						text: "Air Temp:"
-					}
-					TextField {
-						id: txtAirTemp
-						text: airtemp
-						Layout.fillWidth: true
-					}
+						MobileComponents.Label {
+							text: "Air Temp:"
+						}
+						TextField {
+							id: txtAirTemp
+							text: airtemp
+							Layout.fillWidth: true
+						}
 
-					MobileComponents.Label {
-						text: "Water Temp:"
-					}
-					TextField {
-						id: txtWaterTemp
-						text: watertemp
-						Layout.fillWidth: true
-					}
+						MobileComponents.Label {
+							text: "Water Temp:"
+						}
+						TextField {
+							id: txtWaterTemp
+							text: watertemp
+							Layout.fillWidth: true
+						}
 
-					MobileComponents.Label {
-						text: "Suit:"
+						MobileComponents.Label {
+							text: "Suit:"
 
-					}
-					TextField {
-						id: txtSuit
-						text: suit
-						Layout.fillWidth: true
-					}
+						}
+						TextField {
+							id: txtSuit
+							text: suit
+							Layout.fillWidth: true
+						}
 
-					MobileComponents.Label {
-						text: "Buddy:"
-					}
-					TextField {
-						id: txtBuddy
-						text: buddy
-						Layout.fillWidth: true
-					}
+						MobileComponents.Label {
+							text: "Buddy:"
+						}
+						TextField {
+							id: txtBuddy
+							text: buddy
+							Layout.fillWidth: true
+						}
 
-					MobileComponents.Label {
-						text: "Dive Master:"
-					}
-					TextField {
-						id: txtDiveMaster
-						text: divemaster
-						Layout.fillWidth: true
-					}
+						MobileComponents.Label {
+							text: "Dive Master:"
+						}
+						TextField {
+							id: txtDiveMaster
+							text: divemaster
+							Layout.fillWidth: true
+						}
 
-					MobileComponents.Label {
-						text: "Notes:"
+						MobileComponents.Label {
+							text: "Notes:"
+						}
+						TextEdit{
+							id: txtNotes
+							text: notes
+							focus: true
+							Layout.fillWidth: true
+							Layout.fillHeight: true
+							selectByMouse: true
+							wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+						}
 					}
-					TextEdit{
-						id: txtNotes
-						text: notes
-						focus: true
-						Layout.fillWidth: true
-						Layout.fillHeight: true
-						selectByMouse: true
-						wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+					Item {
+						height: MobileComponents.Units.gridUnit * 3
+						width: height // just to make sure the spacer doesn't produce scrollbars, but also isn't null
 					}
 				}
-				Item {
-					height: MobileComponents.Units.gridUnit * 3
-					width: height // just to make sure the spacer doesn't produce scrollbars, but also isn't null
-				}
 			}
 		}
 	}