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,33 +51,10 @@ UM.ManagementPage
         }
     ]
 
-    Item
-    {
-        id: content_item
-        visible: base.currentItem != null
-        anchors.fill: parent
-
-
-        UM.Label
-        {
-            id: machineName
-            text: base.currentItem && base.currentItem.name ? base.currentItem.name : ""
-            font: UM.Theme.getFont("large_bold")
-            width: parent.width
-            elide: Text.ElideRight
-        }
-
     Flow
     {
-            id: machineActions
+        visible: base.currentItem != null && currentItem && currentItem.id == Cura.MachineManager.activeMachine.id
-            visible: currentItem && currentItem.id == Cura.MachineManager.activeMachine.id
+        anchors.fill: parent
-            anchors
-            {
-                left: parent.left
-                right: parent.right
-                top: machineName.bottom
-                topMargin: UM.Theme.getSize("default_margin").height
-            }
         spacing: UM.Theme.getSize("default_margin").height
 
         Repeater
@@ -97,6 +82,8 @@ UM.ManagementPage
         }
     }
 
+    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
+    width: parent.width
 
-    height: childrenRect.height
+    Cura.CategoryButton
+    {
         width: parent.width
-    Rectangle
+        labelText: sectionName
+        height: UM.Theme.getSize("preferences_page_list_item").height
+        labelFont: UM.Theme.getFont("default_bold")
+        expanded: brand_section.expanded
+        onClicked:
         {
-        id: brand_header_background
+            const i = materialList.expandedBrands.indexOf(sectionName);
-        color:
+            if (i !== -1)
             {
-            if(!expanded && sectionName == materialList.currentBrand)
+                materialList.expandedBrands.splice(i, 1); // remove
-            {
-                return UM.Theme.getColor("favorites_row_selected")
             }
             else
             {
-                return UM.Theme.getColor("favorites_header_bar")
+                materialList.expandedBrands.push(sectionName); // add
-            }
-        }
-        anchors.fill: brand_header
-    }
-    Row
-    {
-        id: brand_header
-        width: parent.width
-        UM.Label
-        {
-            id: brand_name
-            text: sectionName
-            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
-                {
-                    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)
-                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,43 +50,17 @@ Item
         materialProperties.approximate_diameter = currentItem.approximate_diameter || "0"
     }
 
-    Item
+    // Material detailed information view below the title Label
-    {
+    MaterialsView
-        anchors.fill: parent
-
-        Item    // Material title Label
-        {
-            id: profileName
-
-            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
+        anchors.fill: parent
-            {
-                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
+        currentMaterialNode: currentItem != null ? currentItem.container_node: null
     }
 
     QtObject
@@ -118,4 +91,3 @@ Item
         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,73 +106,20 @@ Item
             }
             visible: Cura.MachineManager.activeMachine.supportsMaterialExport
         }
-    }
+    ]
 
-    Item
+    onHamburgeButtonClicked: {
-    {
+        const hamburerButtonHeight = hamburger_button.height;
-        id: contentsItem
+        menu.popup(hamburger_button, -menu.width + hamburger_button.width / 2, hamburger_button.height);
-        anchors
+        // for some reason the height of the hamburger changes when opening the popup
-        {
+        // reset height to initial heigt
-            top: titleLabel.bottom
+        hamburger_button.height = hamburerButtonHeight;
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            margins: 5 * screenScaleFactor
-            bottomMargin: 0
     }
-        clip: true
+    listContent: ScrollView
-    }
-
-    Item
-    {
-        anchors
-        {
-            top: buttonRow.bottom
-            topMargin: UM.Theme.getSize("default_margin").height
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-
-        SystemPalette { id: palette }
-
-        Label
-        {
-            id: captionLabel
-            anchors
-            {
-                top: parent.top
-                left: parent.left
-            }
-            visible: text != ""
-            text:
-            {
-                var caption = catalog.i18nc("@action:label", "Printer") + ": " + Cura.MachineManager.activeMachine.name;
-                if (Cura.MachineManager.activeMachine.hasVariants)
-                {
-                    var activeVariantName = ""
-                    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
     {
         id: materialScrollView
-            anchors
+        anchors.fill: parent
-            {
+        anchors.margins: parent.border.width
-                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
@@ -298,14 +146,62 @@ Item
     MaterialsDetailsPanel
     {
         id: materialDetailsPanel
-            anchors
+        anchors.fill: parent
-            {
-                left: materialScrollView.right
-                leftMargin: UM.Theme.getSize("default_margin").width
-                top: parent.top
-                bottom: parent.bottom
-                right: parent.right
     }
+
+    Item
+    {
+        Cura.Menu
+        {
+            id: menu
+            Cura.MenuItem
+            {
+                id: activateMenuButton
+                text: catalog.i18nc("@action:button", "Activate")
+                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)
+                }
+            }
+            Cura.MenuItem
+            {
+                id: duplicateMenuButton
+                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
             }
         }
 
@@ -383,3 +279,4 @@ Item
             }
         }
     }
+}

resources/qml/Preferences/Materials/MaterialsSlot.qml

@@ -5,82 +5,123 @@ 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:
+    [
+        State
         {
-        if(material !== null && base.currentItem !== null)
+            name: "selected"
+            when: material !== null && base.currentItem !== null && base.currentItem.root_material_id === material.root_material_id
+            PropertyChanges { target: materialSlot; color: UM.Theme.getColor("background_3") }
+        },
+        State
         {
-            if(base.currentItem.root_material_id === material.root_material_id)
+            name: "hovered"
-            {
+            when: hovered
-                return UM.Theme.getColor("favorites_row_selected")
+            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
+                name: "favorite"
-            verticalCenter: materialSlot.verticalCenter
+                when: material !== null && material.is_favorite
+                PropertyChanges { target: favoriteIndicator; source: UM.Theme.getIcon("StarFilled");}
+                PropertyChanges { target: favoriteButton; visible: true }
+            },
+            State
+            {
+                name: "hovered"
+                when: hovered
+                PropertyChanges { target: favoriteButton; visible: true }
             }
+        ]
+
+        implicitHeight: parent.height
+        implicitWidth: height
+        anchors.right: materialSlot.right
+        visible: false
+
+        UM.RecolorImage
+        {
+            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:
             {
-            if (materialSlot.is_favorite)
+                if (material !== null)
+                {
+                    if (material.is_favorite)
                     {
                         CuraApplication.getMaterialManagementModel().removeFavorite(material.root_material_id)
                     }
@@ -89,35 +130,7 @@ Rectangle
                         CuraApplication.getMaterialManagementModel().addFavorite(material.root_material_id)
                     }
                 }
-
-        UM.RecolorImage
-        {
-            anchors
-            {
-                verticalCenter: favorite_button.verticalCenter
-                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")
-                }
-                else
-                {
-                    if (materialSlot.is_favorite)
-                    {
-                        return UM.Theme.getColor("primary")
-                    }
-                    else
-                    {
-                        UM.Theme.getColor("text_inactive")
             }
         }
     }
-            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/Materials/MaterialsView.qml

@@ -4,12 +4,11 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.15
 import QtQuick.Dialogs 1.2
+import QtQuick.Layouts 1.3
 
 import UM 1.5 as UM
 import Cura 1.0 as Cura
 
-import ".." // Access to ReadOnlyTextArea.qml
-
 Item
 {
     id: base
@@ -19,8 +18,6 @@ Item
 
     property bool editingEnabled: false
     property string currency: UM.Preferences.getValue("cura/currency") ? UM.Preferences.getValue("cura/currency") : "€"
-    property real firstColumnWidth: (width * 0.50) | 0
-    property real secondColumnWidth: (width * 0.40) | 0
     property string containerId: ""
     property var materialPreferenceValues: UM.Preferences.getValue("cura/material_settings") ? JSON.parse(UM.Preferences.getValue("cura/material_settings")) : {}
     property var materialManagementModel: CuraApplication.getMaterialManagementModel()
@@ -67,34 +64,36 @@ Item
         }
     }
 
-    UM.TabRow
+    Rectangle
     {
-        id: pageSelectorTabRow
+        color: UM.Theme.getColor("main_background")
-        UM.TabRowButton
+
+        anchors
         {
-            text: catalog.i18nc("@title", "Information")
+            top: pageSelectorTabRow.bottom
-            property string activeView: "information" //To determine which page gets displayed.
+            topMargin: -UM.Theme.getSize("default_lining").width
-        }
+            left: parent.left
-        UM.TabRowButton
+            right: parent.right
-        {
+            bottom: parent.bottom
-            text: catalog.i18nc("@label", "Print settings")
-            property string activeView: "settings"
-        }
         }
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("border_main")
 
         ScrollView
         {
             id: informationPage
             anchors
             {
-            top: pageSelectorTabRow.bottom
+                fill: parent
-            left: parent.left
+                topMargin: UM.Theme.getSize("thin_margin").height
-            right: parent.right
+                bottomMargin: UM.Theme.getSize("thin_margin").height
-            bottom: parent.bottom
+                leftMargin: UM.Theme.getSize("thin_margin").width
+                rightMargin: UM.Theme.getSize("thin_margin").width
             }
 
             ScrollBar.vertical: UM.ScrollBar
             {
+                id: scrollBar
                 parent: informationPage
                 anchors
                 {
@@ -107,17 +106,13 @@ Item
             clip: true
             visible: pageSelectorTabRow.currentItem.activeView === "information"
 
-        property real columnWidth: (width * 0.5 - UM.Theme.getSize("default_margin").width) | 0
+            property real columnWidth: Math.floor((width - scrollBar.width - UM.Theme.getSize("narrow_margin").width) / 2)
+            property real rowHeight: UM.Theme.getSize("setting_control").height
 
-        Flow
+            Column
             {
-            id: containerGrid
+                width: informationPage.width
-
+                spacing: UM.Theme.getSize("narrow_margin").height
-            x: UM.Theme.getSize("default_margin").width
-            y: UM.Theme.getSize("default_lining").height
-
-            width: base.width
-            property real rowHeight: brandTextField.height + UM.Theme.getSize("default_lining").height
 
                 Cura.MessageDialog
                 {
@@ -143,21 +138,38 @@ Item
                     onRejected:
                     {
                         base.properties.diameter = old_diameter_value;
-                    diameterSpinBox.value = Qt.binding(function() { return base.properties.diameter })
+                        diameterTextField.valueText = Qt.binding(function() { return base.properties.diameter })
                     }
                 }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Display Name") }
+                Row
+                {
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Display Name")
+                    }
                     Cura.TextField
                     {
-                id: displayNameTextField;
+                        id: displayNameTextField
-                width: informationPage.columnWidth;
+                        width: informationPage.columnWidth
-                text: properties.name;
+                        text: properties.name
-                enabled: base.editingEnabled;
+                        enabled: base.editingEnabled
                         onEditingFinished: base.updateMaterialDisplayName(properties.name, text)
                     }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Brand") }
+                Row
+                {
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Brand")
+                    }
                     Cura.TextField
                     {
                         id: brandTextField
@@ -166,8 +178,17 @@ Item
                         enabled: base.editingEnabled
                         onEditingFinished: base.updateMaterialBrand(properties.brand, text)
                     }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Material Type") }
+                Row
+                {
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Material Type")
+                    }
                     Cura.TextField
                     {
                         id: materialTypeField
@@ -176,26 +197,43 @@ Item
                         enabled: base.editingEnabled
                         onEditingFinished: base.updateMaterialType(properties.material, text)
                     }
+                }
+
+                Row
+                {
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        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: informationPage.columnWidth
-                height:  parent.rowHeight
                         spacing: Math.round(UM.Theme.getSize("default_margin").width / 2)
 
                         // color indicator square
-                Rectangle
+                        Item
                         {
                             id: colorSelector
-                    color: properties.color_code
-
-                    width: Math.round(colorLabel.height * 0.75)
-                    height: Math.round(colorLabel.height * 0.75)
-                    border.width: UM.Theme.getSize("default_lining").height
 
                             anchors.verticalCenter: parent.verticalCenter
 
+                            width: colorSelectorBackground.width + 2 * UM.Theme.getSize("narrow_margin").width
+                            height: colorSelectorBackground.height + 2 * UM.Theme.getSize("narrow_margin").height
+
+                            Rectangle
+                            {
+                                id: colorSelectorBackground
+                                color: properties.color_code
+                                width: UM.Theme.getSize("icon_indicator").width
+                                height: UM.Theme.getSize("icon_indicator").height
+                                radius: width / 2
+                                anchors.centerIn: parent
+                            }
+
                             // open the color selection dialog on click
                             MouseArea
                             {
@@ -225,126 +263,209 @@ Item
                             onAccepted: base.setMetaDataEntry("color_code", properties.color_code, color)
                         }
                     }
-
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
-
-            Label { width: parent.width; height: parent.rowHeight; font.bold: true; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Properties") }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Density") }
-
-            Cura.SpinBox
-            {
-                enabled: base.editingEnabled
-                id: densitySpinBox
-                width: informationPage.columnWidth
-                value: properties.density
-                decimals: 2
-                suffix: " g/cm³"
-                stepSize: 0.01
-
-                onEditingFinished: base.setMetaDataEntry("properties/density", properties.density, value)
-                onValueChanged: updateCostPerMeter()
                 }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Diameter") }
+                UM.Label
-            Cura.SpinBox
                 {
-                enabled: base.editingEnabled
+                    width: parent.width
-                id: diameterSpinBox
+                    height: parent.rowHeight
-                width: informationPage.columnWidth
+                    font: UM.Theme.getFont("default_bold")
-                value: properties.diameter
+                    verticalAlignment: Qt.AlignVCenter
-                decimals: 2
+                    text: catalog.i18nc("@label", "Properties")
-                suffix: " mm"
+                }
-                stepSize: 0.01
 
-                onEditingFinished:
+                Row
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Density")
+                    }
+
+                    Cura.NumericTextFieldWithUnit
+                    {
+                        id: densityTextField
+                        enabled: base.editingEnabled
+                        valueText: properties.density
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: "g/cm³"
+                        decimals: 2
+                        maximum: 1000
+
+                        editingFinishedFunction: function()
+                        {
+                            var modified_text = valueText.replace(",", ".");
+                            base.setMetaDataEntry("properties/density", properties.density, modified_text)
+                        }
+
+                        onValueTextChanged: updateCostPerMeter()
+                    }
+                }
+
+                Row
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Diameter")
+                    }
+
+                    Cura.NumericTextFieldWithUnit
+                    {
+                        id: diameterTextField
+                        enabled: base.editingEnabled
+                        valueText: properties.diameter
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: "mm"
+                        decimals: 2
+                        maximum: 1000
+
+                        editingFinishedFunction: function()
                         {
                             // This does not use a SettingPropertyProvider, because we need to make the change to all containers
                             // which derive from the same base_file
                             var old_diameter = Cura.ContainerManager.getContainerMetaDataEntry(base.containerId, "properties/diameter");
                             var old_approximate_diameter = Cura.ContainerManager.getContainerMetaDataEntry(base.containerId, "approximate_diameter");
-                    var new_approximate_diameter = getApproximateDiameter(value);
+                            var modified_value = valueText.replace(",", ".");
+                            var new_approximate_diameter = getApproximateDiameter(modified_value);
+
                             if (new_approximate_diameter != Cura.ExtruderManager.getActiveExtruderStack().approximateMaterialDiameter)
                             {
                                 confirmDiameterChangeDialog.old_diameter_value = old_diameter;
-                        confirmDiameterChangeDialog.new_diameter_value = value;
+                                confirmDiameterChangeDialog.new_diameter_value = modified_value;
                                 confirmDiameterChangeDialog.old_approximate_diameter_value = old_approximate_diameter;
 
                                 confirmDiameterChangeDialog.open()
                             }
                             else {
-                        base.setMetaDataEntry("approximate_diameter", old_approximate_diameter, getApproximateDiameter(value).toString());
+                                base.setMetaDataEntry("approximate_diameter", old_approximate_diameter, new_approximate_diameter);
-                        base.setMetaDataEntry("properties/diameter", properties.diameter, value);
+                                base.setMetaDataEntry("properties/diameter", properties.diameter, modified_value);
                             }
                         }
-                onValueChanged: updateCostPerMeter()
-            }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament Cost") }
+                        onValueTextChanged: updateCostPerMeter()
+                    }
+                }
 
-            Cura.SpinBox
+                Row
                 {
-                id: spoolCostSpinBox
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
                         width: informationPage.columnWidth
-                value: base.getMaterialPreferenceValue(properties.guid, "spool_cost")
+                        text: catalog.i18nc("@label", "Filament Cost")
-                to: 100000000
+                    }
-                editable: true
+
-                prefix: base.currency + " "
+                    Cura.NumericTextFieldWithUnit
+                    {
+                        id: spoolCostTextField
+                        valueText: base.getMaterialPreferenceValue(properties.guid, "spool_cost")
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: base.currency
                         decimals: 2
+                        maximum: 100000000
 
-                onValueChanged:
+                        editingFinishedFunction: function()
                         {
-                    base.setMaterialPreferenceValue(properties.guid, "spool_cost", parseFloat(value))
+                            var modified_text = valueText.replace(",", ".");
-                    updateCostPerMeter()
+                            base.setMaterialPreferenceValue(properties.guid, "spool_cost", modified_text);
+                        }
+
+                        onValueTextChanged: updateCostPerMeter()
                     }
                 }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament weight") }
+                Row
-            Cura.SpinBox
                 {
-                id: spoolWeightSpinBox
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
                         width: informationPage.columnWidth
-                value: base.getMaterialPreferenceValue(properties.guid, "spool_weight", Cura.ContainerManager.getContainerMetaDataEntry(properties.container_id, "properties/weight"))
+                        text: catalog.i18nc("@label", "Filament weight")
-                stepSize: 100
+                    }
-                to: 10000
-                editable: true
-                suffix: " g"
 
-                onValueChanged:
+                    Cura.NumericTextFieldWithUnit
                     {
-                    base.setMaterialPreferenceValue(properties.guid, "spool_weight", parseFloat(value))
+                        id: spoolWeightTextField
-                    updateCostPerMeter()
+                        valueText: base.getMaterialPreferenceValue(properties.guid, "spool_weight", Cura.ContainerManager.getContainerMetaDataEntry(properties.container_id, "properties/weight"))
+                        controlWidth: informationPage.columnWidth
+                        controlHeight: informationPage.rowHeight
+                        spacing: 0
+                        unitText: " g"
+                        decimals: 0
+                        maximum: 10000
+
+                        editingFinishedFunction: function()
+                        {
+                            var modified_text = valueText.replace(",", ".")
+                            base.setMaterialPreferenceValue(properties.guid, "spool_weight", modified_text)
+                        }
+
+                        onValueTextChanged: updateCostPerMeter()
                     }
                 }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament length") }
+                Row
-            Label
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Filament length")
+                    }
+                    UM.Label
                     {
                         width: informationPage.columnWidth
                         text: "~ %1 m".arg(Math.round(base.spoolLength))
-                verticalAlignment: Qt.AlignVCenter
+                        height: informationPage.rowHeight
-                height: parent.rowHeight
+                    }
                 }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Cost per Meter") }
+                Row
-            Label
                 {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Cost per Meter")
+                    }
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
                         width: informationPage.columnWidth
                         text: "~ %1 %2/m".arg(base.costPerMeter.toFixed(2)).arg(base.currency)
-                verticalAlignment: Qt.AlignVCenter
+                    }
-                height: parent.rowHeight
                 }
 
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height; visible: unlinkMaterialButton.visible }
+                UM.Label
-            Label
                 {
-                width: 2 * informationPage.columnWidth
+                    height: parent.rowHeight
-                verticalAlignment: Qt.AlignVCenter
+                    width: informationPage.width
                     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
+                Cura.SecondaryButton
                 {
                     id: unlinkMaterialButton
                     text: catalog.i18nc("@label", "Unlink Material")
@@ -356,15 +477,17 @@ Item
                     }
                 }
 
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
+                UM.Label
-
-            Label { width: parent.width; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Description") }
-
-            ReadOnlyTextArea
                 {
-                text: properties.description;
+                    width: informationPage.width
-                width: informationPage.columnWidth * 2
+                    height: parent.rowHeight
-                height: 0.75 * informationPage.columnWidth
+                    text: catalog.i18nc("@label", "Description")
+                }
+                Cura.ReadOnlyTextArea
+                {
+                    text: properties.description
+                    width: informationPage.width - scrollBar.width
+                    height: 0.4 * informationPage.width
                     wrapMode: Text.WordWrap
 
                     readOnly: !base.editingEnabled
@@ -372,32 +495,57 @@ Item
                     onEditingFinished: base.setMetaDataEntry("description", properties.description, text)
                 }
 
-            Label { width: parent.width; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Adhesion Information") }
+                UM.Label
+                {
+                    width: informationPage.width
+                    height: parent.rowHeight
+                    text: catalog.i18nc("@label", "Adhesion Information")
+                }
 
-            ReadOnlyTextArea
+                Cura.ReadOnlyTextArea
                 {
                     text: properties.adhesion_info
-                width: 2 * informationPage.columnWidth
+                    width: informationPage.width - scrollBar.width
+                    height: 0.4 * informationPage.width
                     wrapMode: Text.WordWrap
-                height: 0.75 * informationPage.columnWidth
                     readOnly: !base.editingEnabled
 
                     onEditingFinished: base.setMetaDataEntry("adhesion_info", properties.adhesion_info, text)
                 }
-
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
             }
         }
 
         ListView
         {
+            id: settingsPage
+            visible: pageSelectorTabRow.currentItem.activeView === "settings"
+            clip: true
+
             anchors
             {
-            top: pageSelectorTabRow.bottom
+                fill: parent
-            left: parent.left
+                topMargin: UM.Theme.getSize("thin_margin").height
+                bottomMargin: UM.Theme.getSize("thin_margin").height
+                leftMargin: UM.Theme.getSize("thin_margin").width
+                rightMargin: UM.Theme.getSize("thin_margin").width
+            }
+
+            width: settingsPage.width
+            spacing: UM.Theme.getSize("narrow_margin").height
+
+            ScrollBar.vertical: UM.ScrollBar
+            {
+                id: settingScrollBar
+                parent: settingsPage
+                anchors
+                {
+                    top: parent.top
                     right: parent.right
                     bottom: parent.bottom
                 }
+            }
+
+            property real columnWidth: Math.floor((width - settingScrollBar.width - UM.Theme.getSize("narrow_margin").width) / 2)
 
             model: UM.SettingDefinitionsModel
             {
@@ -405,19 +553,21 @@ Item
                 visibilityHandler: Cura.MaterialSettingsVisibilityHandler { }
                 expanded: ["*"]
             }
-        ScrollBar.vertical: UM.ScrollBar {}
-        clip: true
-        visible: pageSelectorTabRow.currentItem.activeView === "settings"
 
             delegate: UM.TooltipArea
             {
                 width: childrenRect.width
                 height: childrenRect.height
+
+                UM.TooltipArea
+                {
+                    anchors.fill: parent
                     text: model.description
-            Label
+                }
+                UM.Label
                 {
                     id: label
-                width: base.firstColumnWidth;
+                    width: settingsPage.columnWidth
                     height: spinBox.height + UM.Theme.getSize("default_lining").height
                     text: model.label
                     elide: Text.ElideRight
@@ -446,7 +596,7 @@ Item
                         }
                         return 0;
                     }
-                width: base.secondColumnWidth
+                    width: settingsPage.columnWidth
                     suffix: " " + model.unit
                     to: 99999
                     decimals: model.unit == "mm" ? 2 : 0
@@ -477,11 +627,31 @@ Item
                 }
             }
         }
+    }
+
+    UM.TabRow
+    {
+        id: pageSelectorTabRow
+        UM.TabRowButton
+        {
+            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"
+        }
+    }
 
     function updateCostPerMeter()
     {
-        base.spoolLength = calculateSpoolLength(diameterSpinBox.value, densitySpinBox.value, spoolWeightSpinBox.value);
+        var modified_weight = spoolWeightTextField.valueText.replace(",", ".")
-        base.costPerMeter = calculateCostPerMeter(spoolCostSpinBox.value);
+        var modified_cost = spoolCostTextField.valueText.replace(",", ".")
+        var modified_diameter = diameterTextField.valueText.replace(",", ".")
+        var modified_density = densityTextField.valueText.replace(",", ".")
+        base.spoolLength = calculateSpoolLength(modified_diameter, modified_density, parseInt(modified_weight));
+        base.costPerMeter = calculateCostPerMeter(parseFloat(modified_cost));
     }
 
     function calculateSpoolLength(diameter, density, spoolWeight)

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],