Clean up the code by removing duplicate code. Also try to unify the

MaterialsBrandSection to use the same component for favorites, generic
and branded materials.

Contributes to CURA-5682.

resources/qml/Preferences/Materials/MaterialsBrandSection.qml

@@ -15,7 +15,7 @@ Rectangle
     id: brand_section
     
     property var sectionName: ""
-    property var elements   // This can be a MaterialTypesModel or GenericMaterialsModel
+    property var elementsModel   // This can be a MaterialTypesModel or GenericMaterialsModel or FavoriteMaterialsModel
     property var hasMaterialTypes: true  // It indicates wheather it has material types or not
     property var expanded: materialList.expandedBrands.indexOf(sectionName) > -1
 
@@ -109,22 +109,44 @@ Rectangle
 
         Repeater
         {
-            model: elements
+            model: elementsModel
-            delegate: MaterialsTypeSection
+            delegate: Item
             {
-                visible: hasMaterialTypes
+                Loader
-                materialType: model
+                {
+                    id: loader
+                    property var element: model
+                    sourceComponent: hasMaterialTypes ? materialsTypeSection : materialSlot
+                }
             }
         }
         // In case there are no types, we create a material slot
-        Repeater
+//        Repeater
+//        {
+//            model: elementsModel
+//            delegate: MaterialsSlot
+//            {
+//                visible: !hasMaterialTypes
+//                material: model
+//            }
+//        }
+    }
+
+    Component
+    {
+        id: materialsTypeSection
+        MaterialsTypeSection
         {
-            model: elements
+            materialType: element
-            delegate: MaterialsSlot
+        }
-            {
+    }
-                visible: !hasMaterialTypes
+
-                material: model
+    Component
-            }
+    {
+        id: materialSlot
+        MaterialsSlot
+        {
+            material: element
         }
     }
 

resources/qml/Preferences/Materials/MaterialsList.qml

@@ -92,143 +92,142 @@ Item
         return false
     }
 
+    function updateAfterModelChanges()
+    {
+        var correctlyExpanded = materialList.expandActiveMaterial(base.newRootMaterialIdToSwitchTo)
+        if (correctlyExpanded)
+        {
+            if (base.toActivateNewMaterial)
+            {
+                var position = Cura.ExtruderManager.activeExtruderIndex
+                Cura.MachineManager.setMaterial(position, base.currentItem.container_node)
+            }
+            base.newRootMaterialIdToSwitchTo = ""
+            base.toActivateNewMaterial = false
+        }
+    }
+
     Connections
     {
         target: materialsModel
-        onItemsChanged:
+        onItemsChanged: updateAfterModelChanges()
-        {
-            var correctlyExpanded = materialList.expandActiveMaterial(base.newRootMaterialIdToSwitchTo)
-            if (correctlyExpanded)
-            {
-                if (base.toActivateNewMaterial)
-                {
-                    var position = Cura.ExtruderManager.activeExtruderIndex
-                    Cura.MachineManager.setMaterial(position, base.currentItem.container_node)
-                }
-                base.newRootMaterialIdToSwitchTo = ""
-                base.toActivateNewMaterial = false
-            }
-        }
     }
 
     Connections
     {
         target: genericMaterialsModel
-        onItemsChanged:
+        onItemsChanged: updateAfterModelChanges()
-        {
-            var correctlyExpanded = materialList.expandActiveMaterial(base.newRootMaterialIdToSwitchTo)
-            if (correctlyExpanded)
-            {
-                if (base.toActivateNewMaterial)
-                {
-                    var position = Cura.ExtruderManager.activeExtruderIndex
-                    Cura.MachineManager.setMaterial(position, base.currentItem.container_node)
-                }
-                base.newRootMaterialIdToSwitchTo = ""
-                base.toActivateNewMaterial = false
-            }
-        }
     }
     
     Column
     {
-        Rectangle
+//        Rectangle
-        {
+//        {
-            property var expanded: true
+//            property var expanded: true
+//
+//            id: favorites_section
+//            height: childrenRect.height
+//            width: materialList.width
+//            Rectangle
+//            {
+//                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: MaterialsSlot
+//                    {
+//                        material: model
+//                    }
+//                }
+//            }
+//        }
 
-            id: favorites_section
+//        MaterialsBrandSection
-            height: childrenRect.height
+//        {
-            width: materialList.width
+//            id: favoriteSection
-            Rectangle
+//            sectionName: "Favorites"
-            {
+//            elementsModel: favoriteMaterialsModel
-                id: favorites_header_background
+//            hasMaterialTypes: false
-                color: UM.Theme.getColor("favorites_header_bar")
+//            expanded: true
-                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: MaterialsSlot
-                    {
-                        material: model
-                    }
-                }
-            }
-        }
 
         MaterialsBrandSection
         {
             id: genericSection
             sectionName: "Generic"
-            elements: genericMaterialsModel
+            elementsModel: genericMaterialsModel
             hasMaterialTypes: false
         }
-        Repeater
+//
-        {
+//        Repeater
-            id: brand_list
+//        {
-            model: materialsModel
+//            id: brand_list
-            delegate: MaterialsBrandSection
+//            model: materialsModel
-            {
+//            delegate: MaterialsBrandSection
-                id: brandSection
+//            {
-                sectionName: model.name
+//                id: brandSection
-                elements: model.material_types
+//                sectionName: model.name
-                hasMaterialTypes: true
+//                elementsModel: model.material_types
-            }
+//                hasMaterialTypes: true
-        }
+//            }
+//        }
     }
 }

resources/qml/Preferences/Materials/MaterialsTypeSection.qml

@@ -14,8 +14,8 @@ Rectangle
 {
     id: material_type_section
     property var materialType
-    property var expanded: materialList.expandedTypes.indexOf(model.brand + "_" + model.name) > -1
+    property var expanded: materialList.expandedTypes.indexOf(materialType.brand + "_" + materialType.name) > -1
-    property var colors_model: model.colors
+    property var colorsModel: materialType.colors
     height: childrenRect.height
     width: parent.width
     Rectangle
@@ -23,7 +23,7 @@ Rectangle
         id: material_type_header_background
         color:
         {
-            if(!expanded && model.brand + "_" + model.name == materialList.currentType)
+            if(!expanded && materialType.brand + "_" + materialType.name == materialList.currentType)
             {
                 return UM.Theme.getColor("favorites_row_selected")
             }
@@ -55,7 +55,7 @@ Rectangle
         }
         Label
         {
-            text: model.name
+            text: materialType.name
             height: UM.Theme.getSize("favorites_row").height
             width: parent.width - UM.Theme.getSize("favorites_button").width
             id: material_type_name
@@ -94,7 +94,7 @@ Rectangle
         anchors.fill: material_type_header
         onPressed:
         {
-            const identifier = model.brand + "_" + model.name;
+            const identifier = materialType.brand + "_" + materialType.name;
             const i = materialList.expandedTypes.indexOf(identifier)
             if (i > -1)
             {
@@ -120,7 +120,7 @@ Rectangle
         anchors.left: parent.left
         Repeater
         {
-            model: colors_model
+            model: colorsModel
             delegate: MaterialsSlot
             {
                 material: model
@@ -133,7 +133,7 @@ Rectangle
         target: UM.Preferences
         onPreferenceChanged:
         {
-            expanded = materialList.expandedTypes.indexOf(model.brand + "_" + model.name) > -1
+            expanded = materialList.expandedTypes.indexOf(materialType.brand + "_" + materialType.name) > -1
         }
     }
 }