Improved expansion behavior

Contributes to CURA-5682

- Active material is now expanded by default when opening the manager

- Expanded and collapsed sections are saved to preferences

- Sections are now highlighted when collapsed and having a selected material inside

- Bug with losing focus between fields is not yet fixed

cura/CuraApplication.py

@@ -480,7 +480,9 @@ class CuraApplication(QtApplication):
         preferences.addPreference("view/filter_current_build_plate", False)
         preferences.addPreference("cura/sidebar_collapsed", False)
 
-        preferences.addPreference("cura/favorite_materials", ";".join([]))
+        preferences.addPreference("cura/favorite_materials", "")
+        preferences.addPreference("cura/expanded_brands", "")
+        preferences.addPreference("cura/expanded_types", "")
 
         self._need_to_show_user_agreement = not preferences.getValue("general/accepted_user_agreement")
 

cura/Machines/Models/MaterialBrandsModel.py

@@ -12,7 +12,8 @@ class MaterialTypesModel(ListModel):
         super().__init__(parent)
 
         self.addRoleName(Qt.UserRole + 1, "name")
-        self.addRoleName(Qt.UserRole + 2, "colors")
+        self.addRoleName(Qt.UserRole + 2, "brand")
+        self.addRoleName(Qt.UserRole + 3, "colors")
 
 class MaterialBrandsModel(BaseMaterialsModel):
 
@@ -86,6 +87,7 @@ class MaterialBrandsModel(BaseMaterialsModel):
             for material_type, material_list in material_dict.items():
                 material_type_item = {
                     "name": material_type,
+                    "brand": brand,
                     "colors": BaseMaterialsModel(self)
                 }
                 material_type_item["colors"].clear()

resources/qml/Preferences/Materials/MaterialsBrandSection.qml

@@ -13,14 +13,24 @@ import Cura 1.0 as Cura
 Rectangle
 {
     id: brand_section
-    property var expanded: base.collapsed_brands.indexOf(model.name) > -1
+    property var expanded: base.expanded_brands.indexOf(model.name) > -1
     property var types_model: model.material_types
     height: childrenRect.height
     width: parent.width
     Rectangle
     {
         id: brand_header_background
-        color: UM.Theme.getColor("favorites_header_bar")
+        color:
+        {
+            if(!expanded && model.name == base.current_brand)
+            {
+                return UM.Theme.getColor("favorites_row_selected")
+            }
+            else
+            {
+                return UM.Theme.getColor("favorites_header_bar")
+            }
+        }
         anchors.fill: brand_header
     }
     Row
@@ -69,19 +79,20 @@ Rectangle
         anchors.fill: brand_header
         onPressed:
         {
-            const i = base.collapsed_brands.indexOf(model.name)
+            const i = base.expanded_brands.indexOf(model.name)
             if (i > -1)
             {
                 // Remove it
-                base.collapsed_brands.splice(i, 1)
+                base.expanded_brands.splice(i, 1)
                 brand_section.expanded = false
             }
             else
             {
                 // Add it
-                base.collapsed_brands.push(model.name)
+                base.expanded_brands.push(model.name)
                 brand_section.expanded = true
             }
+            UM.Preferences.setValue("cura/expanded_brands", base.expanded_brands.join(";"));
         }
     }
     Column
@@ -97,4 +108,12 @@ Rectangle
             delegate: MaterialsTypeSection {}
         }
     }
+
+    Connections {
+        target: UM.Preferences
+        onPreferenceChanged:
+        {
+            expanded = base.expanded_brands.indexOf(model.name) > -1
+        }
+    }
 }

resources/qml/Preferences/Materials/MaterialsList.qml

@@ -102,7 +102,7 @@ Item
         }
         Rectangle
         {
-            property var expanded: base.collapsed_brands.indexOf("Generic") > -1
+            property var expanded: base.expanded_brands.indexOf("Generic") > -1
 
             id: generic_section
             height: childrenRect.height

resources/qml/Preferences/Materials/MaterialsPage.qml

@@ -17,6 +17,8 @@ Item
     // Keep PreferencesDialog happy
     property var resetEnabled: false
     property var currentItem: null
+    property var current_type: null
+    property var current_brand: null
     property var isCurrentItemActivated:
     {
         const extruder_position = Cura.ExtruderManager.activeExtruderIndex;
@@ -26,49 +28,71 @@ Item
     property string newRootMaterialIdToSwitchTo: ""
     property bool toActivateNewMaterial: false
 
-    // TODO: Save these to preferences
+    property var expanded_brands: UM.Preferences.getValue("cura/expanded_brands").split(";")
-    property var collapsed_brands: []
+    property var expanded_types: UM.Preferences.getValue("cura/expanded_types").split(";")
-    property var collapsed_types: []
+    property var extruder_position: Cura.ExtruderManager.activeExtruderIndex
+    property var active_root_material_id: Cura.MachineManager.currentRootMaterialId[extruder_position]
 
     UM.I18nCatalog
     {
         id: catalog
         name: "cura"
     }
-    Cura.MaterialBrandsModel { id: materialsModel }
 
-    function findModelByRootId( search_root_id )
+    Cura.MaterialBrandsModel { id: materials_model }
+    Cura.GenericMaterialsModel { id: generic_materials_model }
+
+    function expandActiveMaterial( search_root_id )
     {
-        for (var i = 0; i < materialsModel.rowCount(); i++)
+        for (var n = 0; n < generic_materials_model.rowCount(); n++)
         {
-            var types_model = materialsModel.getItem(i).material_types;
+            var material = generic_materials_model.getItem(n);
+            if (material.root_material_id == search_root_id)
+            {
+                if (base.expanded_brands.indexOf("Generic") == -1)
+                {
+                    base.expanded_brands.push("Generic");
+                    base.current_brand = "Generic"
+                }
+            }
+        }
+        for (var i = 0; i < materials_model.rowCount(); i++)
+        {
+            var brand = materials_model.getItem(i);
+            var types_model = brand.material_types;
+
             for (var j = 0; j < types_model.rowCount(); j++)
             {
-                var colors_model = types_model.getItem(j).colors;
+                var type = types_model.getItem(j);
+                var colors_model = type.colors;
                 for (var k = 0; k < colors_model.rowCount(); k++)
                 {
                     var material = colors_model.getItem(k);
                     if (material.root_material_id == search_root_id)
                     {
-                        return material
+                        if (base.expanded_brands.indexOf(brand.name) == -1)
+                        {
+                            base.expanded_brands.push(brand.name);
+                            base.current_brand = brand.name
+                        }
+                        if (base.expanded_types.indexOf(brand.name+"_"+type.name) == -1)
+                        {
+                            base.expanded_types.push(brand.name+"_"+type.name)
+                            base.current_type = brand.name+"_"+type.name
+                        }
                     }
                 }
             }
         }
+        UM.Preferences.setValue("cura/expanded_brands", base.expanded_brands.join(";"));
+        UM.Preferences.setValue("cura/expanded_types", base.expanded_types.join(";"));
     }
-    Component.onCompleted:
+    Component.onCompleted: { expandActiveMaterial(active_root_material_id) }
-    {
-        // 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];
-        console.log("goign to search for", active_root_material_id)
-        base.currentItem = findModelByRootId(active_root_material_id)
-    }
 
     onCurrentItemChanged: { MaterialsDetailsPanel.currentItem = currentItem }
     Connections
     {
-        target: materialsModel
+        target: materials_model
         onItemsChanged:
         {
             var currentItemId = base.currentItem == null ? "" : base.currentItem.root_material_id;
@@ -80,9 +104,9 @@ Item
                 base.newRootMaterialIdToSwitchTo = currentItemId;
             }
 
-            for (var idx = 0; idx < materialsModel.rowCount(); ++idx)
+            for (var idx = 0; idx < materials_model.rowCount(); ++idx)
             {
-                var item = materialsModel.getItem(idx);
+                var item = materials_model.getItem(idx);
                 if (item.root_material_id == base.newRootMaterialIdToSwitchTo)
                 {
                     // Switch to the newly created profile if needed
@@ -102,7 +126,7 @@ Item
             materialListView.activateDetailsWithIndex(materialListView.currentIndex);
             if (base.toActivateNewMaterial)
             {
-                Cura.MachineManager.setMaterial(position, materialsModel.getItem(0).container_node);
+                Cura.MachineManager.setMaterial(position, materials_model.getItem(0).container_node);
             }
             base.newRootMaterialIdToSwitchTo = "";
             base.toActivateNewMaterial = false;

resources/qml/Preferences/Materials/MaterialsSlot.qml

@@ -20,6 +20,12 @@ Rectangle
     height: UM.Theme.getSize("favorites_row").height
     width: parent.width
     color: base.currentItem == model ? UM.Theme.getColor("favorites_row_selected") : "transparent"
+
+    Component.onCompleted: {
+        if (material.root_material_id == base.active_root_material_id) {
+            base.currentItem = material
+        }
+    }
     
     Item
     {
@@ -49,7 +55,11 @@ Rectangle
         MouseArea
         {
             anchors.fill: parent
-            onClicked: { base.currentItem = material }
+            onClicked: {
+                base.currentItem = material
+                base.current_brand = material.brand
+                base.current_type = material.brand+"_"+material.material
+            }
             hoverEnabled: true
             onEntered: { material_slot.hovered = true }
             onExited: { material_slot.hovered = false }

resources/qml/Preferences/Materials/MaterialsTypeSection.qml

@@ -13,13 +13,30 @@ import Cura 1.0 as Cura
 Rectangle
 {
     id: material_type_section
-    property var expanded: base.collapsed_types.indexOf(model.brand + "_" + model.name) > -1
+    property var expanded: base.expanded_types.indexOf(model.brand + "_" + model.name) > -1
     property var colors_model: model.colors
     height: childrenRect.height
     width: parent.width
     Rectangle
     {
         id: material_type_header_background
+        color:
+        {
+            if(!expanded && model.brand+"_"+model.name == base.current_type)
+            {
+                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("lining")
         anchors.bottom: material_type_header.bottom
         anchors.left: material_type_header.left
@@ -42,6 +59,7 @@ Rectangle
             width: parent.width - UM.Theme.getSize("favorites_button").width
             id: material_type_name
             verticalAlignment: Text.AlignVCenter
+            
         }
         Button
         {
@@ -76,19 +94,21 @@ Rectangle
         anchors.fill: material_type_header
         onPressed:
         {
-            const i = base.collapsed_types.indexOf(model.brand + "_" + model.name)
+            const identifier = model.brand + "_" + model.name;
+            const i = base.expanded_types.indexOf(identifier)
             if (i > -1)
             {
                 // Remove it
-                base.collapsed_types.splice(i, 1)
+                base.expanded_types.splice(i, 1)
                 material_type_section.expanded = false
             }
             else
             {
                 // Add it
-                base.collapsed_types.push(model.brand + "_" + model.name)
+                base.expanded_types.push(identifier)
                 material_type_section.expanded = true
             }
+            UM.Preferences.setValue("cura/expanded_types", base.expanded_types.join(";"));
         }
     }
     Column
@@ -106,4 +126,12 @@ Rectangle
             }
         }
     }
+
+    Connections {
+        target: UM.Preferences
+        onPreferenceChanged:
+        {
+            expanded = base.expanded_types.indexOf(model.brand + "_" + model.name) > -1
+        }
+    }
 }