Merge pull request #11342 from Ultimaker/CURA-8686_views_controls2

Update views and tabs to use Controls 2

cura/Machines/Models/QualitySettingsModel.py

@@ -1,4 +1,4 @@
-# Copyright (c) 2020 Ultimaker B.V.
+# Copyright (c) 2022 Ultimaker B.V.
 # Cura is released under the terms of the LGPLv3 or higher.
 
 from PyQt5.QtCore import pyqtProperty, pyqtSignal, Qt
@@ -9,6 +9,7 @@ from UM import i18nCatalog
 from UM.Logger import Logger
 from UM.Qt.ListModel import ListModel
 from UM.Settings.ContainerRegistry import ContainerRegistry
+from UM.Settings.SettingFunction import SettingFunction  # To format setting functions differently.
 
 import os
 
@@ -173,12 +174,19 @@ class QualitySettingsModel(ListModel):
             label = definition.label
             if self._i18n_catalog:
                 label = self._i18n_catalog.i18nc(definition.key + " label", label)
+            if profile_value_source == "quality_changes":
+                label = f"<i>{label}</i>"  # Make setting name italic if it's derived from the quality-changes profile.
+
+            if isinstance(profile_value, SettingFunction):
+                profile_value_display = self._i18n_catalog.i18nc("@info:status", "Calculated")
+            else:
+                profile_value_display = "" if profile_value is None else str(profile_value)
 
             items.append({
                 "key": definition.key,
                 "label": label,
                 "unit": definition.unit,
-                "profile_value": "" if profile_value is None else str(profile_value),  # it is for display only
+                "profile_value": profile_value_display,
                 "profile_value_source": profile_value_source,
                 "user_value": "" if user_value is None else str(user_value),
                 "category": current_category

plugins/CuraDrive/src/qml/components/BackupList.qml

@@ -1,25 +1,21 @@
-// 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.2
 import QtQuick.Layouts 1.3
 
-import UM 1.1 as UM
+import UM 1.5 as UM
 
-ScrollView
+ListView
 {
-    property alias model: backupList.model
-    width: parent.width
     clip: true
-    ListView
+    ScrollBar.vertical: UM.ScrollBar {}
-    {
+
-        id: backupList
-        width: parent.width
     delegate: Item
     {
         // Add a margin, otherwise the scrollbar is on top of the right most component
-            width: parent.width - UM.Theme.getSize("default_margin").width
+        width: parent.width - UM.Theme.getSize("scrollbar").width
         height: childrenRect.height
 
         BackupListItem
@@ -35,5 +31,4 @@ ScrollView
             height: UM.Theme.getSize("default_lining").height
         }
     }
-    }
 }

plugins/DigitalLibrary/resources/qml/OpenProjectFilesPage.qml

@@ -1,8 +1,9 @@
-// Copyright (C) 2021 Ultimaker B.V.
+//Copyright (C) 2022 Ultimaker B.V.
+//Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.10
+import Qt.labs.qmlmodels 1.0
+import QtQuick 2.15
 import QtQuick.Window 2.2
-import QtQuick.Controls 1.4 as OldControls // TableView doesn't exist in the QtQuick Controls 2.x in 5.10, so use the old one
 import QtQuick.Controls 2.3
 
 import UM 1.2 as UM
@@ -56,52 +57,32 @@ Item
         border.width: UM.Theme.getSize("default_lining").width
         border.color: UM.Theme.getColor("lining")
 
-
+        //We can't use Cura's TableView here, since in Cura >= 5.0 this uses QtQuick.TableView, while in Cura < 5.0 this uses QtControls1.TableView.
-        Cura.TableView
+        //So we have to define our own. Once support for 4.13 and earlier is dropped, we can switch to Cura.TableView.
+        Table
         {
             id: filesTableView
             anchors.fill: parent
-            model: manager.digitalFactoryFileModel
+            anchors.margins: parent.border.width
-            visible: model.count != 0 && manager.retrievingFileStatus != DF.RetrievalStatus.InProgress
+
-            selectionMode: OldControls.SelectionMode.SingleSelection
+            columnHeaders: ["Name", "Uploaded by", "Uploaded at"]
-            onDoubleClicked:
+            model: TableModel
+            {
+                TableModelColumn { display: "fileName" }
+                TableModelColumn { display: "username" }
+                TableModelColumn { display: "uploadedAt" }
+                rows: manager.digitalFactoryFileModel.items
+            }
+
+            onCurrentRowChanged:
+            {
+                manager.setSelectedFileIndices([currentRow]);
+            }
+            onDoubleClicked: function(row)
             {
                 manager.setSelectedFileIndices([row]);
                 openFilesButton.clicked();
             }
-
-            OldControls.TableViewColumn
-            {
-                id: fileNameColumn
-                role: "fileName"
-                title: "Name"
-                width: Math.round(filesTableView.width / 3)
-            }
-
-            OldControls.TableViewColumn
-            {
-                id: usernameColumn
-                role: "username"
-                title: "Uploaded by"
-                width: Math.round(filesTableView.width / 3)
-            }
-
-            OldControls.TableViewColumn
-            {
-                role: "uploadedAt"
-                title: "Uploaded at"
-            }
-
-            Connections
-            {
-                target: filesTableView.selection
-                function onSelectionChanged()
-                {
-                    let newSelection = [];
-                    filesTableView.selection.forEach(function(rowIndex) { newSelection.push(rowIndex); });
-                    manager.setSelectedFileIndices(newSelection);
-                }
-            }
         }
 
         Label
@@ -160,7 +141,6 @@ Item
             {
                 // Make sure no files are selected when the file model changes
                 filesTableView.currentRow = -1
-                filesTableView.selection.clear()
             }
         }
     }
@@ -186,7 +166,7 @@ Item
         anchors.bottom: parent.bottom
         anchors.right: parent.right
         text: "Open"
-        enabled: filesTableView.selection.count > 0
+        enabled: filesTableView.currentRow >= 0
         onClicked:
         {
             manager.openSelectedFiles()

plugins/DigitalLibrary/resources/qml/SaveProjectFilesPage.qml

@@ -1,8 +1,9 @@
-// Copyright (C) 2021 Ultimaker B.V.
+//Copyright (C) 2022 Ultimaker B.V.
+//Cura is released under the terms of the LGPLv3 or higher.
 
+import Qt.labs.qmlmodels 1.0
 import QtQuick 2.10
 import QtQuick.Window 2.2
-import QtQuick.Controls 1.4 as OldControls // TableView doesn't exist in the QtQuick Controls 2.x in 5.10, so use the old one
 import QtQuick.Controls 2.3
 
 import UM 1.2 as UM
@@ -85,35 +86,22 @@ Item
         border.width: UM.Theme.getSize("default_lining").width
         border.color: UM.Theme.getColor("lining")
 
-
+        //We can't use Cura's TableView here, since in Cura >= 5.0 this uses QtQuick.TableView, while in Cura < 5.0 this uses QtControls1.TableView.
-        Cura.TableView
+        //So we have to define our own. Once support for 4.13 and earlier is dropped, we can switch to Cura.TableView.
+        Table
         {
             id: filesTableView
             anchors.fill: parent
-            model: manager.digitalFactoryFileModel
+            anchors.margins: parent.border.width
-            visible: model.count != 0 && manager.retrievingFileStatus != DF.RetrievalStatus.InProgress
-            selectionMode: OldControls.SelectionMode.NoSelection
 
-            OldControls.TableViewColumn
+            allowSelection: false
+            columnHeaders: ["Name", "Uploaded by", "Uploaded at"]
+            model: TableModel
             {
-                id: fileNameColumn
+                TableModelColumn { display: "fileName" }
-                role: "fileName"
+                TableModelColumn { display: "username" }
-                title: "@tableViewColumn:title", "Name"
+                TableModelColumn { display: "uploadedAt" }
-                width: Math.round(filesTableView.width / 3)
+                rows: manager.digitalFactoryFileModel.items
-            }
-
-            OldControls.TableViewColumn
-            {
-                id: usernameColumn
-                role: "username"
-                title: "Uploaded by"
-                width: Math.round(filesTableView.width / 3)
-            }
-
-            OldControls.TableViewColumn
-            {
-                role: "uploadedAt"
-                title: "Uploaded at"
             }
         }
 
@@ -172,8 +160,7 @@ Item
             function onItemsChanged()
             {
                 // Make sure no files are selected when the file model changes
-                filesTableView.currentRow = -1
+                filesTableView.currentRow = -1;
-                filesTableView.selection.clear()
             }
         }
     }

plugins/DigitalLibrary/resources/qml/Table.qml

@@ -0,0 +1,200 @@
+//Copyright (C) 2022 Ultimaker B.V.
+//Cura is released under the terms of the LGPLv3 or higher.
+
+import Qt.labs.qmlmodels 1.0
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import UM 1.2 as UM
+
+/*
+ * A re-sizeable table of data.
+ *
+ * This table combines a list of headers with a TableView to show certain roles in a table.
+ * The columns of the table can be resized.
+ * When the table becomes too big, you can scroll through the table. When a column becomes too small, the contents of
+ * the table are elided.
+ * The table gets Cura's themeing.
+ */
+Item
+{
+    id: tableBase
+
+    required property var columnHeaders //The text to show in the headers of each column.
+    property alias model: tableView.model //A TableModel to display in this table. To use a ListModel for the rows, use "rows: listModel.items"
+    property int currentRow: -1 //The selected row index.
+    property var onDoubleClicked: function(row) {} //Something to execute when double clicked. Accepts one argument: The index of the row that was clicked on.
+    property bool allowSelection: true //Whether to allow the user to select items.
+
+    Row
+    {
+        id: headerBar
+        Repeater
+        {
+            id: headerRepeater
+            model: columnHeaders
+            Rectangle
+            {
+                width: Math.max(1, Math.round(tableBase.width / headerRepeater.count))
+                height: UM.Theme.getSize("section").height
+
+                color: UM.Theme.getColor("secondary")
+
+                Label
+                {
+                    id: contentText
+                    anchors.left: parent.left
+                    anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
+                    anchors.right: parent.right
+                    anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
+
+                    text: modelData
+                    font: UM.Theme.getFont("medium_bold")
+                    color: UM.Theme.getColor("text")
+                    elide: Text.ElideRight
+                }
+                Rectangle //Resize handle.
+                {
+                    anchors
+                    {
+                        right: parent.right
+                        top: parent.top
+                        bottom: parent.bottom
+                    }
+                    width: UM.Theme.getSize("thick_lining").width
+
+                    color: UM.Theme.getColor("thick_lining")
+
+                    MouseArea
+                    {
+                        anchors.fill: parent
+
+                        cursorShape: Qt.SizeHorCursor
+                        drag
+                        {
+                            target: parent
+                            axis: Drag.XAxis
+                        }
+                        onMouseXChanged:
+                        {
+                            if(drag.active)
+                            {
+                                let new_width = parent.parent.width + mouseX;
+                                let sum_widths = mouseX;
+                                for(let i = 0; i < headerBar.children.length; ++i)
+                                {
+                                    sum_widths += headerBar.children[i].width;
+                                }
+                                if(sum_widths > tableBase.width)
+                                {
+                                    new_width -= sum_widths - tableBase.width; //Limit the total width to not exceed the view.
+                                }
+                                let width_fraction = new_width / tableBase.width; //Scale with the same fraction along with the total width, if the table is resized.
+                                parent.parent.width = Qt.binding(function() { return tableBase.width * width_fraction });
+                            }
+                        }
+                    }
+                }
+
+                onWidthChanged:
+                {
+                    tableView.forceLayout(); //Rescale table cells underneath as well.
+                }
+            }
+        }
+    }
+
+    TableView
+    {
+        id: tableView
+        anchors
+        {
+            top: headerBar.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+
+        clip: true
+        ScrollBar.vertical: ScrollBar
+        {
+            // Vertical ScrollBar, styled similarly to the scrollBar in the settings panel
+            id: verticalScrollBar
+            visible: tableView.contentHeight > tableView.height
+
+            background: Rectangle
+            {
+                implicitWidth: UM.Theme.getSize("scrollbar").width
+                radius: Math.round(implicitWidth / 2)
+                color: UM.Theme.getColor("scrollbar_background")
+            }
+
+            contentItem: Rectangle
+            {
+                id: scrollViewHandle
+                implicitWidth: UM.Theme.getSize("scrollbar").width
+                radius: Math.round(implicitWidth / 2)
+
+                color: verticalScrollBar.pressed ? UM.Theme.getColor("scrollbar_handle_down") : verticalScrollBar.hovered ? UM.Theme.getColor("scrollbar_handle_hover") : UM.Theme.getColor("scrollbar_handle")
+                Behavior on color { ColorAnimation { duration: 50; } }
+            }
+        }
+        columnWidthProvider: function(column)
+        {
+            return headerBar.children[column].width; //Cells get the same width as their column header.
+        }
+
+        delegate: Rectangle
+        {
+            implicitHeight: Math.max(1, cellContent.height)
+
+            color: UM.Theme.getColor((tableBase.currentRow == row) ? "primary" : ((row % 2 == 0) ? "main_background" : "viewport_background"))
+
+            Label
+            {
+                id: cellContent
+                width: parent.width
+
+                text: display
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+                font: UM.Theme.getFont("default")
+                color: UM.Theme.getColor("text")
+            }
+            TextMetrics
+            {
+                id: cellTextMetrics
+                text: cellContent.text
+                font: cellContent.font
+                elide: cellContent.elide
+                elideWidth: cellContent.width
+            }
+            UM.TooltipArea
+            {
+                anchors.fill: parent
+
+                text: (cellTextMetrics.elidedText == cellContent.text) ? "" : cellContent.text //Show full text in tooltip if it was elided.
+                onClicked:
+                {
+                    if(tableBase.allowSelection)
+                    {
+                        tableBase.currentRow = row; //Select this row.
+                    }
+                }
+                onDoubleClicked:
+                {
+                    tableBase.onDoubleClicked(row);
+                }
+            }
+        }
+
+        Connections
+        {
+            target: model
+            function onRowCountChanged()
+            {
+                tableView.contentY = 0; //When the number of rows is reduced, make sure to scroll back to the start.
+            }
+        }
+    }
+}

plugins/ImageReader/ConfigUI.qml

@@ -1,8 +1,9 @@
-// Copyright (c) 2015 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.1
-import QtQuick.Controls 1.1
+import QtQuick.Controls 1.1 as OldControls
+import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.1
 import QtQuick.Window 2.1
 
@@ -27,20 +28,24 @@ UM.Dialog
         rowSpacing: 4 * screenScaleFactor
         columns: 1
 
-        UM.TooltipArea {
+        UM.TooltipArea
+        {
             Layout.fillWidth:true
             height: childrenRect.height
             text: catalog.i18nc("@info:tooltip","The maximum distance of each pixel from \"Base.\"")
-            Row {
+            Row
+            {
                 width: parent.width
 
-                Label {
+                Label
+                {
                     text: catalog.i18nc("@action:label", "Height (mm)")
                     width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
-                TextField {
+                OldControls.TextField
+                {
                     id: peak_height
                     objectName: "Peak_Height"
                     validator: RegExpValidator {regExp: /^\d{0,3}([\,|\.]\d*)?$/}
@@ -50,20 +55,24 @@ UM.Dialog
             }
         }
 
-        UM.TooltipArea {
+        UM.TooltipArea
+        {
             Layout.fillWidth:true
             height: childrenRect.height
             text: catalog.i18nc("@info:tooltip","The base height from the build plate in millimeters.")
-            Row {
+            Row
+            {
                 width: parent.width
 
-                Label {
+                Label
+                {
                     text: catalog.i18nc("@action:label", "Base (mm)")
                     width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
-                TextField {
+                OldControls.TextField
+                {
                     id: base_height
                     objectName: "Base_Height"
                     validator: RegExpValidator {regExp: /^\d{0,3}([\,|\.]\d*)?$/}
@@ -73,20 +82,24 @@ UM.Dialog
             }
         }
 
-        UM.TooltipArea {
+        UM.TooltipArea
+        {
             Layout.fillWidth:true
             height: childrenRect.height
             text: catalog.i18nc("@info:tooltip","The width in millimeters on the build plate.")
-            Row {
+            Row
+            {
                 width: parent.width
 
-                Label {
+                Label
+                {
                     text: catalog.i18nc("@action:label", "Width (mm)")
                     width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
-                TextField {
+                OldControls.TextField
+                {
                     id: width
                     objectName: "Width"
                     focus: true
@@ -97,19 +110,23 @@ UM.Dialog
             }
         }
 
-        UM.TooltipArea {
+        UM.TooltipArea
+        {
             Layout.fillWidth:true
             height: childrenRect.height
             text: catalog.i18nc("@info:tooltip","The depth in millimeters on the build plate")
-            Row {
+            Row
+            {
                 width: parent.width
 
-                Label {
+                Label
+                {
                     text: catalog.i18nc("@action:label", "Depth (mm)")
                     width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
-                TextField {
+                OldControls.TextField
+                {
                     id: depth
                     objectName: "Depth"
                     focus: true
@@ -120,20 +137,24 @@ UM.Dialog
             }
         }
 
-        UM.TooltipArea {
+        UM.TooltipArea
+        {
             Layout.fillWidth:true
             height: childrenRect.height
             text: catalog.i18nc("@info:tooltip","For lithophanes dark pixels should correspond to thicker locations in order to block more light coming through. For height maps lighter pixels signify higher terrain, so lighter pixels should correspond to thicker locations in the generated 3D model.")
-            Row {
+            Row
+            {
                 width: parent.width
 
                 //Empty label so 2 column layout works.
-                Label {
+                Label
+                {
                     text: ""
                     width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
-                ComboBox {
+                OldControls.ComboBox
+                {
                     id: lighter_is_higher
                     objectName: "Lighter_Is_Higher"
                     model: [ catalog.i18nc("@item:inlistbox","Darker is higher"), catalog.i18nc("@item:inlistbox","Lighter is higher") ]
@@ -143,19 +164,23 @@ UM.Dialog
             }
         }
 
-        UM.TooltipArea {
+        UM.TooltipArea
+        {
             Layout.fillWidth:true
             height: childrenRect.height
             text: catalog.i18nc("@info:tooltip","For lithophanes a simple logarithmic model for translucency is available. For height maps the pixel values correspond to heights linearly.")
-            Row {
+            Row
+            {
                 width: parent.width
 
-                Label {
+                Label
+                {
                     text: "Color Model"
                     width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
-                ComboBox {
+                OldControls.ComboBox
+                {
                     id: color_model
                     objectName: "ColorModel"
                     model: [ catalog.i18nc("@item:inlistbox","Linear"), catalog.i18nc("@item:inlistbox","Translucency") ]
@@ -165,20 +190,24 @@ UM.Dialog
             }
         }
 
-        UM.TooltipArea {
+        UM.TooltipArea
+        {
             Layout.fillWidth:true
             height: childrenRect.height
             text: catalog.i18nc("@info:tooltip","The percentage of light penetrating a print with a thickness of 1 millimeter. Lowering this value increases the contrast in dark regions and decreases the contrast in light regions of the image.")
             visible: color_model.currentText == catalog.i18nc("@item:inlistbox","Translucency")
-            Row {
+            Row
+            {
                 width: parent.width
 
-                Label {
+                Label
+                {
                     text: catalog.i18nc("@action:label", "1mm Transmittance (%)")
                     width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
-                TextField {
+                OldControls.TextField
+                {
                     id: transmittance
                     objectName: "Transmittance"
                     focus: true
@@ -189,28 +218,34 @@ UM.Dialog
             }
         }
 
-        UM.TooltipArea {
+        UM.TooltipArea
+        {
             Layout.fillWidth:true
             height: childrenRect.height
             text: catalog.i18nc("@info:tooltip","The amount of smoothing to apply to the image.")
-            Row {
+            Row
+            {
                 width: parent.width
 
-                Label {
+                Label
+                {
                     text: catalog.i18nc("@action:label", "Smoothing")
                     width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
-                Item {
+                Item
+                {
                     width: 180 * screenScaleFactor
                     height: 20 * screenScaleFactor
                     Layout.fillWidth: true
 
-                    Slider {
+                    Slider
+                    {
                         id: smoothing
                         objectName: "Smoothing"
-                        maximumValue: 100.0
+                        from: 0.0
+                        to: 100.0
                         stepSize: 1.0
                         width: 180
                         onValueChanged: { manager.onSmoothingChanged(value) }
@@ -221,14 +256,14 @@ UM.Dialog
     }
 
     rightButtons: [
-        Button
+        OldControls.Button
         {
             id:ok_button
             text: catalog.i18nc("@action:button","OK");
             onClicked: { manager.onOkButtonClicked() }
             enabled: true
         },
-        Button
+        OldControls.Button
         {
             id:cancel_button
             text: catalog.i18nc("@action:button","Cancel");

plugins/MachineSettingsAction/MachineSettingsAction.qml

@@ -1,5 +1,5 @@
-// Copyright (c) 2019 Ultimaker B.V.
+//Copyright (c) 2022 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
+//Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
 import QtQuick.Controls 2.3
@@ -111,6 +111,7 @@ Cura.MachineAction
             model: tabNameModel
             delegate: UM.TabRowButton
             {
+                checked: model.index == 0
                 text: model.name
             }
         }

plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml

@@ -1,9 +1,10 @@
-// Copyright (c) 2021 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
-// Uranium is released under the terms of the LGPLv3 or higher.
+// Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.2
-import QtQuick.Controls 1.2
+import QtQuick.Controls 1.2 as OldControls
 import QtQuick.Controls.Styles 1.2
+import QtQuick.Controls 2.15
 
 import UM 1.5 as UM
 import Cura 1.0 as Cura
@@ -76,7 +77,7 @@ Item
             id: meshTypeButtons
             spacing: UM.Theme.getSize("default_margin").width
 
-            Button
+            OldControls.Button
             {
                 id: normalButton
                 text: catalog.i18nc("@label", "Normal model")
@@ -88,7 +89,7 @@ Item
                 z: 4
             }
 
-            Button
+            OldControls.Button
             {
                 id: supportMeshButton
                 text: catalog.i18nc("@label", "Print as support")
@@ -100,7 +101,7 @@ Item
                 z: 3
             }
 
-            Button
+            OldControls.Button
             {
                 id: overlapMeshButton
                 text: catalog.i18nc("@label", "Modify settings for overlaps")
@@ -112,7 +113,7 @@ Item
                 z: 2
             }
 
-            Button
+            OldControls.Button
             {
                 id: antiOverhangMeshButton
                 text:  catalog.i18nc("@label", "Don't support overlaps")
@@ -179,15 +180,14 @@ Item
             height: Math.min(contents.count * (UM.Theme.getSize("section").height + UM.Theme.getSize("default_lining").height), maximumHeight)
             visible: currentMeshType != "anti_overhang_mesh"
 
-            ScrollView
-            {
-                height: parent.height
-                width: UM.Theme.getSize("setting").width + UM.Theme.getSize("default_margin").width
-                style: UM.Theme.styles.scrollview
-
             ListView
             {
                 id: contents
+                height: parent.height
+                width: UM.Theme.getSize("setting").width + UM.Theme.getSize("default_margin").width
+
+                ScrollBar.vertical: UM.ScrollBar {}
+                clip: true
                 spacing: UM.Theme.getSize("default_lining").height
 
                 model: UM.SettingDefinitionsModel
@@ -285,7 +285,7 @@ Item
                         }
                     }
 
-                        Button
+                    OldControls.Button
                     {
                         width: Math.round(UM.Theme.getSize("setting").height / 2)
                         height: UM.Theme.getSize("setting").height
@@ -368,7 +368,6 @@ Item
                 }
             }
         }
-        }
 
         Cura.SecondaryButton
         {

plugins/PerObjectSettingsTool/SettingPickDialog.qml

@@ -1,7 +1,10 @@
-import QtQuick 2.2
+// Copyright (c) 2022 Ultimaker B.V.
-import QtQuick.Controls 1.2
+// Cura is released under the terms of the LGPLv3 or higher.
 
-import UM 1.2 as UM
+import QtQuick 2.2
+import QtQuick.Controls 2.2
+
+import UM 1.5 as UM
 import Cura 1.0 as Cura
 import ".."
 
@@ -67,10 +70,9 @@ UM.Dialog
         text: catalog.i18nc("@label:checkbox", "Show all")
     }
 
-    ScrollView
+    ListView
     {
-        id: scrollView
+        id: listview
-
         anchors
         {
             top: filterInput.bottom
@@ -78,9 +80,10 @@ UM.Dialog
             right: parent.right
             bottom: parent.bottom
         }
-        ListView
+
-        {
+        ScrollBar.vertical: UM.ScrollBar {}
-            id: listview
+        clip: true
+
         model: UM.SettingDefinitionsModel
         {
             id: definitionsModel
@@ -119,7 +122,6 @@ UM.Dialog
         }
         Component.onCompleted: settingPickDialog.updateFilter()
     }
-    }
 
     rightButtons: [
         Button

plugins/PostProcessingPlugin/PostProcessingPlugin.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2015 Jaime van Kessel, Ultimaker B.V.
+// Copyright (c) 2022 Jaime van Kessel, Ultimaker B.V.
 // The PostProcessingPlugin is released under the terms of the AGPLv3 or higher.
 
 import QtQuick 2.2
@@ -8,7 +8,7 @@ import QtQuick.Layouts 1.1
 import QtQuick.Dialogs 1.1
 import QtQuick.Window 2.2
 
-import UM 1.2 as UM
+import UM 1.5 as UM
 import Cura 1.0 as Cura
 
 UM.Dialog
@@ -34,7 +34,7 @@ UM.Dialog
         UM.I18nCatalog{id: catalog; name: "cura"}
         id: base
         property int columnWidth: Math.round((base.width / 2) - UM.Theme.getSize("default_margin").width)
-        property int textMargin: Math.round(UM.Theme.getSize("default_margin").width / 2)
+        property int textMargin: UM.Theme.getSize("narrow_margin").width
         property string activeScriptName
         SystemPalette{ id: palette }
         SystemPalette{ id: disabledPalette; colorGroup: SystemPalette.Disabled }
@@ -44,19 +44,18 @@ UM.Dialog
         {
             id: selectedScriptGroup
         }
-        Item
+        Column
         {
             id: activeScripts
-            anchors.left: parent.left
             width: base.columnWidth
             height: parent.height
 
+            spacing: base.textMargin
+
             Label
             {
                 id: activeScriptsHeader
                 text: catalog.i18nc("@label", "Post Processing Scripts")
-                anchors.top: parent.top
-                anchors.topMargin: base.textMargin
                 anchors.left: parent.left
                 anchors.leftMargin: base.textMargin
                 anchors.right: parent.right
@@ -67,22 +66,24 @@ UM.Dialog
             ListView
             {
                 id: activeScriptsList
-
                 anchors
                 {
-                    top: activeScriptsHeader.bottom
                     left: parent.left
+                    leftMargin: UM.Theme.getSize("default_margin").width
                     right: parent.right
                     rightMargin: base.textMargin
-                    topMargin: base.textMargin
-                    leftMargin: UM.Theme.getSize("default_margin").width
                 }
+                height: Math.min(contentHeight, parent.height - parent.spacing * 2 - activeScriptsHeader.height - addButton.height) //At the window height, start scrolling this one.
 
-                height: childrenRect.height
+                clip: true
+                ScrollBar.vertical: UM.ScrollBar
+                {
+                    id: activeScriptsScrollBar
+                }
                 model: manager.scriptList
                 delegate: Item
                 {
-                    width: parent.width
+                    width: parent.width - activeScriptsScrollBar.width
                     height: activeScriptButton.height
                     Button
                     {
@@ -132,8 +133,7 @@ UM.Dialog
                         text: "x"
                         width: 20 * screenScaleFactor
                         height: 20 * screenScaleFactor
-                        anchors.right:parent.right
+                        anchors.right: parent.right
-                        anchors.rightMargin: base.textMargin
                         anchors.verticalCenter: parent.verticalCenter
                         onClicked: manager.removeScriptByIndex(index)
                         contentItem: Item
@@ -221,8 +221,6 @@ UM.Dialog
                 text: catalog.i18nc("@action", "Add a script")
                 anchors.left: parent.left
                 anchors.leftMargin: base.textMargin
-                anchors.top: activeScriptsList.bottom
-                anchors.topMargin: base.textMargin
                 onClicked: scriptsMenu.open()
             }
             Menu
@@ -275,9 +273,9 @@ UM.Dialog
                 color: UM.Theme.getColor("text")
             }
 
-            ScrollView
+            ListView
             {
-                id: scrollView
+                id: listview
                 anchors
                 {
                     top: scriptSpecsHeader.bottom
@@ -288,12 +286,11 @@ UM.Dialog
                     bottom: parent.bottom
                 }
 
+                ScrollBar.vertical: UM.ScrollBar {}
+                clip: true
                 visible: manager.selectedScriptDefinitionId != ""
-
-                ListView
-                {
-                    id: listview
                 spacing: UM.Theme.getSize("default_lining").height
+
                 model: UM.SettingDefinitionsModel
                 {
                     id: definitionsModel
@@ -305,7 +302,7 @@ UM.Dialog
                 {
                     id: settingLoader
 
-                        width: parent.width
+                    width: listview.width
                     height:
                     {
                         if(provider.properties.enabled == "True")
@@ -408,7 +405,6 @@ UM.Dialog
                 }
             }
         }
-        }
 
         Cura.PrintSetupTooltip
         {

plugins/UM3NetworkPrinting/resources/qml/DiscoverUM3Action.qml

@@ -1,7 +1,7 @@
-// Copyright (c) 2019 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import UM 1.2 as UM
+import UM 1.5 as UM
 import Cura 1.5 as Cura
 
 import QtQuick 2.2
@@ -109,18 +109,17 @@ Cura.MachineAction
                 width: Math.round(parent.width * 0.5)
                 spacing: UM.Theme.getSize("default_margin").height
 
-                ScrollView
-                {
-                    id: objectListContainer
-
-                    width: parent.width
-                    height: base.height - contentRow.y - discoveryTip.height
-                    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                 ListView
                 {
                     id: listview
-                        model: manager.foundDevices
+
                     width: parent.width
+                    height: base.height - contentRow.y - discoveryTip.height
+
+                    ScrollBar.vertical: UM.ScrollBar {}
+                    clip: true
+
+                    model: manager.foundDevices
                     currentIndex: -1
                     onCurrentIndexChanged:
                     {
@@ -160,7 +159,6 @@ Cura.MachineAction
                         }
                     }
                 }
-                }
                 Label
                 {
                     id: discoveryTip

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,29 +121,32 @@ 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
+            id: printJobScrollBar
-            anchors.fill: parent
+        }
+        spacing: UM.Theme.getSize("narrow_margin").width
+        clip: true
+
         delegate: MonitorPrintJobCard
         {
             anchors
             {
                 left: parent.left
                 right: parent.right
+                rightMargin: printJobScrollBar.width
             }
             printJob: modelData
         }
@@ -155,7 +158,5 @@ Item
             }
             return [null, null]
         }
-            spacing: 6  // TODO: Theme!
-        }
     }
 }

resources/qml/Dialogs/AboutDialog.qml

@@ -5,7 +5,7 @@ import QtQuick 2.2
 import QtQuick.Controls 2.9
 import QtQuick.Window 2.1
 
-import UM 1.1 as UM
+import UM 1.5 as UM
 
 UM.Dialog
 {
@@ -89,23 +89,22 @@ UM.Dialog
         anchors.topMargin: UM.Theme.getSize("default_margin").height
     }
 
-    ScrollView
-    {
-        id: credits
-        anchors.top: creditsNotes.bottom
-        anchors.topMargin: UM.Theme.getSize("default_margin").height
-
-        width: parent.width
-        height: base.height - y - (2 * UM.Theme.getSize("default_margin").height + closeButton.height)
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
     ListView
     {
         id: projectsList
-
+        anchors.top: creditsNotes.bottom
+        anchors.topMargin: UM.Theme.getSize("default_margin").height
         width: parent.width
+        height: base.height - y - (2 * UM.Theme.getSize("default_margin").height + closeButton.height)
+
+        ScrollBar.vertical: UM.ScrollBar
+        {
+            id: projectsListScrollBar
+        }
 
         delegate: Row
         {
+            spacing: UM.Theme.getSize("narrow_margin").width
             Label
             {
                 text: "<a href='%1' title='%2'>%2</a>".arg(model.url).arg(model.name)
@@ -117,7 +116,7 @@ UM.Dialog
             {
                 text: model.description
                 elide: Text.ElideRight
-                    width: (projectsList.width * 0.6) | 0
+                width: ((projectsList.width * 0.6) | 0) - parent.spacing * 2 - projectsListScrollBar.width
             }
             Label
             {
@@ -165,7 +164,6 @@ UM.Dialog
             projectsModel.append({ name: "AppImageKit", description: catalog.i18nc("@label", "Linux cross-distribution application deployment"), license: "MIT", url: "https://github.com/AppImage/AppImageKit" });
         }
     }
-    }
 
     rightButtons: Button
     {

resources/qml/Dialogs/DiscardOrKeepProfileChangesDialog.qml

@@ -1,14 +1,15 @@
-// Copyright (c) 2020 Ultimaker B.V.
+//Copyright (c) 2022 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
+//Cura is released under the terms of the LGPLv3 or higher.
 
+import Qt.labs.qmlmodels 1.0
 import QtQuick 2.1
-import QtQuick.Controls 1.1
+import QtQuick.Controls 1.1 as OldControls
-import QtQuick.Controls 2.15 as NewControls
+import QtQuick.Controls 2.15
 import QtQuick.Dialogs 1.2
 import QtQuick.Window 2.1
 
 import UM 1.2 as UM
-import Cura 1.0 as Cura
+import Cura 1.6 as Cura
 
 UM.Dialog
 {
@@ -17,6 +18,8 @@ UM.Dialog
 
     minimumWidth: UM.Theme.getSize("popup_dialog").width
     minimumHeight: UM.Theme.getSize("popup_dialog").height
+    width: minimumWidth
+    height: minimumHeight
     property var changesModel: Cura.UserChangesModel{ id: userChangesModel}
     onVisibilityChanged:
     {
@@ -68,72 +71,31 @@ UM.Dialog
         anchors.bottom: optionRow.top
         anchors.left: parent.left
         anchors.right: parent.right
-        TableView
+
+        Cura.TableView
         {
-            anchors.fill: parent
-            height: base.height - 150
             id: tableView
-            Component
+            anchors
             {
-                id: labelDelegate
+                top: parent.top
-                Label
+                left: parent.left
-                {
+                right: parent.right
-                    property var extruder_name: userChangesModel.getItem(styleData.row).extruder
-                    anchors.left: parent.left
-                    anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                    anchors.right: parent.right
-                    elide: Text.ElideRight
-                    font: UM.Theme.getFont("system")
-                    text:
-                    {
-                        var result = styleData.value
-                        if (extruder_name != "")
-                        {
-                            result += " (" + extruder_name + ")"
-                        }
-                        return result
-                    }
-                }
             }
+            height: base.height - 150
 
-            Component
+            columnHeaders: [
+                catalog.i18nc("@title:column", "Profile settings"),
+                Cura.MachineManager.activeQualityDisplayNameMap["main"],
+                catalog.i18nc("@title:column", "Current changes")
+            ]
+            model: TableModel
             {
-                id: defaultDelegate
+                TableModelColumn { display: "label" }
-                Label
+                TableModelColumn { display: "original_value" }
-                {
+                TableModelColumn { display: "user_value" }
-                    text: styleData.value
+                rows: userChangesModel.items
-                    font: UM.Theme.getFont("system")
             }
-            }
+            sectionRole: "category"
-
-            TableViewColumn
-            {
-                role: "label"
-                title: catalog.i18nc("@title:column", "Profile settings")
-                delegate: labelDelegate
-                width: (tableView.width * 0.4) | 0
-            }
-            TableViewColumn
-            {
-                role: "original_value"
-                title: Cura.MachineManager.activeQualityDisplayNameMap["main"]
-                width: (tableView.width * 0.3) | 0
-                delegate: defaultDelegate
-            }
-            TableViewColumn
-            {
-                role: "user_value"
-                title: catalog.i18nc("@title:column", "Current changes")
-                width: (tableView.width * 0.3) | 0
-            }
-            section.property: "category"
-            section.delegate: Label
-            {
-                text: section
-                font.bold: true
-            }
-
-            model: userChangesModel
         }
     }
 
@@ -146,7 +108,7 @@ UM.Dialog
         anchors.margins: UM.Theme.getSize("default_margin").width
         height: childrenRect.height
 
-        NewControls.ComboBox
+        ComboBox
         {
             id: discardOrKeepProfileChangesDropDownButton
             width: 300
@@ -193,7 +155,7 @@ UM.Dialog
         anchors.margins: UM.Theme.getSize("default_margin").width
         height: childrenRect.height
 
-        Button
+        OldControls.Button
         {
             id: discardButton
             text: catalog.i18nc("@action:button", "Discard changes");
@@ -206,7 +168,7 @@ UM.Dialog
             isDefault: true
         }
 
-        Button
+        OldControls.Button
         {
             id: keepButton
             text: catalog.i18nc("@action:button", "Keep changes");

resources/qml/Dialogs/WorkspaceSummaryDialog.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
@@ -6,7 +6,7 @@ import QtQuick.Controls 2.9
 import QtQuick.Layouts 1.3
 import QtQuick.Window 2.2
 
-import UM 1.2 as UM
+import UM 1.5 as UM
 import Cura 1.0 as Cura
 
 UM.Dialog
@@ -81,6 +81,19 @@ UM.Dialog
                 bottom: controls.top
                 bottomMargin: UM.Theme.getSize("default_margin").height
             }
+
+            ScrollBar.vertical: UM.ScrollBar
+            {
+                parent: scroll
+                anchors
+                {
+                    top: parent.top
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+            }
+            clip: true
+
             ColumnLayout
             {
                 spacing: UM.Theme.getSize("default_margin").height

resources/qml/MachineSettings/GcodeTextArea.qml

@@ -1,11 +1,11 @@
-// Copyright (c) 2020 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 
-import UM 1.3 as UM
+import UM 1.5 as UM
 import Cura 1.1 as Cura
 
 
@@ -45,7 +45,7 @@ UM.TooltipArea
         renderType: Text.NativeRendering
     }
 
-    ScrollView
+    Flickable
     {
         anchors.top: titleLabel.bottom
         anchors.topMargin: UM.Theme.getSize("default_margin").height
@@ -53,26 +53,9 @@ UM.TooltipArea
         anchors.left: parent.left
         anchors.right: parent.right
 
-        background: Rectangle
+        ScrollBar.vertical: UM.ScrollBar {}
-        {
-            color: UM.Theme.getColor("main_background")
-            anchors.fill: parent
 
-            border.color:
+        TextArea.flickable: TextArea
-            {
-                if (!gcodeTextArea.enabled)
-                {
-                    return UM.Theme.getColor("setting_control_disabled_border")
-                }
-                if (gcodeTextArea.hovered || gcodeTextArea.activeFocus)
-                {
-                    return UM.Theme.getColor("setting_control_border_highlight")
-                }
-                return UM.Theme.getColor("setting_control_border")
-            }
-        }
-
-        TextArea
         {
             id: gcodeTextArea
 
@@ -92,6 +75,27 @@ UM.TooltipArea
                     propertyProvider.setPropertyValue("value", text)
                 }
             }
+
+            background: Rectangle
+            {
+                color: UM.Theme.getColor("main_background")
+                anchors.fill: parent
+                anchors.margins: -border.width //Wrap the border around the parent.
+
+                border.color:
+                {
+                    if (!gcodeTextArea.enabled)
+                    {
+                        return UM.Theme.getColor("setting_control_disabled_border")
+                    }
+                    if (gcodeTextArea.hovered || gcodeTextArea.activeFocus)
+                    {
+                        return UM.Theme.getColor("setting_control_border_highlight")
+                    }
+                    return UM.Theme.getColor("setting_control_border")
+                }
+                border.width: UM.Theme.getSize("default_lining").width
+            }
         }
     }
 }

resources/qml/Menus/ConfigurationMenu/ConfigurationListView.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.4 as UM
+import UM 1.5 as UM
 import Cura 1.0 as Cura
 
 Item
@@ -67,18 +67,14 @@ Item
         contentHeight: configurationList.height
         clip: true
 
-        ScrollBar.vertical.policy: (configurationList.height > maximumHeight) ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff //The AsNeeded policy also hides it when the cursor is away, and we don't want that.
+        ScrollBar.vertical: UM.ScrollBar {
-        ScrollBar.vertical.background: Rectangle
+            parent: container
+            anchors
             {
-            implicitWidth: UM.Theme.getSize("scrollbar").width
+                top: parent.top
-            radius: width / 2
+                right: parent.right
-            color: UM.Theme.getColor("scrollbar_background")
+                bottom: parent.bottom
             }
-        ScrollBar.vertical.contentItem: Rectangle
-        {
-            implicitWidth: UM.Theme.getSize("scrollbar").width
-            radius: width / 2
-            color: UM.Theme.getColor(parent.pressed ? "scrollbar_handle_down" : parent.hovered ? "scrollbar_handle_hover" : "scrollbar_handle")
         }
 
         ButtonGroup

resources/qml/Menus/ConfigurationMenu/CustomConfiguration.qml

@@ -1,5 +1,5 @@
-// Copyright (c) 2019 Ultimaker B.V.
+//Copyright (c) 2022 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
+//Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.6
 import QtQuick.Controls 2.0
@@ -92,6 +92,7 @@ Item
             model: extrudersModel
             delegate: UM.TabRowButton
             {
+                checked: model.index == 0
                 contentItem: Item
                 {
                     Cura.ExtruderIcon

resources/qml/ObjectSelector.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
@@ -76,7 +76,7 @@ Item
         id: contents
         width: parent.width
         visible: objectSelector.opened
-        height: visible ? listView.height : 0
+        height: visible ? listView.height + border.width * 2 : 0
         color: UM.Theme.getColor("main_background")
         border.width: UM.Theme.getSize("default_lining").width
         border.color: UM.Theme.getColor("lining")
@@ -99,23 +99,22 @@ Item
         ListView
         {
             id: listView
-            clip: true
             anchors
             {
                 left: parent.left
                 right: parent.right
+                top: parent.top
                 margins: UM.Theme.getSize("default_lining").width
             }
-
-            ScrollBar.vertical: ScrollBar
-            {
-                hoverEnabled: true
-            }
-
             property real maximumHeight: UM.Theme.getSize("objects_menu_size").height
-
             height: Math.min(contentHeight, maximumHeight)
 
+            ScrollBar.vertical: UM.ScrollBar
+            {
+                id: scrollBar
+            }
+            clip: true
+
             model: Cura.ObjectsModel {}
 
             delegate: ObjectItemButton
@@ -128,7 +127,7 @@ Item
                     value: model.selected
                 }
                 text: model.name
-                width: listView.width
+                width: listView.width - scrollBar.width
                 property bool outsideBuildArea: model.outside_build_area
                 property int perObjectSettingsCount: model.per_object_settings_count
                 property string meshType: model.mesh_type

resources/qml/Preferences/GeneralPage.qml

@@ -2,12 +2,11 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
-import QtQuick.Controls 1.1
+import QtQuick.Controls 1.1 as OldControls
+import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.1
 
-import QtQuick.Controls 2.3 as NewControls
+import UM 1.5 as UM
-
-import UM 1.1 as UM
 import Cura 1.1 as Cura
 
 UM.PreferencesPage
@@ -133,10 +132,22 @@ UM.PreferencesPage
         width: parent.width
         height: parent.height
 
+        ScrollBar.vertical: UM.ScrollBar
+        {
+            id: preferencesScrollBar
+            parent: preferencesScrollView
+            anchors
+            {
+                top: parent.top
+                bottom: parent.bottom
+                right: parent.right
+            }
+        }
+
         Column
         {
             UM.I18nCatalog{id: catalog; name: "cura"}
-            width: preferencesScrollView.viewport.width
+            width: preferencesScrollView.width - preferencesScrollBar.width
 
             Label
             {
@@ -192,7 +203,7 @@ UM.PreferencesPage
                     }
                 }
 
-                NewControls.ComboBox
+                ComboBox
                 {
                     id: languageComboBox
 
@@ -255,7 +266,7 @@ UM.PreferencesPage
                     }
                 }
 
-                NewControls.ComboBox
+                ComboBox
                 {
                     id: themeComboBox
 
@@ -531,7 +542,7 @@ UM.PreferencesPage
                         }
                     }
 
-                    NewControls.ComboBox
+                    ComboBox
                     {
                         id: cameraComboBox
 
@@ -688,7 +699,7 @@ UM.PreferencesPage
                         text: catalog.i18nc("@window:text", "Default behavior when opening a project file: ")
                     }
 
-                    NewControls.ComboBox
+                    ComboBox
                     {
                         id: choiceOnOpenProjectDropDownButton
                         width: Math.round(250 * screenScaleFactor)
@@ -755,7 +766,7 @@ UM.PreferencesPage
                         text: catalog.i18nc("@window:text", "Default behavior for changed setting values when switching to a different profile: ")
                     }
 
-                    NewControls.ComboBox
+                    ComboBox
                     {
                         id: choiceOnProfileOverrideDropDownButton
                         width: Math.round(250 * screenScaleFactor)
@@ -858,7 +869,7 @@ UM.PreferencesPage
                 }
             }
 
-            ExclusiveGroup { id: curaUpdatesGroup }
+            OldControls.ExclusiveGroup { id: curaUpdatesGroup }
             UM.TooltipArea
             {
                 width: childrenRect.width
@@ -866,7 +877,7 @@ UM.PreferencesPage
                 text: catalog.i18nc("@info:tooltip", "When checking for updates, only check for stable releases.")
                 anchors.left: parent.left
                 anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                RadioButton
+                OldControls.RadioButton
                 {
                     text: catalog.i18nc("@option:radio", "Stable releases only")
                     exclusiveGroup: curaUpdatesGroup
@@ -882,7 +893,7 @@ UM.PreferencesPage
                 text: catalog.i18nc("@info:tooltip", "When checking for updates, check for both stable and for beta releases.")
                 anchors.left: parent.left
                 anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                RadioButton
+                OldControls.RadioButton
                 {
                     text: catalog.i18nc("@option:radio", "Stable and Beta releases")
                     exclusiveGroup: curaUpdatesGroup

resources/qml/Preferences/Materials/MaterialsPage.qml

@@ -1,12 +1,13 @@
-// Copyright (c) 2021 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 1.4
+import QtQuick.Controls 2.15
+import QtQuick.Controls 1.4 as OldControls
 import QtQuick.Layouts 1.3
 import QtQuick.Dialogs 1.2
 
-import UM 1.2 as UM
+import UM 1.5 as UM
 import Cura 1.5 as Cura
 
 Item
@@ -102,7 +103,7 @@ Item
         height: childrenRect.height
 
         // Activate button
-        Button
+        OldControls.Button
         {
             id: activateMenuButton
             text: catalog.i18nc("@action:button", "Activate")
@@ -120,7 +121,7 @@ Item
         }
 
         // Create button
-        Button
+        OldControls.Button
         {
             id: createMenuButton
             text: catalog.i18nc("@action:button", "Create")
@@ -135,7 +136,7 @@ Item
         }
 
         // Duplicate button
-        Button
+        OldControls.Button
         {
             id: duplicateMenuButton
             text: catalog.i18nc("@action:button", "Duplicate");
@@ -150,7 +151,7 @@ Item
         }
 
         // Remove button
-        Button
+        OldControls.Button
         {
             id: removeMenuButton
             text: catalog.i18nc("@action:button", "Remove")
@@ -165,7 +166,7 @@ Item
         }
 
         // Import button
-        Button
+        OldControls.Button
         {
             id: importMenuButton
             text: catalog.i18nc("@action:button", "Import")
@@ -179,7 +180,7 @@ Item
         }
 
         // Export button
-        Button
+        OldControls.Button
         {
             id: exportMenuButton
             text: catalog.i18nc("@action:button", "Export")
@@ -193,7 +194,7 @@ Item
         }
 
         //Sync button.
-        Button
+        OldControls.Button
         {
             id: syncMaterialsButton
             text: catalog.i18nc("@action:button Sending materials to printers", "Sync with Printers")
@@ -207,7 +208,8 @@ Item
         }
     }
 
-    Item {
+    Item
+    {
         id: contentsItem
         anchors
         {
@@ -271,22 +273,26 @@ Item
                 bottom: parent.bottom
                 left: parent.left
             }
-
-            Rectangle
-            {
-                parent: viewport
-                anchors.fill: parent
-                color: palette.light
-            }
-
             width: (parent.width * 0.4) | 0
-            frameVisible: true
+
-            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+            clip: true
+            ScrollBar.vertical: UM.ScrollBar
+            {
+                id: materialScrollBar
+                parent: materialScrollView
+                anchors
+                {
+                    top: parent.top
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+            }
+            contentHeight: materialListView.height //For some reason, this is not determined automatically with this ScrollView. Very weird!
 
             MaterialsList
             {
                 id: materialListView
-                width: materialScrollView.viewport.width
+                width: materialScrollView.width - materialScrollBar.width
             }
         }
 

resources/qml/Preferences/Materials/MaterialsSyncDialog.qml

@@ -1,4 +1,4 @@
-//Copyright (c) 2021 Ultimaker B.V.
+//Copyright (c) 2022 Ultimaker B.V.
 //Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.15
@@ -253,19 +253,18 @@ Window
                         onClicked: Qt.openUrlExternally("https://support.ultimaker.com/hc/en-us/articles/360012019239?utm_source=cura&utm_medium=software&utm_campaign=sync-material-wizard-troubleshoot-cloud-printer")
                     }
                 }
-                ScrollView
-                {
-                    id: printerListScrollView
-                    width: parent.width
-                    Layout.preferredWidth: width
-                    Layout.fillHeight: true
-                    clip: true
-                    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-
                 ListView
                 {
                     id: printerList
                     width: parent.width
+                    Layout.preferredWidth: width
+                    Layout.fillHeight: true
+
+                    clip: true
+                    ScrollBar.vertical: UM.ScrollBar
+                    {
+                        id: printerListScrollBar
+                    }
                     spacing: UM.Theme.getSize("default_margin").height
 
                     model: cloudPrinterList
@@ -275,7 +274,7 @@ Window
                         color: "transparent"
                         border.color: UM.Theme.getColor("lining")
                         border.width: UM.Theme.getSize("default_lining").width
-                            width: printerListScrollView.width
+                        width: printerList.width - printerListScrollBar.width
                         height: UM.Theme.getSize("card").height
 
                         property string syncStatus:
@@ -373,7 +372,7 @@ Window
 
                     footer: Item
                     {
-                            width: printerListScrollView.width
+                        width: printerList.width - printerListScrollBar
                         height: {
                             if(!visible)
                             {
@@ -455,7 +454,6 @@ Window
                         }
                     }
                 }
-                }
                 Item
                 {
                     width: parent.width

resources/qml/Preferences/Materials/MaterialsView.qml

@@ -1,16 +1,17 @@
-// Copyright (c) 2017 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 1.4
+import QtQuick.Controls 2.15
+import QtQuick.Controls 1.4 as OldControls
 import QtQuick.Dialogs 1.2
 
-import UM 1.2 as UM
+import UM 1.5 as UM
 import Cura 1.0 as Cura
 
 import ".." // Access to ReadOnlyTextArea.qml
 
-TabView
+Item
 {
     id: base
 
@@ -67,21 +68,47 @@ TabView
         }
     }
 
-    Tab
+    UM.TabRow
     {
-        title: catalog.i18nc("@title", "Information")
+        id: pageSelectorTabRow
-
+        UM.TabRowButton
-        anchors.margins: UM.Theme.getSize("default_margin").width
+        {
+            text: catalog.i18nc("@title", "Information")
+            property string activeView: "information" //To determine which page gets displayed.
+        }
+        UM.TabRowButton
+        {
+            text: catalog.i18nc("@label", "Print settings")
+            property string activeView: "settings"
+        }
+    }
 
     ScrollView
     {
-            id: scrollView
+        id: informationPage
-            anchors.fill: parent
+        anchors
-            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+        {
-            flickableItem.flickableDirection: Flickable.VerticalFlick
+            top: pageSelectorTabRow.bottom
-            frameVisible: true
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
 
-            property real columnWidth: (viewport.width * 0.5 - UM.Theme.getSize("default_margin").width) | 0
+        ScrollBar.vertical: UM.ScrollBar
+        {
+            parent: informationPage
+            anchors
+            {
+                top: parent.top
+                right: parent.right
+                bottom: parent.bottom
+            }
+        }
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        clip: true
+        visible: pageSelectorTabRow.currentItem.activeView === "information"
+
+        property real columnWidth: (width * 0.5 - UM.Theme.getSize("default_margin").width) | 0
 
         Flow
         {
@@ -125,40 +152,40 @@ TabView
                 onRejected: no()
             }
 
-                Label { width: scrollView.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Display Name") }
+            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Display Name") }
             ReadOnlyTextField
             {
                 id: displayNameTextField;
-                    width: scrollView.columnWidth;
+                width: informationPage.columnWidth;
                 text: properties.name;
                 readOnly: !base.editingEnabled;
                 onEditingFinished: base.updateMaterialDisplayName(properties.name, text)
             }
 
-                Label { width: scrollView.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Brand") }
+            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Brand") }
             ReadOnlyTextField
             {
                 id: brandTextField;
-                    width: scrollView.columnWidth;
+                width: informationPage.columnWidth;
                 text: properties.brand;
                 readOnly: !base.editingEnabled;
                 onEditingFinished: base.updateMaterialBrand(properties.brand, text)
             }
 
-                Label { width: scrollView.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Material Type") }
+            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Material Type") }
             ReadOnlyTextField
             {
                 id: materialTypeField;
-                    width: scrollView.columnWidth;
+                width: informationPage.columnWidth;
                 text: properties.material;
                 readOnly: !base.editingEnabled;
                 onEditingFinished: base.updateMaterialType(properties.material, text)
             }
 
-                Label { width: scrollView.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Color") }
+            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Color") }
             Row
             {
-                    width: scrollView.columnWidth
+                width: informationPage.columnWidth
                 height:  parent.rowHeight
                 spacing: Math.round(UM.Theme.getSize("default_margin").width / 2)
 
@@ -207,11 +234,11 @@ TabView
 
             Label { width: parent.width; height: parent.rowHeight; font.bold: true; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Properties") }
 
-                Label { width: scrollView.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Density") }
+            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Density") }
             ReadOnlySpinBox
             {
                 id: densitySpinBox
-                    width: scrollView.columnWidth
+                width: informationPage.columnWidth
                 value: properties.density
                 decimals: 2
                 suffix: " g/cm³"
@@ -222,11 +249,11 @@ TabView
                 onValueChanged: updateCostPerMeter()
             }
 
-                Label { width: scrollView.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Diameter") }
+            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Diameter") }
             ReadOnlySpinBox
             {
                 id: diameterSpinBox
-                    width: scrollView.columnWidth
+                width: informationPage.columnWidth
                 value: properties.diameter
                 decimals: 2
                 suffix: " mm"
@@ -256,11 +283,11 @@ TabView
                 onValueChanged: updateCostPerMeter()
             }
 
-                Label { width: scrollView.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament Cost") }
+            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament Cost") }
-                SpinBox
+            OldControls.SpinBox
             {
                 id: spoolCostSpinBox
-                    width: scrollView.columnWidth
+                width: informationPage.columnWidth
                 value: base.getMaterialPreferenceValue(properties.guid, "spool_cost")
                 prefix: base.currency + " "
                 decimals: 2
@@ -273,11 +300,11 @@ TabView
                 }
             }
 
-                Label { width: scrollView.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament weight") }
+            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament weight") }
-                SpinBox
+            OldControls.SpinBox
             {
                 id: spoolWeightSpinBox
-                    width: scrollView.columnWidth
+                width: informationPage.columnWidth
                 value: base.getMaterialPreferenceValue(properties.guid, "spool_weight", Cura.ContainerManager.getContainerMetaDataEntry(properties.container_id, "properties/weight"))
                 suffix: " g"
                 stepSize: 100
@@ -291,19 +318,19 @@ TabView
                 }
             }
 
-                Label { width: scrollView.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament length") }
+            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament length") }
             Label
             {
-                    width: scrollView.columnWidth
+                width: informationPage.columnWidth
                 text: "~ %1 m".arg(Math.round(base.spoolLength))
                 verticalAlignment: Qt.AlignVCenter
                 height: parent.rowHeight
             }
 
-                Label { width: scrollView.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Cost per Meter") }
+            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Cost per Meter") }
             Label
             {
-                    width: scrollView.columnWidth
+                width: informationPage.columnWidth
                 text: "~ %1 %2/m".arg(base.costPerMeter.toFixed(2)).arg(base.currency)
                 verticalAlignment: Qt.AlignVCenter
                 height: parent.rowHeight
@@ -312,13 +339,13 @@ TabView
             Item { width: parent.width; height: UM.Theme.getSize("default_margin").height; visible: unlinkMaterialButton.visible }
             Label
             {
-                    width: 2 * scrollView.columnWidth
+                width: 2 * informationPage.columnWidth
                 verticalAlignment: Qt.AlignVCenter
                 text: catalog.i18nc("@label", "This material is linked to %1 and shares some of its properties.").arg(base.linkedMaterialNames)
                 wrapMode: Text.WordWrap
                 visible: unlinkMaterialButton.visible
             }
-                Button
+            OldControls.Button
             {
                 id: unlinkMaterialButton
                 text: catalog.i18nc("@label", "Unlink Material")
@@ -337,7 +364,7 @@ TabView
             ReadOnlyTextArea
             {
                 text: properties.description;
-                    width: 2 * scrollView.columnWidth
+                width: 2 * informationPage.columnWidth
                 wrapMode: Text.WordWrap
 
                 readOnly: !base.editingEnabled;
@@ -350,7 +377,7 @@ TabView
             ReadOnlyTextArea
             {
                 text: properties.adhesion_info;
-                    width: 2 * scrollView.columnWidth
+                width: 2 * informationPage.columnWidth
                 wrapMode: Text.WordWrap
 
                 readOnly: !base.editingEnabled;
@@ -367,31 +394,26 @@ TabView
             base.costPerMeter = calculateCostPerMeter(spoolCostSpinBox.value);
         }
     }
-    }
-
-    Tab
-    {
-        title: catalog.i18nc("@label", "Print settings")
-        anchors
-        {
-            leftMargin: UM.Theme.getSize("default_margin").width
-            topMargin: UM.Theme.getSize("default_margin").height
-            bottomMargin: UM.Theme.getSize("default_margin").height
-            rightMargin: 0
-        }
-
-        ScrollView
-        {
-            anchors.fill: parent;
 
     ListView
     {
+        anchors
+        {
+            top: pageSelectorTabRow.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+
         model: UM.SettingDefinitionsModel
         {
             containerId: Cura.MachineManager.activeMachine != null ? Cura.MachineManager.activeMachine.definition.id: ""
             visibilityHandler: Cura.MaterialSettingsVisibilityHandler { }
             expanded: ["*"]
         }
+        ScrollBar.vertical: UM.ScrollBar {}
+        clip: true
+        visible: pageSelectorTabRow.currentItem.activeView === "settings"
 
         delegate: UM.TooltipArea
         {
@@ -462,8 +484,6 @@ TabView
             }
         }
     }
-        }
-    }
 
     function calculateSpoolLength(diameter, density, spoolWeight)
     {

resources/qml/Preferences/ProfileTab.qml

@@ -1,118 +0,0 @@
-// Copyright (c) 2018 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.7
-import QtQuick.Controls 1.4
-
-import UM 1.2 as UM
-import Cura 1.0 as Cura
-
-Tab
-{
-    id: base
-
-    property int extruderPosition: -1 //Denotes the global stack.
-    property var qualityItem: null
-
-    property bool isQualityItemCurrentlyActivated:
-    {
-        if (qualityItem == null)
-        {
-            return false;
-        }
-        return qualityItem.name == Cura.MachineManager.activeQualityOrQualityChangesName;
-    }
-
-    TableView
-    {
-        anchors.fill: parent
-        anchors.margins: UM.Theme.getSize("default_margin").width
-        id: profileSettingsView
-
-        Component
-        {
-            id: itemDelegate
-
-            UM.TooltipArea
-            {
-                property var setting: qualitySettings.getItem(styleData.row)
-                height: childrenRect.height
-                width: (parent != null) ? parent.width : 0
-                text:
-                {
-                    if (styleData.value === undefined)
-                    {
-                        return ""
-                    }
-                    return (styleData.value.substr(0,1) == "=") ? styleData.value : ""
-                }
-
-                Label
-                {
-                    anchors.left: parent.left
-                    anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                    anchors.right: parent.right
-                    text:
-                    {
-                        if (styleData.value === undefined)
-                        {
-                            return ""
-                        }
-                        return (styleData.value.substr(0,1) == "=") ? catalog.i18nc("@info:status", "Calculated") : styleData.value
-                    }
-                    font.strikeout: styleData.column == 1 && setting.user_value != "" && base.isQualityItemCurrentlyActivated
-                    font.italic: setting.profile_value_source == "quality_changes" || (setting.user_value != "" && base.isQualityItemCurrentlyActivated)
-                    opacity: font.strikeout ? 0.5 : 1
-                    color: styleData.textColor
-                    elide: Text.ElideRight
-                }
-            }
-        }
-
-        TableViewColumn
-        {
-            role: "label"
-            title: catalog.i18nc("@title:column", "Setting")
-            width: (parent.width * 0.4) | 0
-            delegate: itemDelegate
-        }
-        TableViewColumn
-        {
-            role: "profile_value"
-            title: catalog.i18nc("@title:column", "Profile")
-            width: (parent.width * 0.18) | 0
-            delegate: itemDelegate
-        }
-        TableViewColumn
-        {
-            role: "user_value"
-            title: catalog.i18nc("@title:column", "Current");
-            visible: base.isQualityItemCurrentlyActivated
-            width: (parent.width * 0.18) | 0
-            delegate: itemDelegate
-        }
-        TableViewColumn
-        {
-            role: "unit"
-            title: catalog.i18nc("@title:column", "Unit")
-            width: (parent.width * 0.14) | 0
-            delegate: itemDelegate
-        }
-
-        section.property: "category"
-        section.delegate: Label
-        {
-            text: section
-            font.bold: true
-        }
-
-        model: Cura.QualitySettingsModel
-        {
-            id: qualitySettings
-            selectedPosition: base.extruderPosition
-            selectedQualityItem: base.qualityItem == null ? {} : base.qualityItem
-        }
-
-        SystemPalette { id: palette }
-    }
-}

resources/qml/Preferences/ProfilesPage.qml

@@ -1,12 +1,13 @@
-// Copyright (c) 2019 Ultimaker B.V.
+//Copyright (c) 2022 Ultimaker B.V.
-// Uranium is released under the terms of the LGPLv3 or higher.
+//Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.15
+import QtQuick.Controls 1.4 as OldControls
 import QtQuick.Layouts 1.3
 import QtQuick.Dialogs 1.2
 
-import UM 1.2 as UM
+import UM 1.5 as UM
 import Cura 1.6 as Cura
 
 
@@ -78,7 +79,7 @@ Item
         height: childrenRect.height
 
         // Activate button
-        Button
+        OldControls.Button
         {
             id: activateMenuButton
             text: catalog.i18nc("@action:button", "Activate")
@@ -98,7 +99,7 @@ Item
         }
 
         // Create button
-        Button
+        OldControls.Button
         {
             id: createMenuButton
             text: catalog.i18nc("@label", "Create")
@@ -115,7 +116,7 @@ Item
         }
 
         // Duplicate button
-        Button
+        OldControls.Button
         {
             id: duplicateMenuButton
             text: catalog.i18nc("@label", "Duplicate")
@@ -132,7 +133,7 @@ Item
         }
 
         // Remove button
-        Button
+        OldControls.Button
         {
             id: removeMenuButton
             text: catalog.i18nc("@action:button", "Remove")
@@ -146,7 +147,7 @@ Item
         }
 
         // Rename button
-        Button
+        OldControls.Button
         {
             id: renameMenuButton
             text: catalog.i18nc("@action:button", "Rename")
@@ -161,7 +162,7 @@ Item
         }
 
         // Import button
-        Button
+        OldControls.Button
         {
             id: importMenuButton
             text: catalog.i18nc("@action:button", "Import")
@@ -173,7 +174,7 @@ Item
         }
 
         // Export button
-        Button
+        OldControls.Button
         {
             id: exportMenuButton
             text: catalog.i18nc("@action:button", "Export")
@@ -397,13 +398,13 @@ Item
             }
             visible: text != ""
             text: catalog.i18nc("@label %1 is printer name", "Printer: %1").arg(Cura.MachineManager.activeMachine.name)
-            width: profileScrollView.width
+            width: profileBackground.width
             elide: Text.ElideRight
         }
 
-        ScrollView
+        Rectangle
         {
-            id: profileScrollView
+            id: profileBackground
             anchors
             {
                 top: captionLabel.visible ? captionLabel.bottom : parent.top
@@ -411,22 +412,20 @@ Item
                 bottom: parent.bottom
                 left: parent.left
             }
+            width: (parent.width * 0.4) | 0
 
-            Rectangle
-            {
-                parent: viewport
-                anchors.fill: parent
             color: palette.light
-            }
-
-            width: true ? (parent.width * 0.4) | 0 : parent.width
-            frameVisible: true
-            clip: true
 
             ListView
             {
                 id: qualityListView
+                anchors.fill: parent
 
+                ScrollBar.vertical: UM.ScrollBar
+                {
+                    id: profileScrollBar
+                }
+                clip: true
                 model: base.qualityManagementModel
 
                 Component.onCompleted:
@@ -461,7 +460,7 @@ Item
 
                 delegate: Rectangle
                 {
-                    width: profileScrollView.width
+                    width: profileBackground.width - profileScrollBar.width
                     height: childrenRect.height
 
                     // Added this property to identify custom profiles in automated system tests (Squish)
@@ -513,16 +512,24 @@ Item
 
             anchors
             {
-                left: profileScrollView.right
+                left: profileBackground.right
                 leftMargin: UM.Theme.getSize("default_margin").width
                 top: parent.top
                 bottom: parent.bottom
                 right: parent.right
             }
 
-            Item
+            Column
             {
-                anchors.fill: parent
+                id: detailsPanelHeaderColumn
+                anchors
+                {
+                    left: parent.left
+                    right: parent.right
+                    top: parent.top
+                }
+
+                spacing: UM.Theme.getSize("default_margin").height
                 visible: base.currentItem != null
 
                 Item    // Profile title Label
@@ -546,16 +553,14 @@ Item
                 Flow
                 {
                     id: currentSettingsActions
+                    width: parent.width
+
                     visible: base.hasCurrentItem && base.currentItem.name == Cura.MachineManager.activeQualityOrQualityChangesName && base.currentItem.intent_category == Cura.MachineManager.activeIntentCategory
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.top: profileName.bottom
-                    anchors.topMargin: UM.Theme.getSize("default_margin").height
 
                     Button
                     {
                         text: catalog.i18nc("@action:button", "Update profile with current settings/overrides")
-                        enabled: Cura.MachineManager.hasUserSettings && !base.currentItem.is_read_only
+                        enabled: Cura.MachineManager.hasUserSettings && qualityListView.currentItem && !qualityListView.currentItem.is_read_only
                         onClicked: Cura.ContainerManager.updateQualityChanges()
                     }
 
@@ -567,15 +572,6 @@ Item
                     }
                 }
 
-                Column
-                {
-                    id: profileNotices
-                    anchors.top: currentSettingsActions.visible ? currentSettingsActions.bottom : currentSettingsActions.anchors.top
-                    anchors.topMargin: UM.Theme.getSize("default_margin").height
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    spacing: UM.Theme.getSize("default_margin").height
-
                 Label
                 {
                     id: defaultsMessage
@@ -592,36 +588,40 @@ Item
                     wrapMode: Text.WordWrap
                     width: parent.width
                 }
-                }
 
-                TabView
+                UM.TabRow
                 {
-                    anchors.left: parent.left
+                    id: profileExtruderTabs
-                    anchors.top: profileNotices.visible ? profileNotices.bottom : profileNotices.anchors.top
+                    UM.TabRowButton //One extra tab for the global settings.
-                    anchors.topMargin: UM.Theme.getSize("default_margin").height
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
-
-                    currentIndex: 0
-
-                    ProfileTab
                     {
-                        title: catalog.i18nc("@title:tab", "Global Settings")
+                        text: catalog.i18nc("@title:tab", "Global Settings")
-                        qualityItem: base.currentItem
                     }
 
                     Repeater
                     {
                         model: base.extrudersModel
 
-                        ProfileTab
+                        UM.TabRowButton
                         {
-                            title: model.name
+                            text: model.name
-                            extruderPosition: model.index
+                        }
+                    }
+                }
+            }
+
+            Cura.ProfileOverview
+            {
+                anchors
+                {
+                    top: detailsPanelHeaderColumn.bottom
+                    left: parent.left
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+
+                visible: detailsPanelHeaderColumn.visible
                 qualityItem: base.currentItem
-                        }
+                extruderPosition: profileExtruderTabs.currentIndex - 1
-                    }
-                }
             }
         }
     }

resources/qml/Preferences/SettingVisibilityPage.qml

@@ -1,13 +1,11 @@
-// Copyright (c) 2016 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.1
-import QtQuick.Controls 1.1
+import QtQuick.Controls 2.15
-import QtQuick.Controls.Styles 1.1
+import QtQuick.Controls 1.1 as OldControls
 
-import QtQuick.Controls 2.3 as NewControls
+import UM 1.5 as UM
-
-import UM 1.2 as UM
 
 import Cura 1.0 as Cura
 
@@ -36,7 +34,7 @@ UM.PreferencesPage
         id: base;
         anchors.fill: parent;
 
-        CheckBox
+        OldControls.CheckBox
         {
             id: toggleVisibleSettings
             anchors
@@ -98,7 +96,7 @@ UM.PreferencesPage
             onTextChanged: definitionsModel.filter = {"i18n_label|i18n_description": "*" + text}
         }
 
-        NewControls.ComboBox
+        ComboBox
         {
             id: visibilityPreset
             width: 150 * screenScaleFactor
@@ -106,7 +104,7 @@ UM.PreferencesPage
             {
                 top: parent.top
                 right: parent.right
-                bottom: scrollView.top
+                bottom: settingsListView.top
             }
 
             model: settingVisibilityPresetsModel.items
@@ -133,12 +131,9 @@ UM.PreferencesPage
             }
         }
 
-        ScrollView
+        ListView
         {
-            id: scrollView
+            id: settingsListView
-
-            frameVisible: true
-
             anchors
             {
                 top: filter.bottom;
@@ -147,9 +142,9 @@ UM.PreferencesPage
                 right: parent.right;
                 bottom: parent.bottom;
             }
-            ListView
+
-            {
+            clip: true
-                id: settingsListView
+            ScrollBar.vertical: UM.ScrollBar {}
 
             model: UM.SettingDefinitionsModel
             {
@@ -186,7 +181,6 @@ UM.PreferencesPage
                 }
             }
         }
-        }
 
         UM.I18nCatalog { name: "cura"; }
         SystemPalette { id: palette; }

resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml

@@ -1,5 +1,5 @@
-// Copyright (c) 2018 Ultimaker B.V.
+//Copyright (c) 2022 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
+//Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
 import QtQuick.Controls 2.3
@@ -213,6 +213,7 @@ Item
             model: extrudersModel
             delegate: UM.TabRowButton
             {
+                checked: model.index == 0
                 contentItem: Item
                 {
                     Cura.ExtruderIcon

resources/qml/PrintSetupSelector/Custom/QualitiesWithIntentMenu.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
@@ -43,17 +43,29 @@ Popup
         // This repeater adds the intent labels
         ScrollView
         {
+            id: qualityListScrollView
             property real maximumHeight: screenScaleFactor * 400
             contentHeight: dataColumn.height
             height: Math.min(contentHeight, maximumHeight)
-            clip: true
+            width: parent.width
 
-            ScrollBar.vertical.policy: height == maximumHeight ? ScrollBar.AlwaysOn: ScrollBar.AlwaysOff
+            clip: true
+            ScrollBar.vertical: UM.ScrollBar
+            {
+                id: qualityListScrollBar
+                parent: qualityListScrollView
+                anchors
+                {
+                    top: parent.top
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+            }
 
             Column
             {
                 id: dataColumn
-                width: parent.width
+                width: qualityListScrollView.width - qualityListScrollBar.width
                 Repeater
                 {
                     model: dataModel
@@ -64,7 +76,7 @@ Popup
                         property variant subItemModel: model.qualities
 
                         height: childrenRect.height
-                        width: popup.contentWidth
+                        width: dataColumn.width
 
                         UM.Label
                         {
@@ -137,7 +149,7 @@ Popup
                 Item
                 {
                     height: childrenRect.height
-                    width: popup.contentWidth
+                    width: dataColumn.width
 
                     UM.Label
                     {

resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml

@@ -1,9 +1,9 @@
-// Copyright (c) 2020 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
-import QtQuick.Controls 1.4
+import QtQuick.Controls 1.4 as OldControls
-import QtQuick.Controls 2.3 as Controls2
+import QtQuick.Controls 2.3
 
 import UM 1.5 as UM
 import Cura 1.0 as Cura
@@ -73,7 +73,7 @@ Item
             }
         }
 
-        Controls2.ComboBox
+        ComboBox
         {
             id: supportExtruderCombobox
 
@@ -200,7 +200,7 @@ Item
                 }
             }
 
-            contentItem:UM.Label
+            contentItem: UM.Label
             {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.left: parent.left
@@ -229,7 +229,7 @@ Item
                 }
             }
 
-            popup: Controls2.Popup
+            popup: Popup
             {
                 y: supportExtruderCombobox.height - UM.Theme.getSize("default_lining").height
                 width: supportExtruderCombobox.width
@@ -238,12 +238,12 @@ Item
 
                 contentItem: ListView
                 {
-                    clip: true
                     implicitHeight: contentHeight
+
+                    ScrollBar.vertical: UM.ScrollBar {}
+                    clip: true
                     model: supportExtruderCombobox.popup.visible ? supportExtruderCombobox.delegateModel : null
                     currentIndex: supportExtruderCombobox.highlightedIndex
-
-                    Controls2.ScrollIndicator.vertical: Controls2.ScrollIndicator { }
                 }
 
                 background: Rectangle
@@ -253,7 +253,7 @@ Item
                 }
             }
 
-            delegate: Controls2.ItemDelegate
+            delegate: ItemDelegate
             {
                 width: supportExtruderCombobox.width - 2 * UM.Theme.getSize("default_lining").width
                 height: supportExtruderCombobox.height

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
-        {
-            id: scroll
-            width: parent.width
-            clip: true
-            leftPadding: UM.Theme.getSize("default_lining").width
-            rightPadding: UM.Theme.getSize("default_lining").width
 
         MachineSelectorList
         {
             id: machineSelectorList
-                // Can't use parent.width since the parent is the flickable component and not the ScrollView
+            anchors
-                width: scroll.width - scroll.leftPadding - scroll.rightPadding
-                property real maximumHeight: UM.Theme.getSize("machine_selector_widget_content").height - buttonRow.height
-
-                // We use an extra property here, since we only want to to be informed about the content size changes.
-                onContentHeightChanged:
             {
-                    scroll.height = Math.min(contentHeight, maximumHeight)
+                left: parent.left
-                    popup.height = scroll.height + buttonRow.height
+                leftMargin: UM.Theme.getSize("default_lining").width
-                }
+                right: parent.right
-
+                rightMargin: UM.Theme.getSize("default_lining").width
-                Component.onCompleted:
+                top: parent.top
-                {
+                bottom: separator.top
-                    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

resources/qml/ProfileOverview.qml

@@ -0,0 +1,42 @@
+//Copyright (c) 2022 Ultimaker B.V.
+//Cura is released under the terms of the LGPLv3 or higher.
+
+import Qt.labs.qmlmodels 1.0
+import QtQuick 2.7
+import QtQuick.Controls 1.4 as OldControls
+import QtQuick.Controls 2.15
+
+import UM 1.5 as UM
+import Cura 1.6 as Cura
+
+Cura.TableView
+{
+    id: profileOverview
+
+    property var qualityItem //The quality profile to display here.
+    property int extruderPosition: -1 //The extruder to display. -1 denotes the global stack.
+    property bool isQualityItemCurrentlyActivated: qualityItem != null && qualityItem.name == Cura.MachineManager.activeQualityOrQualityChangesName
+
+    Cura.QualitySettingsModel
+    {
+        id: qualitySettings
+        selectedPosition: profileOverview.extruderPosition
+        selectedQualityItem: profileOverview.qualityItem == null ? {} : profileOverview.qualityItem
+    }
+
+    columnHeaders: [
+        catalog.i18nc("@title:column", "Setting"),
+        catalog.i18nc("@title:column", "Profile"),
+        catalog.i18nc("@title:column", "Current"),
+        catalog.i18nc("@title:column Unit of measurement", "Unit")
+    ]
+    model: TableModel
+    {
+        TableModelColumn { display: "label" }
+        TableModelColumn { display: "profile_value" }
+        TableModelColumn { display: "user_value" }
+        TableModelColumn { display: "unit" }
+        rows: qualitySettings.items
+    }
+    sectionRole: "category"
+}

resources/qml/Settings/SettingExtruder.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2016 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Uranium is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
@@ -178,12 +178,12 @@ SettingItem
 
             contentItem: ListView
             {
-                clip: true
                 implicitHeight: contentHeight
+
+                ScrollBar.vertical: UM.ScrollBar {}
+                clip: true
                 model: control.popup.visible ? control.delegateModel : null
                 currentIndex: control.highlightedIndex
-
-                ScrollIndicator.vertical: ScrollIndicator { }
             }
 
             background: Rectangle

resources/qml/Settings/SettingOptionalExtruder.qml

@@ -1,4 +1,4 @@
-// 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
@@ -181,12 +181,12 @@ SettingItem
 
             contentItem: ListView
             {
-                clip: true
                 implicitHeight: contentHeight
+
+                ScrollBar.vertical: UM.ScrollBar {}
+                clip: true
                 model: control.popup.visible ? control.delegateModel : null
                 currentIndex: control.highlightedIndex
-
-                ScrollIndicator.vertical: ScrollIndicator { }
             }
 
             background: Rectangle {

resources/qml/Settings/SettingView.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
@@ -191,6 +191,7 @@ Item
         }
         clip: true
         cacheBuffer: 1000000   // Set a large cache to effectively just cache every list item.
+        ScrollBar.vertical: UM.ScrollBar {}
 
         model: UM.SettingDefinitionsModel
         {

resources/qml/TableView.qml

@@ -1,67 +1,217 @@
-// Copyright (C) 2021 Ultimaker B.V.
+//Copyright (C) 2022 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
+//Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.10
+import Qt.labs.qmlmodels 1.0
-import QtQuick.Controls 1.4 as OldControls // TableView doesn't exist in the QtQuick Controls 2.x in 5.10, so use the old one
+import QtQuick 2.15
-import QtQuick.Controls 2.3
+import QtQuick.Controls 2.15
-import QtQuick.Controls.Styles 1.4
 
 import UM 1.5 as UM
 
-
+/*
-OldControls.TableView
+ * A re-sizeable table of data.
+ *
+ * This table combines a list of headers with a TableView to show certain roles in a table.
+ * The columns of the table can be resized.
+ * When the table becomes too big, you can scroll through the table. When a column becomes too small, the contents of
+ * the table are elided.
+ * The table gets Cura's themeing.
+ */
+Item
 {
-    itemDelegate: Item
+    id: tableBase
-    {
-        height: tableCellLabel.implicitHeight
 
-        UM.Label
+    required property var columnHeaders //The text to show in the headers of each column.
+    property alias model: tableView.model //A TableModel to display in this table. To use a ListModel for the rows, use "rows: listModel.items"
+    property int currentRow: -1 //The selected row index.
+    property var onDoubleClicked: function(row) {} //Something to execute when double clicked. Accepts one argument: The index of the row that was clicked on.
+    property bool allowSelection: true //Whether to allow the user to select items.
+    property string sectionRole: ""
+
+    Row
     {
-            id: tableCellLabel
+        id: headerBar
-            color: styleData.selected ? UM.Theme.getColor("primary_button_text") : UM.Theme.getColor("text")
+        Repeater
+        {
+            id: headerRepeater
+            model: columnHeaders
+            Rectangle
+            {
+                width: Math.max(1, Math.round(tableBase.width / headerRepeater.count))
+                height: UM.Theme.getSize("section").height
+
+                color: UM.Theme.getColor("secondary")
+
+                Label
+                {
+                    id: contentText
+                    anchors.left: parent.left
+                    anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
+                    anchors.right: parent.right
+                    anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
+
+                    text: modelData
+                    font: UM.Theme.getFont("medium_bold")
+                    color: UM.Theme.getColor("text")
                     elide: Text.ElideRight
-            text: styleData.value
+                }
+                Rectangle //Resize handle.
+                {
+                    anchors
+                    {
+                        right: parent.right
+                        top: parent.top
+                        bottom: parent.bottom
+                    }
+                    width: UM.Theme.getSize("thick_lining").width
+
+                    color: UM.Theme.getColor("thick_lining")
+
+                    MouseArea
+                    {
                         anchors.fill: parent
-            anchors.leftMargin: 10 * screenScaleFactor
-        }
-    }
 
-    rowDelegate: Rectangle
+                        cursorShape: Qt.SizeHorCursor
+                        drag
                         {
-        color: styleData.selected ? UM.Theme.getColor("primary_button") : UM.Theme.getColor("main_background")
+                            target: parent
-        height: UM.Theme.getSize("table_row").height
+                            axis: Drag.XAxis
+                        }
+                        onMouseXChanged:
+                        {
+                            if(drag.active)
+                            {
+                                let new_width = parent.parent.width + mouseX;
+                                let sum_widths = mouseX;
+                                for(let i = 0; i < headerBar.children.length; ++i)
+                                {
+                                    sum_widths += headerBar.children[i].width;
+                                }
+                                if(sum_widths > tableBase.width)
+                                {
+                                    new_width -= sum_widths - tableBase.width; //Limit the total width to not exceed the view.
+                                }
+                                let width_fraction = new_width / tableBase.width; //Scale with the same fraction along with the total width, if the table is resized.
+                                parent.parent.width = Qt.binding(function() { return tableBase.width * width_fraction });
+                            }
+                        }
+                    }
                 }
 
-    // Use the old styling technique since it's the only way to make the scrollbars themed in the TableView
+                onWidthChanged:
-    style: TableViewStyle
                 {
-        backgroundColor: UM.Theme.getColor("main_background")
+                    tableView.forceLayout(); //Rescale table cells underneath as well.
-
+                }
-        handle: Rectangle
+            }
-        {
+        }
-            // Both implicit width and height have to be set, since the handle is used by both the horizontal and the vertical scrollbars
-            implicitWidth: UM.Theme.getSize("scrollbar").width
-            implicitHeight: UM.Theme.getSize("scrollbar").width
-            radius: width / 2
-            color: UM.Theme.getColor(styleData.pressed ? "scrollbar_handle_down" : (styleData.hovered ? "scrollbar_handle_hover" : "scrollbar_handle"))
     }
 
-        scrollBarBackground: Rectangle
+    TableView
     {
-            // Both implicit width and height have to be set, since the handle is used by both the horizontal and the vertical scrollbars
+        id: tableView
-            implicitWidth: UM.Theme.getSize("scrollbar").width
+        anchors
-            implicitHeight: UM.Theme.getSize("scrollbar").width
+        {
-            color: UM.Theme.getColor("main_background")
+            top: headerBar.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
         }
 
-        // The little rectangle between the vertical and horizontal scrollbars
+        clip: true
-        corner: Rectangle
+        ScrollBar.vertical: UM.ScrollBar {}
+        columnWidthProvider: function(column)
         {
-            color: UM.Theme.getColor("main_background")
+            return headerBar.children[column].width; //Cells get the same width as their column header.
         }
 
-        // Override the control arrows
+        delegate: Rectangle
-        incrementControl: Item { }
+        {
-        decrementControl: Item { }
+            implicitHeight: Math.max(1, cellContent.height)
+
+            color: UM.Theme.getColor((tableBase.currentRow == row) ? "primary" : ((row % 2 == 0) ? "main_background" : "viewport_background"))
+
+            Label
+            {
+                id: cellContent
+                width: parent.width
+
+                text: display
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+                font: UM.Theme.getFont("default")
+                color: UM.Theme.getColor("text")
+            }
+            TextMetrics
+            {
+                id: cellTextMetrics
+                text: cellContent.text
+                font: cellContent.font
+                elide: cellContent.elide
+                elideWidth: cellContent.width
+            }
+            UM.TooltipArea
+            {
+                anchors.fill: parent
+
+                text: (cellTextMetrics.elidedText == cellContent.text) ? "" : cellContent.text //Show full text in tooltip if it was elided.
+                onClicked:
+                {
+                    if(tableBase.allowSelection)
+                    {
+                        tableBase.currentRow = row; //Select this row.
+                    }
+                }
+                onDoubleClicked:
+                {
+                    tableBase.onDoubleClicked(row);
+                }
+            }
+        }
+
+        Connections
+        {
+            target: model
+            function onRowCountChanged()
+            {
+                tableView.contentY = 0; //When the number of rows is reduced, make sure to scroll back to the start.
+            }
+        }
+    }
+
+    Connections
+    {
+        target: model
+        function onRowsChanged()
+        {
+            let first_column = model.columns[0].display;
+            if(model.rows.length > 0 && model.rows[0][first_column].startsWith("<b>")) //First item is already a section header.
+            {
+                return; //Assume we already added section headers. Prevent infinite recursion.
+            }
+            if(sectionRole === "" || model.rows.length == 0) //No section headers, or no items at all.
+            {
+                tableView.model.rows = model.rows;
+                return;
+            }
+
+            //Insert section headers in the rows.
+            let last_section = "";
+            let new_rows = [];
+            for(let i = 0; i < model.rows.length; ++i)
+            {
+                let item_section = model.rows[i][sectionRole];
+                if(item_section !== last_section) //Starting a new section.
+                {
+                    let section_header = {};
+                    for(let key in model.rows[i])
+                    {
+                        section_header[key] = (key === first_column) ? "<b>" + item_section + "</b>" : ""; //Put the section header in the first column.
+                    }
+                    new_rows.push(section_header); //Add a row representing a section header.
+                    last_section = item_section;
+                }
+                new_rows.push(model.rows[i]);
+            }
+            tableView.model.rows = new_rows;
+        }
     }
 }

resources/qml/WelcomePages/AddCloudPrintersView.qml

@@ -1,11 +1,11 @@
-// 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
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 
-import UM 1.3 as UM
+import UM 1.5 as UM
 import Cura 1.7 as Cura
 
 
@@ -22,7 +22,7 @@ Item
     property bool searchingForCloudPrinters: true
     property var discoveredCloudPrintersModel: CuraApplication.getDiscoveredCloudPrintersModel()
 
-    // The area where either the discoveredCloudPrintersScrollView or the busyIndicator will be displayed
+    // The area where either the discoveredCloudPrintersList or the busyIndicator will be displayed
     Item
     {
         id: cloudPrintersContent
@@ -126,14 +126,9 @@ Item
 
         // The scrollView that contains the list of newly discovered Ultimaker Cloud printers. Visible only when
         // there is at least a new cloud printer.
-        ScrollView
+        ListView
         {
-            id: discoveredCloudPrintersScrollView
+            id: discoveredCloudPrintersList
-            width: parent.width
-            clip : true
-            ScrollBar.horizontal.policy: ScrollBar.AsNeeded
-            ScrollBar.vertical.policy: ScrollBar.AsNeeded
-            visible: discoveredCloudPrintersModel.count > 0
             anchors
             {
                 top: cloudPrintersAddedTitle.bottom
@@ -144,18 +139,15 @@ Item
                 bottom: parent.bottom
             }
 
-            Column
+            ScrollBar.vertical: UM.ScrollBar {}
-            {
+            clip : true
-                id: discoveredPrintersColumn
+            visible: discoveredCloudPrintersModel.count > 0
-                spacing: 2 * UM.Theme.getSize("default_margin").height
+            spacing: UM.Theme.getSize("wide_margin").height
 
-                Repeater
-                {
-                    id: discoveredCloudPrintersRepeater
             model: discoveredCloudPrintersModel
             delegate: Item
             {
-                        width: discoveredCloudPrintersScrollView.width
+                width: discoveredCloudPrintersList.width
                 height: contentColumn.height
 
                 Column
@@ -165,7 +157,7 @@ Item
                     {
                         id: cloudPrinterNameLabel
                         leftPadding: UM.Theme.getSize("default_margin").width
-                                text: model.name
+                        text: model.name ? model.name : ""
                         font: UM.Theme.getFont("large_bold")
                         color: UM.Theme.getColor("text")
                         elide: Text.ElideRight
@@ -193,8 +185,6 @@ Item
             }
         }
     }
-        }
-    }
 
     Cura.SecondaryButton
     {

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,29 +74,18 @@ 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
-        Cura.ScrollView
-        {
-            id: scrollView
-
-            height: childrenHeight
-            width: Math.floor(parent.width * 0.48)
 
+        //Selecting a local printer to add from this list.
         ListView
         {
             id: machineList
+            width: Math.floor(parent.width * 0.48)
+            height: parent.height
+
+            clip: true
+            ScrollBar.vertical: UM.ScrollBar {}
 
-                // CURA-6793
-                // Enabling the buffer seems to cause the blank items issue. When buffer is enabled, if the ListView's
-                // 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
@@ -106,18 +95,10 @@ Item
             }
 
             section.property: "section"
-                section.delegate: sectionHeader
+            section.delegate: Button
-                delegate: machineButton
-            }
-
-            Component
-            {
-                id: sectionHeader
-
-                Button
             {
                 id: button
-                    width: ListView.view.width
+                width: machineList.width
                 height: UM.Theme.getSize("action_button").height
                 text: section
 
@@ -162,30 +143,24 @@ Item
                     base.updateCurrentItemUponSectionChange()
                 }
             }
-            }
 
-            Component
+            delegate: Cura.RadioButton
-            {
-                id: machineButton
-
-                Cura.RadioButton
             {
                 id: radioButton
                 anchors
                 {
-                        left:  parent !== null ? parent.left: undefined
+                    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
                 }
-                    height: visible ? UM.Theme.getSize("standard_list_lineheight").height : 0
+                height: visible ? UM.Theme.getSize("standard_list_lineheight").height : 0 //This causes the scrollbar to vary in length due to QTBUG-76830.
 
-                    checked: ListView.view.currentIndex == index
+                checked: machineList.currentIndex == index
                 text: name
                 visible: base.currentSection.toLowerCase() === section.toLowerCase()
-                    onClicked: ListView.view.currentIndex = index
+                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/AddNetworkPrinterScrollView.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.10
@@ -17,7 +17,7 @@ Item
     id: base
     height: networkPrinterInfo.height + controlsRectangle.height
 
-    property alias maxItemCountAtOnce: networkPrinterScrollView.maxItemCountAtOnce
+    property alias maxItemCountAtOnce: networkPrinterListView.maxItemCountAtOnce
     property var currentItem: (networkPrinterListView.currentIndex >= 0)
                               ? networkPrinterListView.model[networkPrinterListView.currentIndex]
                               : null
@@ -29,7 +29,7 @@ Item
     Item
     {
         id: networkPrinterInfo
-        height: networkPrinterScrollView.visible ? networkPrinterScrollView.height : noPrinterLabel.height
+        height: networkPrinterListView.visible ? networkPrinterListView.height : noPrinterLabel.height
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
@@ -44,35 +44,36 @@ Item
             visible: networkPrinterListView.count == 0  // Do not show if there are discovered devices.
         }
 
-        ScrollView
-        {
-            id: networkPrinterScrollView
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.right: parent.right
-
-            ScrollBar.horizontal.policy: ScrollBar.AsNeeded
-            ScrollBar.vertical.policy: ScrollBar.AsNeeded
-
-            property int maxItemCountAtOnce: 8  // show at max 8 items at once, otherwise you need to scroll.
-            height: Math.min(contentHeight, (maxItemCountAtOnce * UM.Theme.getSize("action_button").height) - UM.Theme.getSize("default_margin").height)
-
-            visible: networkPrinterListView.count > 0
-
-            clip: true
-
         ListView
         {
             id: networkPrinterListView
-                anchors.fill: parent
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: Math.min(contentHeight, (maxItemCountAtOnce * UM.Theme.getSize("action_button").height) - UM.Theme.getSize("default_margin").height)
+
+            ScrollBar.vertical: UM.ScrollBar
+            {
+                id: networkPrinterScrollBar
+            }
+            clip: true
+            property int maxItemCountAtOnce: 8  // show at max 8 items at once, otherwise you need to scroll.
+            visible: networkPrinterListView.count > 0
+
             model: contentLoader.enabled ? CuraApplication.getDiscoveredPrintersModel().discoveredPrinters: undefined
+            cacheBuffer: 1000000   // Set a large cache to effectively just cache every list item.
 
             section.property: "modelData.sectionName"
             section.criteria: ViewSection.FullString
-                section.delegate: sectionHeading
+            section.delegate: UM.Label
-                boundsBehavior: Flickable.StopAtBounds
+            {
-                flickDeceleration: 20000  // To prevent the flicking behavior.
+                anchors.left: parent.left
-                cacheBuffer: 1000000   // Set a large cache to effectively just cache every list item.
+                anchors.leftMargin: UM.Theme.getSize("default_margin").width
+                width: parent.width - networkPrinterScrollBar.width - UM.Theme.getSize("default_margin").width
+                height: UM.Theme.getSize("setting_control").height
+                text: section
+                color: UM.Theme.getColor("small_button_text")
+            }
 
             Component.onCompleted:
             {
@@ -100,25 +101,11 @@ Item
                 }
             }
 
-                Component
-                {
-                    id: sectionHeading
-
-                    UM.Label
-                    {
-                        anchors.left: parent.left
-                        anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                        height: UM.Theme.getSize("setting_control").height
-                        text: section
-                        color: UM.Theme.getColor("small_button_text")
-                    }
-                }
-
             delegate: Cura.MachineSelectorButton
             {
                 text: modelData.device.name
 
-                    width: networkPrinterListView.width
+                width: networkPrinterListView.width - networkPrinterScrollBar.width
                 outputDevice: modelData.device
 
                 enabled: !modelData.isUnknownMachineType && modelData.isHostOfGroup
@@ -137,11 +124,10 @@ Item
                 }
 
                 checkable: false
-                    selected: ListView.view.currentIndex == model.index
+                selected: networkPrinterListView.currentIndex == model.index
                 onClicked:
                 {
-                        ListView.view.currentIndex = index
+                    networkPrinterListView.currentIndex = index
-                    }
                 }
             }
         }

resources/qml/WelcomePages/ChangelogContent.qml

@@ -37,8 +37,6 @@ Item
         anchors.left: parent.left
         anchors.right: parent.right
 
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-
         textArea.text: CuraApplication.getTextManager().getChangeLogText()
         textArea.textFormat: Text.RichText
         textArea.wrapMode: Text.WordWrap

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")

resources/qml/WelcomePages/WhatsNewContent.qml

@@ -113,8 +113,6 @@ Item
                             right: subpageImage.right
                         }
 
-                        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-
                         back_color: UM.Theme.getColor("viewport_overlay")
                         do_borders: false
 

resources/qml/Widgets/ComboBox.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
@@ -100,12 +100,12 @@ ComboBox
 
         contentItem: ListView
         {
-            clip: true
             implicitHeight: contentHeight
+
+            ScrollBar.vertical: UM.ScrollBar {}
+            clip: true
             model: control.popup.visible ? control.delegateModel : null
             currentIndex: control.highlightedIndex
-
-            ScrollIndicator.vertical: ScrollIndicator { }
         }
 
         background: Rectangle

resources/qml/Widgets/ScrollView.qml

@@ -1,46 +0,0 @@
-// Copyright (c) 2020 Ultimaker B.V.
-// Toolbox is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.10
-import QtQuick.Controls 2.3
-
-import UM 1.1 as UM
-
-ScrollView
-{
-    clip: true
-
-    // Setting this property to false hides the scrollbar both when the scrollbar is not needed (child height < height)
-    // and when the scrollbar is not actively being hovered or pressed
-    property bool scrollAlwaysVisible: true
-
-    ScrollBar.vertical: ScrollBar
-    {
-        hoverEnabled: true
-        policy: parent.scrollAlwaysVisible ? ScrollBar.AlwaysOn : ScrollBar.AsNeeded
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-
-        contentItem: Rectangle
-        {
-            implicitWidth: UM.Theme.getSize("scrollbar").width
-            opacity: (parent.active || parent.parent.scrollAlwaysVisible) ? 1.0 : 0.0
-            radius: Math.round(width / 2)
-            color:
-            {
-                if (parent.pressed)
-                {
-                    return UM.Theme.getColor("scrollbar_handle_down")
-                }
-                else if (parent.hovered)
-                {
-                    return UM.Theme.getColor("scrollbar_handle_hover")
-                }
-                return UM.Theme.getColor("scrollbar_handle")
-            }
-            Behavior on color { ColorAnimation { duration: 100; } }
-            Behavior on opacity { NumberAnimation { duration: 100 } }
-        }
-    }
-}

resources/qml/Widgets/ScrollableTextArea.qml

@@ -1,35 +1,39 @@
-// 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
 import QtQuick.Controls 2.3
 
-import UM 1.3 as UM
+import UM 1.5 as UM
 import Cura 1.1 as Cura
 
 
 //
 // Cura-style TextArea with scrolls
 //
-ScrollView
+Flickable
 {
-    property alias textArea: _textArea
+    id: scrollableTextAreaBase
-
+    property bool do_borders: true
     property var back_color: UM.Theme.getColor("main_background")
-    property var do_borders: true
+    property alias textArea: flickableTextArea
 
-    clip: true
+    ScrollBar.vertical: UM.ScrollBar {}
 
-    background: Rectangle  // Border
+    TextArea.flickable: TextArea
     {
-        color: back_color
+        id: flickableTextArea
+
+        background: Rectangle //Providing the background color and border.
+        {
+            anchors.fill: parent
+            anchors.margins: -border.width
+
+            color: scrollableTextAreaBase.back_color
             border.color: UM.Theme.getColor("thick_lining")
-        border.width: do_borders ? UM.Theme.getSize("default_lining").width : 0
+            border.width: scrollableTextAreaBase.do_borders ? UM.Theme.getSize("default_lining").width : 0
         }
 
-    TextArea
-    {
-        id: _textArea
         font: UM.Theme.getFont("default")
         color: UM.Theme.getColor("text")
         textFormat: TextEdit.PlainText

resources/qml/qmldir

@@ -4,6 +4,7 @@ MachineSelector 1.0 MachineSelector.qml
 MachineSelectorButton 1.0 MachineSelectorButton.qml
 CustomConfigurationSelector 1.0 CustomConfigurationSelector.qml
 PrintSetupSelector 1.0 PrintSetupSelector.qml
+ProfileOverview 1.6 ProfileOverview.qml
 ActionButton 1.0 ActionButton.qml
 MaterialMenu 1.0 MaterialMenu.qml
 NozzleMenu 1.0 NozzleMenu.qml