Merge pull request #11668 from Ultimaker/CURA-8979_Materials_Preference_Page

Materials preference page

resources/qml/CategoryButton.qml

@@ -10,6 +10,7 @@
 
 import QtQuick 2.2
 import QtQuick.Controls 2.1
+import QtQuick.Layouts 1.1
 
 import UM 1.5 as UM
 
@@ -17,14 +18,16 @@ Button
 {
     id: base
 
-    height: enabled ? UM.Theme.getSize("section_header").height : 0
+    height: UM.Theme.getSize("section_header").height
 
     property var expanded: false
-
+    property bool indented: false
     property alias arrow: categoryArrow
     property alias categoryIcon: icon.source
     property alias labelText: categoryLabel.text
-
+    property alias labelFont: categoryLabel.font
+    leftPadding: UM.Theme.getSize("narrow_margin").width
+    rightPadding: UM.Theme.getSize("narrow_margin").width
     states:
     [
         State
@@ -56,14 +59,13 @@ Button
     background: Rectangle
     {
         id: backgroundRectangle
-        height: base.height
 
         color: UM.Theme.getColor("setting_category")
         Behavior on color { ColorAnimation { duration: 50 } }
 
+        // Lining on top
         Rectangle
         {
-            //Lining on top
             anchors.top: parent.top
             color: UM.Theme.getColor("border_main")
             height: UM.Theme.getSize("default_lining").height
@@ -73,49 +75,48 @@ Button
 
     contentItem: Item
     {
-        anchors.fill: parent
+        id: content
+        //spacing: UM.Theme.getSize("narrow_margin").width
+
+        UM.RecolorImage
+        {
+            id: icon
+            source: ""
+            visible: icon.source != ""
+            anchors.verticalCenter: parent.verticalCenter
+            color: UM.Theme.getColor("setting_category_text")
+            width: visible ? UM.Theme.getSize("section_icon").width: 0
+            height: UM.Theme.getSize("section_icon").height
+            anchors.leftMargin: base.indented ? UM.Theme.getSize("default_margin").width: 0
+            sourceSize.width: width
+            sourceSize.height: width
+        }
 
         UM.Label
         {
             id: categoryLabel
-            anchors
+            Layout.fillWidth: true
-            {
+            anchors.right: categoryArrow.left
-                left: parent.left
+            anchors.left: icon.right
-                leftMargin: UM.Theme.getSize("default_margin").width + UM.Theme.getSize("section_icon").width
+            anchors.leftMargin: base.indented ? UM.Theme.getSize("default_margin").width + UM.Theme.getSize("narrow_margin").width: UM.Theme.getSize("narrow_margin").width
-                right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
-                verticalCenter: parent.verticalCenter
+            elide: Text.ElideRight
-            }
+            wrapMode: Text.NoWrap
-            textFormat: Text.PlainText
             font: UM.Theme.getFont("medium_bold")
             color: UM.Theme.getColor("setting_category_text")
-            fontSizeMode: Text.HorizontalFit
-            minimumPointSize: 8
         }
 
         UM.RecolorImage
         {
             id: categoryArrow
-            anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
             width: UM.Theme.getSize("standard_arrow").width
             height: UM.Theme.getSize("standard_arrow").height
-            sourceSize.height: width
+            anchors.verticalCenter: parent.verticalCenter
+            sourceSize.width: width
+            sourceSize.height: height
             color: UM.Theme.getColor("setting_control_button")
             source: expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
         }
     }
-
-    UM.RecolorImage
-    {
-        id: icon
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
-        color: UM.Theme.getColor("setting_category_text")
-        width: UM.Theme.getSize("section_icon").width
-        height: UM.Theme.getSize("section_icon").height
-        sourceSize.width: width
-        sourceSize.height: width
-    }
 }

resources/qml/MachineSettings/NumericTextFieldWithUnit.qml

@@ -22,6 +22,7 @@ UM.TooltipArea
 
     property int controlWidth: UM.Theme.getSize("setting_control").width
     property int controlHeight: UM.Theme.getSize("setting_control").height
+    property real spacing: UM.Theme.getSize("default_margin").width
 
     text: tooltipText
 
@@ -75,7 +76,7 @@ UM.TooltipArea
     {
         id: textFieldWithUnit
         anchors.left: fieldLabel.right
-        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        anchors.leftMargin: spacing
         verticalAlignment: Text.AlignVCenter
         selectionColor: UM.Theme.getColor("text_selection")
         selectedTextColor: UM.Theme.getColor("setting_control_text")
@@ -88,7 +89,6 @@ UM.TooltipArea
         background: UM.UnderlineBackground
         {
             anchors.fill: parent
-            anchors.margins: Math.round(UM.Theme.getSize("default_lining").width)
 
             liningColor:
             {

resources/qml/Preferences/MachinesPage.qml

@@ -14,13 +14,21 @@ UM.ManagementPage
     id: base
 
     title: catalog.i18nc("@title:tab", "Printers")
+    detailsPlaneCaption: base.currentItem && base.currentItem.name ? base.currentItem.name : ""
+
     model: Cura.GlobalStacksModel { }
 
     sectionRole: "discoverySource"
 
     activeId: Cura.MachineManager.activeMachine !== null ? Cura.MachineManager.activeMachine.id: ""
     activeIndex: activeMachineIndex()
-    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
+    onHamburgeButtonClicked: {
+        const hamburerButtonHeight = hamburger_button.height;
+        menu.popup(hamburger_button, -menu.width + hamburger_button.width / 2, hamburger_button.height);
+        // for some reason the height of the hamburger changes when opening the popup
+        // reset height to initial heigt
+        hamburger_button.height = hamburerButtonHeight;
+    }
     hamburgerButtonVisible: Cura.MachineManager.activeMachine !== null
 
     function activeMachineIndex()
@@ -43,60 +51,39 @@ UM.ManagementPage
         }
     ]
 
-    Item
+    Flow
     {
-        id: content_item
+        visible: base.currentItem != null && currentItem && currentItem.id == Cura.MachineManager.activeMachine.id
-        visible: base.currentItem != null
         anchors.fill: parent
+        spacing: UM.Theme.getSize("default_margin").height
 
-
+        Repeater
-        UM.Label
         {
-            id: machineName
+            id: machineActionRepeater
-            text: base.currentItem && base.currentItem.name ? base.currentItem.name : ""
+            model: base.currentItem ? Cura.MachineActionManager.getSupportedActions(Cura.MachineManager.getDefinitionByMachineId(base.currentItem.id)) : null
-            font: UM.Theme.getFont("large_bold")
-            width: parent.width
-            elide: Text.ElideRight
-        }
 
-        Flow
+            Item
-        {
-            id: machineActions
-            visible: currentItem && currentItem.id == Cura.MachineManager.activeMachine.id
-            anchors
             {
-                left: parent.left
+                width: Math.round(childrenRect.width + 2 * screenScaleFactor)
-                right: parent.right
+                height: childrenRect.height
-                top: machineName.bottom
+                Cura.SecondaryButton
-                topMargin: UM.Theme.getSize("default_margin").height
-            }
-            spacing: UM.Theme.getSize("default_margin").height
-
-            Repeater
-            {
-                id: machineActionRepeater
-                model: base.currentItem ? Cura.MachineActionManager.getSupportedActions(Cura.MachineManager.getDefinitionByMachineId(base.currentItem.id)) : null
-
-                Item
                 {
-                    width: Math.round(childrenRect.width + 2 * screenScaleFactor)
+                    text: machineActionRepeater.model[index].label
-                    height: childrenRect.height
+                    onClicked:
-                    Cura.SecondaryButton
                     {
-                        text: machineActionRepeater.model[index].label
+                        var currentItem = machineActionRepeater.model[index]
-                        onClicked:
+                        actionDialog.loader.manager = currentItem
-                        {
+                        actionDialog.loader.source = currentItem.qmlPath
-                            var currentItem = machineActionRepeater.model[index]
+                        actionDialog.title = currentItem.label
-                            actionDialog.loader.manager = currentItem
+                        actionDialog.show()
-                            actionDialog.loader.source = currentItem.qmlPath
-                            actionDialog.title = currentItem.label
-                            actionDialog.show()
-                        }
                     }
                 }
             }
         }
+    }
 
+    Item
+    {
         UM.Dialog
         {
             id: actionDialog
@@ -139,6 +126,7 @@ UM.ManagementPage
                 objectList.onCurrentIndexChanged()
             }
         }
+
         Cura.Menu
         {
             id: menu

resources/qml/Preferences/Materials/MaterialsBrandSection.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.7
@@ -10,100 +10,51 @@ import Cura 1.0 as Cura
 
 // An expandable list of materials. Includes both the header (this file) and the items (brandMaterialList)
 
-Item
+Column
 {
     id: brand_section
 
-    property var sectionName: ""
+    property string sectionName: ""
     property var elementsModel   // This can be a MaterialTypesModel or GenericMaterialsModel or FavoriteMaterialsModel
-    property var hasMaterialTypes: true  // It indicates whether it has material types or not
+    property bool hasMaterialTypes: true  // It indicates whether it has material types or not
-    property var expanded: materialList.expandedBrands.indexOf(sectionName) > -1
+    property bool expanded: materialList.expandedBrands.indexOf(sectionName) !== -1
-
-    height: childrenRect.height
     width: parent.width
-    Rectangle
+
+    Cura.CategoryButton
     {
-        id: brand_header_background
-        color:
-        {
-            if(!expanded && sectionName == materialList.currentBrand)
-            {
-                return UM.Theme.getColor("favorites_row_selected")
-            }
-            else
-            {
-                return UM.Theme.getColor("favorites_header_bar")
-            }
-        }
-        anchors.fill: brand_header
-    }
-    Row
-    {
-        id: brand_header
         width: parent.width
-        UM.Label
+        labelText: sectionName
+        height: UM.Theme.getSize("preferences_page_list_item").height
+        labelFont: UM.Theme.getFont("default_bold")
+        expanded: brand_section.expanded
+        onClicked:
         {
-            id: brand_name
+            const i = materialList.expandedBrands.indexOf(sectionName);
-            text: sectionName
+            if (i !== -1)
-            height: UM.Theme.getSize("favorites_row").height
-            width: parent.width - UM.Theme.getSize("favorites_button").width
-            leftPadding: (UM.Theme.getSize("default_margin").width / 2) | 0
-        }
-        Item
-        {
-            implicitWidth: UM.Theme.getSize("favorites_button").width
-            implicitHeight: UM.Theme.getSize("favorites_button").height
-            UM.RecolorImage
             {
-                anchors
+                materialList.expandedBrands.splice(i, 1); // remove
-                {
-                    verticalCenter: parent.verticalCenter
-                    horizontalCenter: parent.horizontalCenter
-                }
-                width: UM.Theme.getSize("standard_arrow").width
-                height: UM.Theme.getSize("standard_arrow").height
-                color: "black"
-                source: brand_section.expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
-            }
-        }
-    }
-    MouseArea
-    {
-        anchors.fill: brand_header
-        onPressed:
-        {
-            const i = materialList.expandedBrands.indexOf(sectionName)
-            if (i > -1)
-            {
-                // Remove it
-                materialList.expandedBrands.splice(i, 1)
-                brand_section.expanded = false
             }
             else
             {
-                // Add it
+                materialList.expandedBrands.push(sectionName); // add
-                materialList.expandedBrands.push(sectionName)
-                brand_section.expanded = true
             }
             UM.Preferences.setValue("cura/expanded_brands", materialList.expandedBrands.join(";"));
         }
     }
+
     Column
     {
         id: brandMaterialList
-        anchors.top: brand_header.bottom
         width: parent.width
-        anchors.left: parent ? parent.left : undefined
-        height: brand_section.expanded ? childrenRect.height : 0
         visible: brand_section.expanded
 
         Repeater
         {
             model: elementsModel
+
             delegate: Loader
             {
-                id: loader
+                width: parent.width
-                width: parent ? parent.width : 0
                 property var element: model
                 sourceComponent: hasMaterialTypes ? materialsTypeSection : materialSlot
             }
@@ -116,6 +67,7 @@ Item
         MaterialsTypeSection
         {
             materialType: element
+            indented: true
         }
     }
 
@@ -138,7 +90,7 @@ Item
                 return;
             }
 
-            expanded = materialList.expandedBrands.indexOf(sectionName) > -1
+            brand_section.expanded = materialList.expandedBrands.indexOf(sectionName) !== -1;
         }
     }
 }

resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml

@@ -1,12 +1,11 @@
-// Copyright (c) 2018 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Uranium is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.4
-import QtQuick.Layouts 1.3
 
-import UM 1.2 as UM
+import UM 1.5 as UM
-import Cura 1.0 as Cura
+import Cura 1.5 as Cura
 
 Item
 {
@@ -51,71 +50,44 @@ Item
         materialProperties.approximate_diameter = currentItem.approximate_diameter || "0"
     }
 
-    Item
+    // Material detailed information view below the title Label
+    MaterialsView
     {
+        id: materialDetailsView
         anchors.fill: parent
+        editingEnabled: currentItem != null && !currentItem.is_read_only
+        onResetSelectedMaterial: base.resetExpandedActiveMaterial()
 
-        Item    // Material title Label
+        properties: materialProperties
-        {
+        containerId: currentItem != null ? currentItem.id : ""
-            id: profileName
+        currentMaterialNode: currentItem != null ? currentItem.container_node: null
-
-            width: parent.width
-            height: childrenRect.height
-
-            Label {
-                width: parent.width
-                text: materialProperties.name
-                font: UM.Theme.getFont("large_bold")
-                elide: Text.ElideRight
-            }
-        }
-
-        MaterialsView    // Material detailed information view below the title Label
-        {
-            id: materialDetailsView
-            anchors
-            {
-                left: parent.left
-                right: parent.right
-                top: profileName.bottom
-                topMargin: UM.Theme.getSize("default_margin").height
-                bottom: parent.bottom
-            }
-
-            editingEnabled: currentItem != null && !currentItem.is_read_only
-            onResetSelectedMaterial: base.resetExpandedActiveMaterial()
-
-            properties: materialProperties
-            containerId: currentItem != null ? currentItem.id : ""
-            currentMaterialNode: currentItem.container_node
-        }
-
-        QtObject
-        {
-            id: materialProperties
-
-            property string guid: "00000000-0000-0000-0000-000000000000"
-            property string container_id: "Unknown";
-            property string name: "Unknown";
-            property string profile_type: "Unknown";
-            property string brand: "Unknown";
-            property string material: "Unknown";  // This needs to be named as "material" to be consistent with
-                                                    // the material container's metadata entry
-
-            property string color_name: "Yellow";
-            property color color_code: "yellow";
-
-            property real density: 0.0;
-            property real diameter: 0.0;
-            property string approximate_diameter: "0";
-
-            property real spool_cost: 0.0;
-            property real spool_weight: 0.0;
-            property real spool_length: 0.0;
-            property real cost_per_meter: 0.0;
-
-            property string description: "";
-            property string adhesion_info: "";
-        }
     }
-}
+
+    QtObject
+    {
+        id: materialProperties
+
+        property string guid: "00000000-0000-0000-0000-000000000000"
+        property string container_id: "Unknown";
+        property string name: "Unknown";
+        property string profile_type: "Unknown";
+        property string brand: "Unknown";
+        property string material: "Unknown";  // This needs to be named as "material" to be consistent with
+                                                // the material container's metadata entry
+
+        property string color_name: "Yellow";
+        property color color_code: "yellow";
+
+        property real density: 0.0;
+        property real diameter: 0.0;
+        property string approximate_diameter: "0";
+
+        property real spool_cost: 0.0;
+        property real spool_weight: 0.0;
+        property real spool_length: 0.0;
+        property real cost_per_meter: 0.0;
+
+        property string description: "";
+        property string adhesion_info: "";
+    }
+}

resources/qml/Preferences/Materials/MaterialsList.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2019 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Uranium is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
@@ -14,7 +14,6 @@ Item
     height: childrenRect.height
 
     // Children
-    UM.I18nCatalog { id: catalog; name: "cura"; }
     Cura.MaterialBrandsModel
     {
         id: materialsModel

resources/qml/Preferences/Materials/MaterialsPage.qml

@@ -3,13 +3,12 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.3
 import QtQuick.Dialogs 1.2
 
 import UM 1.5 as UM
 import Cura 1.5 as Cura
 
-Item
+UM.ManagementPage
 {
     id: base
 
@@ -36,12 +35,6 @@ Item
     property var extruder_position: Cura.ExtruderManager.activeExtruderIndex
     property var active_root_material_id: Cura.MachineManager.currentRootMaterialId[extruder_position]
 
-    UM.I18nCatalog
-    {
-        id: catalog
-        name: "cura"
-    }
-
     function resetExpandedActiveMaterial()
     {
         materialListView.expandActiveMaterial(active_root_material_id)
@@ -74,57 +67,15 @@ Item
         }
     }
 
-    // Main layout
+    title: catalog.i18nc("@title:tab", "Materials")
-    Label
+    detailsPlaneCaption: currentItem ? currentItem.name: ""
-    {
+    scrollviewCaption: catalog.i18nc("@label", "Materials compatible with active printer:") + `<br /><b>${Cura.MachineManager.activeMachine.name}</b>`
-        id: titleLabel
-        anchors
-        {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-            margins: 5 * screenScaleFactor
-        }
-        font.pointSize: 18
-        text: catalog.i18nc("@title:tab", "Materials")
-    }
 
-    // Button Row
+    buttons: [
-    Row
+        Cura.SecondaryButton
-    {
-        id: buttonRow
-        anchors
-        {
-            left: parent.left
-            right: parent.right
-            top: titleLabel.bottom
-        }
-        height: childrenRect.height
-
-        // Activate button
-        Button
-        {
-            id: activateMenuButton
-            text: catalog.i18nc("@action:button", "Activate")
-            icon.name: "list-activate"
-            enabled: !isCurrentItemActivated && Cura.MachineManager.activeMachine.hasMaterials
-            onClicked:
-            {
-                forceActiveFocus()
-
-                // Set the current material as the one to be activated (needed to force the UI update)
-                base.newRootMaterialIdToSwitchTo = base.currentItem.root_material_id
-                const extruder_position = Cura.ExtruderManager.activeExtruderIndex
-                Cura.MachineManager.setMaterial(extruder_position, base.currentItem.container_node)
-            }
-        }
-
-        // Create button
-        Button
         {
             id: createMenuButton
-            text: catalog.i18nc("@action:button", "Create")
+            text: catalog.i18nc("@action:button", "Create new")
-            icon.name: "list-add"
             enabled: Cura.MachineManager.activeMachine.hasMaterials
             onClicked:
             {
@@ -132,72 +83,22 @@ Item
                 base.newRootMaterialIdToSwitchTo = base.materialManagementModel.createMaterial();
                 base.toActivateNewMaterial = true;
             }
-        }
+        },
-
+        Cura.SecondaryButton
-        // Duplicate button
-        Button
-        {
-            id: duplicateMenuButton
-            text: catalog.i18nc("@action:button", "Duplicate");
-            icon.name: "list-add"
-            enabled: base.hasCurrentItem
-            onClicked:
-            {
-                forceActiveFocus();
-                base.newRootMaterialIdToSwitchTo = base.materialManagementModel.duplicateMaterial(base.currentItem.container_node);
-                base.toActivateNewMaterial = true;
-            }
-        }
-
-        // Remove button
-        Button
-        {
-            id: removeMenuButton
-            text: catalog.i18nc("@action:button", "Remove")
-            icon.name: "list-remove"
-            enabled: base.hasCurrentItem && !base.currentItem.is_read_only && !base.isCurrentItemActivated && base.materialManagementModel.canMaterialBeRemoved(base.currentItem.container_node)
-
-            onClicked:
-            {
-                forceActiveFocus();
-                confirmRemoveMaterialDialog.open();
-            }
-        }
-
-        // Import button
-        Button
         {
             id: importMenuButton
             text: catalog.i18nc("@action:button", "Import")
-            icon.name: "document-import"
             onClicked:
             {
                 forceActiveFocus();
                 importMaterialDialog.open();
             }
             enabled: Cura.MachineManager.activeMachine.hasMaterials
-        }
+        },
-
+        Cura.SecondaryButton
-        // Export button
-        Button
-        {
-            id: exportMenuButton
-            text: catalog.i18nc("@action:button", "Export")
-            icon.name: "document-export"
-            onClicked:
-            {
-                forceActiveFocus();
-                exportMaterialDialog.open();
-            }
-            enabled: base.hasCurrentItem
-        }
-
-        //Sync button.
-        Button
         {
             id: syncMaterialsButton
-            text: catalog.i18nc("@action:button Sending materials to printers", "Sync with Printers")
+            text: catalog.i18nc("@action:button", "Sync with Printers")
-            icon.name: "sync-synchronizing"
             onClicked:
             {
                 forceActiveFocus();
@@ -205,181 +106,177 @@ Item
             }
             visible: Cura.MachineManager.activeMachine.supportsMaterialExport
         }
-    }
+    ]
 
-    Item
+    onHamburgeButtonClicked: {
+        const hamburerButtonHeight = hamburger_button.height;
+        menu.popup(hamburger_button, -menu.width + hamburger_button.width / 2, hamburger_button.height);
+        // for some reason the height of the hamburger changes when opening the popup
+        // reset height to initial heigt
+        hamburger_button.height = hamburerButtonHeight;
+    }
+    listContent: ScrollView
     {
-        id: contentsItem
+        id: materialScrollView
-        anchors
+        anchors.fill: parent
-        {
+        anchors.margins: parent.border.width
-            top: titleLabel.bottom
+        width: (parent.width * 0.4) | 0
-            left: parent.left
+
-            right: parent.right
-            bottom: parent.bottom
-            margins: 5 * screenScaleFactor
-            bottomMargin: 0
-        }
         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.width - materialScrollBar.width
+        }
+    }
+
+    MaterialsDetailsPanel
+    {
+        id: materialDetailsPanel
+        anchors.fill: parent
     }
 
     Item
     {
-        anchors
+        Cura.Menu
         {
-            top: buttonRow.bottom
+            id: menu
-            topMargin: UM.Theme.getSize("default_margin").height
+            Cura.MenuItem
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-
-        SystemPalette { id: palette }
-
-        Label
-        {
-            id: captionLabel
-            anchors
             {
-                top: parent.top
+                id: activateMenuButton
-                left: parent.left
+                text: catalog.i18nc("@action:button", "Activate")
-            }
+                onClicked:
-            visible: text != ""
-            text:
-            {
-                var caption = catalog.i18nc("@action:label", "Printer") + ": " + Cura.MachineManager.activeMachine.name;
-                if (Cura.MachineManager.activeMachine.hasVariants)
                 {
-                    var activeVariantName = ""
+                    forceActiveFocus()
-                    if(Cura.MachineManager.activeStack != null)
-                    {
-                        activeVariantName = Cura.MachineManager.activeStack.variant.name
-                    }
-                    caption += ", " + Cura.MachineManager.activeDefinitionVariantsName + ": " + activeVariantName;
-                }
-                return caption;
-            }
-            width: materialScrollView.width
-            elide: Text.ElideRight
-        }
 
-        ScrollView
+                    // Set the current material as the one to be activated (needed to force the UI update)
-        {
+                    base.newRootMaterialIdToSwitchTo = base.currentItem.root_material_id
-            id: materialScrollView
+                    const extruder_position = Cura.ExtruderManager.activeExtruderIndex
-            anchors
+                    Cura.MachineManager.setMaterial(extruder_position, base.currentItem.container_node)
-            {
-                top: captionLabel.visible ? captionLabel.bottom : parent.top
-                topMargin: captionLabel.visible ? UM.Theme.getSize("default_margin").height : 0
-                bottom: parent.bottom
-                left: parent.left
-            }
-            width: (parent.width * 0.4) | 0
-
-            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!
+            Cura.MenuItem
-
-            MaterialsList
             {
-                id: materialListView
+                id: duplicateMenuButton
-                width: materialScrollView.width - materialScrollBar.width
+                text: catalog.i18nc("@action:button", "Duplicate");
+                enabled: base.hasCurrentItem
+                onClicked:
+                {
+                    forceActiveFocus();
+                    base.newRootMaterialIdToSwitchTo = base.materialManagementModel.duplicateMaterial(base.currentItem.container_node);
+                    base.toActivateNewMaterial = true;
+                }
+            }
+            Cura.MenuItem
+            {
+                id: removeMenuButton
+                text: catalog.i18nc("@action:button", "Remove")
+                enabled: base.hasCurrentItem && !base.currentItem.is_read_only && !base.isCurrentItemActivated && base.materialManagementModel.canMaterialBeRemoved(base.currentItem.container_node)
+
+                onClicked:
+                {
+                    forceActiveFocus();
+                    confirmRemoveMaterialDialog.open();
+                }
+            }
+            Cura.MenuItem
+            {
+                id: exportMenuButton
+                text: catalog.i18nc("@action:button", "Export")
+                onClicked:
+                {
+                    forceActiveFocus();
+                    exportMaterialDialog.open();
+                }
+                enabled: base.hasCurrentItem
             }
         }
 
-        MaterialsDetailsPanel
+        // Dialogs
+        Cura.MessageDialog
         {
-            id: materialDetailsPanel
+            id: confirmRemoveMaterialDialog
-            anchors
+            title: catalog.i18nc("@title:window", "Confirm Remove")
+            property string materialName: base.currentItem !== null ? base.currentItem.name : ""
+
+            text: catalog.i18nc("@label (%1 is object name)", "Are you sure you wish to remove %1? This cannot be undone!").arg(materialName)
+            standardButtons: Dialog.Yes | Dialog.No
+            onAccepted:
             {
-                left: materialScrollView.right
+                // Set the active material as the fallback. It will be selected when the current material is deleted
-                leftMargin: UM.Theme.getSize("default_margin").width
+                base.newRootMaterialIdToSwitchTo = base.active_root_material_id
-                top: parent.top
+                base.materialManagementModel.removeMaterial(base.currentItem.container_node);
-                bottom: parent.bottom
-                right: parent.right
             }
         }
-    }
 
-    // Dialogs
+        FileDialog
-    Cura.MessageDialog
-    {
-        id: confirmRemoveMaterialDialog
-        title: catalog.i18nc("@title:window", "Confirm Remove")
-        property string materialName: base.currentItem !== null ? base.currentItem.name : ""
-
-        text: catalog.i18nc("@label (%1 is object name)", "Are you sure you wish to remove %1? This cannot be undone!").arg(materialName)
-        standardButtons: Dialog.Yes | Dialog.No
-        onAccepted:
         {
-            // Set the active material as the fallback. It will be selected when the current material is deleted
+            id: importMaterialDialog
-            base.newRootMaterialIdToSwitchTo = base.active_root_material_id
+            title: catalog.i18nc("@title:window", "Import Material")
-            base.materialManagementModel.removeMaterial(base.currentItem.container_node);
+            selectExisting: true
-        }
+            nameFilters: Cura.ContainerManager.getContainerNameFilters("material")
-    }
+            folder: CuraApplication.getDefaultPath("dialog_material_path")
-
+            onAccepted:
-    FileDialog
-    {
-        id: importMaterialDialog
-        title: catalog.i18nc("@title:window", "Import Material")
-        selectExisting: true
-        nameFilters: Cura.ContainerManager.getContainerNameFilters("material")
-        folder: CuraApplication.getDefaultPath("dialog_material_path")
-        onAccepted:
-        {
-            const result = Cura.ContainerManager.importMaterialContainer(fileUrl);
-
-            const messageDialog = Qt.createQmlObject("import Cura 1.5 as Cura; Cura.MessageDialog { onClosed: destroy() }", base);
-            messageDialog.standardButtons = Dialog.Ok;
-            messageDialog.title = catalog.i18nc("@title:window", "Import Material");
-            switch (result.status)
             {
-                case "success":
+                const result = Cura.ContainerManager.importMaterialContainer(fileUrl);
-                    messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tag <filename>!", "Successfully imported material <filename>%1</filename>").arg(fileUrl);
+
-                    break;
+                const messageDialog = Qt.createQmlObject("import Cura 1.5 as Cura; Cura.MessageDialog { onClosed: destroy() }", base);
-                default:
+                messageDialog.standardButtons = Dialog.Ok;
-                    messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tags <filename> or <message>!", "Could not import material <filename>%1</filename>: <message>%2</message>").arg(fileUrl).arg(result.message);
+                messageDialog.title = catalog.i18nc("@title:window", "Import Material");
-                    break;
+                switch (result.status)
+                {
+                    case "success":
+                        messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tag <filename>!", "Successfully imported material <filename>%1</filename>").arg(fileUrl);
+                        break;
+                    default:
+                        messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tags <filename> or <message>!", "Could not import material <filename>%1</filename>: <message>%2</message>").arg(fileUrl).arg(result.message);
+                        break;
+                }
+                messageDialog.open();
+                CuraApplication.setDefaultPath("dialog_material_path", folder);
             }
-            messageDialog.open();
-            CuraApplication.setDefaultPath("dialog_material_path", folder);
         }
-    }
 
-    FileDialog
+        FileDialog
-    {
-        id: exportMaterialDialog
-        title: catalog.i18nc("@title:window", "Export Material")
-        selectExisting: false
-        nameFilters: Cura.ContainerManager.getContainerNameFilters("material")
-        folder: CuraApplication.getDefaultPath("dialog_material_path")
-        onAccepted:
         {
-            const result = Cura.ContainerManager.exportContainer(base.currentItem.root_material_id, selectedNameFilter, fileUrl);
+            id: exportMaterialDialog
-
+            title: catalog.i18nc("@title:window", "Export Material")
-            const messageDialog = Qt.createQmlObject("import Cura 1.5 as Cura; Cura.MessageDialog { onClosed: destroy() }", base);
+            selectExisting: false
-            messageDialog.title = catalog.i18nc("@title:window", "Export Material");
+            nameFilters: Cura.ContainerManager.getContainerNameFilters("material")
-            messageDialog.standardButtons = Dialog.Ok;
+            folder: CuraApplication.getDefaultPath("dialog_material_path")
-            switch (result.status)
+            onAccepted:
             {
-                case "error":
+                const result = Cura.ContainerManager.exportContainer(base.currentItem.root_material_id, selectedNameFilter, fileUrl);
-                    messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tags <filename> and <message>!", "Failed to export material to <filename>%1</filename>: <message>%2</message>").arg(fileUrl).arg(result.message);
-                    break;
-                case "success":
-                    messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tag <filename>!", "Successfully exported material to <filename>%1</filename>").arg(result.path);
-                    break;
-            }
-            messageDialog.open();
 
-            CuraApplication.setDefaultPath("dialog_material_path", folder);
+                const messageDialog = Qt.createQmlObject("import Cura 1.5 as Cura; Cura.MessageDialog { onClosed: destroy() }", base);
+                messageDialog.title = catalog.i18nc("@title:window", "Export Material");
+                messageDialog.standardButtons = Dialog.Ok;
+                switch (result.status)
+                {
+                    case "error":
+                        messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tags <filename> and <message>!", "Failed to export material to <filename>%1</filename>: <message>%2</message>").arg(fileUrl).arg(result.message);
+                        break;
+                    case "success":
+                        messageDialog.text = catalog.i18nc("@info:status Don't translate the XML tag <filename>!", "Successfully exported material to <filename>%1</filename>").arg(result.path);
+                        break;
+                }
+                messageDialog.open();
+
+                CuraApplication.setDefaultPath("dialog_material_path", folder);
+            }
         }
     }
 }

resources/qml/Preferences/Materials/MaterialsSlot.qml

@@ -5,119 +5,132 @@ import QtQuick 2.7
 import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.3
 
-import UM 1.2 as UM
+import UM 1.5 as UM
-import Cura 1.0 as Cura
+import Cura 1.5 as Cura
 
 // A single material row, typically used in a MaterialsBrandSection
 
 Rectangle
 {
     id: materialSlot
-    property var material: null
-    property var hovered: false
-    property var is_favorite: material != null && material.is_favorite
 
-    height: UM.Theme.getSize("favorites_row").height
+    property var material: null
+    property bool hovered: false
+
+    height: UM.Theme.getSize("preferences_page_list_item").height
     width: parent.width
-    //color: material != null ? (base.currentItem.root_material_id == material.root_material_id ? UM.Theme.getColor("favorites_row_selected") : "transparent") : "transparent"
+    color: UM.Theme.getColor("main_background")
-    color:
+
-    {
+    states:
-        if(material !== null && base.currentItem !== null)
+    [
+        State
         {
-            if(base.currentItem.root_material_id === material.root_material_id)
+            name: "selected"
-            {
+            when: material !== null && base.currentItem !== null && base.currentItem.root_material_id === material.root_material_id
-                return UM.Theme.getColor("favorites_row_selected")
+            PropertyChanges { target: materialSlot; color: UM.Theme.getColor("background_3") }
-            }
+        },
+        State
+        {
+            name: "hovered"
+            when: hovered
+            PropertyChanges { target: materialSlot; color: UM.Theme.getColor("background_3") }
         }
-        return "transparent"
+    ]
-    }
+
     Rectangle
     {
         id: swatch
         color: material != null ? material.color_code : "transparent"
-        border.width: UM.Theme.getSize("default_lining").width
+        width: UM.Theme.getSize("icon_indicator").width
-        border.color: "black"
+        height: UM.Theme.getSize("icon_indicator").height
-        width: UM.Theme.getSize("favorites_button_icon").width
+        radius: width / 2
-        height: UM.Theme.getSize("favorites_button_icon").height
         anchors.verticalCenter: materialSlot.verticalCenter
         anchors.left: materialSlot.left
-        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        anchors.leftMargin: 2 * UM.Theme.getSize("default_margin").width
     }
-    Label
+    UM.Label
     {
-        text: material != null ? material.brand + " " + material.name : ""
+        id: materialLabel
+        text: material != null ? `${material.brand} ${material.name}` : ""
+        elide: Text.ElideRight
+        wrapMode: Text.NoWrap
         verticalAlignment: Text.AlignVCenter
-        height: parent.height
         anchors.left: swatch.right
+        anchors.right: favoriteButton.left
+        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
         anchors.verticalCenter: materialSlot.verticalCenter
-        anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
-        font.italic: material != null && Cura.MachineManager.currentRootMaterialId[Cura.ExtruderManager.activeExtruderIndex] == material.root_material_id
     }
-    MouseArea
+
+    UM.TooltipArea
     {
         anchors.fill: parent
+        text: material != null ? `${material.brand} ${material.name}` : ""
+        acceptedButtons: Qt.LeftButton
         onClicked:
         {
-            materialList.currentBrand = material.brand
+            materialList.currentBrand = material.brand;
-            materialList.currentType = material.brand + "_" + material.material
+            materialList.currentType = `${material.brand}_${material.material}`;
-            base.setExpandedActiveMaterial(material.root_material_id)
+            base.setExpandedActiveMaterial(material.root_material_id);
         }
         hoverEnabled: true
         onEntered: { materialSlot.hovered = true }
         onExited: { materialSlot.hovered = false }
     }
-    Button
+
+    Item
     {
-        id: favorite_button
+        id: favoriteButton
-        text: ""
+
-        implicitWidth: UM.Theme.getSize("favorites_button").width
+        states:
-        implicitHeight: UM.Theme.getSize("favorites_button").height
+        [
-        visible: materialSlot.hovered || materialSlot.is_favorite || favorite_button.hovered
+            State
-        anchors
-        {
-            right: materialSlot.right
-            verticalCenter: materialSlot.verticalCenter
-        }
-        onClicked:
-        {
-            if (materialSlot.is_favorite)
             {
-                CuraApplication.getMaterialManagementModel().removeFavorite(material.root_material_id)
+                name: "favorite"
-            }
+                when: material !== null && material.is_favorite
-            else
+                PropertyChanges { target: favoriteIndicator; source: UM.Theme.getIcon("StarFilled");}
+                PropertyChanges { target: favoriteButton; visible: true }
+            },
+            State
             {
-                CuraApplication.getMaterialManagementModel().addFavorite(material.root_material_id)
+                name: "hovered"
+                when: hovered
+                PropertyChanges { target: favoriteButton; visible: true }
             }
-        }
+        ]
+
+        implicitHeight: parent.height
+        implicitWidth: height
+        anchors.right: materialSlot.right
+        visible: false
 
         UM.RecolorImage
         {
-            anchors
+            id: favoriteIndicator
+            anchors.centerIn: parent
+            width: UM.Theme.getSize("small_button_icon").width
+            height: UM.Theme.getSize("small_button_icon").height
+            color: UM.Theme.getColor("primary")
+            source: UM.Theme.getIcon("Star")
+        }
+
+        MouseArea
+        {
+            anchors.fill: parent
+            onClicked:
             {
-                verticalCenter: favorite_button.verticalCenter
+                if (material !== null)
-                horizontalCenter: favorite_button.horizontalCenter
-            }
-            width: UM.Theme.getSize("favorites_button_icon").width
-            height: UM.Theme.getSize("favorites_button_icon").height
-            color:
-            {
-                if (favorite_button.hovered)
                 {
-                    return UM.Theme.getColor("primary_hover")
+                    if (material.is_favorite)
-                }
-                else
-                {
-                    if (materialSlot.is_favorite)
                     {
-                        return UM.Theme.getColor("primary")
+                        CuraApplication.getMaterialManagementModel().removeFavorite(material.root_material_id)
                     }
                     else
                     {
-                        UM.Theme.getColor("text_inactive")
+                        CuraApplication.getMaterialManagementModel().addFavorite(material.root_material_id)
                     }
                 }
             }
-            source: materialSlot.is_favorite ? UM.Theme.getIcon("StarFilled") : UM.Theme.getIcon("Star")
         }
     }
 }

resources/qml/Preferences/Materials/MaterialsTypeSection.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2018 Ultimaker B.V.
+// Copyright (c) 2022 Ultimaker B.V.
 // Uranium is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
@@ -8,106 +8,46 @@ import QtQuick.Layouts 1.3
 import UM 1.5 as UM
 import Cura 1.0 as Cura
 
-Item
+Column
 {
     id: material_type_section
-    property var materialType
+    property var materialType: null
+    property string materialBrand: materialType !== null ? materialType.brand : ""
+    property string materialName: materialType !== null ? materialType.name : ""
+    property bool expanded: materialList.expandedTypes.indexOf(`${materialBrand}_${materialName}`) !== -1
+    property var colorsModel: materialType !== null ? materialType.colors : null
+    property alias indented: categoryButton.indented
+    width: parent.width
 
-    property string materialBrand: materialType != null ? materialType.brand : ""
+    Cura.CategoryButton
-    property string materialName: materialType != null ? materialType.name : ""
-    property var expanded: materialList.expandedTypes.indexOf(materialBrand + "_" + materialName) > -1
-    property var colorsModel: materialType != null ? materialType.colors: null
-    height: childrenRect.height
-    width: parent ? parent.width :undefined
-    anchors.left: parent ? parent.left : undefined
-    Rectangle
     {
-        id: material_type_header_background
+        id: categoryButton
-        color:
+        width: parent.width
+        height: UM.Theme.getSize("preferences_page_list_item").height
+        labelText: materialName
+        labelFont: UM.Theme.getFont("default")
+        expanded: material_type_section.expanded
+        onClicked:
         {
-            if(!expanded && materialBrand + "_" + materialName == materialList.currentType)
+            const identifier = `${materialBrand}_${materialName}`;
+            const i = materialList.expandedTypes.indexOf(identifier);
+            if (i !== -1)
             {
-                return UM.Theme.getColor("favorites_row_selected")
+                materialList.expandedTypes.splice(i, 1); // remove
             }
             else
             {
-                return "transparent"
+                materialList.expandedTypes.push(identifier); // add
-            }
-        }
-        width: parent.width
-        height: material_type_header.height
-    }
-    Rectangle
-    {
-        id: material_type_header_border
-        color: UM.Theme.getColor("favorites_header_bar")
-        anchors.bottom: material_type_header.bottom
-        anchors.left: material_type_header.left
-        height: UM.Theme.getSize("default_lining").height
-        width: material_type_header.width
-    }
-    Row
-    {
-        id: material_type_header
-        width: parent.width
-        leftPadding: UM.Theme.getSize("default_margin").width
-        anchors
-        {
-            left: parent ? parent.left : undefined
-        }
-        UM.Label
-        {
-            text: materialName
-            height: UM.Theme.getSize("favorites_row").height
-            width: parent.width - parent.leftPadding - UM.Theme.getSize("favorites_button").width
-            id: material_type_name
-        }
-        Item // this one causes lots of warnings
-        {
-            implicitWidth: UM.Theme.getSize("favorites_button").width
-            implicitHeight: UM.Theme.getSize("favorites_button").height
-            UM.RecolorImage {
-                anchors
-                {
-                    verticalCenter: parent ? parent.verticalCenter : undefined
-                    horizontalCenter: parent ? parent.horizontalCenter : undefined
-                }
-                width: UM.Theme.getSize("standard_arrow").width
-                height: UM.Theme.getSize("standard_arrow").height
-                color: "black"
-                source: material_type_section.expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
-            }
-
-        }
-    }
-    MouseArea // causes lots of warnings
-    {
-        anchors.fill: material_type_header
-        onPressed:
-        {
-            const identifier = materialBrand + "_" + materialName;
-            const i = materialList.expandedTypes.indexOf(identifier)
-            if (i > -1)
-            {
-                // Remove it
-                materialList.expandedTypes.splice(i, 1)
-                material_type_section.expanded = false
-            }
-            else
-            {
-                // Add it
-                materialList.expandedTypes.push(identifier)
-                material_type_section.expanded = true
             }
             UM.Preferences.setValue("cura/expanded_types", materialList.expandedTypes.join(";"));
         }
     }
+
     Column
     {
-        height: material_type_section.expanded ? childrenRect.height : 0
         visible: material_type_section.expanded
         width: parent.width
-        anchors.top: material_type_header.bottom
+
         Repeater
         {
             model: colorsModel
@@ -128,7 +68,7 @@ Item
                 return;
             }
 
-            expanded = materialList.expandedTypes.indexOf(materialBrand + "_" + materialName) > -1
+            material_type_section.expanded = materialList.expandedTypes.indexOf(`${materialBrand}_${materialName}`) !== -1;
         }
     }
 }

resources/qml/Preferences/ProfilesPage.qml

@@ -46,19 +46,6 @@ UM.ManagementPage
     property string newQualityNameToSelect: ""
     property bool toActivateNewQuality: false
 
-    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
-
-    isActiveModelFunction: function(model, id) {
-        if (model.is_read_only)
-        {
-            return (model.name == Cura.MachineManager.activeQualityOrQualityChangesName) && (model.intent_category == Cura.MachineManager.activeIntentCategory);
-        }
-        else
-        {
-            return model.name == Cura.MachineManager.activeQualityOrQualityChangesName;
-        }
-    }
-
     onCreateProfile:
     {
         createQualityDialog.object = Cura.ContainerManager.makeUniqueName(Cura.MachineManager.activeQualityOrQualityChangesName);
@@ -67,10 +54,18 @@ UM.ManagementPage
     }
 
     title: catalog.i18nc("@title:tab", "Profiles")
+    detailsPlaneCaption: base.currentItemDisplayName
     scrollviewCaption: catalog.i18nc("@label", "Profiles compatible with active printer:") + "<br><b>" + Cura.MachineManager.activeMachine.name + "</b>"
 
     hamburgerButtonVisible: hasCurrentItem
+    onHamburgeButtonClicked: {
+        const hamburerButtonHeight = hamburger_button.height;
+        menu.popup(hamburger_button, -menu.width + hamburger_button.width / 2, hamburger_button.height);
 
+        // for some reason the height of the hamburger changes when opening the popup
+        // reset height to initial heigt
+        hamburger_button.height = hamburerButtonHeight;
+    }
     sectionRole: "section_name"
 
     model: qualityManagementModel
@@ -97,6 +92,120 @@ UM.ManagementPage
         }
     ]
 
+    Column
+    {
+        id: detailsPanelHeaderColumn
+        anchors
+        {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+
+        spacing: UM.Theme.getSize("default_margin").height
+        visible: base.currentItem != null
+
+        UM.Label
+        {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            text: catalog.i18nc("@action:label", "Some settings from current profile were overwritten.")
+            visible: currentSettingsActions.visible
+        }
+
+        Flow
+        {
+            id: currentSettingsActions
+            width: parent.width
+
+            visible: base.hasCurrentItem && base.currentItem.name == Cura.MachineManager.activeQualityOrQualityChangesName && base.currentItem.intent_category == Cura.MachineManager.activeIntentCategory
+
+            spacing: UM.Theme.getSize("default_margin").width
+
+            Cura.SecondaryButton
+            {
+                text: catalog.i18nc("@action:button", "Update profile.")
+                enabled: Cura.MachineManager.hasUserSettings && objectList.currentIndex && !objectList.currentIndex.is_read_only
+                onClicked: Cura.ContainerManager.updateQualityChanges()
+                tooltip: catalog.i18nc("@action:tooltip", "Update profile with current settings/overrides")
+            }
+
+            Cura.SecondaryButton
+            {
+                text: catalog.i18nc("@action:button", "Discard current changes")
+                enabled: Cura.MachineManager.hasUserSettings
+                onClicked: Cura.ContainerManager.clearUserContainers()
+            }
+        }
+
+        UM.Label
+        {
+            id: defaultsMessage
+            visible: false
+            text: catalog.i18nc("@action:label", "This profile uses the defaults specified by the printer, so it has no settings/overrides in the list below.")
+            width: parent.width
+        }
+        UM.Label
+        {
+            id: noCurrentSettingsMessage
+            visible: base.isCurrentItemActivated && !Cura.MachineManager.hasUserSettings
+            text: catalog.i18nc("@action:label", "Your current settings match the selected profile.")
+            width: parent.width
+        }
+
+        UM.TabRow
+        {
+            id: profileExtruderTabs
+            // One extra tab for the global settings.
+            UM.TabRowButton
+            {
+                text: catalog.i18nc("@title:tab", "Global Settings")
+            }
+
+            Repeater
+            {
+                model: base.extrudersModel
+
+                UM.TabRowButton
+                {
+                    text: model.name
+                }
+            }
+        }
+    }
+
+    Rectangle
+    {
+        color: UM.Theme.getColor("main_background")
+        anchors
+        {
+            top: detailsPanelHeaderColumn.bottom
+            topMargin: -UM.Theme.getSize("default_lining").width
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("thick_lining")
+        visible: base.hasCurrentItem
+    }
+
+    Cura.ProfileOverview
+    {
+        anchors
+        {
+            top: detailsPanelHeaderColumn.bottom
+            margins: UM.Theme.getSize("default_margin").height
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+
+        visible: detailsPanelHeaderColumn.visible
+        qualityItem: base.currentItem
+        extruderPosition: profileExtruderTabs.currentIndex - 1
+    }
+
     Item
     {
         id: content_item
@@ -305,126 +414,5 @@ UM.ManagementPage
                 CuraApplication.setDefaultPath("dialog_profile_path", folder);
             }
         }
-
-        Column
-        {
-            id: detailsPanelHeaderColumn
-            anchors
-            {
-                left: parent.left
-                right: parent.right
-                top: parent.top
-                topMargin: UM.Theme.getSize("narrow_margin").height
-            }
-
-            spacing: UM.Theme.getSize("default_margin").height
-            visible: base.currentItem != null
-            UM.Label
-            {
-                anchors.left: parent.left
-                anchors.right: parent.right
-                text: base.currentItemDisplayName
-                font: UM.Theme.getFont("large_bold")
-                elide: Text.ElideRight
-            }
-            UM.Label
-            {
-                anchors.left: parent.left
-                anchors.right: parent.right
-                text: catalog.i18nc("@action:label", "Some settings from current profile were overwritten.")
-                visible: currentSettingsActions.visible
-            }
-
-            Flow
-            {
-                id: currentSettingsActions
-                width: parent.width
-
-                visible: base.hasCurrentItem && base.currentItem.name == Cura.MachineManager.activeQualityOrQualityChangesName && base.currentItem.intent_category == Cura.MachineManager.activeIntentCategory
-                spacing: UM.Theme.getSize("default_margin").width
-                Cura.SecondaryButton
-                {
-                    text: catalog.i18nc("@action:button", "Update profile")
-                    enabled: !Cura.MachineManager.stacksHaveErrors && Cura.MachineManager.hasUserSettings && Cura.MachineManager.activeQualityChangesGroup != null
-                    onClicked: Cura.ContainerManager.updateQualityChanges()
-                    tooltip: catalog.i18nc("@action:tooltip", "Update profile with current settings/overrides")
-                }
-
-                Cura.SecondaryButton
-                {
-                    text: catalog.i18nc("@action:button", "Discard current changes")
-                    enabled: Cura.MachineManager.hasUserSettings
-                    onClicked: Cura.ContainerManager.clearUserContainers()
-                }
-            }
-
-            UM.Label
-            {
-                id: defaultsMessage
-                visible: false
-                text: catalog.i18nc("@action:label", "This profile uses the defaults specified by the printer, so it has no settings/overrides in the list below.")
-                width: parent.width
-            }
-            UM.Label
-            {
-                id: noCurrentSettingsMessage
-                visible: base.isCurrentItemActivated && !Cura.MachineManager.hasUserSettings
-                text: catalog.i18nc("@action:label", "Your current settings match the selected profile.")
-                width: parent.width
-            }
-
-            UM.TabRow
-            {
-                id: profileExtruderTabs
-
-                // One extra tab for the global settings.
-                UM.TabRowButton
-                {
-                    text: catalog.i18nc("@title:tab", "Global Settings")
-                }
-
-                Repeater
-                {
-                    model: base.extrudersModel
-
-                    UM.TabRowButton
-                    {
-                        text: model.name
-                    }
-                }
-            }
-        }
-
-        Rectangle
-        {
-            color: UM.Theme.getColor("main_background")
-            anchors
-            {
-                top: detailsPanelHeaderColumn.bottom
-                topMargin: -UM.Theme.getSize("default_lining").width
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-            border.width: UM.Theme.getSize("default_lining").width
-            border.color: UM.Theme.getColor("thick_lining")
-            visible: base.hasCurrentItem
-        }
-
-        Cura.ProfileOverview
-        {
-            anchors
-            {
-                top: detailsPanelHeaderColumn.bottom
-                margins: UM.Theme.getSize("default_margin").height
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-
-            visible: detailsPanelHeaderColumn.visible
-            qualityItem: base.currentItem
-            extruderPosition: profileExtruderTabs.currentIndex - 1
-        }
     }
 }

resources/qml/Preferences/ReadOnlyTextArea.qml

@@ -23,13 +23,10 @@ ScrollView
         enabled: !base.readOnly
         selectByMouse: true
 
-        background: Rectangle
+        background: UM.UnderlineBackground { id: backgroundRectangle }
-        {
-            radius: UM.Theme.getSize("setting_control_radius").width
-            color: textArea.enabled ? UM.Theme.getColor("setting_control") : UM.Theme.getColor("setting_control_disabled")
-        }
 
         color: UM.Theme.getColor("text")
+        selectionColor: UM.Theme.getColor("text_selection")
         font: UM.Theme.getFont("default")
 
         Keys.onReturnPressed:  base.editingFinished()

resources/themes/cura-light/theme.json

@@ -431,8 +431,6 @@
         "layerview_nozzle": [224, 192, 16, 64],
         "layerview_starts": [255, 255, 255, 255],
 
-        "favorites_header_bar": [245, 245, 245, 255],
-        "favorites_row_selected": [196, 239, 255, 255],
 
         "monitor_printer_family_tag": [228, 228, 242, 255],
         "monitor_text_disabled": [238, 238, 238, 255],
@@ -562,10 +560,6 @@
 
         "context_menu": [20, 2],
 
-        "favorites_row": [2, 2],
-        "favorites_button": [2, 2],
-        "favorites_button_icon": [1.2, 1.2],
-
         "icon_indicator": [1, 1],
 
         "printer_status_icon": [1.0, 1.0],