Launcher: use built-in QQC2 ScrollBar

The built-in has some nice features and generally updates better than
my previous verion.

src/GUI/qml/AddOns.qml

@@ -1,4 +1,6 @@
 import QtQuick 2.4
+import QtQuick.Controls 2.2
+
 import FlightGear.Launcher 1.0
 import "."
 
@@ -7,7 +9,9 @@ Item {
     Flickable {
         id: flick
         height: parent.height
-        width: parent.width - scrollbar.width
+        width: parent.width 
+        ScrollBar.vertical: ScrollBar {}
+
         flickableDirection: Flickable.VerticalFlick
         contentHeight: contents.childrenRect.height
         function showDetails(index)
@@ -296,15 +300,6 @@ Item {
                 }
             } // of install-tarbal item
         } // of column
-
-    }
-
-    Scrollbar {
-        id: scrollbar
-        anchors.right: parent.right
-        height: parent.height
-        flickable: flick
-        visible: flick.contentHeight > flick.height
     }
 }
 

src/GUI/qml/AddonsDetailsView.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.4
+import QtQuick.Controls 2.2
 import FlightGear.Launcher 1.0
 import "."
 
@@ -21,6 +22,7 @@ Rectangle {
         contentWidth: parent.width
         contentHeight: content.childrenRect.height
         boundsBehavior: Flickable.StopAtBounds
+        ScrollBar.vertical: ScrollBar {}
 
         function labelText(lbl, idx, key) {
             var value = _addOns.modules.get(idx, key);
@@ -36,7 +38,7 @@ Rectangle {
 
         Item {
             id: content
-            width: root.width - scrollbar.width
+            width: root.width
             height: childrenRect.height
 
             Column {

src/GUI/qml/AircraftDetailsView.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.4
+import QtQuick.Controls 2.2
 import FlightGear.Launcher 1.0
 import "."
 
@@ -25,10 +26,11 @@ Rectangle {
         contentWidth: parent.width
         contentHeight: content.childrenRect.height
         boundsBehavior: Flickable.StopAtBounds
+        ScrollBar.vertical: ScrollBar {}
 
         Item {
             id: content
-            width: root.width - scrollbar.width
+            width: root.width
             height: childrenRect.height
 
             Column {
@@ -233,13 +235,4 @@ Rectangle {
         } // of main item
 
     } // of Flickable
-
-    Scrollbar {
-        id: scrollbar
-        anchors.right: parent.right
-        anchors.top: parent.top
-        height: parent.height
-        flickable: flickable
-        visible: flickable.visibleArea.heightRatio < 1.0
-    }
 } // of Rect

src/GUI/qml/AircraftGridView.qml

@@ -1,4 +1,6 @@
 import QtQuick 2.0
+import QtQuick.Controls 2.2
+
 import FlightGear.Launcher 1.0 as FG
 
 Item {
@@ -41,6 +43,8 @@ Item {
         cellWidth: width / colCount
         cellHeight: 128 + Style.strutSize
         highlightMoveDuration: 0
+        
+        ScrollBar.vertical: ScrollBar {}
 
         readonly property int baseCellWidth: 172 + (Style.strutSize * 2)
         readonly property int colCount: Math.floor(width / baseCellWidth)
@@ -49,7 +53,7 @@ Item {
             left: parent.left
             top: parent.top
             bottom: parent.bottom
-            right: scrollbar.left
+            right: parent.right
             topMargin: Style.margin
         }
 
@@ -69,12 +73,4 @@ Item {
         focus: true
         highlight: highlight
     }
-
-    Scrollbar {
-        id: scrollbar
-        anchors.right: parent.right
-        anchors.top: parent.top
-        height: view.height
-        flickable: view
-    }
 }

src/GUI/qml/AircraftListView.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.0
+import QtQuick.Controls 2.2
 import FlightGear.Launcher 1.0 as FG
 import "."
 
@@ -44,12 +45,13 @@ Item {
 
     ListView {
         id: aircraftList
+        ScrollBar.vertical: ScrollBar {}
 
         anchors {
             left: parent.left
             top: parent.top
             bottom: parent.bottom
-            right: scrollbar.left
+            right: parent.right
             topMargin: Style.margin
         }
 
@@ -72,12 +74,4 @@ Item {
         // when doing a progrmatic set
         readonly property int __realHighlightMoveDuration: 200
     }
-
-    Scrollbar {
-        id: scrollbar
-        anchors.right: parent.right
-        anchors.top: parent.top
-        height: aircraftList.height
-        flickable: aircraftList
-    }
 }

src/GUI/qml/FlightPlan.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.4
+import QtQuick.Controls 2.2
 import FlightGear.Launcher 1.0
 import FlightGear 1.0
 import "."
@@ -12,9 +13,10 @@ Item {
     Flickable {
         id: flick
         height: parent.height
-        width: parent.width - scrollbar.width
+        width: parent.width
         flickableDirection: Flickable.VerticalFlick
         contentHeight: contents.childrenRect.height + Style.margin * 2
+        ScrollBar.vertical: ScrollBar {}
 
         Component.onCompleted: {
             if (_launcher.flightPlan.cruiseSpeed.value === 0.0) {
@@ -444,14 +446,6 @@ Item {
 
     } // of flickable
 
-    Scrollbar {
-        id: scrollbar
-        anchors.right: parent.right
-        height: parent.height
-        flickable: flick
-        visible: flick.contentHeight > flick.height
-    }
-
     Component {
         id: airportDetails
         PlanAirportView {

src/GUI/qml/OverlayMenu.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.4
+import QtQuick.Controls 2.2
 import FlightGear 1.0
 import "."
 
@@ -50,7 +51,7 @@ Rectangle {
         }
         if (root.haveHeader())
             minWidth = Math.max(minWidth, header.width);
-         flick.width = minWidth + scroller.width
+         flick.width = minWidth
     }
 
     function haveHeader()
@@ -61,7 +62,7 @@ Rectangle {
     Flickable {
         id: flick
         anchors.centerIn: parent
-
+        ScrollBar.vertical: ScrollBar {}
         height: Math.min(root.maximumPermittedHeight, contentHeight);
         contentHeight: itemsColumn.childrenRect.height
 
@@ -91,14 +92,4 @@ Rectangle {
             } // menu item repeater
         } // of menu contents column
     }
-
-    Scrollbar {
-        id: scroller
-        flickable: flick
-        visible: flick.contentHeight > flick.height
-        anchors.right: root.right
-        anchors.rightMargin: 1
-        anchors.verticalCenter: parent.verticalCenter
-        height: flick.height
-    }
 }

src/GUI/qml/Scrollbar.qml

@@ -1,82 +0,0 @@
-import QtQuick 2.4
-
-Item
-{
-    id: root
-
-    implicitWidth: 14
-
-    property Flickable flickable: parent
-    readonly property real heightRatio: flickable ? flickable.visibleArea.heightRatio : 0
-
-    readonly property int barSize: Math.max(height * heightRatio, width * 3);
-    readonly property bool enabled: heightRatio < 1.0
-    readonly property int scrollRange: height - barSize
-
-    function normalisedPosition()
-    {
-        if (!flickable) return 0;
-        // becuase we might use a longer bar height than is proportional to
-        // height ratio, we have to re-normalise the position
-        var visArea = flickable.visibleArea;
-        return visArea.yPosition / (1.0 - visArea.heightRatio);
-    }
-
-    function verticalExtent()
-    {
-        var f = root.flickable;
-        return (f.height / f.visibleArea.heightRatio) - f.height;
-    }
-
-    MouseArea {
-        id: trackArea
-        hoverEnabled: true
-        anchors.fill: parent
-        onClicked: {
-            var clickPos = (mouse.y / height)
-            flickable.contentY = clickPos * verticalExtent();
-        }
-        visible: root.enabled
-    }
-
-    Item {
-        id: track
-        width: parent.width
-        height: parent.height
-
-        Rectangle {
-            anchors.fill: parent
-            color: "white"
-            opacity: 0.5
-        }
-
-        Rectangle {
-            id: thumb
-            x: 2
-            width: parent.width - 4
-            height: root.barSize
-            radius: width / 2
-            color: "#4f4f4f"
-
-            Binding on y {
-                when: !thumbArea.drag.active
-                value: root.normalisedPosition() * root.scrollRange
-            }
-
-            MouseArea {
-                id: thumbArea
-                anchors.fill: parent
-                drag.axis: Drag.YAxis
-                drag.minimumY: 0
-                drag.maximumY: scrollRange
-                drag.target: thumb
-                preventStealing: true
-
-                onMouseYChanged: {
-                    var position = (thumb.y / root.scrollRange)
-                    flickable.contentY = position * verticalExtent();
-                }
-            }
-        }
-    } // of track item
-}

src/GUI/qml/Settings.qml

@@ -1,4 +1,6 @@
 import QtQuick 2.4
+import QtQuick.Controls 2.2
+
 import FlightGear.Launcher 1.0
 import "."
 
@@ -26,7 +28,9 @@ Item {
         contentHeight: sectionColumn.childrenRect.height
         flickableDirection: Flickable.VerticalFlick
         height: parent.height
-        width: parent.width - scrollbar.width
+        width: parent.width
+
+        ScrollBar.vertical: ScrollBar {}
 
         Column
         {
@@ -527,12 +531,4 @@ Item {
             }
         } // of Column
     } // of Flickable
-
-    Scrollbar {
-        id: scrollbar
-        anchors.right: parent.right
-        height: settingsFlick.height
-        flickable: settingsFlick
-        visible: settingsFlick.contentHeight > settingsFlick.height
-    }
 }

src/GUI/qml/ViewCommandLine.qml

@@ -1,4 +1,6 @@
 import QtQuick 2.4
+import QtQuick.Controls 2.2
+
 import FlightGear.Launcher 1.0
 import "."
 
@@ -26,9 +28,11 @@ Item {
 
     Flickable {
         id: flick
+        ScrollBar.vertical: ScrollBar {}
+
         anchors {
             left: parent.left
-            right: scrollbar.right
+            right: parent.right
             top: buttonRow.bottom
             bottom: parent.bottom
             margins: Style.margin
@@ -51,12 +55,4 @@ Item {
             text: _config.htmlForCommandLine();
         }
     }
-
-    Scrollbar {
-        id: scrollbar
-        anchors.right: parent.right
-        height: flick.height
-        flickable: flick
-        visible: flick.contentHeight > flick.height
-    }
 }

src/GUI/resources.qrc

@@ -34,7 +34,6 @@
         <file>qml/AircraftDownloadPanel.qml</file>
         <file>qml/Button.qml</file>
         <file>qml/AircraftWarningPanel.qml</file>
-        <file>qml/Scrollbar.qml</file>
         <file>qml/AircraftDetailsView.qml</file>
         <file>qml/AircraftFullDelegate.qml</file>
         <file>qml/AircraftCompactDelegate.qml</file>