New QGCFlickable control

Add scroll height indicators to Flickable

qgroundcontrol.qrc

@@ -58,6 +58,9 @@
         <file alias="QGroundControl/Controls/QGCButton.qml">src/QmlControls/QGCButton.qml</file>
         <file alias="QGroundControl/Controls/QGCCheckBox.qml">src/QmlControls/QGCCheckBox.qml</file>
         <file alias="QGroundControl/Controls/QGCColoredImage.qml">src/QmlControls/QGCColoredImage.qml</file>
+        <file alias="QGroundControl/Controls/QGCFlickable.qml">src/QmlControls/QGCFlickable.qml</file>
+        <file alias="QGroundControl/Controls/QGCFlickableVerticalIndicator.qml">src/QmlControls/QGCFlickableVerticalIndicator.qml</file>
+        <file alias="QGroundControl/Controls/QGCFlickableHorizontalIndicator.qml">src/QmlControls/QGCFlickableHorizontalIndicator.qml</file>
         <file alias="QGroundControl/Controls/QGCComboBox.qml">src/QmlControls/QGCComboBox.qml</file>
         <file alias="QGroundControl/Controls/QGCLabel.qml">src/QmlControls/QGCLabel.qml</file>
         <file alias="QGroundControl/Controls/QGCMovableItem.qml">src/QmlControls/QGCMovableItem.qml</file>

src/AutoPilotPlugins/APM/APMAirframeComponent.qml

@@ -138,7 +138,7 @@ QGCView {
             width:          10
         }
 
-        Flickable {
+        QGCFlickable {
             id:             scroll
             anchors.top:    helpSpacer.bottom
             anchors.bottom: parent.bottom

src/AutoPilotPlugins/APM/APMCameraComponent.qml

@@ -459,7 +459,7 @@ QGCView {
         id:             panel
         anchors.fill:   parent
 
-        Flickable {
+        QGCFlickable {
             clip:           true
             anchors.fill:   parent
             contentHeight:  gimbalDirectionPanLoader.y + gimbalDirectionPanLoader.height

src/AutoPilotPlugins/APM/APMFlightModesComponent.qml

@@ -51,10 +51,9 @@ QGCView {
         id:             panel
         anchors.fill:   parent
 
-        Flickable {
+        QGCFlickable {
             anchors.fill:       parent
             clip:               true
-            boundsBehavior:     Flickable.StopAtBounds
             flickableDirection: Flickable.VerticalFlick
             contentHeight:      flightModeSettings.y + flightModeSettings.height
 
@@ -164,6 +163,6 @@ QGCView {
                     } // Repeater -- Channel options
                 } // Column - Channel options
             } // Rectangle - Channel options
-        } // FLickable
+        } // QGCFlickable
     } // QGCViewPanel
 } // QGCView

src/AutoPilotPlugins/APM/APMPowerComponent.qml

@@ -99,7 +99,7 @@ QGCView {
         id:             panel
         anchors.fill:   parent
 
-        Flickable {
+        QGCFlickable {
             anchors.fill:       parent
             clip:               true
             contentWidth:       capacityField.x + capacityField.width + _margins
@@ -246,6 +246,6 @@ QGCView {
                 fact:               battAmpPerVolt
                 visible:            _showAdvanced
             }
-        } // Flickable
+        } // QGCFlickable
     } // QGCViewPanel
 } // QGCView

src/AutoPilotPlugins/APM/APMSafetyComponentCopter.qml

@@ -71,7 +71,7 @@ QGCView {
         id:             panel
         anchors.fill:   parent
 
-        Flickable {
+        QGCFlickable {
             clip:               true
             anchors.fill:       parent
             contentHeight:      armingCheckSettings.y + armingCheckSettings.height
@@ -494,6 +494,6 @@ QGCView {
                     FactBitmask { fact: _armingCheck }
                 }
             }
-        } // Flickable
+        } // QGCFlickable
     } // QGCViewPanel
 } // QGCView

src/AutoPilotPlugins/APM/APMSafetyComponentPlane.qml

@@ -56,10 +56,9 @@ QGCView {
         id:             panel
         anchors.fill:   parent
 
-        Flickable {
+        QGCFlickable {
             clip:               true
             anchors.fill:       parent
-            boundsBehavior:     Flickable.StopAtBounds
             contentHeight:      rtlSettings.y + rtlSettings.height
             flickableDirection: Flickable.VerticalFlick
 
@@ -205,6 +204,6 @@ QGCView {
                     enabled:            returnAltRadio.checked
                 }
             } // Rectangle - RTL Settings
-        } // Flickable
+        } // QGCFlickable
     } // QGCViewPanel
 } // QGCView

src/AutoPilotPlugins/APM/APMSensorsComponent.qml

@@ -239,7 +239,7 @@ QGCView {
                 text:               "Show values"
             }
 
-            Flickable {
+            QGCFlickable {
                 anchors.topMargin:  ScreenTools.defaultFontPixelHeight
                 anchors.top:        showValues.bottom
                 anchors.bottom:     parent.bottom

src/AutoPilotPlugins/APM/APMTuningComponentCopter.qml

@@ -126,10 +126,9 @@ QGCView {
         id:             panel
         anchors.fill:   parent
 
-        Flickable {
+        QGCFlickable {
             clip:               true
             anchors.fill:       parent
-            boundsBehavior:     Flickable.StopAtBounds
             contentHeight:      autoTuneRect.y + autoTuneRect.height
             flickableDirection: Flickable.VerticalFlick
 
@@ -340,6 +339,6 @@ QGCView {
                     }
                 }
             } // Rectangle - AutoTune
-        } // Flickable
+        } // QGCFlickable
     } // QGCViewPanel
 } // QGCView

src/AutoPilotPlugins/PX4/AirframeComponent.qml

@@ -149,7 +149,7 @@ QGCView {
             width:          10
         }
 
-        Flickable {
+        QGCFlickable {
             id:             scroll
             anchors.top:    lastSpacer.bottom
             anchors.bottom: parent.bottom
@@ -157,7 +157,6 @@ QGCView {
             clip:           true
             contentHeight:  flowView.height
             contentWidth:   parent.width
-            boundsBehavior:     Flickable.StopAtBounds
             flickableDirection: Flickable.VerticalFlick
 
             onWidthChanged: {

src/AutoPilotPlugins/PX4/PowerComponent.qml

@@ -108,12 +108,11 @@ QGCView {
         id:             panel
         anchors.fill:   parent
 
-        Flickable {
+        QGCFlickable {
             anchors.fill:       parent
             clip:               true
             contentHeight:      innerColumn.height
             contentWidth:       panel.width
-            boundsBehavior:     Flickable.StopAtBounds
             flickableDirection: Flickable.VerticalFlick
 
             Column {
@@ -414,6 +413,6 @@ QGCView {
                     }
                 } // Rectangle - Advanced power settings
             } // Column
-        } // Flickable
+        } // QGCFlickable
     } // QGCViewPanel
 } // QGCView

src/AutoPilotPlugins/PX4/SafetyComponent.qml

@@ -53,12 +53,11 @@ QGCView {
         id:             panel
         anchors.fill:   parent
 
-        Flickable {
+        QGCFlickable {
             clip:               true
             anchors.fill:       parent
             contentHeight:      screenBottom.y + screenBottom.height
             contentWidth:       parent.width
-            boundsBehavior:     Flickable.StopAtBounds
             flickableDirection: Flickable.VerticalFlick
 
             QGCLabel {
@@ -321,6 +320,6 @@ QGCView {
                 width:          1
                 height:         1
             }
-        } // Flickable
+        } // QGCFlickable
     } // QGCViewPanel
 } // QGCView

src/MissionEditor/MissionItemStatus.qml

@@ -90,7 +90,7 @@ Rectangle {
         text:               _expanded ? "<<" : ">>"
     }
 
-    Flickable {
+    QGCFlickable {
         anchors.leftMargin:     _margins
         anchors.rightMargin:    _margins
         anchors.left:           distanceLabel.right

src/QmlControls/FactSliderPanel.qml

@@ -68,10 +68,9 @@ QGCView {
         id:             panel
         anchors.fill:   parent
 
-        Flickable {
+        QGCFlickable {
             clip:               true
             anchors.fill:       parent
-            boundsBehavior:     Flickable.StopAtBounds
             contentHeight:      sliderRect.y + sliderRect.height
             flickableDirection: Flickable.VerticalFlick
 
@@ -138,6 +137,6 @@ QGCView {
                     } // Repeater
                 } // Column
             } // Rectangle
-        } // Flickable
+        } // QGCFlickable
     } // QGCViewPanel
 } // QGCView

src/QmlControls/ParameterEditor.qml

@@ -166,7 +166,7 @@ QGCView {
         Row {
             spacing: ScreenTools.defaultFontPixelWidth * 0.5
             //-- Parameter Groups
-            Flickable {
+            QGCFlickable {
                 id :                groupScroll
                 width:              ScreenTools.defaultFontPixelWidth * 25
                 height:             parent.height
@@ -174,7 +174,6 @@ QGCView {
                 pixelAligned:       true
                 contentHeight:      groupedViewComponentColumn.height
                 contentWidth:       groupedViewComponentColumn.width
-                boundsBehavior:     Flickable.OvershootBounds
                 flickableDirection: Flickable.VerticalFlick
                 Column {
                     id: groupedViewComponentColumn
@@ -222,7 +221,7 @@ QGCView {
                 opacity:    0.1
             }
             //-- Parameters
-            Flickable {
+            QGCFlickable {
                 id:             factScrollView
                 width:          parent.width - groupScroll.width
                 height:         parent.height
@@ -249,7 +248,7 @@ QGCView {
     Component {
         id: searchResultsViewComponent
         Item {
-            Flickable {
+            QGCFlickable {
                 id:             factScrollView
                 width:          parent.width
                 height:         parent.height

src/QmlControls/QGCFlickable.qml

+import QtQuick  2.5
+
+import QGroundControl.Palette       1.0
+import QGroundControl.ScreenTools   1.0
+
+Flickable {
+    id:             root
+    boundsBehavior: Flickable.StopAtBounds
+
+    property color indicatorColor: qgcPal.text
+
+    QGCPalette { id: qgcPal; colorGroupEnabled: enabled }
+
+    Component.onCompleted: {
+        var indicatorComponent = Qt.createComponent("QGCFlickableVerticalIndicator.qml")
+        indicatorComponent.createObject(root)
+        indicatorComponent = Qt.createComponent("QGCFlickableHorizontalIndicator.qml")
+        indicatorComponent.createObject(root)
+    }
+}

src/QmlControls/QGCFlickableHorizontalIndicator.qml

+import QtQuick 2.5
+
+Rectangle {
+    id:                    horizontalIndicator
+    anchors.bottomMargin:  2
+    anchors.bottom:        parent.bottom
+    x:                     parent.width * (parent.contentX / parent.contentWidth)
+    z:                     10
+    height:                2
+    width:                 parent.width * (parent.width / parent.contentWidth)
+    color:                 parent.indicatorColor
+    visible:               showIndicator
+
+    property bool showIndicator: (parent.flickableDirection == Flickable.AutoFlickDirection ||
+                                  parent.flickableDirection == Flickable.HorizontalFlick ||
+                                  parent.flickableDirection == Flickable.HorizontalAndVerticalFlick) &&
+                                 (parent.contentWidth > parent.width)
+
+    Component.onCompleted:  animateOpacity.restart()
+    onVisibleChanged:       animateOpacity.restart()
+    onWidthChanged:         animateOpacity.restart()
+
+    Connections {
+        target:                    horizontalIndicator.parent
+        onMovementStarted:         horizontalIndicator.opacity = 1.0
+        onMovementEnded:           animateOpacity.restart()
+        onContentHeightChanged:    animateOpacity.restart()
+    }
+
+    NumberAnimation {
+        id:            animateOpacity
+        target:        horizontalIndicator
+        properties:    "opacity"
+        from:          1.0
+        to:            0.0
+        duration:      1000
+        easing.type:   Easing.InQuint
+    }
+}

src/QmlControls/QGCFlickableVerticalIndicator.qml

+import QtQuick 2.5
+
+Rectangle {
+    id:                    verticalIndicator
+    anchors.rightMargin:   2
+    anchors.right:         parent.right
+    y:                     parent.height * (parent.contentY / parent.contentHeight)
+    z:                     10
+    width:                 2
+    height:                parent.height * (parent.height / parent.contentHeight)
+    color:                 parent.indicatorColor
+    visible:               showIndicator
+
+    property bool showIndicator: (parent.flickableDirection == Flickable.AutoFlickDirection ||
+                                  parent.flickableDirection == Flickable.VerticalFlick ||
+                                  parent.flickableDirection == Flickable.HorizontalAndVerticalFlick) &&
+                                 (parent.contentHeight > parent.height)
+
+    Component.onCompleted:  animateOpacity.restart()
+    onVisibleChanged:       animateOpacity.restart()
+    onHeightChanged:        animateOpacity.restart()
+
+    Connections {
+        target:                    verticalIndicator.parent
+        onMovementStarted:         verticalIndicator.opacity = 1.0
+        onMovementEnded:           animateOpacity.restart()
+        onContentHeightChanged:    animateOpacity.restart()
+    }
+
+    NumberAnimation {
+        id:            animateOpacity
+        target:        verticalIndicator
+        properties:    "opacity"
+        from:          1.0
+        to:            0.0
+        duration:      1000
+        easing.type:   Easing.InQuint
+    }
+}

src/QmlControls/QGroundControl.Controls.qmldir

@@ -18,6 +18,7 @@ QGCButton               1.0 QGCButton.qml
 QGCCheckBox             1.0 QGCCheckBox.qml
 QGCColoredImage         1.0 QGCColoredImage.qml
 QGCComboBox             1.0 QGCComboBox.qml
+QGCFlickable            1.0 QGCFlickable.qml
 QGCLabel                1.0 QGCLabel.qml
 QGCMovableItem          1.0 QGCMovableItem.qml
 QGCRadioButton          1.0 QGCRadioButton.qml

src/VehicleSetup/SetupView.qml

@@ -211,16 +211,13 @@ Rectangle {
         anchors.right:      parent.right
         color:              qgcPal.window
 
-        Flickable {
+        QGCFlickable {
             id:                 buttonScroll
             width:              buttonColumn.width
             anchors.topMargin:  _defaultTextHeight / 2
             anchors.top:        parent.top
             anchors.bottom:     parent.bottom
-            clip:               true
             contentHeight:      buttonColumn.height
-            contentWidth:       buttonColumn.width
-            boundsBehavior:     Flickable.StopAtBounds
             flickableDirection: Flickable.VerticalFlick
 
             Column {