Organize material preferences

Contributes to CURA-5378

resources/qml/Cura.qml

@@ -541,7 +541,7 @@ UM.MainWindow
 
             insertPage(2, catalog.i18nc("@title:tab", "Printers"), Qt.resolvedUrl("Preferences/MachinesPage.qml"));
 
-            insertPage(3, catalog.i18nc("@title:tab", "Materials"), Qt.resolvedUrl("Preferences/MaterialsPage.qml"));
+            insertPage(3, catalog.i18nc("@title:tab", "Materials"), Qt.resolvedUrl("Preferences/Materials/MaterialsPage.qml"));
 
             insertPage(4, catalog.i18nc("@title:tab", "Profiles"), Qt.resolvedUrl("Preferences/ProfilesPage.qml"));
 

resources/qml/Preferences/Materials/MaterialSlot.qml

@@ -0,0 +1,120 @@
+// Copyright (c) 2018 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.Styles 1.4
+import QtQuick.Layouts 1.3
+import QtQuick.Dialogs 1.2
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Rectangle
+{
+    id: material_slot
+    property var material
+    property var hovered: false
+    property var is_favorite: material.is_favorite
+
+    height: UM.Theme.getSize("favorites_row").height
+    width: parent.width
+    color: base.currentItem == model ? UM.Theme.getColor("favorites_row_selected") : "transparent"
+    
+    Row
+    {
+        height: parent.height
+        width: parent.width
+        Rectangle
+        {
+            id: swatch
+            color: material.color_code
+            border.width: UM.Theme.getSize("default_lining").width
+            border.color: "black"
+            width: UM.Theme.getSize("favorites_button_icon").width
+            height: UM.Theme.getSize("favorites_button_icon").height
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        }
+        Label
+        {
+            text: material.brand + " " + material.name
+            verticalAlignment: Text.AlignVCenter
+            height: parent.height
+            anchors.left: swatch.right
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
+        }
+        MouseArea
+        {
+            anchors.fill: parent
+            onClicked: { base.currentItem = material }
+            hoverEnabled: true
+            onEntered: { material_slot.hovered = true }
+            onExited: { material_slot.hovered = false }
+        }
+        Button
+        {
+            id: favorite_button
+            text: ""
+            implicitWidth: UM.Theme.getSize("favorites_button").width
+            implicitHeight: UM.Theme.getSize("favorites_button").height
+            visible: material_slot.hovered || material_slot.is_favorite || favorite_button.hovered
+            anchors
+            {
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            onClicked:
+            {
+                if (material_slot.is_favorite) {
+                    base.materialManager.removeFavorite(material.root_material_id)
+                    material_slot.is_favorite = false
+                    return
+                }
+                base.materialManager.addFavorite(material.root_material_id)
+                material_slot.is_favorite = true
+                return
+            }
+            style: ButtonStyle
+            {
+                background: Rectangle
+                {
+                    anchors.fill: parent
+                    color: "transparent"
+                }
+            }
+            UM.RecolorImage {
+                anchors
+                {
+                    verticalCenter: parent.verticalCenter
+                    horizontalCenter: parent.horizontalCenter
+                }
+                width: UM.Theme.getSize("favorites_button_icon").width
+                height: UM.Theme.getSize("favorites_button_icon").height
+                sourceSize.width: width
+                sourceSize.height: height
+                color:
+                {
+                    if (favorite_button.hovered)
+                    {
+                        return UM.Theme.getColor("primary_hover")
+                    }
+                    else
+                    {
+                        if (material_slot.is_favorite)
+                        {
+                            return UM.Theme.getColor("primary")
+                        }
+                        else
+                        {
+                            UM.Theme.getColor("text_inactive")
+                        }
+                    }
+                }
+                source: material_slot.is_favorite ? UM.Theme.getIcon("favorites_star_full") : UM.Theme.getIcon("favorites_star_empty")
+            }
+        }
+    }
+}

resources/qml/Preferences/MaterialView.qml → resources/qml/Preferences/Materials/MaterialView.qml

@@ -8,6 +8,8 @@ import QtQuick.Dialogs 1.2
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
+import ".." // Access to ReadOnlyTextArea.qml
+
 TabView
 {
     id: base

resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml

@@ -0,0 +1,103 @@
+// Copyright (c) 2018 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.Layouts 1.3
+import QtQuick.Dialogs 1.2
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Item
+{
+    id: detailsPanel
+
+    function updateMaterialPropertiesObject( currentItem )
+    {
+//                var currentItem = materialsModel.getItem(materialListView.currentIndex);
+
+        materialProperties.name = currentItem.name ? currentItem.name : "Unknown";
+        materialProperties.guid = currentItem.guid;
+        materialProperties.container_id = currentItem.container_id;
+
+        materialProperties.brand = currentItem.brand ? currentItem.brand : "Unknown";
+        materialProperties.material = currentItem.material ? currentItem.material : "Unknown";
+        materialProperties.color_name = currentItem.color_name ? currentItem.color_name : "Yellow";
+        materialProperties.color_code = currentItem.color_code ? currentItem.color_code : "yellow";
+
+        materialProperties.description = currentItem.description ? currentItem.description : "";
+        materialProperties.adhesion_info = currentItem.adhesion_info ? currentItem.adhesion_info : "";
+
+        materialProperties.density = currentItem.density ? currentItem.density : 0.0;
+        materialProperties.diameter = currentItem.diameter ? currentItem.diameter : 0.0;
+        materialProperties.approximate_diameter = currentItem.approximate_diameter ? currentItem.approximate_diameter : "0";
+    }
+
+    Item
+    {
+        anchors.fill: parent
+
+        Item    // Material title Label
+        {
+            id: profileName
+
+            width: parent.width
+            height: childrenRect.height
+
+            Label {
+                text: materialProperties.name
+                font: UM.Theme.getFont("large")
+            }
+        }
+
+        MaterialView    // Material detailed information view below the title Label
+        {
+            id: materialDetailsView
+            anchors
+            {
+                left: parent.left
+                right: parent.right
+                top: profileName.bottom
+                topMargin: UM.Theme.getSize("default_margin").height
+                bottom: parent.bottom
+            }
+
+            editingEnabled: base.currentItem != null && !base.currentItem.is_read_only
+
+            properties: materialProperties
+            containerId: base.currentItem != null ? base.currentItem.container_id : ""
+            currentMaterialNode: base.currentItem.container_node
+
+    
+        }
+
+        QtObject
+        {
+            id: materialProperties
+
+            property string guid: "00000000-0000-0000-0000-000000000000"
+            property string container_id: "Unknown";
+            property string name: "Unknown";
+            property string profile_type: "Unknown";
+            property string brand: "Unknown";
+            property string material: "Unknown";  // This needs to be named as "material" to be consistent with
+                                                    // the material container's metadata entry
+
+            property string color_name: "Yellow";
+            property color color_code: "yellow";
+
+            property real density: 0.0;
+            property real diameter: 0.0;
+            property string approximate_diameter: "0";
+
+            property real spool_cost: 0.0;
+            property real spool_weight: 0.0;
+            property real spool_length: 0.0;
+            property real cost_per_meter: 0.0;
+
+            property string description: "";
+            property string adhesion_info: "";
+        }
+    }
+}

resources/qml/Preferences/MaterialsList.qml → resources/qml/Preferences/Materials/MaterialsList.qml

@@ -6,42 +6,174 @@ import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Layouts 1.3
 import QtQuick.Dialogs 1.2
+
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
 Item
 {
     id: materialList
+    width: materialScrollView.width - 17
+    height: childrenRect.height
+
+    // Children
     UM.I18nCatalog { id: catalog; name: "cura"; }
     Cura.BrandMaterialsModel { id: materialsModel }
+    Cura.FavoriteMaterialsModel { id: favoriteMaterialsModel }
     Cura.GenericMaterialsModel { id: genericMaterialsModel }
-
-    width: materialScrollView.width - 20
-    height: childrenRect.height
-
-
     Column
     {
         Rectangle
         {
-            height: 23
+            property var expanded: true
+
+            id: favorites_section
+            height: childrenRect.height
             width: materialList.width
-            Label
+            Rectangle
             {
-                text: "Generic"
+                id: favorites_header_background
+                color: UM.Theme.getColor("favorites_header_bar")
+                anchors.fill: favorites_header
+            }
+            Row
+            {
+                id: favorites_header
+                Label
+                {
+                    id: favorites_name
+                    text: "Favorites"
+                    height: UM.Theme.getSize("favorites_row").height
+                    width: materialList.width - UM.Theme.getSize("favorites_button").width
+                    verticalAlignment: Text.AlignVCenter
+                    leftPadding: 4
+                }
+                Button
+                {
+                    text: ""
+                    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
+                        sourceSize.width: width
+                        sourceSize.height: height
+                        color: "black"
+                        source: favorites_section.expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
+                    }
+                    style: ButtonStyle
+                    {
+                        background: Rectangle
+                        {
+                            anchors.fill: parent
+                            color: "transparent"
+                        }
+                    }
+                }
+            }
+            MouseArea
+            {
+                anchors.fill: favorites_header
+                onPressed:
+                {
+                    favorites_section.expanded = !favorites_section.expanded
+                }
+            }
+            Column
+            {
+                anchors.top: favorites_header.bottom
+                anchors.left: parent.left
+                width: materialList.width
+                height: favorites_section.expanded ? childrenRect.height : 0
+                visible: favorites_section.expanded
+                Repeater
+                {
+                    model: favoriteMaterialsModel
+                    delegate: MaterialSlot {
+                        material: model
+                    }
+                }
             }
         }
-        Repeater
+        Rectangle
         {
-            model: genericMaterialsModel
-            delegate: Rectangle
+            property var expanded: true
+
+            id: generic_section
+            height: childrenRect.height
+            width: materialList.width
+            Rectangle
             {
-                height: 23
-                width: materialList.width
-                color: "green"
+                id: generic_header_background
+                color: UM.Theme.getColor("favorites_header_bar")
+                anchors.fill: generic_header
+            }
+            Row
+            {
+                id: generic_header
                 Label
                 {
-                    text: model.name
+                    id: generic_name
+                    text: "Generic"
+                    height: UM.Theme.getSize("favorites_row").height
+                    width: materialList.width - UM.Theme.getSize("favorites_button").width
+                    verticalAlignment: Text.AlignVCenter
+                    leftPadding: 4
+                }
+                Button
+                {
+                    text: ""
+                    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
+                        sourceSize.width: width
+                        sourceSize.height: height
+                        color: "black"
+                        source: generic_section.expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
+                    }
+                    style: ButtonStyle
+                    {
+                        background: Rectangle
+                        {
+                            anchors.fill: parent
+                            color: "transparent"
+                        }
+                    }
+                }
+            }
+            MouseArea
+            {
+                anchors.fill: generic_header
+                onPressed:
+                {
+                    generic_section.expanded = !generic_section.expanded
+                }
+            }
+            Column
+            {
+                anchors.top: generic_header.bottom
+                width: materialList.width
+                anchors.left: parent.left
+                height: generic_section.expanded ? childrenRect.height : 0
+                visible: generic_section.expanded
+                Repeater
+                {
+                    model: genericMaterialsModel
+                    delegate: MaterialSlot {
+                        material: model
+                    }
                 }
             }
         }
@@ -60,7 +192,7 @@ Item
                 Rectangle
                 {
                     id: brand_header_background
-                    color: "grey"
+                    color: UM.Theme.getColor("favorites_header_bar")
                     anchors.fill: brand_header
                 }
                 Row
@@ -71,16 +203,16 @@ Item
                     {
                         id: brand_name
                         text: model.name
-                        height: 24
-                        width: parent.width - 24
+                        height: UM.Theme.getSize("favorites_row").height
+                        width: parent.width - UM.Theme.getSize("favorites_button").width
                         verticalAlignment: Text.AlignVCenter
                         leftPadding: 4
                     }
                     Button
                     {
                         text: ""
-                        implicitWidth: 24
-                        implicitHeight: 24
+                        implicitWidth: UM.Theme.getSize("favorites_button").width
+                        implicitHeight: UM.Theme.getSize("favorites_button").height
                         UM.RecolorImage {
                             anchors
                             {
@@ -115,9 +247,8 @@ Item
                 Column
                 {
                     anchors.top: brand_header.bottom
-                    width: parent.width - leftPadding
+                    width: parent.width
                     anchors.left: parent.left
-                    leftPadding: 8
                     height: brand_section.expanded ? childrenRect.height : 0
                     visible: brand_section.expanded
                     Repeater
@@ -133,29 +264,34 @@ Item
                             Rectangle
                             {
                                 id: material_type_header_background
-                                color: "grey"
+                                color: UM.Theme.getColor("lining")
                                 anchors.bottom: material_type_header.bottom
-                                height: 1
-                                width: parent.width
+                                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
-
+                                width: parent.width - 8
+                                anchors
+                                {
+                                    left: parent.left
+                                    leftMargin: 8
+                                }
                                 Label
                                 {
                                     text: model.name
-                                    height: 24
-                                    width: parent.width - 24
+                                    height: UM.Theme.getSize("favorites_row").height
+                                    width: parent.width - UM.Theme.getSize("favorites_button").width
                                     id: material_type_name
                                     verticalAlignment: Text.AlignVCenter
                                 }
                                 Button
                                 {
                                     text: ""
-                                    implicitWidth: 24
-                                    implicitHeight: 24
+                                    implicitWidth: UM.Theme.getSize("favorites_button").width
+                                    implicitHeight: UM.Theme.getSize("favorites_button").height
                                     UM.RecolorImage {
                                         anchors
                                         {
@@ -191,69 +327,14 @@ Item
                             {
                                 height: material_type_section.expanded ? childrenRect.height : 0
                                 visible: material_type_section.expanded
-                                width: parent.width - leftPadding
+                                width: parent.width
                                 anchors.top: material_type_header.bottom
-                                leftPadding: 8
                                 anchors.left: parent.left
                                 Repeater
                                 {
                                     model: colors_model
-                                    delegate: Rectangle
-                                    {
-                                        height: 24
-                                        width: parent.width
-//                                        color: "green"
-                                        Row
-                                        {
-                                            height: parent.height
-                                            width: parent.width
-                                            Rectangle
-                                            {
-                                                id: swatch
-                                                color: model.color_code
-                                                border.width: 1
-                                                border.color: "black"
-                                                width: 14
-                                                height: 14
-                                                anchors.verticalCenter: parent.verticalCenter
-                                            }
-                                            Label
-                                            {
-                                                text: model.name
-                                                verticalAlignment: Text.AlignVCenter
-                                                height: 24
-                                                anchors.left: swatch.right
-                                                anchors.verticalCenter: parent.verticalCenter
-                                                anchors.leftMargin: 4
-                                            }
-                                            MouseArea
-                                            {
-                                                anchors.fill: parent
-                                                onClicked:
-                                                {
-                                                    print(model.guid)
-                                                }
-                                            }
-                                            Button
-                                            {
-                                                text: "+"
-                                                implicitWidth: 24
-                                                implicitHeight: 24
-                                                anchors.right: parent.right
-                                                anchors.verticalCenter: parent.verticalCenter
-                                                onClicked:
-                                                {
-                                                    if (model.is_favorite) {
-                                                        base.materialManager.removeFavorite(model.root_material_id)
-                                                        model.is_favorite = false
-                                                        return
-                                                    }
-                                                    base.materialManager.addFavorite(model.root_material_id)
-                                                    model.is_favorite = true
-                                                    return
-                                                }
-                                            }
-                                        }
+                                    delegate: MaterialSlot {
+                                        material: model
                                     }
                                 }
                             }

resources/qml/Preferences/MaterialsPage.qml → resources/qml/Preferences/Materials/MaterialsPage.qml

@@ -9,13 +9,22 @@ import QtQuick.Dialogs 1.2
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
-
 Item
 {
     id: base
 
     property QtObject materialManager: CuraApplication.getMaterialManager()
-    property var resetEnabled: false  // Keep PreferencesDialog happy
+    // Keep PreferencesDialog happy
+    property var resetEnabled: false
+    property var currentItem: null
+    property var isCurrentItemActivated:
+    {
+        const extruder_position = Cura.ExtruderManager.activeExtruderIndex;
+        const root_material_id = Cura.MachineManager.currentRootMaterialId[extruder_position];
+        return base.currentItem.root_material_id == root_material_id;
+    }
+    property string newRootMaterialIdToSwitchTo: ""
+    property bool toActivateNewMaterial: false
 
     UM.I18nCatalog
     {
@@ -30,11 +39,72 @@ Item
     {
         id: genericMaterialsModel
     }
+    // Component.onCompleted:
+    // {
+    //     // Select the activated material when this page shows up
+    //     const extruder_position = Cura.ExtruderManager.activeExtruderIndex;
+    //     const active_root_material_id = Cura.MachineManager.currentRootMaterialId[extruder_position];
+    //     var itemIndex = -1;
+    //     for (var i = 0; i < materialsModel.rowCount(); ++i)
+    //     {
+    //         var item = materialsModel.getItem(i);
+    //         if (item.root_material_id == active_root_material_id)
+    //         {
+    //             itemIndex = i;
+    //             break;
+    //         }
+    //     }
+    //     materialListView.currentIndex = itemIndex;
+    // }
+    
+    // This connection makes sure that we will switch to the new
+    Connections
+    {
+        target: materialsModel
+        onItemsChanged:
+        {
+            var currentItemId = base.currentItem == null ? "" : base.currentItem.root_material_id;
+            var position = Cura.ExtruderManager.activeExtruderIndex;
+
+            // try to pick the currently selected item; it may have been moved
+            if (base.newRootMaterialIdToSwitchTo == "")
+            {
+                base.newRootMaterialIdToSwitchTo = currentItemId;
+            }
+
+            for (var idx = 0; idx < materialsModel.rowCount(); ++idx)
+            {
+                var item = materialsModel.getItem(idx);
+                if (item.root_material_id == base.newRootMaterialIdToSwitchTo)
+                {
+                    // Switch to the newly created profile if needed
+                    materialListView.currentIndex = idx;
+                    materialListView.activateDetailsWithIndex(materialListView.currentIndex);
+                    if (base.toActivateNewMaterial)
+                    {
+                        Cura.MachineManager.setMaterial(position, item.container_node);
+                    }
+                    base.newRootMaterialIdToSwitchTo = "";
+                    base.toActivateNewMaterial = false;
+                    return
+                }
+            }
+
+            materialListView.currentIndex = 0;
+            materialListView.activateDetailsWithIndex(materialListView.currentIndex);
+            if (base.toActivateNewMaterial)
+            {
+                Cura.MachineManager.setMaterial(position, materialsModel.getItem(0).container_node);
+            }
+            base.newRootMaterialIdToSwitchTo = "";
+            base.toActivateNewMaterial = false;
+        }
+    }
 
+    // Main layout
     Label
     {
         id: titleLabel
-
         anchors
         {
             top: parent.top
@@ -42,45 +112,12 @@ Item
             right: parent.right
             margins: 5 * screenScaleFactor
         }
-
         font.pointSize: 18
         text: catalog.i18nc("@title:tab", "Materials")
     }
 
-    property var hasCurrentItem: materialListView.currentItem != null
-
-    property var currentItem:
-    {  // is soon to be overwritten
-        var current_index = materialListView.currentIndex;
-        return materialsModel.getItem(current_index);
-    }
-
-    property var isCurrentItemActivated:
-    {
-        const extruder_position = Cura.ExtruderManager.activeExtruderIndex;
-        const root_material_id = Cura.MachineManager.currentRootMaterialId[extruder_position];
-        return base.currentItem.root_material_id == root_material_id;
-    }
-
-    Component.onCompleted:
-    {
-        // Select the activated material when this page shows up
-        const extruder_position = Cura.ExtruderManager.activeExtruderIndex;
-        const active_root_material_id = Cura.MachineManager.currentRootMaterialId[extruder_position];
-        var itemIndex = -1;
-        for (var i = 0; i < materialsModel.rowCount(); ++i)
-        {
-            var item = materialsModel.getItem(i);
-            if (item.root_material_id == active_root_material_id)
-            {
-                itemIndex = i;
-                break;
-            }
-        }
-        materialListView.currentIndex = itemIndex;
-    }
-
-    Row  // Button Row
+    // Button Row
+    Row
     {
         id: buttonRow
         anchors
@@ -173,63 +210,102 @@ Item
         }
     }
 
-    property string newRootMaterialIdToSwitchTo: ""
-    property bool toActivateNewMaterial: false
+    Item {
+        id: contentsItem
+        anchors
+        {
+            top: titleLabel.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+            margins: 5 * screenScaleFactor
+            bottomMargin: 0
+        }
+        clip: true
+    }
 
-    // This connection makes sure that we will switch to the new
-    Connections
+    Item
     {
-        target: materialsModel
-        onItemsChanged:
+        anchors
         {
-            var currentItemId = base.currentItem == null ? "" : base.currentItem.root_material_id;
-            var position = Cura.ExtruderManager.activeExtruderIndex;
+            top: buttonRow.bottom
+            topMargin: UM.Theme.getSize("default_margin").height
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
 
-            // try to pick the currently selected item; it may have been moved
-            if (base.newRootMaterialIdToSwitchTo == "")
+        SystemPalette { id: palette }
+
+        Label
+        {
+            id: captionLabel
+            anchors
             {
-                base.newRootMaterialIdToSwitchTo = currentItemId;
+                top: parent.top
+                left: parent.left
             }
-
-            for (var idx = 0; idx < materialsModel.rowCount(); ++idx)
+            visible: text != ""
+            text:
             {
-                var item = materialsModel.getItem(idx);
-                if (item.root_material_id == base.newRootMaterialIdToSwitchTo)
+                var caption = catalog.i18nc("@action:label", "Printer") + ": " + Cura.MachineManager.activeMachineName;
+                if (Cura.MachineManager.hasVariants)
                 {
-                    // Switch to the newly created profile if needed
-                    materialListView.currentIndex = idx;
-                    materialListView.activateDetailsWithIndex(materialListView.currentIndex);
-                    if (base.toActivateNewMaterial)
-                    {
-                        Cura.MachineManager.setMaterial(position, item.container_node);
-                    }
-                    base.newRootMaterialIdToSwitchTo = "";
-                    base.toActivateNewMaterial = false;
-                    return
+                    caption += ", " + Cura.MachineManager.activeDefinitionVariantsName + ": " + Cura.MachineManager.activeVariantName;
                 }
+                return caption;
             }
+            width: materialScrollView.width
+            elide: Text.ElideRight
+        }
 
-            materialListView.currentIndex = 0;
-            materialListView.activateDetailsWithIndex(materialListView.currentIndex);
-            if (base.toActivateNewMaterial)
+        ScrollView
+        {
+            id: materialScrollView
+            anchors
             {
-                Cura.MachineManager.setMaterial(position, materialsModel.getItem(0).container_node);
+                top: captionLabel.visible ? captionLabel.bottom : parent.top
+                topMargin: captionLabel.visible ? UM.Theme.getSize("default_margin").height : 0
+                bottom: parent.bottom
+                left: parent.left
             }
-            base.newRootMaterialIdToSwitchTo = "";
-            base.toActivateNewMaterial = false;
+
+            Rectangle
+            {
+                parent: viewport
+                anchors.fill: parent
+                color: palette.light
+            }
+
+            width: true ? (parent.width * 0.4) | 0 : parent.width
+            frameVisible: true
+            verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn
+
+            MaterialsList {}
         }
+
+        // MaterialsDetailsPanel
+        // {
+        //     anchors
+        //     {
+        //         left: materialScrollView.right
+        //         leftMargin: UM.Theme.getSize("default_margin").width
+        //         top: parent.top
+        //         bottom: parent.bottom
+        //         right: parent.right
+        //     }
+        // }
     }
 
+    // Dialogs
     MessageDialog
     {
         id: confirmRemoveMaterialDialog
-
         icon: StandardIcon.Question;
         title: catalog.i18nc("@title:window", "Confirm Remove")
         text: catalog.i18nc("@label (%1 is object name)", "Are you sure you wish to remove %1? This cannot be undone!").arg(base.currentItem.name)
         standardButtons: StandardButton.Yes | StandardButton.No
         modality: Qt.ApplicationModal
-
         onYes:
         {
             base.materialManager.removeMaterial(base.currentItem.container_node);
@@ -299,184 +375,4 @@ Item
     {
         id: messageDialog
     }
-
-
-    Item {
-        id: contentsItem
-
-        anchors
-        {
-            top: titleLabel.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            margins: 5 * screenScaleFactor
-            bottomMargin: 0
-        }
-
-        clip: true
-    }
-
-    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.activeMachineName;
-                if (Cura.MachineManager.hasVariants)
-                {
-                    caption += ", " + Cura.MachineManager.activeDefinitionVariantsName + ": " + Cura.MachineManager.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
-            }
-
-            Rectangle
-            {
-                parent: viewport
-                anchors.fill: parent
-                color: palette.light
-            }
-
-            width: true ? (parent.width * 0.4) | 0 : parent.width
-            frameVisible: true
-
-            MaterialsList {}
-        }
-
-
-        Item
-        {
-            id: detailsPanel
-
-            anchors
-            {
-                left: materialScrollView.right
-                leftMargin: UM.Theme.getSize("default_margin").width
-                top: parent.top
-                bottom: parent.bottom
-                right: parent.right
-            }
-
-            function updateMaterialPropertiesObject( currentItem )
-            {
-//                var currentItem = materialsModel.getItem(materialListView.currentIndex);
-
-                materialProperties.name = currentItem.name ? currentItem.name : "Unknown";
-                materialProperties.guid = currentItem.guid;
-                materialProperties.container_id = currentItem.container_id;
-
-                materialProperties.brand = currentItem.brand ? currentItem.brand : "Unknown";
-                materialProperties.material = currentItem.material ? currentItem.material : "Unknown";
-                materialProperties.color_name = currentItem.color_name ? currentItem.color_name : "Yellow";
-                materialProperties.color_code = currentItem.color_code ? currentItem.color_code : "yellow";
-
-                materialProperties.description = currentItem.description ? currentItem.description : "";
-                materialProperties.adhesion_info = currentItem.adhesion_info ? currentItem.adhesion_info : "";
-
-                materialProperties.density = currentItem.density ? currentItem.density : 0.0;
-                materialProperties.diameter = currentItem.diameter ? currentItem.diameter : 0.0;
-                materialProperties.approximate_diameter = currentItem.approximate_diameter ? currentItem.approximate_diameter : "0";
-            }
-
-            Item
-            {
-                anchors.fill: parent
-
-                Item    // Material title Label
-                {
-                    id: profileName
-
-                    width: parent.width
-                    height: childrenRect.height
-
-                    Label {
-                        text: materialProperties.name
-                        font: UM.Theme.getFont("large")
-                    }
-                }
-
-                MaterialView    // Material detailed information view below the title Label
-                {
-                    id: materialDetailsView
-                    anchors
-                    {
-                        left: parent.left
-                        right: parent.right
-                        top: profileName.bottom
-                        topMargin: UM.Theme.getSize("default_margin").height
-                        bottom: parent.bottom
-                    }
-
-                    editingEnabled: base.currentItem != null && !base.currentItem.is_read_only
-
-                    properties: materialProperties
-                    containerId: base.currentItem != null ? base.currentItem.container_id : ""
-                    currentMaterialNode: base.currentItem.container_node
-
-                    property alias pane: base
-                }
-
-                QtObject
-                {
-                    id: materialProperties
-
-                    property string guid: "00000000-0000-0000-0000-000000000000"
-                    property string container_id: "Unknown";
-                    property string name: "Unknown";
-                    property string profile_type: "Unknown";
-                    property string brand: "Unknown";
-                    property string material: "Unknown";  // This needs to be named as "material" to be consistent with
-                                                          // the material container's metadata entry
-
-                    property string color_name: "Yellow";
-                    property color color_code: "yellow";
-
-                    property real density: 0.0;
-                    property real diameter: 0.0;
-                    property string approximate_diameter: "0";
-
-                    property real spool_cost: 0.0;
-                    property real spool_weight: 0.0;
-                    property real spool_length: 0.0;
-                    property real cost_per_meter: 0.0;
-
-                    property string description: "";
-                    property string adhesion_info: "";
-                }
-            }
-        }
-    }
 }

resources/qml/Preferences/Materials/OldMaterialList.qml

@@ -0,0 +1,98 @@
+ListView
+{
+    id: materialListView
+
+    model: materialsModel
+
+    section.property: "brand"
+    section.criteria: ViewSection.FullString
+    section.delegate: Rectangle
+    {
+        width: materialScrollView.width
+        height: childrenRect.height
+        color: palette.light
+
+        Label
+        {
+            anchors.left: parent.left
+            anchors.leftMargin: UM.Theme.getSize("default_lining").width
+            text: section
+            font.bold: true
+            color: palette.text
+        }
+    }
+
+    delegate: Rectangle
+    {
+        width: materialScrollView.width
+        height: childrenRect.height
+        color: ListView.isCurrentItem ? palette.highlight : (model.index % 2) ? palette.base : palette.alternateBase
+
+        Row
+        {
+            id: materialRow
+            spacing: (UM.Theme.getSize("default_margin").width / 2) | 0
+            anchors.left: parent.left
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
+            anchors.right: parent.right
+
+            property bool isCurrentItem: parent.ListView.isCurrentItem
+
+            property bool isItemActivated:
+            {
+                const extruder_position = Cura.ExtruderManager.activeExtruderIndex;
+                const root_material_id = Cura.MachineManager.currentRootMaterialId[extruder_position];
+                return model.root_material_id == root_material_id;
+            }
+
+            Rectangle
+            {
+                width: Math.floor(parent.height * 0.8)
+                height: Math.floor(parent.height * 0.8)
+                color: model.color_code
+                border.color: materialRow.isCurrentItem ? palette.highlightedText : palette.text;
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            Label
+            {
+                width: Math.floor((parent.width * 0.3))
+                text: model.material
+                elide: Text.ElideRight
+                font.italic: materialRow.isItemActivated
+                color: materialRow.isCurrentItem ? palette.highlightedText : palette.text;
+            }
+            Label
+            {
+                text: (model.name != model.material) ? model.name : ""
+                elide: Text.ElideRight
+                font.italic: materialRow.isItemActivated
+                color: materialRow.isCurrentItem ? palette.highlightedText : palette.text;
+            }
+        }
+
+        MouseArea
+        {
+            anchors.fill: parent
+            onClicked:
+            {
+                parent.ListView.view.currentIndex = model.index;
+            }
+        }
+    }
+
+    function activateDetailsWithIndex(index)
+    {
+        var model = materialsModel.getItem(index);
+        base.currentItem = model;
+        materialDetailsView.containerId = model.container_id;
+        materialDetailsView.currentMaterialNode = model.container_node;
+
+        detailsPanel.updateMaterialPropertiesObject();
+    }
+
+    onCurrentIndexChanged:
+    {
+        forceActiveFocus();  // causes the changed fields to be saved
+        activateDetailsWithIndex(currentIndex);
+    }
+}