Fix height and scrolling of add printer menus

This fixes the irritating scrolling behaviour of the local printer menu, as well as the disappearing items (former issue which had a workaround) and makes it use a styled scroll bar.

Contributes to issue CURA-8686.

resources/qml/WelcomePages/AddLocalPrinterScrollView.qml

@@ -1,4 +1,4 @@
-// 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.10
@@ -74,118 +74,93 @@ Item
     Row
     {
         id: localPrinterSelectionItem
-        anchors.left: parent.left
+        anchors.fill: parent
-        anchors.right: parent.right
-        anchors.top: parent.top
 
-        // ScrollView + ListView for selecting a local printer to add
+        //Selecting a local printer to add from this list.
-        Cura.ScrollView
+        ListView
         {
-            id: scrollView
+            id: machineList
-
-            height: childrenHeight
             width: Math.floor(parent.width * 0.48)
+            height: parent.height
 
-            ListView
+            clip: true
+            ScrollBar.vertical: UM.ScrollBar {}
+
+            model: UM.DefinitionContainersModel
             {
-                id: machineList
+                id: machineDefinitionsModel
-
+                filter: { "visible": true }
-                // CURA-6793
+                sectionProperty: "manufacturer"
-                // Enabling the buffer seems to cause the blank items issue. When buffer is enabled, if the ListView's
+                preferredSections: preferredCategories
-                // individual item has a dynamic change on its visibility, the ListView doesn't redraw itself.
-                // The default value of cacheBuffer is platform-dependent, so we explicitly disable it here.
-                cacheBuffer: 0
-                boundsBehavior: Flickable.StopAtBounds
-                flickDeceleration: 20000  // To prevent the flicking behavior.
-                model: UM.DefinitionContainersModel
-                {
-                    id: machineDefinitionsModel
-                    filter: { "visible": true }
-                    sectionProperty: "manufacturer"
-                    preferredSections: preferredCategories
-                }
-
-                section.property: "section"
-                section.delegate: sectionHeader
-                delegate: machineButton
             }
 
-            Component
+            section.property: "section"
+            section.delegate: Button
             {
-                id: sectionHeader
+                id: button
+                width: machineList.width
+                height: UM.Theme.getSize("action_button").height
+                text: section
 
-                Button
+                property bool isActive: base.currentSection == section
+
+                background: Rectangle
                 {
-                    id: button
+                    anchors.fill: parent
-                    width: ListView.view.width
+                    color: isActive ? UM.Theme.getColor("setting_control_highlight") : "transparent"
+                }
+
+                contentItem: Item
+                {
+                    width: childrenRect.width
                     height: UM.Theme.getSize("action_button").height
-                    text: section
 
-                    property bool isActive: base.currentSection == section
+                    UM.RecolorImage
-
-                    background: Rectangle
                     {
-                        anchors.fill: parent
+                        id: arrow
-                        color: isActive ? UM.Theme.getColor("setting_control_highlight") : "transparent"
+                        anchors.left: parent.left
+                        width: UM.Theme.getSize("standard_arrow").width
+                        height: UM.Theme.getSize("standard_arrow").height
+                        sourceSize.width: width
+                        sourceSize.height: height
+                        color: UM.Theme.getColor("text")
+                        source: base.currentSection == section ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleRight")
                     }
 
-                    contentItem: Item
+                    UM.Label
                     {
-                        width: childrenRect.width
+                        id: label
-                        height: UM.Theme.getSize("action_button").height
+                        anchors.left: arrow.right
-
+                        anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                        UM.RecolorImage
+                        text: button.text
-                        {
+                        font: UM.Theme.getFont("default_bold")
-                            id: arrow
-                            anchors.left: parent.left
-                            width: UM.Theme.getSize("standard_arrow").width
-                            height: UM.Theme.getSize("standard_arrow").height
-                            sourceSize.width: width
-                            sourceSize.height: height
-                            color: UM.Theme.getColor("text")
-                            source: base.currentSection == section ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleRight")
-                        }
-
-                        UM.Label
-                        {
-                            id: label
-                            anchors.left: arrow.right
-                            anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                            text: button.text
-                            font: UM.Theme.getFont("default_bold")
-                        }
                     }
+                }
 
-                    onClicked:
+                onClicked:
-                    {
+                {
-                        base.currentSection = section
+                    base.currentSection = section
-                        base.updateCurrentItemUponSectionChange()
+                    base.updateCurrentItemUponSectionChange()
-                    }
                 }
             }
 
-            Component
+            delegate: Cura.RadioButton
             {
-                id: machineButton
+                id: radioButton
-
+                anchors
-                Cura.RadioButton
                 {
-                    id: radioButton
+                    left: parent !== null ? parent.left : undefined
-                    anchors
+                    leftMargin: UM.Theme.getSize("standard_list_lineheight").width
-                    {
-                        left:  parent !== null ? parent.left: undefined
-                        leftMargin: UM.Theme.getSize("standard_list_lineheight").width
 
-                        right: parent !== null ? parent.right: undefined
+                    right: parent !== null ? parent.right : undefined
-                        rightMargin: UM.Theme.getSize("default_margin").width
+                    rightMargin: UM.Theme.getSize("default_margin").width
-                    }
-                    height: visible ? UM.Theme.getSize("standard_list_lineheight").height : 0
-
-                    checked: ListView.view.currentIndex == index
-                    text: name
-                    visible: base.currentSection.toLowerCase() === section.toLowerCase()
-                    onClicked: ListView.view.currentIndex = index
                 }
+                height: visible ? UM.Theme.getSize("standard_list_lineheight").height : 0 //This causes the scrollbar to vary in length due to QTBUG-76830.
+
+                checked: machineList.currentIndex == index
+                text: name
+                visible: base.currentSection.toLowerCase() === section.toLowerCase()
+                onClicked: machineList.currentIndex = index
             }
         }
 
@@ -194,7 +169,7 @@ Item
         {
             id: verticalLine
             anchors.top: parent.top
-            height: childrenHeight - UM.Theme.getSize("default_lining").height
+            height: parent.height - UM.Theme.getSize("default_lining").height
             width: UM.Theme.getSize("default_lining").height
             color: UM.Theme.getColor("lining")
         }

resources/qml/WelcomePages/AddNetworkOrLocalPrinterContent.qml

@@ -1,4 +1,4 @@
-// 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.10
@@ -45,11 +45,9 @@ Item
         }
 
         contentComponent: networkPrinterListComponent
-
         Component
         {
             id: networkPrinterListComponent
-
             AddNetworkPrinterScrollView
             {
                 id: networkPrinterScrollView
@@ -95,20 +93,13 @@ Item
         }
 
         contentComponent: localPrinterListComponent
-
         Component
         {
             id: localPrinterListComponent
-
             AddLocalPrinterScrollView
             {
                 id: localPrinterView
-                property int childrenHeight: backButton.y - addLocalPrinterDropDown.y - UM.Theme.getSize("expandable_component_content_header").height - UM.Theme.getSize("default_margin").height
+                height: backButton.y - addLocalPrinterDropDown.y - UM.Theme.getSize("expandable_component_content_header").height - UM.Theme.getSize("default_margin").height
-
-                onChildrenHeightChanged:
-                {
-                    addLocalPrinterDropDown.children[1].height = childrenHeight
-                }
             }
         }
     }

resources/qml/WelcomePages/DropDownWidget.qml

@@ -1,4 +1,4 @@
-// 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.10
@@ -61,7 +61,7 @@ Item
         anchors.left: header.left
         anchors.right: header.right
         // Add 2x lining, because it needs a bit of space on the top and the bottom.
-        height: contentLoader.item.height + 2 * UM.Theme.getSize("thick_lining").height
+        height: contentLoader.item ? contentLoader.item.height + 2 * UM.Theme.getSize("thick_lining").height : 0
 
         border.width: UM.Theme.getSize("default_lining").width
         border.color: UM.Theme.getColor("lining")