Use re-useable scrollbar and remove ScrollView

The machine selector has the scroll view inside of the listview. It just needs to use our new scrollbar element instead of the default.

Contributes to issue CURA-8686.

resources/qml/PrinterSelector/MachineSelector.qml

@@ -1,10 +1,10 @@
-// Copyright (c) 2018 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
 import QtQuick.Controls 2.3
 
-import UM 1.2 as UM
+import UM 1.5 as UM
 import Cura 1.1 as Cura
 
 Cura.ExpandablePopup
@@ -193,42 +193,27 @@ Cura.ExpandablePopup
     {
         id: popup
         width: UM.Theme.getSize("machine_selector_widget_content").width
+        height: Math.min(machineSelectorList.contentHeight + separator.height + buttonRow.height, UM.Theme.getSize("machine_selector_widget_content").height) //Maximum height is the theme entry.
 
-        ScrollView
+        MachineSelectorList
         {
-            id: scroll
+            id: machineSelectorList
-            width: parent.width
+            anchors
-            clip: true
-            leftPadding: UM.Theme.getSize("default_lining").width
-            rightPadding: UM.Theme.getSize("default_lining").width
-
-            MachineSelectorList
             {
-                id: machineSelectorList
+                left: parent.left
-                // Can't use parent.width since the parent is the flickable component and not the ScrollView
+                leftMargin: UM.Theme.getSize("default_lining").width
-                width: scroll.width - scroll.leftPadding - scroll.rightPadding
+                right: parent.right
-                property real maximumHeight: UM.Theme.getSize("machine_selector_widget_content").height - buttonRow.height
+                rightMargin: UM.Theme.getSize("default_lining").width
-
+                top: parent.top
-                // We use an extra property here, since we only want to to be informed about the content size changes.
+                bottom: separator.top
-                onContentHeightChanged:
-                {
-                    scroll.height = Math.min(contentHeight, maximumHeight)
-                    popup.height = scroll.height + buttonRow.height
-                }
-
-                Component.onCompleted:
-                {
-                    scroll.height = Math.min(contentHeight, maximumHeight)
-                    popup.height = scroll.height + buttonRow.height
-                }
             }
+            clip: true
         }
 
         Rectangle
         {
             id: separator
-
+            anchors.bottom: buttonRow.top
-            anchors.top: scroll.bottom
             width: parent.width
             height: UM.Theme.getSize("default_lining").height
             color: UM.Theme.getColor("lining")
@@ -238,8 +223,7 @@ Cura.ExpandablePopup
         {
             id: buttonRow
 
-            // The separator is inside the buttonRow. This is to avoid some weird behaviours with the scroll bar.
+            anchors.bottom: parent.bottom
-            anchors.top: separator.top
             anchors.horizontalCenter: parent.horizontalCenter
             padding: UM.Theme.getSize("default_margin").width
             spacing: UM.Theme.getSize("default_margin").width

resources/qml/PrinterSelector/MachineSelectorList.qml

@@ -14,10 +14,15 @@ ListView
     section.property: "hasRemoteConnection"
     property real contentHeight: childrenRect.height
 
+    ScrollBar.vertical: UM.ScrollBar
+    {
+        id: scrollBar
+    }
+
     section.delegate: UM.Label
     {
         text: section == "true" ? catalog.i18nc("@label", "Connected printers") : catalog.i18nc("@label", "Preset printers")
-        width: parent.width
+        width: parent.width - scrollBar.width
         height: UM.Theme.getSize("action_button").height
         leftPadding: UM.Theme.getSize("default_margin").width
         font: UM.Theme.getFont("medium")
@@ -27,7 +32,7 @@ ListView
     delegate: MachineSelectorButton
     {
         text: model.name ? model.name : ""
-        width: listView.width
+        width: listView.width - scrollBar.width
         outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
 
         checked: Cura.MachineManager.activeMachine ? Cura.MachineManager.activeMachine.id == model.id : false