New QGCFlickable control

Add scroll height indicators to Flickable
9 years ago · b1104cb661
25 changed files with 133 additions and 47 deletions
--- a/qgroundcontrol.qrc
+++ b/qgroundcontrol.qrc
@ -58,6 +58,9 @@
				@@ -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>
--- a/src/AutoPilotPlugins/APM/APMAirframeComponent.qml
+++ b/src/AutoPilotPlugins/APM/APMAirframeComponent.qml
@ -138,7 +138,7 @@ QGCView {
				@@ -138,7 +138,7 @@ QGCView {
            width:          10
        }

-        Flickable {
+        QGCFlickable {
            id:             scroll
            anchors.top:    helpSpacer.bottom
            anchors.bottom: parent.bottom
--- a/src/AutoPilotPlugins/APM/APMCameraComponent.qml
+++ b/src/AutoPilotPlugins/APM/APMCameraComponent.qml
@ -459,7 +459,7 @@ QGCView {
				@@ -459,7 +459,7 @@ QGCView {
        id:             panel
        anchors.fill:   parent

-        Flickable {
+        QGCFlickable {
            clip:           true
            anchors.fill:   parent
            contentHeight:  gimbalDirectionPanLoader.y + gimbalDirectionPanLoader.height
--- a/src/AutoPilotPlugins/APM/APMFlightModesComponent.qml
+++ b/src/AutoPilotPlugins/APM/APMFlightModesComponent.qml
@ -51,10 +51,9 @@ QGCView {
				@@ -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 {
				@@ -164,6 +163,6 @@ QGCView {
                    } // Repeater -- Channel options
                } // Column - Channel options
            } // Rectangle - Channel options
-        } // FLickable
+        } // QGCFlickable
    } // QGCViewPanel
 } // QGCView
--- a/src/AutoPilotPlugins/APM/APMPowerComponent.qml
+++ b/src/AutoPilotPlugins/APM/APMPowerComponent.qml
@ -99,7 +99,7 @@ QGCView {
				@@ -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 {
				@@ -246,6 +246,6 @@ QGCView {
                fact:               battAmpPerVolt
                visible:            _showAdvanced
            }
-        } // Flickable
+        } // QGCFlickable
    } // QGCViewPanel
 } // QGCView
--- a/src/AutoPilotPlugins/APM/APMSafetyComponentCopter.qml
+++ b/src/AutoPilotPlugins/APM/APMSafetyComponentCopter.qml
@ -71,7 +71,7 @@ QGCView {
				@@ -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 {
				@@ -494,6 +494,6 @@ QGCView {
                    FactBitmask { fact: _armingCheck }
                }
            }
-        } // Flickable
+        } // QGCFlickable
    } // QGCViewPanel
 } // QGCView
--- a/src/AutoPilotPlugins/APM/APMSafetyComponentPlane.qml
+++ b/src/AutoPilotPlugins/APM/APMSafetyComponentPlane.qml
@ -56,10 +56,9 @@ QGCView {
				@@ -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 {
				@@ -205,6 +204,6 @@ QGCView {
                    enabled:            returnAltRadio.checked
                }
            } // Rectangle - RTL Settings
-        } // Flickable
+        } // QGCFlickable
    } // QGCViewPanel
 } // QGCView
--- a/src/AutoPilotPlugins/APM/APMSensorsComponent.qml
+++ b/src/AutoPilotPlugins/APM/APMSensorsComponent.qml
@ -239,7 +239,7 @@ QGCView {
				@@ -239,7 +239,7 @@ QGCView {
                text:               "Show values"
            }

-            Flickable {
+            QGCFlickable {
                anchors.topMargin:  ScreenTools.defaultFontPixelHeight
                anchors.top:        showValues.bottom
                anchors.bottom:     parent.bottom
--- a/src/AutoPilotPlugins/APM/APMTuningComponentCopter.qml
+++ b/src/AutoPilotPlugins/APM/APMTuningComponentCopter.qml
@ -126,10 +126,9 @@ QGCView {
				@@ -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 {
				@@ -340,6 +339,6 @@ QGCView {
                    }
                }
            } // Rectangle - AutoTune
-        } // Flickable
+        } // QGCFlickable
    } // QGCViewPanel
 } // QGCView
--- a/src/AutoPilotPlugins/PX4/AirframeComponent.qml
+++ b/src/AutoPilotPlugins/PX4/AirframeComponent.qml
@ -149,7 +149,7 @@ QGCView {
				@@ -149,7 +149,7 @@ QGCView {
            width:          10
        }

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

            onWidthChanged: {
--- a/src/AutoPilotPlugins/PX4/PowerComponent.qml
+++ b/src/AutoPilotPlugins/PX4/PowerComponent.qml
@ -108,12 +108,11 @@ QGCView {
				@@ -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 {
				@@ -414,6 +413,6 @@ QGCView {
                    }
                } // Rectangle - Advanced power settings
            } // Column
-        } // Flickable
+        } // QGCFlickable
    } // QGCViewPanel
 } // QGCView
--- a/src/AutoPilotPlugins/PX4/SafetyComponent.qml
+++ b/src/AutoPilotPlugins/PX4/SafetyComponent.qml
@ -53,12 +53,11 @@ QGCView {
				@@ -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 {
				@@ -321,6 +320,6 @@ QGCView {
                width:          1
                height:         1
            }
-        } // Flickable
+        } // QGCFlickable
    } // QGCViewPanel
 } // QGCView
--- a/src/MissionEditor/MissionItemStatus.qml
+++ b/src/MissionEditor/MissionItemStatus.qml
@ -90,7 +90,7 @@ Rectangle {
				@@ -90,7 +90,7 @@ Rectangle {
        text:               _expanded ? "<<" : ">>"
    }

-    Flickable {
+    QGCFlickable {
        anchors.leftMargin:     _margins
        anchors.rightMargin:    _margins
        anchors.left:           distanceLabel.right
--- a/src/QmlControls/FactSliderPanel.qml
+++ b/src/QmlControls/FactSliderPanel.qml
@ -68,10 +68,9 @@ QGCView {
				@@ -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 {
				@@ -138,6 +137,6 @@ QGCView {
                    } // Repeater
                } // Column
            } // Rectangle
-        } // Flickable
+        } // QGCFlickable
    } // QGCViewPanel
 } // QGCView
--- a/src/QmlControls/ParameterEditor.qml
+++ b/src/QmlControls/ParameterEditor.qml
@ -166,7 +166,7 @@ QGCView {
				@@ -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 {
				@@ -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 {
				@@ -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 {
				@@ -249,7 +248,7 @@ QGCView {
    Component {
        id: searchResultsViewComponent
        Item {
-            Flickable {
+            QGCFlickable {
                id:             factScrollView
                width:          parent.width
                height:         parent.height
--- a/src/QmlControls/QGCFlickable.qml
+++ b/src/QmlControls/QGCFlickable.qml
@ -0,0 +1,20 @@
				@@ -0,0 +1,20 @@
+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)
+    }
+}
--- a/src/QmlControls/QGCFlickableHorizontalIndicator.qml
+++ b/src/QmlControls/QGCFlickableHorizontalIndicator.qml
@ -0,0 +1,39 @@
				@@ -0,0 +1,39 @@
+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
+    }
+}
--- a/src/QmlControls/QGCFlickableVerticalIndicator.qml
+++ b/src/QmlControls/QGCFlickableVerticalIndicator.qml
@ -0,0 +1,39 @@
				@@ -0,0 +1,39 @@
+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
+    }
+}
--- a/src/QmlControls/QGroundControl.Controls.qmldir
+++ b/src/QmlControls/QGroundControl.Controls.qmldir
@ -18,6 +18,7 @@ QGCButton               1.0 QGCButton.qml
				@@ -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
--- a/src/VehicleSetup/SetupView.qml
+++ b/src/VehicleSetup/SetupView.qml
@ -211,16 +211,13 @@ Rectangle {
				@@ -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 {
--- a/src/VehicleSetup/VehicleSummary.qml
+++ b/src/VehicleSetup/VehicleSummary.qml
@ -75,13 +75,12 @@ Rectangle {
				@@ -75,13 +75,12 @@ Rectangle {
        computeSummaryBoxSize()
    }

-    Flickable {
+    QGCFlickable {
        clip:               true
        anchors.fill:       parent
        contentHeight:      summaryColumn.height
        contentWidth:       _summaryRoot.width
        flickableDirection: Flickable.VerticalFlick
-        boundsBehavior:     Flickable.StopAtBounds

        Column {
            id:             summaryColumn
--- a/src/ui/MainWindowInner.qml
+++ b/src/ui/MainWindowInner.qml
@ -346,13 +346,12 @@ Item {
				@@ -346,13 +346,12 @@ Item {
        anchors.horizontalCenter:   parent.horizontalCenter
        anchors.top:                parent.top
        anchors.topMargin:          tbHeight + ScreenTools.defaultFontPixelHeight
-        Flickable {
+        QGCFlickable {
            id:                 messageFlick
            anchors.margins:    ScreenTools.defaultFontPixelHeight
            anchors.fill:       parent
            contentHeight:      messageText.height
            contentWidth:       messageText.width
-            boundsBehavior:     Flickable.StopAtBounds
            pixelAligned:       true
            clip:               true
            TextEdit {
--- a/src/ui/preferences/GeneralSettings.qml
+++ b/src/ui/preferences/GeneralSettings.qml
@ -45,13 +45,12 @@ Rectangle {
				@@ -45,13 +45,12 @@ Rectangle {
        colorGroupEnabled:  enabled
    }

-    Flickable {
+    QGCFlickable {
        clip:               true
        anchors.fill:       parent
        contentHeight:      settingsColumn.height
        contentWidth:       _generalRoot.width
        flickableDirection: Flickable.VerticalFlick
-        boundsBehavior:     Flickable.StopAtBounds

        Column {
            id:                 settingsColumn
--- a/src/ui/preferences/LinkSettings.qml
+++ b/src/ui/preferences/LinkSettings.qml
@ -58,7 +58,7 @@ Rectangle {
				@@ -58,7 +58,7 @@ Rectangle {
        settingLoader.sourceComponent = null
    }

-    Flickable {
+    QGCFlickable {
        clip:               true
        anchors.top:        parent.top
        width:              parent.width
@ -66,7 +66,6 @@ Rectangle {
				@@ -66,7 +66,6 @@ Rectangle {
        contentHeight:      settingsColumn.height
        contentWidth:       _linkRoot.width
        flickableDirection: Flickable.VerticalFlick
-        boundsBehavior:     Flickable.StopAtBounds

        Column {
            id:                 settingsColumn
@ -201,7 +200,7 @@ Rectangle {
				@@ -201,7 +200,7 @@ Rectangle {
                    editConfig = null
                }
            }
-            Flickable {
+            QGCFlickable {
                id:                 settingsFlick
                clip:               true
                anchors.top:        parent.top
--- a/src/ui/preferences/MavlinkSettings.qml
+++ b/src/ui/preferences/MavlinkSettings.qml
@ -43,14 +43,13 @@ Rectangle {
				@@ -43,14 +43,13 @@ Rectangle {
        colorGroupEnabled:  enabled
    }

-    Flickable {
+    QGCFlickable {
        clip:               true
        anchors.fill:       parent
        anchors.margins:    ScreenTools.defaultFontPixelWidth
        contentHeight:      settingsColumn.height
        contentWidth:       __mavlinkRoot.width
        flickableDirection: Flickable.VerticalFlick
-        boundsBehavior:     Flickable.StopAtBounds

        Column {
            id:                 settingsColumn