Update materials list in materials preference page

Main improvement of this commit is that the reusable category button
component is used as the collapsable header component for the material
brands/types.

CURA-8979

resources/qml/Preferences/Materials/MaterialsBrandSection.qml

@@ -10,100 +10,52 @@ import Cura 1.0 as Cura
 
 // An expandable list of materials. Includes both the header (this file) and the items (brandMaterialList)
 
-Item
+Column
 {
     id: brand_section
 
-    property var sectionName: ""
+    property string sectionName: ""
     property var elementsModel   // This can be a MaterialTypesModel or GenericMaterialsModel or FavoriteMaterialsModel
-    property var hasMaterialTypes: true  // It indicates whether it has material types or not
-    property var expanded: materialList.expandedBrands.indexOf(sectionName) > -1
+    property bool hasMaterialTypes: true  // It indicates whether it has material types or not
+    property bool expanded: materialList.expandedBrands.indexOf(sectionName) !== -1
 
-    height: childrenRect.height
     width: parent.width
-    Rectangle
-    {
-        id: brand_header_background
-        color:
-        {
-            if (!expanded && sectionName == materialList.currentBrand)
-            {
-                return UM.Theme.getColor("favorites_row_selected")
-            }
-            else
-            {
-                return UM.Theme.getColor("favorites_header_bar")
-            }
-        }
-        anchors.fill: brand_header
-    }
-    Row
+
+    Cura.CategoryButton
     {
-        id: brand_header
         width: parent.width
-        UM.Label
+        height: UM.Theme.getSize("favorites_row").height
+        labelText: sectionName
+        labelFont: UM.Theme.getFont("default_bold")
+        expanded: brand_section.expanded
+        onClicked:
         {
-            id: brand_name
-            text: sectionName
-            height: UM.Theme.getSize("favorites_row").height
-            width: parent.width - UM.Theme.getSize("favorites_button").width
-            leftPadding: Math.round(UM.Theme.getSize("default_margin").width / 2)
-        }
-        Item
-        {
-            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
-                color: "black"
-                source: brand_section.expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
-            }
-        }
-    }
-    MouseArea
-    {
-        anchors.fill: brand_header
-        onPressed:
-        {
-            const i = materialList.expandedBrands.indexOf(sectionName)
-            if (i > -1)
+            const i = materialList.expandedBrands.indexOf(sectionName);
+            if (i !== -1)
             {
-                // Remove it
-                materialList.expandedBrands.splice(i, 1)
-                brand_section.expanded = false
+                materialList.expandedBrands.splice(i, 1); // remove
             }
             else
             {
-                // Add it
-                materialList.expandedBrands.push(sectionName)
-                brand_section.expanded = true
+                materialList.expandedBrands.push(sectionName); // add
             }
             UM.Preferences.setValue("cura/expanded_brands", materialList.expandedBrands.join(";"));
         }
     }
+
     Column
     {
         id: brandMaterialList
-        anchors.top: brand_header.bottom
         width: parent.width
-        anchors.left: parent ? parent.left : undefined
-        height: brand_section.expanded ? childrenRect.height : 0
         visible: brand_section.expanded
 
         Repeater
         {
             model: elementsModel
+
             delegate: Loader
             {
-                id: loader
-                width: parent ? parent.width : 0
+                width: parent.width
                 property var element: model
                 sourceComponent: hasMaterialTypes ? materialsTypeSection : materialSlot
             }
@@ -138,7 +90,7 @@ Item
                 return;
             }
 
-            expanded = materialList.expandedBrands.indexOf(sectionName) > -1
+            brand_section.expanded = materialList.expandedBrands.indexOf(sectionName) !== -1;
         }
     }
 }

resources/qml/Preferences/Materials/MaterialsTypeSection.qml

@@ -8,106 +8,45 @@ import QtQuick.Layouts 1.3
 import UM 1.5 as UM
 import Cura 1.0 as Cura
 
-Item
+Column
 {
     id: material_type_section
-    property var materialType
+    property var materialType: null
+    property string materialBrand: materialType !== null ? materialType.brand : ""
+    property string materialName: materialType !== null ? materialType.name : ""
+    property bool expanded: materialList.expandedTypes.indexOf(`${materialBrand}_${materialName}`) !== -1
+    property var colorsModel: materialType !== null ? materialType.colors : null
 
-    property string materialBrand: materialType != null ? materialType.brand : ""
-    property string materialName: materialType != null ? materialType.name : ""
-    property var expanded: materialList.expandedTypes.indexOf(materialBrand + "_" + materialName) > -1
-    property var colorsModel: materialType != null ? materialType.colors: null
-    height: childrenRect.height
-    width: parent ? parent.width : undefined
-    anchors.left: parent ? parent.left : undefined
-    Rectangle
-    {
-        id: material_type_header_background
-        color:
-        {
-            if (!expanded && `${materialBrand}_${materialName}` == materialList.currentType)
-            {
-                return UM.Theme.getColor("favorites_row_selected")
-            }
-            else
-            {
-                return "transparent"
-            }
-        }
-        width: parent.width
-        height: material_type_header.height
-    }
-    Rectangle
-    {
-        id: material_type_header_border
-        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
-        width: material_type_header.width
-    }
-    Row
-    {
-        id: material_type_header
-        width: parent.width
-        leftPadding: UM.Theme.getSize("default_margin").width
-        anchors
-        {
-            left: parent ? parent.left : undefined
-        }
-        UM.Label
-        {
-            text: materialName
-            height: UM.Theme.getSize("favorites_row").height
-            width: parent.width - parent.leftPadding - UM.Theme.getSize("favorites_button").width
-            id: material_type_name
-        }
-        Item // this one causes lots of warnings
-        {
-            implicitWidth: UM.Theme.getSize("favorites_button").width
-            implicitHeight: UM.Theme.getSize("favorites_button").height
-            UM.RecolorImage {
-                anchors
-                {
-                    verticalCenter: parent ? parent.verticalCenter : undefined
-                    horizontalCenter: parent ? parent.horizontalCenter : undefined
-                }
-                width: UM.Theme.getSize("standard_arrow").width
-                height: UM.Theme.getSize("standard_arrow").height
-                color: "black"
-                source: material_type_section.expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
-            }
+    width: parent.width
 
-        }
-    }
-    MouseArea // causes lots of warnings
+    Cura.CategoryButton
     {
-        anchors.fill: material_type_header
-        onPressed:
+        width: parent.width
+        height: UM.Theme.getSize("favorites_row").height
+        labelText: materialName
+        labelFont: UM.Theme.getFont("default")
+        expanded: material_type_section.expanded
+        onClicked:
         {
-            const identifier = materialBrand + "_" + materialName;
-            const i = materialList.expandedTypes.indexOf(identifier)
-            if (i > -1)
+            const identifier = `${materialBrand}_${materialName}`;
+            const i = materialList.expandedTypes.indexOf(identifier);
+            if (i !== -1)
             {
-                // Remove it
-                materialList.expandedTypes.splice(i, 1)
-                material_type_section.expanded = false
+                materialList.expandedTypes.splice(i, 1); // remove
             }
             else
             {
-                // Add it
-                materialList.expandedTypes.push(identifier)
-                material_type_section.expanded = true
+                materialList.expandedTypes.push(identifier); // add
             }
             UM.Preferences.setValue("cura/expanded_types", materialList.expandedTypes.join(";"));
         }
     }
+
     Column
     {
-        height: material_type_section.expanded ? childrenRect.height : 0
         visible: material_type_section.expanded
         width: parent.width
-        anchors.top: material_type_header.bottom
+
         Repeater
         {
             model: colorsModel
@@ -128,7 +67,7 @@ Item
                 return;
             }
 
-            expanded = materialList.expandedTypes.indexOf(materialBrand + "_" + materialName) > -1
+            material_type_section.expanded = materialList.expandedTypes.indexOf(`${materialBrand}_${materialName}`) !== -1;
         }
     }
 }