Move material list to separate QML file

Contributes to CURA-5378

resources/qml/Preferences/MaterialsList.qml

@@ -0,0 +1,266 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Uranium is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Layouts 1.3
+import QtQuick.Dialogs 1.2
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Item
+{
+    id: materialList
+    UM.I18nCatalog { id: catalog; name: "cura"; }
+    Cura.BrandMaterialsModel { id: materialsModel }
+    Cura.GenericMaterialsModel { id: genericMaterialsModel }
+
+    width: materialScrollView.width - 20
+    height: childrenRect.height
+
+
+    Column
+    {
+        Rectangle
+        {
+            height: 23
+            width: materialList.width
+            Label
+            {
+                text: "Generic"
+            }
+        }
+        Repeater
+        {
+            model: genericMaterialsModel
+            delegate: Rectangle
+            {
+                height: 23
+                width: materialList.width
+                color: "green"
+                Label
+                {
+                    text: model.name
+                }
+            }
+        }
+        Repeater
+        {
+            id: brand_list
+
+            model: materialsModel
+            delegate: Rectangle
+            {
+                id: brand_section
+                property var expanded: true
+                property var types_model: model.materials
+                height: childrenRect.height
+                width: parent.width
+                Rectangle
+                {
+                    id: brand_header_background
+                    color: "grey"
+                    anchors.fill: brand_header
+                }
+                Row
+                {
+                    id: brand_header
+                    width: parent.width
+                    Label
+                    {
+                        id: brand_name
+                        text: model.name
+                        height: 24
+                        width: parent.width - 24
+                        verticalAlignment: Text.AlignVCenter
+                        leftPadding: 4
+                    }
+                    Button
+                    {
+                        text: ""
+                        implicitWidth: 24
+                        implicitHeight: 24
+                        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: brand_section.expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
+                        }
+                        style: ButtonStyle
+                        {
+                            background: Rectangle
+                            {
+                                anchors.fill: parent
+                                color: "transparent"
+                            }
+                        }
+                    }
+                }
+                MouseArea
+                {
+                    anchors.fill: brand_header
+                    onPressed:
+                    {
+                        brand_section.expanded = !brand_section.expanded
+                    }
+                }
+                Column
+                {
+                    anchors.top: brand_header.bottom
+                    width: parent.width - leftPadding
+                    anchors.left: parent.left
+                    leftPadding: 8
+                    height: brand_section.expanded ? childrenRect.height : 0
+                    visible: brand_section.expanded
+                    Repeater
+                    {
+                        model: types_model
+                        delegate: Rectangle
+                        {
+                            id: material_type_section
+                            property var expanded: true
+                            property var colors_model: model.colors
+                            height: childrenRect.height
+                            width: parent.width
+                            Rectangle
+                            {
+                                id: material_type_header_background
+                                color: "grey"
+                                anchors.bottom: material_type_header.bottom
+                                height: 1
+                                width: parent.width
+                            }
+                            Row
+                            {
+                                id: material_type_header
+                                width: parent.width
+
+                                Label
+                                {
+                                    text: model.name
+                                    height: 24
+                                    width: parent.width - 24
+                                    id: material_type_name
+                                    verticalAlignment: Text.AlignVCenter
+                                }
+                                Button
+                                {
+                                    text: ""
+                                    implicitWidth: 24
+                                    implicitHeight: 24
+                                    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: material_type_section.expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
+                                    }
+                                    style: ButtonStyle
+                                    {
+                                        background: Rectangle
+                                        {
+                                            anchors.fill: parent
+                                            color: "transparent"
+                                        }
+                                    }
+                                }
+                            }
+                            MouseArea
+                            {
+                                anchors.fill: material_type_header
+                                onPressed:
+                                {
+                                    material_type_section.expanded = !material_type_section.expanded
+                                }
+                            }
+                            Column
+                            {
+                                height: material_type_section.expanded ? childrenRect.height : 0
+                                visible: material_type_section.expanded
+                                width: parent.width - leftPadding
+                                anchors.top: material_type_header.bottom
+                                leftPadding: 8
+                                anchors.left: parent.left
+                                Repeater
+                                {
+                                    model: colors_model
+                                    delegate: Rectangle
+                                    {
+                                        height: 24
+                                        width: parent.width
+//                                        color: "green"
+                                        Row
+                                        {
+                                            height: parent.height
+                                            width: parent.width
+                                            Rectangle
+                                            {
+                                                id: swatch
+                                                color: model.color_code
+                                                border.width: 1
+                                                border.color: "black"
+                                                width: 14
+                                                height: 14
+                                                anchors.verticalCenter: parent.verticalCenter
+                                            }
+                                            Label
+                                            {
+                                                text: model.name
+                                                verticalAlignment: Text.AlignVCenter
+                                                height: 24
+                                                anchors.left: swatch.right
+                                                anchors.verticalCenter: parent.verticalCenter
+                                                anchors.leftMargin: 4
+                                            }
+                                            MouseArea
+                                            {
+                                                anchors.fill: parent
+                                                onClicked:
+                                                {
+                                                    print(model.guid)
+                                                }
+                                            }
+                                            Button
+                                            {
+                                                text: "+"
+                                                implicitWidth: 24
+                                                implicitHeight: 24
+                                                anchors.right: parent.right
+                                                anchors.verticalCenter: parent.verticalCenter
+                                                onClicked:
+                                                {
+                                                    if (model.is_favorite) {
+                                                        base.materialManager.removeFavorite(model.root_material_id)
+                                                        model.is_favorite = false
+                                                        return
+                                                    }
+                                                    base.materialManager.addFavorite(model.root_material_id)
+                                                    model.is_favorite = true
+                                                    return
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

resources/qml/Preferences/MaterialsPage.qml

@@ -17,12 +17,19 @@ Item
     property QtObject materialManager: CuraApplication.getMaterialManager()
     property var resetEnabled: false  // Keep PreferencesDialog happy
 
-    UM.I18nCatalog { id: catalog; name: "cura"; }
-
-    Cura.MaterialManagementModel
+    UM.I18nCatalog
+    {
+        id: catalog
+        name: "cura"
+    }
+    Cura.BrandMaterialsModel
     {
         id: materialsModel
     }
+    Cura.GenericMaterialsModel
+    {
+        id: genericMaterialsModel
+    }
 
     Label
     {
@@ -366,104 +373,7 @@ Item
             width: true ? (parent.width * 0.4) | 0 : parent.width
             frameVisible: true
 
-            ListView
-            {
-                id: materialListView
-
-                model: materialsModel
-
-                section.property: "brand"
-                section.criteria: ViewSection.FullString
-                section.delegate: Rectangle
-                {
-                    width: materialScrollView.width
-                    height: childrenRect.height
-                    color: palette.light
-
-                    Label
-                    {
-                        anchors.left: parent.left
-                        anchors.leftMargin: UM.Theme.getSize("default_lining").width
-                        text: section
-                        font.bold: true
-                        color: palette.text
-                    }
-                }
-
-                delegate: Rectangle
-                {
-                    width: materialScrollView.width
-                    height: childrenRect.height
-                    color: ListView.isCurrentItem ? palette.highlight : (model.index % 2) ? palette.base : palette.alternateBase
-
-                    Row
-                    {
-                        id: materialRow
-                        spacing: (UM.Theme.getSize("default_margin").width / 2) | 0
-                        anchors.left: parent.left
-                        anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                        anchors.right: parent.right
-
-                        property bool isCurrentItem: parent.ListView.isCurrentItem
-
-                        property bool isItemActivated:
-                        {
-                            const extruder_position = Cura.ExtruderManager.activeExtruderIndex;
-                            const root_material_id = Cura.MachineManager.currentRootMaterialId[extruder_position];
-                            return model.root_material_id == root_material_id;
-                        }
-
-                        Rectangle
-                        {
-                            width: Math.floor(parent.height * 0.8)
-                            height: Math.floor(parent.height * 0.8)
-                            color: model.color_code
-                            border.color: materialRow.isCurrentItem ? palette.highlightedText : palette.text;
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                        Label
-                        {
-                            width: Math.floor((parent.width * 0.3))
-                            text: model.material
-                            elide: Text.ElideRight
-                            font.italic: materialRow.isItemActivated
-                            color: materialRow.isCurrentItem ? palette.highlightedText : palette.text;
-                        }
-                        Label
-                        {
-                            text: (model.name != model.material) ? model.name : ""
-                            elide: Text.ElideRight
-                            font.italic: materialRow.isItemActivated
-                            color: materialRow.isCurrentItem ? palette.highlightedText : palette.text;
-                        }
-                    }
-
-                    MouseArea
-                    {
-                        anchors.fill: parent
-                        onClicked:
-                        {
-                            parent.ListView.view.currentIndex = model.index;
-                        }
-                    }
-                }
-
-                function activateDetailsWithIndex(index)
-                {
-                    var model = materialsModel.getItem(index);
-                    base.currentItem = model;
-                    materialDetailsView.containerId = model.container_id;
-                    materialDetailsView.currentMaterialNode = model.container_node;
-
-                    detailsPanel.updateMaterialPropertiesObject();
-                }
-
-                onCurrentIndexChanged:
-                {
-                    forceActiveFocus();  // causes the changed fields to be saved
-                    activateDetailsWithIndex(currentIndex);
-                }
-            }
+            MaterialsList {}
         }
 
 
@@ -480,9 +390,9 @@ Item
                 right: parent.right
             }
 
-            function updateMaterialPropertiesObject()
+            function updateMaterialPropertiesObject( currentItem )
             {
-                var currentItem = materialsModel.getItem(materialListView.currentIndex);
+//                var currentItem = materialsModel.getItem(materialListView.currentIndex);
 
                 materialProperties.name = currentItem.name ? currentItem.name : "Unknown";
                 materialProperties.guid = currentItem.guid;