Reuse MaterialBrandSection component for Favorites, Generic and branded

materials.

This component will show different children depending on the
hasMaterialTypes flag.

Adjust some small UI issues.

Contributes to CURA-5682.

6 files changed, 61 insertions, 148 deletions

diff --git a/resources/qml/Preferences/Materials/MaterialsBrandSection.qml b/resources/qml/Preferences/Materials/MaterialsBrandSection.qml
index ef3a773835..c8f391dfb0 100644
--- a/resources/qml/Preferences/Materials/MaterialsBrandSection.qml
+++ b/resources/qml/Preferences/Materials/MaterialsBrandSection.qml
@@ -48,7 +48,7 @@ Rectangle
             height: UM.Theme.getSize("favorites_row").height
             width: parent.width - UM.Theme.getSize("favorites_button").width
             verticalAlignment: Text.AlignVCenter
-            leftPadding: 4
+            leftPadding: (UM.Theme.getSize("default_margin").width / 2) | 0
         }
         Button
         {
@@ -101,6 +101,7 @@ Rectangle
     }
     Column
     {
+        id: brandMaterialList
         anchors.top: brand_header.bottom
         width: parent.width
         anchors.left: parent.left
@@ -110,26 +111,14 @@ Rectangle
         Repeater
         {
             model: elementsModel
-            delegate: Item
+            delegate: Loader
             {
-                Loader
-                {
-                    id: loader
-                    property var element: model
-                    sourceComponent: hasMaterialTypes ? materialsTypeSection : materialSlot
-                }
+                id: loader
+                width: parent.width
+                property var element: model
+                sourceComponent: hasMaterialTypes ? materialsTypeSection : materialSlot
             }
         }
-        // In case there are no types, we create a material slot
-//        Repeater
-//        {
-//            model: elementsModel
-//            delegate: MaterialsSlot
-//            {
-//                visible: !hasMaterialTypes
-//                material: model
-//            }
-//        }
     }
 
     Component
diff --git a/resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml b/resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml
index 43e98d63a6..f72d93aff3 100644
--- a/resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml
+++ b/resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml
@@ -18,8 +18,11 @@ Item
     onCurrentItemChanged:
     {
         // When the current item changes, the detail view needs to be updated
-        updateMaterialPropertiesObject()
-        materialDetailsView.currentMaterialNode = currentItem.container_node
+        if (currentItem != null)
+        {
+            updateMaterialPropertiesObject()
+            materialDetailsView.currentMaterialNode = currentItem.container_node
+        }
     }
 
     function updateMaterialPropertiesObject()
diff --git a/resources/qml/Preferences/Materials/MaterialsList.qml b/resources/qml/Preferences/Materials/MaterialsList.qml
index 9b8903d7da..cb5de685e2 100644
--- a/resources/qml/Preferences/Materials/MaterialsList.qml
+++ b/resources/qml/Preferences/Materials/MaterialsList.qml
@@ -13,7 +13,6 @@ import Cura 1.0 as Cura
 Item
 {
     id: materialList
-    width: materialScrollView.width - 17
     height: childrenRect.height
 
     // Children
@@ -121,93 +120,16 @@ Item
     
     Column
     {
-//        Rectangle
-//        {
-//            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
-//                    }
-//                }
-//            }
-//        }
+        width: materialList.width
+        height: childrenRect.height
 
-//        MaterialsBrandSection
-//        {
-//            id: favoriteSection
-//            sectionName: "Favorites"
-//            elementsModel: favoriteMaterialsModel
-//            hasMaterialTypes: false
-//            expanded: true
-//        }
+        MaterialsBrandSection
+        {
+            id: favoriteSection
+            sectionName: "Favorites"
+            elementsModel: favoriteMaterialsModel
+            hasMaterialTypes: false
+        }
 
         MaterialsBrandSection
         {
@@ -216,18 +138,17 @@ Item
             elementsModel: genericMaterialsModel
             hasMaterialTypes: false
         }
-//
-//        Repeater
-//        {
-//            id: brand_list
-//            model: materialsModel
-//            delegate: MaterialsBrandSection
-//            {
-//                id: brandSection
-//                sectionName: model.name
-//                elementsModel: model.material_types
-//                hasMaterialTypes: true
-//            }
-//        }
+
+        Repeater
+        {
+            model: materialsModel
+            delegate: MaterialsBrandSection
+            {
+                id: brandSection
+                sectionName: model.name
+                elementsModel: model.material_types
+                hasMaterialTypes: true
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/resources/qml/Preferences/Materials/MaterialsPage.qml b/resources/qml/Preferences/Materials/MaterialsPage.qml
index 7a7a2b885f..2050f59739 100644
--- a/resources/qml/Preferences/Materials/MaterialsPage.qml
+++ b/resources/qml/Preferences/Materials/MaterialsPage.qml
@@ -225,13 +225,14 @@ Item
                 color: palette.light
             }
 
-            width: true ? (parent.width * 0.4) | 0 : parent.width
+            width: (parent.width * 0.4) | 0
             frameVisible: true
-            verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn
+            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
 
             MaterialsList
             {
                 id: materialListView
+                width: materialScrollView.viewport.width
             }
         }
 
diff --git a/resources/qml/Preferences/Materials/MaterialsSlot.qml b/resources/qml/Preferences/Materials/MaterialsSlot.qml
index 63d40068ce..a474b52838 100644
--- a/resources/qml/Preferences/Materials/MaterialsSlot.qml
+++ b/resources/qml/Preferences/Materials/MaterialsSlot.qml
@@ -12,34 +12,34 @@ import Cura 1.0 as Cura
 
 Rectangle
 {
-    id: material_slot
-    property var material
+    id: materialSlot
+    property var material: null
     property var hovered: false
-    property var is_favorite: material.is_favorite
+    property var is_favorite: material != null ? material.is_favorite : false
 
     height: UM.Theme.getSize("favorites_row").height
     width: parent.width
-    color: base.currentItem.root_material_id == material.root_material_id ? UM.Theme.getColor("favorites_row_selected") : "transparent"
+    color: material != null ? (base.currentItem.root_material_id == material.root_material_id ? UM.Theme.getColor("favorites_row_selected") : "transparent") : "transparent"
 
     Rectangle
     {
         id: swatch
-        color: material.color_code
+        color: material != null ? material.color_code : "transparent"
         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.verticalCenter: materialSlot.verticalCenter
+        anchors.left: materialSlot.left
         anchors.leftMargin: UM.Theme.getSize("default_margin").width
     }
     Label
     {
-        text: material.brand + " " + material.name
+        text: material != null ? material.brand + " " + material.name : ""
         verticalAlignment: Text.AlignVCenter
         height: parent.height
         anchors.left: swatch.right
-        anchors.verticalCenter: parent.verticalCenter
+        anchors.verticalCenter: materialSlot.verticalCenter
         anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
     }
     MouseArea
@@ -52,8 +52,8 @@ Rectangle
             base.currentItem = material
         }
         hoverEnabled: true
-        onEntered: { material_slot.hovered = true }
-        onExited: { material_slot.hovered = false }
+        onEntered: { materialSlot.hovered = true }
+        onExited: { materialSlot.hovered = false }
     }
     Button
     {
@@ -61,21 +61,21 @@ Rectangle
         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
+        visible: materialSlot.hovered || materialSlot.is_favorite || favorite_button.hovered
         anchors
         {
-            right: parent.right
-            verticalCenter: parent.verticalCenter
+            right: materialSlot.right
+            verticalCenter: materialSlot.verticalCenter
         }
         onClicked:
         {
-            if (material_slot.is_favorite) {
+            if (materialSlot.is_favorite) {
                 base.materialManager.removeFavorite(material.root_material_id)
-                material_slot.is_favorite = false
+                materialSlot.is_favorite = false
                 return
             }
             base.materialManager.addFavorite(material.root_material_id)
-            material_slot.is_favorite = true
+            materialSlot.is_favorite = true
             return
         }
         style: ButtonStyle
@@ -89,8 +89,8 @@ Rectangle
         UM.RecolorImage {
             anchors
             {
-                verticalCenter: parent.verticalCenter
-                horizontalCenter: parent.horizontalCenter
+                verticalCenter: favorite_button.verticalCenter
+                horizontalCenter: favorite_button.horizontalCenter
             }
             width: UM.Theme.getSize("favorites_button_icon").width
             height: UM.Theme.getSize("favorites_button_icon").height
@@ -104,7 +104,7 @@ Rectangle
                 }
                 else
                 {
-                    if (material_slot.is_favorite)
+                    if (materialSlot.is_favorite)
                     {
                         return UM.Theme.getColor("primary")
                     }
@@ -114,7 +114,7 @@ Rectangle
                     }
                 }
             }
-            source: material_slot.is_favorite ? UM.Theme.getIcon("favorites_star_full") : UM.Theme.getIcon("favorites_star_empty")
+            source: materialSlot.is_favorite ? UM.Theme.getIcon("favorites_star_full") : UM.Theme.getIcon("favorites_star_empty")
         }
     }
 }
\ No newline at end of file
diff --git a/resources/qml/Preferences/Materials/MaterialsTypeSection.qml b/resources/qml/Preferences/Materials/MaterialsTypeSection.qml
index bbdf2d84da..f62fc4ee16 100644
--- a/resources/qml/Preferences/Materials/MaterialsTypeSection.qml
+++ b/resources/qml/Preferences/Materials/MaterialsTypeSection.qml
@@ -38,7 +38,7 @@ Rectangle
     Rectangle
     {
         id: material_type_header_border
-        color: UM.Theme.getColor("lining")
+        color: UM.Theme.getColor("favorites_header_bar")
         anchors.bottom: material_type_header.bottom
         anchors.left: material_type_header.left
         height: UM.Theme.getSize("default_lining").height
@@ -47,17 +47,17 @@ Rectangle
     Row
     {
         id: material_type_header
-        width: parent.width - 8
+        width: parent.width
+        leftPadding: UM.Theme.getSize("default_margin").width
         anchors
         {
             left: parent.left
-            leftMargin: 8
         }
         Label
         {
             text: materialType.name
             height: UM.Theme.getSize("favorites_row").height
-            width: parent.width - UM.Theme.getSize("favorites_button").width
+            width: parent.width - parent.leftPadding - UM.Theme.getSize("favorites_button").width
             id: material_type_name
             verticalAlignment: Text.AlignVCenter
         }
@@ -117,7 +117,6 @@ Rectangle
         visible: material_type_section.expanded
         width: parent.width
         anchors.top: material_type_header.bottom
-        anchors.left: parent.left
         Repeater
         {
             model: colorsModel