Improve the way the categories are highlighted.

When a material is selected, but the brand or the type is collapsed,
those components are also highlighted to indicate the path to the
material.

Reuse the MaterialBrandSection also for the generic materials, that
allow us to only mantain one component.

Contributes to CURA-5682.

resources/qml/Preferences/Materials/MaterialsBrandSection.qml

@@ -13,8 +13,12 @@ import Cura 1.0 as Cura
 Rectangle
 {
     id: brand_section
-    property var expanded: materialList.expandedBrands.indexOf(model.name) > -1
-    property var types_model: model.material_types
+    
+    property var sectionName: ""
+    property var elements   // This can be a MaterialTypesModel or GenericMaterialsModel
+    property var hasMaterialTypes: true  // It indicates wheather it has material types or not
+    property var expanded: materialList.expandedBrands.indexOf(sectionName) > -1
+
     height: childrenRect.height
     width: parent.width
     Rectangle
@@ -22,7 +26,7 @@ Rectangle
         id: brand_header_background
         color:
         {
-            if(!expanded && model.name == materialList.currentBrand)
+            if(!expanded && sectionName == materialList.currentBrand)
             {
                 return UM.Theme.getColor("favorites_row_selected")
             }
@@ -40,7 +44,7 @@ Rectangle
         Label
         {
             id: brand_name
-            text: model.name
+            text: sectionName
             height: UM.Theme.getSize("favorites_row").height
             width: parent.width - UM.Theme.getSize("favorites_button").width
             verticalAlignment: Text.AlignVCenter
@@ -79,7 +83,7 @@ Rectangle
         anchors.fill: brand_header
         onPressed:
         {
-            const i = materialList.expandedBrands.indexOf(model.name)
+            const i = materialList.expandedBrands.indexOf(sectionName)
             if (i > -1)
             {
                 // Remove it
@@ -89,7 +93,7 @@ Rectangle
             else
             {
                 // Add it
-                materialList.expandedBrands.push(model.name)
+                materialList.expandedBrands.push(sectionName)
                 brand_section.expanded = true
             }
             UM.Preferences.setValue("cura/expanded_brands", materialList.expandedBrands.join(";"));
@@ -102,10 +106,25 @@ Rectangle
         anchors.left: parent.left
         height: brand_section.expanded ? childrenRect.height : 0
         visible: brand_section.expanded
+
         Repeater
         {
-            model: types_model
-            delegate: MaterialsTypeSection {}
+            model: elements
+            delegate: MaterialsTypeSection
+            {
+                visible: hasMaterialTypes
+                materialType: model
+            }
+        }
+        // In case there are no types, we create a material slot
+        Repeater
+        {
+            model: elements
+            delegate: MaterialsSlot
+            {
+                visible: !hasMaterialTypes
+                material: model
+            }
         }
     }
 
@@ -114,7 +133,7 @@ Rectangle
         target: UM.Preferences
         onPreferenceChanged:
         {
-            expanded = materialList.expandedBrands.indexOf(model.name) > -1
+            expanded = materialList.expandedBrands.indexOf(sectionName) > -1
         }
     }
 }

resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml

@@ -15,7 +15,7 @@ Item
 
     property var currentItem: base.currentItem
 
-    onCurrentItemChanged: { updateMaterialPropertiesObject() }
+    onCurrentItemChanged: updateMaterialPropertiesObject()
 
     function updateMaterialPropertiesObject()
     {

resources/qml/Preferences/Materials/MaterialsList.qml

@@ -26,12 +26,20 @@ Item
     property var currentBrand: null
     property var expandedBrands: UM.Preferences.getValue("cura/expanded_brands").split(";")
     property var expandedTypes: UM.Preferences.getValue("cura/expanded_types").split(";")
-    
+
+    // Store information about which parts of the tree are expanded
+    function persistExpandedCategories()
+    {
+        UM.Preferences.setValue("cura/expanded_brands", materialList.expandedBrands.join(";"))
+        UM.Preferences.setValue("cura/expanded_types", materialList.expandedTypes.join(";"))
+    }
+
+    // Expand the list of materials in order to select the current material
     function expandActiveMaterial(search_root_id)
     {
-        for (var n = 0; n < genericMaterialsModel.rowCount(); n++)
+        for (var material_idx = 0; material_idx < genericMaterialsModel.rowCount(); material_idx++)
         {
-            var material = genericMaterialsModel.getItem(n);
+            var material = genericMaterialsModel.getItem(material_idx)
             if (material.root_material_id == search_root_id)
             {
                 if (materialList.expandedBrands.indexOf("Generic") == -1)
@@ -39,20 +47,22 @@ Item
                     materialList.expandedBrands.push("Generic");
                     materialList.currentBrand = "Generic"
                 }
+                base.currentItem = material
+                persistExpandedCategories()
+                return true
             }
         }
-        for (var i = 0; i < materialsModel.rowCount(); i++)
+        for (var brand_idx = 0; brand_idx < materialsModel.rowCount(); brand_idx++)
         {
-            var brand = materialsModel.getItem(i);
-            var types_model = brand.material_types;
-
-            for (var j = 0; j < types_model.rowCount(); j++)
+            var brand = materialsModel.getItem(brand_idx)
+            var types_model = brand.material_types
+            for (var type_idx = 0; type_idx < types_model.rowCount(); type_idx++)
             {
-                var type = types_model.getItem(j);
-                var colors_model = type.colors;
-                for (var k = 0; k < colors_model.rowCount(); k++)
+                var type = types_model.getItem(type_idx)
+                var colors_model = type.colors
+                for (var material_idx = 0; material_idx < colors_model.rowCount(); material_idx++)
                 {
-                    var material = colors_model.getItem(k);
+                    var material = colors_model.getItem(material_idx)
                     if (material.root_material_id == search_root_id)
                     {
                         if (materialList.expandedBrands.indexOf(brand.name) == -1)
@@ -65,66 +75,30 @@ Item
                             materialList.expandedTypes.push(brand.name + "_" + type.name)
                             materialList.currentType = brand.name + "_" + type.name
                         }
+                        base.currentItem = material
+                        persistExpandedCategories()
+                        return true
                     }
                 }
             }
+            return false
         }
-        UM.Preferences.setValue("cura/expanded_brands", materialList.expandedBrands.join(";"));
-        UM.Preferences.setValue("cura/expanded_types", materialList.expandedTypes.join(";"));
     }
 
-//    Connections
-//    {
-//        target: materialsModel
-//        onItemsChanged:
-//        {
-//            var currentItemId = base.hasCurrentItem ? base.currentItem.root_material_id : ""
-//            var position = Cura.ExtruderManager.activeExtruderIndex
-//            console.log("!!!!!!!!!!!!!!!!!!! on items changed:", base.newRootMaterialIdToSwitchTo)
-//
-//            // try to pick the currently selected item; it may have been moved
-//            if (base.newRootMaterialIdToSwitchTo == "")
-//            {
-//                console.log("material id is empty, setting to ", currentItemId)
-//                base.newRootMaterialIdToSwitchTo = currentItemId
-//            }
-//
-//            console.log("PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP", materialsModel.rowCount())
-//            for (var brand_idx = 0; brand_idx < materialsModel.rowCount(); ++brand_idx)
-//            {
-//                var brand = materialsModel.getItem(brand_idx)
-//                console.log(item.root_material_id, "=", base.newRootMaterialIdToSwitchTo)
-//
-//                for (var type_idx = 0; type_idx < brand.material_types.rowCount(); ++type_idx)
-//                {
-//                    var type = brand.material_types.getItem(type_idx)
-//                    if (type.root_material_id == base.newRootMaterialIdToSwitchTo)
-//                    {
-//                        // Switch to the newly created profile if needed
-//                        base.currentItem = item
-//    //                    materialDetailsPanel.activateDetailsWithIndex(materialListView.currentIndex)
-//    //                    if (base.toActivateNewMaterial)
-//    //                    {
-//    //                        Cura.MachineManager.setMaterial(position, item.container_node)
-//    //                    }
-//                        base.newRootMaterialIdToSwitchTo = ""
-//                        base.toActivateNewMaterial = false
-//                        return
-//                    }
-//                }
-//            }
-//
-//            // If the new id can't be found, then do nothing
-////            materialListView.currentIndex = 0
-////            materialListView.activateDetailsWithIndex(materialListView.currentIndex)
-////            if (base.toActivateNewMaterial)
-////            {
-////                Cura.MachineManager.setMaterial(position, materialsModel.getItem(0).container_node)
-////            }
-//            base.newRootMaterialIdToSwitchTo = ""
-//            base.toActivateNewMaterial = false
-//        }
-//    }
+    Connections
+    {
+        target: materialsModel
+        onItemsChanged:
+        {
+            var correctlyExpanded = materialList.expandActiveMaterial(base.newRootMaterialIdToSwitchTo)
+//          if (base.toActivateNewMaterial)
+//          {
+//              Cura.MachineManager.setMaterial(position, material.container_node)
+//          }
+            base.newRootMaterialIdToSwitchTo = ""
+            base.toActivateNewMaterial = false
+        }
+    }
     
     Column
     {
@@ -199,97 +173,6 @@ Item
                 Repeater
                 {
                     model: favoriteMaterialsModel
-                    delegate: MaterialsSlot {
-                        material: model
-                    }
-                }
-            }
-        }
-        Rectangle
-        {
-            property var expanded: materialList.expandedBrands.indexOf("Generic") > -1
-
-            id: generic_section
-            height: childrenRect.height
-            width: materialList.width
-            Rectangle
-            {
-                id: generic_header_background
-                color: UM.Theme.getColor("favorites_header_bar")
-                anchors.fill: generic_header
-            }
-            Row
-            {
-                id: generic_header
-                Label
-                {
-                    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:
-                {
-                    const index = materialList.expandedBrands.indexOf("Generic")
-
-                    if (index > -1)
-                    {
-                        // Remove it
-                        materialList.expandedBrands.splice(index, 1)
-                        generic_section.expanded = false
-                    }
-                    else
-                    {
-                        // Add it
-                        materialList.expandedBrands.push("Generic")
-                        generic_section.expanded = true
-                    }
-                }
-            }
-            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: MaterialsSlot
                     {
                         material: model
@@ -297,11 +180,25 @@ Item
                 }
             }
         }
+
+        MaterialsBrandSection
+        {
+            id: genericSection
+            sectionName: "Generic"
+            elements: genericMaterialsModel
+            hasMaterialTypes: false
+        }
         Repeater
         {
             id: brand_list
             model: materialsModel
-            delegate: MaterialsBrandSection {}
+            delegate: MaterialsBrandSection
+            {
+                id: brandSection
+                sectionName: model.name
+                elements: model.material_types
+                hasMaterialTypes: true
+            }
         }
     }
 }

resources/qml/Preferences/Materials/MaterialsPage.qml

@@ -21,9 +21,13 @@ Item
     property var hasCurrentItem: base.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;
+        if (!hasCurrentItem)
+        {
+            return false
+        }
+        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
@@ -37,9 +41,11 @@ Item
         name: "cura"
     }
 
-    Component.onCompleted: { materialListView.expandActiveMaterial(active_root_material_id) }
+    // When loaded, try to select the active material in the tree
+    Component.onCompleted: materialListView.expandActiveMaterial(active_root_material_id)
 
-    onCurrentItemChanged: { materialDetailsPanel.currentItem = currentItem }
+    // Every time the selected item has changed, notify to the details panel
+    onCurrentItemChanged: materialDetailsPanel.currentItem = currentItem
 
     // Main layout
     Label

resources/qml/Preferences/Materials/MaterialsTypeSection.qml

@@ -13,6 +13,7 @@ import Cura 1.0 as Cura
 Rectangle
 {
     id: material_type_section
+    property var materialType
     property var expanded: materialList.expandedTypes.indexOf(model.brand + "_" + model.name) > -1
     property var colors_model: model.colors
     height: childrenRect.height
@@ -120,7 +121,8 @@ Rectangle
         Repeater
         {
             model: colors_model
-            delegate: MaterialsSlot {
+            delegate: MaterialsSlot
+            {
                 material: model
             }
         }