From b1104cb66164265199ca222805906cd1f96fbf52 Mon Sep 17 00:00:00 2001 From: Don Gagne Date: Sun, 17 Jan 2016 14:49:01 -0800 Subject: [PATCH] New QGCFlickable control Add scroll height indicators to Flickable --- qgroundcontrol.qrc | 3 ++ .../APM/APMAirframeComponent.qml | 2 +- .../APM/APMCameraComponent.qml | 2 +- .../APM/APMFlightModesComponent.qml | 5 +-- .../APM/APMPowerComponent.qml | 4 +- .../APM/APMSafetyComponentCopter.qml | 4 +- .../APM/APMSafetyComponentPlane.qml | 5 +-- .../APM/APMSensorsComponent.qml | 2 +- .../APM/APMTuningComponentCopter.qml | 5 +-- .../PX4/AirframeComponent.qml | 3 +- src/AutoPilotPlugins/PX4/PowerComponent.qml | 5 +-- src/AutoPilotPlugins/PX4/SafetyComponent.qml | 5 +-- src/MissionEditor/MissionItemStatus.qml | 2 +- src/QmlControls/FactSliderPanel.qml | 5 +-- src/QmlControls/ParameterEditor.qml | 7 ++-- src/QmlControls/QGCFlickable.qml | 20 ++++++++++ .../QGCFlickableHorizontalIndicator.qml | 39 +++++++++++++++++++ .../QGCFlickableVerticalIndicator.qml | 39 +++++++++++++++++++ .../QGroundControl.Controls.qmldir | 1 + src/VehicleSetup/SetupView.qml | 5 +-- src/VehicleSetup/VehicleSummary.qml | 3 +- src/ui/MainWindowInner.qml | 3 +- src/ui/preferences/GeneralSettings.qml | 3 +- src/ui/preferences/LinkSettings.qml | 5 +-- src/ui/preferences/MavlinkSettings.qml | 3 +- 25 files changed, 133 insertions(+), 47 deletions(-) create mode 100644 src/QmlControls/QGCFlickable.qml create mode 100644 src/QmlControls/QGCFlickableHorizontalIndicator.qml create mode 100644 src/QmlControls/QGCFlickableVerticalIndicator.qml diff --git a/qgroundcontrol.qrc b/qgroundcontrol.qrc index 5e5b9340e..ec3585232 100644 --- a/qgroundcontrol.qrc +++ b/qgroundcontrol.qrc @@ -58,6 +58,9 @@ src/QmlControls/QGCButton.qml src/QmlControls/QGCCheckBox.qml src/QmlControls/QGCColoredImage.qml + src/QmlControls/QGCFlickable.qml + src/QmlControls/QGCFlickableVerticalIndicator.qml + src/QmlControls/QGCFlickableHorizontalIndicator.qml src/QmlControls/QGCComboBox.qml src/QmlControls/QGCLabel.qml src/QmlControls/QGCMovableItem.qml diff --git a/src/AutoPilotPlugins/APM/APMAirframeComponent.qml b/src/AutoPilotPlugins/APM/APMAirframeComponent.qml index 30529cc56..de9bf7cbc 100644 --- a/src/AutoPilotPlugins/APM/APMAirframeComponent.qml +++ b/src/AutoPilotPlugins/APM/APMAirframeComponent.qml @@ -138,7 +138,7 @@ QGCView { width: 10 } - Flickable { + QGCFlickable { id: scroll anchors.top: helpSpacer.bottom anchors.bottom: parent.bottom diff --git a/src/AutoPilotPlugins/APM/APMCameraComponent.qml b/src/AutoPilotPlugins/APM/APMCameraComponent.qml index d56e10700..41ebde565 100644 --- a/src/AutoPilotPlugins/APM/APMCameraComponent.qml +++ b/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 diff --git a/src/AutoPilotPlugins/APM/APMFlightModesComponent.qml b/src/AutoPilotPlugins/APM/APMFlightModesComponent.qml index e21b7d6d7..7c81ccbd1 100644 --- a/src/AutoPilotPlugins/APM/APMFlightModesComponent.qml +++ b/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 diff --git a/src/AutoPilotPlugins/APM/APMPowerComponent.qml b/src/AutoPilotPlugins/APM/APMPowerComponent.qml index 37f0aa664..f6bf6ab3b 100644 --- a/src/AutoPilotPlugins/APM/APMPowerComponent.qml +++ b/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 diff --git a/src/AutoPilotPlugins/APM/APMSafetyComponentCopter.qml b/src/AutoPilotPlugins/APM/APMSafetyComponentCopter.qml index 65582c207..c61305fa4 100644 --- a/src/AutoPilotPlugins/APM/APMSafetyComponentCopter.qml +++ b/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 diff --git a/src/AutoPilotPlugins/APM/APMSafetyComponentPlane.qml b/src/AutoPilotPlugins/APM/APMSafetyComponentPlane.qml index f06676032..7915de94b 100644 --- a/src/AutoPilotPlugins/APM/APMSafetyComponentPlane.qml +++ b/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 diff --git a/src/AutoPilotPlugins/APM/APMSensorsComponent.qml b/src/AutoPilotPlugins/APM/APMSensorsComponent.qml index 0990ece27..708b809fe 100644 --- a/src/AutoPilotPlugins/APM/APMSensorsComponent.qml +++ b/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 diff --git a/src/AutoPilotPlugins/APM/APMTuningComponentCopter.qml b/src/AutoPilotPlugins/APM/APMTuningComponentCopter.qml index 4e5844851..efa7d08e5 100644 --- a/src/AutoPilotPlugins/APM/APMTuningComponentCopter.qml +++ b/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 diff --git a/src/AutoPilotPlugins/PX4/AirframeComponent.qml b/src/AutoPilotPlugins/PX4/AirframeComponent.qml index 69c63f699..799d700e0 100644 --- a/src/AutoPilotPlugins/PX4/AirframeComponent.qml +++ b/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: { diff --git a/src/AutoPilotPlugins/PX4/PowerComponent.qml b/src/AutoPilotPlugins/PX4/PowerComponent.qml index 2ffd62095..d417930e0 100644 --- a/src/AutoPilotPlugins/PX4/PowerComponent.qml +++ b/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 diff --git a/src/AutoPilotPlugins/PX4/SafetyComponent.qml b/src/AutoPilotPlugins/PX4/SafetyComponent.qml index 695dab489..e74832138 100644 --- a/src/AutoPilotPlugins/PX4/SafetyComponent.qml +++ b/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 diff --git a/src/MissionEditor/MissionItemStatus.qml b/src/MissionEditor/MissionItemStatus.qml index 09851a527..78d99bae1 100644 --- a/src/MissionEditor/MissionItemStatus.qml +++ b/src/MissionEditor/MissionItemStatus.qml @@ -90,7 +90,7 @@ Rectangle { text: _expanded ? "<<" : ">>" } - Flickable { + QGCFlickable { anchors.leftMargin: _margins anchors.rightMargin: _margins anchors.left: distanceLabel.right diff --git a/src/QmlControls/FactSliderPanel.qml b/src/QmlControls/FactSliderPanel.qml index 90fdf78ca..09b089210 100644 --- a/src/QmlControls/FactSliderPanel.qml +++ b/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 diff --git a/src/QmlControls/ParameterEditor.qml b/src/QmlControls/ParameterEditor.qml index b0a137088..1c70b9bc9 100644 --- a/src/QmlControls/ParameterEditor.qml +++ b/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 diff --git a/src/QmlControls/QGCFlickable.qml b/src/QmlControls/QGCFlickable.qml new file mode 100644 index 000000000..52b1b0c44 --- /dev/null +++ b/src/QmlControls/QGCFlickable.qml @@ -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) + } +} diff --git a/src/QmlControls/QGCFlickableHorizontalIndicator.qml b/src/QmlControls/QGCFlickableHorizontalIndicator.qml new file mode 100644 index 000000000..e5a4fc429 --- /dev/null +++ b/src/QmlControls/QGCFlickableHorizontalIndicator.qml @@ -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 + } +} diff --git a/src/QmlControls/QGCFlickableVerticalIndicator.qml b/src/QmlControls/QGCFlickableVerticalIndicator.qml new file mode 100644 index 000000000..c20a83286 --- /dev/null +++ b/src/QmlControls/QGCFlickableVerticalIndicator.qml @@ -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 + } +} diff --git a/src/QmlControls/QGroundControl.Controls.qmldir b/src/QmlControls/QGroundControl.Controls.qmldir index 336948323..8484c1444 100644 --- a/src/QmlControls/QGroundControl.Controls.qmldir +++ b/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 diff --git a/src/VehicleSetup/SetupView.qml b/src/VehicleSetup/SetupView.qml index a9678a588..e28859dd4 100644 --- a/src/VehicleSetup/SetupView.qml +++ b/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 { diff --git a/src/VehicleSetup/VehicleSummary.qml b/src/VehicleSetup/VehicleSummary.qml index ed126b21b..a0230e7b6 100644 --- a/src/VehicleSetup/VehicleSummary.qml +++ b/src/VehicleSetup/VehicleSummary.qml @@ -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 diff --git a/src/ui/MainWindowInner.qml b/src/ui/MainWindowInner.qml index 6a9f019ad..16c47d0db 100644 --- a/src/ui/MainWindowInner.qml +++ b/src/ui/MainWindowInner.qml @@ -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 { diff --git a/src/ui/preferences/GeneralSettings.qml b/src/ui/preferences/GeneralSettings.qml index 4b76e1dad..7762d2348 100644 --- a/src/ui/preferences/GeneralSettings.qml +++ b/src/ui/preferences/GeneralSettings.qml @@ -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 diff --git a/src/ui/preferences/LinkSettings.qml b/src/ui/preferences/LinkSettings.qml index a016aa3fd..e1d5695d1 100644 --- a/src/ui/preferences/LinkSettings.qml +++ b/src/ui/preferences/LinkSettings.qml @@ -58,7 +58,7 @@ Rectangle { settingLoader.sourceComponent = null } - Flickable { + QGCFlickable { clip: true anchors.top: parent.top width: parent.width @@ -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 { editConfig = null } } - Flickable { + QGCFlickable { id: settingsFlick clip: true anchors.top: parent.top diff --git a/src/ui/preferences/MavlinkSettings.qml b/src/ui/preferences/MavlinkSettings.qml index ea2541f27..bab7f760d 100644 --- a/src/ui/preferences/MavlinkSettings.qml +++ b/src/ui/preferences/MavlinkSettings.qml @@ -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 -- 2.22.0