Use Controls2 ListView instead of ScrollView for print job list

No need for a ScrollView in Controls 2. And specialise the scroll bar.
Be sure to also align the right side of the contents with the scroll bar though.

Contributes to issue CURA-8686.

1 files changed, 27 insertions, 26 deletions

diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml
index 44d8f80bb3..87b7cab83e 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml
@@ -1,8 +1,8 @@
-// Copyright (c) 2019 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.2
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.15
 import UM 1.5 as UM
 import Cura 1.0 as Cura
 
@@ -22,7 +22,7 @@ Item
         id: queuedLabel
         anchors
         {
-            left: queuedPrintJobs.left
+            left: printJobList.left
             top: parent.top
         }
         font: UM.Theme.getFont("large")
@@ -34,7 +34,7 @@ Item
         id: manageQueueLabel
         anchors
         {
-            right: queuedPrintJobs.right
+            right: printJobList.right
             verticalCenter: queuedLabel.verticalCenter
         }
         height: 18 * screenScaleFactor // TODO: Theme!
@@ -78,7 +78,7 @@ Item
         id: printJobQueueHeadings
         anchors
         {
-            left: queuedPrintJobs.left
+            left: printJobList.left
             leftMargin: UM.Theme.getSize("narrow_margin").width
             top: queuedLabel.bottom
             topMargin: 24 * screenScaleFactor // TODO: Theme!
@@ -121,41 +121,42 @@ Item
         }
     }
 
-    ScrollView
+    ListView
     {
-        id: queuedPrintJobs
+        id: printJobList
         anchors
         {
             bottom: parent.bottom
             horizontalCenter: parent.horizontalCenter
             top: printJobQueueHeadings.bottom
-            topMargin: 12 * screenScaleFactor // TODO: Theme!
+            topMargin: UM.Theme.getSize("default_margin").width
         }
-        style: UM.Theme.styles.scrollview
         width: parent.width
 
-        ListView
+        ScrollBar.vertical: UM.ScrollBar
         {
-            id: printJobList
-            anchors.fill: parent
-            delegate: MonitorPrintJobCard
+            id: printJobScrollBar
+        }
+        spacing: UM.Theme.getSize("narrow_margin").width
+        clip: true
+
+        delegate: MonitorPrintJobCard
+        {
+            anchors
             {
-                anchors
-                {
-                    left: parent.left
-                    right: parent.right
-                }
-                printJob: modelData
+                left: parent.left
+                right: parent.right
+                rightMargin: printJobScrollBar.width
             }
-            model:
+            printJob: modelData
+        }
+        model:
+        {
+            if (OutputDevice.receivedData)
             {
-                if (OutputDevice.receivedData)
-                {
-                    return OutputDevice.queuedPrintJobs
-                }
-                return [null, null]
+                return OutputDevice.queuedPrintJobs
             }
-            spacing: 6  // TODO: Theme!
+            return [null, null]
         }
     }
 }