Implement basic styling of material management page

CURA-8979

resources/qml/ColorDialog.qml

@@ -21,17 +21,6 @@ UM.Dialog
 
     property alias swatchGridColumns: colorSwatchGrid.columns
 
-    // In this case we would like to let the content of the dialog determine the size of the dialog
-    // however with the current implementation of the dialog this is not possible, so instead we calculate
-    // the size of the dialog ourselves.
-    minimumWidth: content.width + 4 * margin
-    minimumHeight:
-        content.height                                 // content height
-      + buttonRow.height                               // button row height
-      + 5 * margin                                     // top and bottom margin and margin between buttons and content
-    width: minimumWidth
-    height: minimumHeight
-
     property alias color: colorInput.text
     property var swatchColors: [
         "#2161AF", "#57AFB2", "#F7B32D", "#E33D4A", "#C088AD",

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,14 @@ Item
         }
     }
 
-    // Main layout
+    title: catalog.i18nc("@title:tab", "Materials")
-    Label
+    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 +82,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 +105,176 @@ Item
             }
             visible: Cura.MachineManager.activeMachine.supportsMaterialExport
         }
-    }
+    ]
 
-    Item
+    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
+
+    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
-
-    Item
-    {
-        anchors
         {
-            top: buttonRow.bottom
+            id: materialScrollBar
-            topMargin: UM.Theme.getSize("default_margin").height
+            parent: materialScrollView
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-
-        SystemPalette { id: palette }
-
-        Label
-        {
-            id: captionLabel
             anchors
             {
                 top: parent.top
-                left: parent.left
+                right: parent.right
-            }
-            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
-            {
-                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
+        }
+        contentHeight: materialListView.height //For some reason, this is not determined automatically with this ScrollView. Very weird!
 
-            clip: true
+        MaterialsList
-            ScrollBar.vertical: UM.ScrollBar
+        {
+            id: materialListView
+            width: materialScrollView.width - materialScrollBar.width
+        }
+    }
+
+
+    Item
+    {
+        id: content_item
+        anchors.fill: parent
+
+        Cura.Menu
+        {
+            id: menu
+            Cura.MenuItem
             {
-                id: materialScrollBar
+                id: activateMenuButton
-                parent: materialScrollView
+                text: catalog.i18nc("@action:button", "Activate")
-                anchors
+                onClicked:
                 {
-                    top: parent.top
+                    forceActiveFocus()
-                    right: parent.right
+
-                    bottom: parent.bottom
+                    // 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)
                 }
             }
-            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
         {
             id: materialDetailsPanel
-            anchors
+            anchors.fill: parent
+        }
+
+        // Dialogs
+        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:
             {
-                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

@@ -35,10 +35,9 @@ 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

resources/qml/Preferences/Materials/MaterialsView.qml

@@ -4,6 +4,7 @@
 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
@@ -82,398 +83,520 @@ Item
         }
     }
 
-    ScrollView
+    Rectangle
     {
-        id: informationPage
+        color: UM.Theme.getColor("main_background")
+
         anchors
         {
             top: pageSelectorTabRow.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
 
-        ScrollBar.vertical: UM.ScrollBar
+        ScrollView
         {
-            parent: informationPage
+            id: informationPage
             anchors
             {
-                top: parent.top
+                fill: parent
+                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
+            }
+
+            ScrollBar.vertical: UM.ScrollBar
+            {
+                parent: informationPage
+                anchors
+                {
+                    top: parent.top
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+            }
+            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+            clip: true
+            visible: pageSelectorTabRow.currentItem.activeView === "information"
+
+            property real columnWidth: Math.floor(width / 2 - UM.Theme.getSize("narrow_margin").width)
+            property real rowHeight: UM.Theme.getSize("setting_control").height
+
+            Column
+            {
+                width: informationPage.width
+                spacing: UM.Theme.getSize("narrow_margin").height
+
+                Cura.MessageDialog
+                {
+                    id: confirmDiameterChangeDialog
+
+                    title: catalog.i18nc("@title:window", "Confirm Diameter Change")
+                    text: catalog.i18nc("@label (%1 is a number)", "The new filament diameter is set to %1 mm, which is not compatible with the current extruder. Do you wish to continue?".arg(new_diameter_value))
+                    standardButtons: Dialog.Yes | Dialog.No
+
+                    property var new_diameter_value: null
+                    property var old_diameter_value: null
+                    property var old_approximate_diameter_value: null
+
+                    onAccepted:
+                    {
+                        base.setMetaDataEntry("approximate_diameter", old_approximate_diameter_value, getApproximateDiameter(new_diameter_value).toString());
+                        base.setMetaDataEntry("properties/diameter", properties.diameter, new_diameter_value);
+                        // CURA-6868 Make sure to update the extruder to user a diameter-compatible material.
+                        Cura.MachineManager.updateMaterialWithVariant()
+                        base.resetSelectedMaterial()
+                    }
+
+                    onRejected:
+                    {
+                        base.properties.diameter = old_diameter_value;
+                        diameterSpinBox.value = Qt.binding(function() { return base.properties.diameter })
+                    }
+                }
+
+                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;
+                        width: informationPage.columnWidth;
+                        text: properties.name;
+                        enabled: base.editingEnabled;
+                        onEditingFinished: base.updateMaterialDisplayName(properties.name, text)
+                    }
+                }
+
+                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
+                        width: informationPage.columnWidth
+                        text: properties.brand
+                        enabled: base.editingEnabled
+                        onEditingFinished: base.updateMaterialBrand(properties.brand, text)
+                    }
+                }
+
+                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
+                        width: informationPage.columnWidth
+                        text: properties.material
+                        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")
+                    }
+
+                    Row
+                    {
+                        width: informationPage.columnWidth
+                        spacing: Math.round(UM.Theme.getSize("default_margin").width / 2)
+
+                        // color indicator square
+                        Item
+                        {
+                            id: colorSelector
+
+                            anchors.verticalCenter: parent.verticalCenter
+
+                            width: childrenRect.width + 2 * UM.Theme.getSize("narrow_margin").width
+                            height: childrenRect.height + 2 * UM.Theme.getSize("narrow_margin").height
+
+                            Rectangle
+                            {
+                                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
+                            {
+                                anchors.fill: parent
+                                onClicked: colorDialog.open()
+                                enabled: base.editingEnabled
+                            }
+                        }
+
+                        // pretty color name text field
+                        Cura.TextField
+                        {
+                            id: colorLabel;
+                            width: parent.width - colorSelector.width - parent.spacing
+                            text: properties.color_name;
+                            enabled: base.editingEnabled
+                            onEditingFinished: base.setMetaDataEntry("color_name", properties.color_name, text)
+                        }
+
+                        // popup dialog to select a new color
+                        // if successful it sets the properties.color_code value to the new color
+                        Cura.ColorDialog
+                        {
+                            id: colorDialog
+                            title: catalog.i18nc("@title", "Material color picker")
+                            color: properties.color_code
+                            onAccepted: base.setMetaDataEntry("color_code", properties.color_code, color)
+                        }
+                    }
+                }
+
+                UM.Label
+                {
+                    width: parent.width
+                    height: parent.rowHeight
+                    font: UM.Theme.getFont("default_bold")
+                    verticalAlignment: Qt.AlignVCenter
+                    text: catalog.i18nc("@label", "Properties")
+                }
+
+                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.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()
+                    }
+                }
+
+                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.SpinBox
+                    {
+                        enabled: base.editingEnabled
+                        id: diameterSpinBox
+                        width: informationPage.columnWidth
+                        value: properties.diameter
+                        decimals: 2
+                        suffix: " mm"
+                        stepSize: 0.01
+
+                        onEditingFinished:
+                        {
+                            // 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);
+                            if (new_approximate_diameter != Cura.ExtruderManager.getActiveExtruderStack().approximateMaterialDiameter)
+                            {
+                                confirmDiameterChangeDialog.old_diameter_value = old_diameter;
+                                confirmDiameterChangeDialog.new_diameter_value = value;
+                                confirmDiameterChangeDialog.old_approximate_diameter_value = old_approximate_diameter;
+
+                                confirmDiameterChangeDialog.open()
+                            }
+                            else {
+                                base.setMetaDataEntry("approximate_diameter", old_approximate_diameter, getApproximateDiameter(value).toString());
+                                base.setMetaDataEntry("properties/diameter", properties.diameter, value);
+                            }
+                        }
+                        onValueChanged: updateCostPerMeter()
+                    }
+                }
+
+                Row
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Filament Cost")
+                    }
+                    Cura.SpinBox
+                    {
+                        id: spoolCostSpinBox
+                        width: informationPage.columnWidth
+                        value: base.getMaterialPreferenceValue(properties.guid, "spool_cost")
+                        to: 100000000
+                        editable: true
+                        prefix: base.currency + " "
+                        decimals: 2
+
+                        onValueChanged:
+                        {
+                            base.setMaterialPreferenceValue(properties.guid, "spool_cost", parseFloat(value))
+                            updateCostPerMeter()
+                        }
+                    }
+                }
+
+                Row
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Filament weight")
+                    }
+                    Cura.SpinBox
+                    {
+                        id: spoolWeightSpinBox
+                        width: informationPage.columnWidth
+                        value: base.getMaterialPreferenceValue(properties.guid, "spool_weight", Cura.ContainerManager.getContainerMetaDataEntry(properties.container_id, "properties/weight"))
+                        stepSize: 100
+                        to: 10000
+                        editable: true
+                        suffix: " g"
+
+                        onValueChanged:
+                        {
+                            base.setMaterialPreferenceValue(properties.guid, "spool_weight", parseFloat(value))
+                            updateCostPerMeter()
+                        }
+                    }
+                }
+
+                Row
+                {
+                    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))
+                        height: informationPage.rowHeight
+                    }
+                }
+
+                Row
+                {
+                    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)
+                    }
+                }
+
+                UM.Label
+                {
+                    height: parent.rowHeight
+                    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
+                }
+                Cura.SecondaryButton
+                {
+                    id: unlinkMaterialButton
+                    text: catalog.i18nc("@label", "Unlink Material")
+                    visible: base.linkedMaterialNames != ""
+                    onClicked:
+                    {
+                        Cura.ContainerManager.unlinkMaterial(base.currentMaterialNode)
+                        base.reevaluateLinkedMaterials = true
+                    }
+                }
+
+                UM.Label
+                {
+                    width: informationPage.width
+                    height: parent.rowHeight
+                    text: catalog.i18nc("@label", "Description")
+                }
+                ReadOnlyTextArea
+                {
+                    text: properties.description
+                    width: informationPage.width
+                    height: 0.4 * informationPage.width
+                    wrapMode: Text.WordWrap
+
+                    readOnly: !base.editingEnabled
+
+                    onEditingFinished: base.setMetaDataEntry("description", properties.description, text)
+                }
+
+                UM.Label
+                {
+                    width: informationPage.width
+                    height: parent.rowHeight
+                    text: catalog.i18nc("@label", "Adhesion Information")
+                }
+
+                ReadOnlyTextArea
+                {
+                    text: properties.adhesion_info
+                    width: informationPage.width
+                    height: 0.4 * informationPage.width
+                    wrapMode: Text.WordWrap
+                    readOnly: !base.editingEnabled
+
+                    onEditingFinished: base.setMetaDataEntry("adhesion_info", properties.adhesion_info, text)
+                }
+            }
+        }
+
+        ListView
+        {
+            anchors
+            {
+                top: pageSelectorTabRow.bottom
+                left: parent.left
                 right: parent.right
                 bottom: parent.bottom
             }
-        }
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        clip: true
-        visible: pageSelectorTabRow.currentItem.activeView === "information"
 
-        property real columnWidth: (width * 0.5 - UM.Theme.getSize("default_margin").width) | 0
+            model: UM.SettingDefinitionsModel
-
-        Flow
-        {
-            id: containerGrid
-
-            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
             {
-                id: confirmDiameterChangeDialog
-
-                title: catalog.i18nc("@title:window", "Confirm Diameter Change")
-                text: catalog.i18nc("@label (%1 is a number)", "The new filament diameter is set to %1 mm, which is not compatible with the current extruder. Do you wish to continue?".arg(new_diameter_value))
-                standardButtons: Dialog.Yes | Dialog.No
-
-                property var new_diameter_value: null
-                property var old_diameter_value: null
-                property var old_approximate_diameter_value: null
-
-                onAccepted:
-                {
-                    base.setMetaDataEntry("approximate_diameter", old_approximate_diameter_value, getApproximateDiameter(new_diameter_value).toString());
-                    base.setMetaDataEntry("properties/diameter", properties.diameter, new_diameter_value);
-                    // CURA-6868 Make sure to update the extruder to user a diameter-compatible material.
-                    Cura.MachineManager.updateMaterialWithVariant()
-                    base.resetSelectedMaterial()
-                }
-
-                onRejected:
-                {
-                    base.properties.diameter = old_diameter_value;
-                    diameterSpinBox.value = Qt.binding(function() { return base.properties.diameter })
-                }
-            }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Display Name") }
-            Cura.TextField
-            {
-                id: displayNameTextField;
-                width: informationPage.columnWidth;
-                text: properties.name;
-                enabled: base.editingEnabled;
-                onEditingFinished: base.updateMaterialDisplayName(properties.name, text)
-            }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Brand") }
-            Cura.TextField
-            {
-                id: brandTextField
-                width: informationPage.columnWidth
-                text: properties.brand
-                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") }
-            Cura.TextField
-            {
-                id: materialTypeField
-                width: informationPage.columnWidth
-                text: properties.material
-                enabled: base.editingEnabled
-                onEditingFinished: base.updateMaterialType(properties.material, text)
-            }
-
-            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
-                {
-                    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
-
-                    // open the color selection dialog on click
-                    MouseArea
-                    {
-                        anchors.fill: parent
-                        onClicked: colorDialog.open()
-                        enabled: base.editingEnabled
-                    }
-                }
-
-                // pretty color name text field
-                Cura.TextField
-                {
-                    id: colorLabel;
-                    width: parent.width - colorSelector.width - parent.spacing
-                    text: properties.color_name;
-                    enabled: base.editingEnabled
-                    onEditingFinished: base.setMetaDataEntry("color_name", properties.color_name, text)
-                }
-
-                // popup dialog to select a new color
-                // if successful it sets the properties.color_code value to the new color
-                Cura.ColorDialog
-                {
-                    id: colorDialog
-                    title: catalog.i18nc("@title", "Material color picker")
-                    color: properties.color_code
-                    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") }
-            Cura.SpinBox
-            {
-                enabled: base.editingEnabled
-                id: diameterSpinBox
-                width: informationPage.columnWidth
-                value: properties.diameter
-                decimals: 2
-                suffix: " mm"
-                stepSize: 0.01
-
-                onEditingFinished:
-                {
-                    // 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);
-                    if (new_approximate_diameter != Cura.ExtruderManager.getActiveExtruderStack().approximateMaterialDiameter)
-                    {
-                        confirmDiameterChangeDialog.old_diameter_value = old_diameter;
-                        confirmDiameterChangeDialog.new_diameter_value = value;
-                        confirmDiameterChangeDialog.old_approximate_diameter_value = old_approximate_diameter;
-
-                        confirmDiameterChangeDialog.open()
-                    }
-                    else {
-                        base.setMetaDataEntry("approximate_diameter", old_approximate_diameter, getApproximateDiameter(value).toString());
-                        base.setMetaDataEntry("properties/diameter", properties.diameter, value);
-                    }
-                }
-                onValueChanged: updateCostPerMeter()
-            }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament Cost") }
-
-            Cura.SpinBox
-            {
-                id: spoolCostSpinBox
-                width: informationPage.columnWidth
-                value: base.getMaterialPreferenceValue(properties.guid, "spool_cost")
-                to: 100000000
-                editable: true
-                prefix: base.currency + " "
-                decimals: 2
-
-                onValueChanged:
-                {
-                    base.setMaterialPreferenceValue(properties.guid, "spool_cost", parseFloat(value))
-                    updateCostPerMeter()
-                }
-            }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament weight") }
-            Cura.SpinBox
-            {
-                id: spoolWeightSpinBox
-                width: informationPage.columnWidth
-                value: base.getMaterialPreferenceValue(properties.guid, "spool_weight", Cura.ContainerManager.getContainerMetaDataEntry(properties.container_id, "properties/weight"))
-                stepSize: 100
-                to: 10000
-                editable: true
-                suffix: " g"
-
-                onValueChanged:
-                {
-                    base.setMaterialPreferenceValue(properties.guid, "spool_weight", parseFloat(value))
-                    updateCostPerMeter()
-                }
-            }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament length") }
-            Label
-            {
-                width: informationPage.columnWidth
-                text: "~ %1 m".arg(Math.round(base.spoolLength))
-                verticalAlignment: Qt.AlignVCenter
-                height: parent.rowHeight
-            }
-
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Cost per Meter") }
-            Label
-            {
-                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 }
-            Label
-            {
-                width: 2 * informationPage.columnWidth
-                verticalAlignment: Qt.AlignVCenter
-                text: catalog.i18nc("@label", "This material is linked to %1 and shares some of its properties.").arg(base.linkedMaterialNames)
-                wrapMode: Text.WordWrap
-                visible: unlinkMaterialButton.visible
-            }
-            Button
-            {
-                id: unlinkMaterialButton
-                text: catalog.i18nc("@label", "Unlink Material")
-                visible: base.linkedMaterialNames != ""
-                onClicked:
-                {
-                    Cura.ContainerManager.unlinkMaterial(base.currentMaterialNode)
-                    base.reevaluateLinkedMaterials = true
-                }
-            }
-
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
-
-            Label { width: parent.width; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Description") }
-
-            ReadOnlyTextArea
-            {
-                text: properties.description;
-                width: informationPage.columnWidth * 2
-                height: 0.75 * informationPage.columnWidth
-                wrapMode: Text.WordWrap
-
-                readOnly: !base.editingEnabled
-
-                onEditingFinished: base.setMetaDataEntry("description", properties.description, text)
-            }
-
-            Label { width: parent.width; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Adhesion Information") }
-
-            ReadOnlyTextArea
-            {
-                text: properties.adhesion_info
-                width: 2 * informationPage.columnWidth
-                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
-    {
-        anchors
-        {
-            top: pageSelectorTabRow.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-
-        model: UM.SettingDefinitionsModel
-        {
-            containerId: Cura.MachineManager.activeMachine != null ? Cura.MachineManager.activeMachine.definition.id: ""
-            visibilityHandler: Cura.MaterialSettingsVisibilityHandler { }
-            expanded: ["*"]
-        }
-        ScrollBar.vertical: UM.ScrollBar {}
-        clip: true
-        visible: pageSelectorTabRow.currentItem.activeView === "settings"
-
-        delegate: UM.TooltipArea
-        {
-            width: childrenRect.width
-            height: childrenRect.height
-            text: model.description
-            Label
-            {
-                id: label
-                width: base.firstColumnWidth;
-                height: spinBox.height + UM.Theme.getSize("default_lining").height
-                text: model.label
-                elide: Text.ElideRight
-                verticalAlignment: Qt.AlignVCenter
-            }
-            Cura.SpinBox
-            {
-                id: spinBox
-                anchors.left: label.right
-                value:
-                {
-                    // In case the setting is not in the material...
-                    if (!isNaN(parseFloat(materialPropertyProvider.properties.value)))
-                    {
-                        return parseFloat(materialPropertyProvider.properties.value);
-                    }
-                    // ... we search in the variant, and if it is not there...
-                    if (!isNaN(parseFloat(variantPropertyProvider.properties.value)))
-                    {
-                        return parseFloat(variantPropertyProvider.properties.value);
-                    }
-                    // ... then look in the definition container.
-                    if (!isNaN(parseFloat(machinePropertyProvider.properties.value)))
-                    {
-                        return parseFloat(machinePropertyProvider.properties.value);
-                    }
-                    return 0;
-                }
-                width: base.secondColumnWidth
-                suffix: " " + model.unit
-                to: 99999
-                decimals: model.unit == "mm" ? 2 : 0
-
-                onEditingFinished: materialPropertyProvider.setPropertyValue("value", value)
-            }
-
-            UM.ContainerPropertyProvider
-            {
-                id: materialPropertyProvider
-                containerId: base.containerId
-                watchedProperties: [ "value" ]
-                key: model.key
-            }
-            UM.ContainerPropertyProvider
-            {
-                id: variantPropertyProvider
-                containerId: Cura.MachineManager.activeStack.variant.id
-                watchedProperties: [ "value" ]
-                key: model.key
-            }
-            UM.ContainerPropertyProvider
-            {
-                id: machinePropertyProvider
                 containerId: Cura.MachineManager.activeMachine != null ? Cura.MachineManager.activeMachine.definition.id: ""
-                watchedProperties: [ "value" ]
+                visibilityHandler: Cura.MaterialSettingsVisibilityHandler { }
-                key: model.key
+                expanded: ["*"]
+            }
+            ScrollBar.vertical: UM.ScrollBar {}
+            clip: true
+            visible: pageSelectorTabRow.currentItem.activeView === "settings"
+
+            delegate: UM.TooltipArea
+            {
+                width: childrenRect.width
+                height: childrenRect.height
+                text: model.description
+                UM.Label
+                {
+                    id: label
+                    width: base.firstColumnWidth;
+                    height: spinBox.height + UM.Theme.getSize("default_lining").height
+                    text: model.label
+                    elide: Text.ElideRight
+                    verticalAlignment: Qt.AlignVCenter
+                }
+                Cura.SpinBox
+                {
+                    id: spinBox
+                    anchors.left: label.right
+                    value:
+                    {
+                        // In case the setting is not in the material...
+                        if (!isNaN(parseFloat(materialPropertyProvider.properties.value)))
+                        {
+                            return parseFloat(materialPropertyProvider.properties.value);
+                        }
+                        // ... we search in the variant, and if it is not there...
+                        if (!isNaN(parseFloat(variantPropertyProvider.properties.value)))
+                        {
+                            return parseFloat(variantPropertyProvider.properties.value);
+                        }
+                        // ... then look in the definition container.
+                        if (!isNaN(parseFloat(machinePropertyProvider.properties.value)))
+                        {
+                            return parseFloat(machinePropertyProvider.properties.value);
+                        }
+                        return 0;
+                    }
+                    width: base.secondColumnWidth
+                    suffix: " " + model.unit
+                    to: 99999
+                    decimals: model.unit == "mm" ? 2 : 0
+
+                    onEditingFinished: materialPropertyProvider.setPropertyValue("value", value)
+                }
+
+                UM.ContainerPropertyProvider
+                {
+                    id: materialPropertyProvider
+                    containerId: base.containerId
+                    watchedProperties: [ "value" ]
+                    key: model.key
+                }
+                UM.ContainerPropertyProvider
+                {
+                    id: variantPropertyProvider
+                    containerId: Cura.MachineManager.activeStack.variant.id
+                    watchedProperties: [ "value" ]
+                    key: model.key
+                }
+                UM.ContainerPropertyProvider
+                {
+                    id: machinePropertyProvider
+                    containerId: Cura.MachineManager.activeMachine != null ? Cura.MachineManager.activeMachine.definition.id: ""
+                    watchedProperties: [ "value" ]
+                    key: model.key
+                }
             }
         }
     }