Add-ons page UI improvements based on feedback

src/GUI/qml/AddOns.qml

@@ -2,12 +2,14 @@ import QtQuick 2.4
 import FlightGear.Launcher 1.0
 import "."
 
-Flickable {
+Item {
+    Flickable {
+        id: flick
+        height: parent.height
+        width: parent.width - scrollbar.width
         flickableDirection: Flickable.VerticalFlick
         contentHeight: contents.childrenRect.height
 
-    interactive: false
-
         Component {
             id: catalogDelegate
 
@@ -114,8 +116,8 @@ Flickable {
             x: Style.margin
             spacing: Style.margin
 
-//////////////////////////////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////
-// catalogs //////////////////////////////////////////////////////
+    // catalogs //////////////////////////////////////////////////////
 
             Item {
                 id: catalogHeaderItem
@@ -181,7 +183,7 @@ Flickable {
                 }
             }
 
-//////////////////////////////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////
 
             Item {
                 // spacing item
@@ -226,7 +228,7 @@ Flickable {
                     anchors.verticalCenter: parent.verticalCenter
                     onClicked: {
                         var newPath =_addOns.addAircraftPath();
-                    if (newPath != "") {
+                        if (newPath !== "") {
                             _addOns.aircraftPaths.push(newPath)
                         }
                     }
@@ -251,6 +253,7 @@ Flickable {
                         delegate: PathListDelegate {
                             width: aircraftPathsColumn.width
                             deletePromptText: qsTr("Remove the aircraft folder: '%1' from the list? (The folder contents will not be changed)").arg(modelData);
+                            modelCount: _addOns.aircraftPaths.length
 
                             onPerformDelete: {
                                 var modifiedPaths = _addOns.aircraftPaths.slice()
@@ -277,7 +280,7 @@ Flickable {
 
             }
 
-//////////////////////////////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////
 
             Item {
                 // spacing item
@@ -350,6 +353,7 @@ Flickable {
                         delegate: PathListDelegate {
                             width: sceneryPathsColumn.width
                             deletePromptText: qsTr("Remove the scenery folder: '%1' from the list? (The folder contents will not be changed)").arg(modelData);
+                            modelCount: _addOns.sceneryPaths.length
 
                             onPerformDelete: {
                                 var modifiedPaths = _addOns.sceneryPaths.slice()
@@ -380,7 +384,7 @@ Flickable {
 
                     onClicked: {
                         var path = _addOns.installCustomScenery();
-                    if (path != "") {
+                        if (path !== "") {
                             // insert into scenery paths if not already present
                             for (var p in _addOns.sceneryPaths) {
                                 if (p === path)
@@ -410,4 +414,14 @@ Flickable {
             } // 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/DeleteButton.qml

@@ -14,7 +14,7 @@ Item {
         id: icon
         x: 0
         y: 0
-        source: "qrc:///cancel-icon"
+        source: "qrc:///cancel-icon-small"
     }
 
     MouseArea {

src/GUI/qml/DragToReorderButton.qml

@@ -1,9 +1,13 @@
 import QtQuick 2.4
+import "."
 
 Item {
+    property bool canMoveUp: true
+    property bool canMoveDown: true
 
     width: height
     height: icon.implicitHeight + 1
+    visible: canMoveDown || canMoveUp
 
     signal moveUp();
     signal moveDown();
@@ -12,12 +16,14 @@ Item {
         id: icon
         x: 0
         y: 0
-        source: "qrc:///reorder-list-icon"
+        source: "qrc:///reorder-list-icon-small"
     }
 
 
     MouseArea {
         id: moveUpArea
+        enabled: parent.canMoveUp
+        hoverEnabled: enabled
         height: parent.height / 2
         width: parent.width
         onClicked: {
@@ -27,6 +33,8 @@ Item {
 
     MouseArea {
         id: moveDownArea
+        enabled: parent.canMoveDown
+        hoverEnabled: enabled
         height: parent.height / 2
         width: parent.width
         anchors.bottom: parent.bottom
@@ -34,4 +42,12 @@ Item {
             parent.moveDown();
         }
     }
+
+    Text {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.left
+        anchors.rightMargin: Style.margin
+        visible: moveUpArea.containsMouse || moveDownArea.containsMouse
+        text: moveUpArea.containsMouse ? qsTr("Move up") : qsTr("Move down")
+    }
 }

src/GUI/qml/PathListDelegate.qml

@@ -9,6 +9,7 @@ Item {
     signal performMove(var newIndex);
 
     property alias deletePromptText: confirmDeletePath.promptText
+    property int modelCount: 0
 
     height: childrenRect.height
 
@@ -72,7 +73,10 @@ Item {
                 id: reorderButton
                 anchors.right: pathDeleteButton.left
                 anchors.rightMargin: Style.margin
-                visible: pathDelegateHover.containsMouse
+                visible: pathDelegateHover.containsMouse && (canMoveDown || canMoveUp)
+
+                canMoveUp: model.index > 0
+                canMoveDown: model.index < (delegateRoot.modelCount - 1)
 
                 onMoveUp: {
                     if (model.index === 0)

src/GUI/resources.qrc

@@ -78,6 +78,8 @@
         <file>qml/AddButton.qml</file>
         <file alias="cancel-icon">qml/icons8-cancel-50.png</file>
         <file alias="reorder-list-icon">qml/icons8-drag-reorder-filled-50.png</file>
+        <file alias="cancel-icon-small">qml/icons8-cancel-25.png</file>
+        <file alias="reorder-list-icon-small">qml/icons8-drag-reorder-filled-25.png</file>
         <file alias="add-icon">qml/icons8-plus-26.png</file>
         <file>qml/DeleteButton.qml</file>
         <file>qml/YesNoPanel.qml</file>