Implement basic styling of material management page

CURA-8979

resources/qml/ColorDialog.qml

@@ -21,17 +21,6 @@ UM.Dialog
 
     property alias swatchGridColumns: colorSwatchGrid.columns
 
-    // In this case we would like to let the content of the dialog determine the size of the dialog
-    // however with the current implementation of the dialog this is not possible, so instead we calculate
-    // the size of the dialog ourselves.
-    minimumWidth: content.width + 4 * margin
-    minimumHeight:
-        content.height                                 // content height
-      + buttonRow.height                               // button row height
-      + 5 * margin                                     // top and bottom margin and margin between buttons and content
-    width: minimumWidth
-    height: minimumHeight
-
     property alias color: colorInput.text
     property var swatchColors: [
         "#2161AF", "#57AFB2", "#F7B32D", "#E33D4A", "#C088AD",

resources/qml/Preferences/Materials/MaterialsPage.qml

@@ -3,13 +3,12 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.3
 import QtQuick.Dialogs 1.2
 
 import UM 1.5 as UM
 import Cura 1.5 as Cura
 
-Item
+UM.ManagementPage
 {
     id: base
 
@@ -36,12 +35,6 @@ Item
     property var extruder_position: Cura.ExtruderManager.activeExtruderIndex
     property var active_root_material_id: Cura.MachineManager.currentRootMaterialId[extruder_position]
 
-    UM.I18nCatalog
-    {
-        id: catalog
-        name: "cura"
-    }
-
     function resetExpandedActiveMaterial()
     {
         materialListView.expandActiveMaterial(active_root_material_id)
@@ -74,57 +67,14 @@ Item
         }
     }
 
-    // Main layout
+    title: catalog.i18nc("@title:tab", "Materials")
-    Label
+    scrollviewCaption: catalog.i18nc("@label", "Materials compatible with active printer:") + `<br /><b>${Cura.MachineManager.activeMachine.name}</b>`
-    {
-        id: titleLabel
-        anchors
-        {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-            margins: 5 * screenScaleFactor
-        }
-        font.pointSize: 18
-        text: catalog.i18nc("@title:tab", "Materials")
-    }
 
-    // Button Row
+    buttons: [
-    Row
+        Cura.SecondaryButton
-    {
-        id: buttonRow
-        anchors
-        {
-            left: parent.left
-            right: parent.right
-            top: titleLabel.bottom
-        }
-        height: childrenRect.height
-
-        // Activate button
-        Button
-        {
-            id: activateMenuButton
-            text: catalog.i18nc("@action:button", "Activate")
-            icon.name: "list-activate"
-            enabled: !isCurrentItemActivated && Cura.MachineManager.activeMachine.hasMaterials
-            onClicked:
-            {
-                forceActiveFocus()
-
-                // Set the current material as the one to be activated (needed to force the UI update)
-                base.newRootMaterialIdToSwitchTo = base.currentItem.root_material_id
-                const extruder_position = Cura.ExtruderManager.activeExtruderIndex
-                Cura.MachineManager.setMaterial(extruder_position, base.currentItem.container_node)
-            }
-        }
-
-        // Create button
-        Button
         {
             id: createMenuButton
-            text: catalog.i18nc("@action:button", "Create")
+            text: catalog.i18nc("@action:button", "Create new")
-            icon.name: "list-add"
             enabled: Cura.MachineManager.activeMachine.hasMaterials
             onClicked:
             {
@@ -132,72 +82,22 @@ Item
                 base.newRootMaterialIdToSwitchTo = base.materialManagementModel.createMaterial();
                 base.toActivateNewMaterial = true;
             }
-        }
+        },
-
+        Cura.SecondaryButton
-        // Duplicate button
-        Button
-        {
-            id: duplicateMenuButton
-            text: catalog.i18nc("@action:button", "Duplicate");
-            icon.name: "list-add"
-            enabled: base.hasCurrentItem
-            onClicked:
-            {
-                forceActiveFocus();
-                base.newRootMaterialIdToSwitchTo = base.materialManagementModel.duplicateMaterial(base.currentItem.container_node);
-                base.toActivateNewMaterial = true;
-            }
-        }
-
-        // Remove button
-        Button
-        {
-            id: removeMenuButton
-            text: catalog.i18nc("@action:button", "Remove")
-            icon.name: "list-remove"
-            enabled: base.hasCurrentItem && !base.currentItem.is_read_only && !base.isCurrentItemActivated && base.materialManagementModel.canMaterialBeRemoved(base.currentItem.container_node)
-
-            onClicked:
-            {
-                forceActiveFocus();
-                confirmRemoveMaterialDialog.open();
-            }
-        }
-
-        // Import button
-        Button
         {
             id: importMenuButton
             text: catalog.i18nc("@action:button", "Import")
-            icon.name: "document-import"
             onClicked:
             {
                 forceActiveFocus();
                 importMaterialDialog.open();
             }
             enabled: Cura.MachineManager.activeMachine.hasMaterials
-        }
+        },
-
+        Cura.SecondaryButton
-        // Export button
-        Button
-        {
-            id: exportMenuButton
-            text: catalog.i18nc("@action:button", "Export")
-            icon.name: "document-export"
-            onClicked:
-            {
-                forceActiveFocus();
-                exportMaterialDialog.open();
-            }
-            enabled: base.hasCurrentItem
-        }
-
-        //Sync button.
-        Button
         {
             id: syncMaterialsButton
-            text: catalog.i18nc("@action:button Sending materials to printers", "Sync with Printers")
+            text: catalog.i18nc("@action:button", "Sync with Printers")
-            icon.name: "sync-synchronizing"
             onClicked:
             {
                 forceActiveFocus();
@@ -205,73 +105,15 @@ Item
             }
             visible: Cura.MachineManager.activeMachine.supportsMaterialExport
         }
-    }
+    ]
 
-    Item
+    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
-    {
-        id: contentsItem
-        anchors
-        {
-            top: titleLabel.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            margins: 5 * screenScaleFactor
-            bottomMargin: 0
-        }
-        clip: true
-    }
 
-    Item
+    listContent: ScrollView
-    {
-        anchors
-        {
-            top: buttonRow.bottom
-            topMargin: UM.Theme.getSize("default_margin").height
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-
-        SystemPalette { id: palette }
-
-        Label
-        {
-            id: captionLabel
-            anchors
-            {
-                top: parent.top
-                left: parent.left
-            }
-            visible: text != ""
-            text:
-            {
-                var caption = catalog.i18nc("@action:label", "Printer") + ": " + Cura.MachineManager.activeMachine.name;
-                if (Cura.MachineManager.activeMachine.hasVariants)
-                {
-                    var activeVariantName = ""
-                    if(Cura.MachineManager.activeStack != null)
-                    {
-                        activeVariantName = Cura.MachineManager.activeStack.variant.name
-                    }
-                    caption += ", " + Cura.MachineManager.activeDefinitionVariantsName + ": " + activeVariantName;
-                }
-                return caption;
-            }
-            width: materialScrollView.width
-            elide: Text.ElideRight
-        }
-
-        ScrollView
     {
         id: materialScrollView
-            anchors
+        anchors.fill: parent
-            {
+        anchors.margins: parent.border.width
-                top: captionLabel.visible ? captionLabel.bottom : parent.top
-                topMargin: captionLabel.visible ? UM.Theme.getSize("default_margin").height : 0
-                bottom: parent.bottom
-                left: parent.left
-            }
         width: (parent.width * 0.4) | 0
 
         clip: true
@@ -295,18 +137,70 @@ Item
         }
     }
 
+
+    Item
+    {
+        id: content_item
+        anchors.fill: parent
+
+        Cura.Menu
+        {
+            id: menu
+            Cura.MenuItem
+            {
+                id: activateMenuButton
+                text: catalog.i18nc("@action:button", "Activate")
+                onClicked:
+                {
+                    forceActiveFocus()
+
+                    // Set the current material as the one to be activated (needed to force the UI update)
+                    base.newRootMaterialIdToSwitchTo = base.currentItem.root_material_id
+                    const extruder_position = Cura.ExtruderManager.activeExtruderIndex
+                    Cura.MachineManager.setMaterial(extruder_position, base.currentItem.container_node)
+                }
+            }
+            Cura.MenuItem
+            {
+                id: duplicateMenuButton
+                text: catalog.i18nc("@action:button", "Duplicate");
+                enabled: base.hasCurrentItem
+                onClicked:
+                {
+                    forceActiveFocus();
+                    base.newRootMaterialIdToSwitchTo = base.materialManagementModel.duplicateMaterial(base.currentItem.container_node);
+                    base.toActivateNewMaterial = true;
+                }
+            }
+            Cura.MenuItem
+            {
+                id: removeMenuButton
+                text: catalog.i18nc("@action:button", "Remove")
+                enabled: base.hasCurrentItem && !base.currentItem.is_read_only && !base.isCurrentItemActivated && base.materialManagementModel.canMaterialBeRemoved(base.currentItem.container_node)
+
+                onClicked:
+                {
+                    forceActiveFocus();
+                    confirmRemoveMaterialDialog.open();
+                }
+            }
+            Cura.MenuItem
+            {
+                id: exportMenuButton
+                text: catalog.i18nc("@action:button", "Export")
+                onClicked:
+                {
+                    forceActiveFocus();
+                    exportMaterialDialog.open();
+                }
+                enabled: base.hasCurrentItem
+            }
+        }
+
         MaterialsDetailsPanel
         {
             id: materialDetailsPanel
-            anchors
+            anchors.fill: parent
-            {
-                left: materialScrollView.right
-                leftMargin: UM.Theme.getSize("default_margin").width
-                top: parent.top
-                bottom: parent.bottom
-                right: parent.right
-            }
-        }
         }
 
         // Dialogs
@@ -382,4 +276,5 @@ Item
                 CuraApplication.setDefaultPath("dialog_material_path", folder);
             }
         }
+    }
 }

resources/qml/Preferences/Materials/MaterialsSlot.qml

@@ -35,10 +35,9 @@ Rectangle
     {
         id: swatch
         color: material != null ? material.color_code : "transparent"
-        border.width: UM.Theme.getSize("default_lining").width
+        width: UM.Theme.getSize("icon_indicator").width
-        border.color: "black"
+        height: UM.Theme.getSize("icon_indicator").height
-        width: UM.Theme.getSize("favorites_button_icon").width
+        radius: width / 2
-        height: UM.Theme.getSize("favorites_button_icon").height
         anchors.verticalCenter: materialSlot.verticalCenter
         anchors.left: materialSlot.left
         anchors.leftMargin: UM.Theme.getSize("default_margin").width

resources/qml/Preferences/Materials/MaterialsView.qml

@@ -4,6 +4,7 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.15
 import QtQuick.Dialogs 1.2
+import QtQuick.Layouts 1.3
 
 import UM 1.5 as UM
 import Cura 1.0 as Cura
@@ -82,15 +83,32 @@ Item
         }
     }
 
+    Rectangle
+    {
+        color: UM.Theme.getColor("main_background")
+
+        anchors
+        {
+            top: pageSelectorTabRow.bottom
+            topMargin: -UM.Theme.getSize("default_lining").width
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("thick_lining")
+        visible: base.hasCurrentItem
+
         ScrollView
         {
             id: informationPage
             anchors
             {
-            top: pageSelectorTabRow.bottom
+                fill: parent
-            left: parent.left
+                topMargin: UM.Theme.getSize("thin_margin").height
-            right: parent.right
+                bottomMargin: UM.Theme.getSize("thin_margin").height
-            bottom: parent.bottom
+                leftMargin: UM.Theme.getSize("thin_margin").width
+                rightMargin: UM.Theme.getSize("thin_margin").width
             }
 
             ScrollBar.vertical: UM.ScrollBar
@@ -107,17 +125,13 @@ Item
             clip: true
             visible: pageSelectorTabRow.currentItem.activeView === "information"
 
-        property real columnWidth: (width * 0.5 - UM.Theme.getSize("default_margin").width) | 0
+            property real columnWidth: Math.floor(width / 2 - UM.Theme.getSize("narrow_margin").width)
+            property real rowHeight: UM.Theme.getSize("setting_control").height
 
-        Flow
+            Column
             {
-            id: containerGrid
+                width: informationPage.width
-
+                spacing: UM.Theme.getSize("narrow_margin").height
-            x: UM.Theme.getSize("default_margin").width
-            y: UM.Theme.getSize("default_lining").height
-
-            width: base.width
-            property real rowHeight: brandTextField.height + UM.Theme.getSize("default_lining").height
 
                 Cura.MessageDialog
                 {
@@ -147,7 +161,15 @@ Item
                     }
                 }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Display Name") }
+                Row
+                {
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Display Name")
+                    }
                     Cura.TextField
                     {
                         id: displayNameTextField;
@@ -156,8 +178,17 @@ Item
                         enabled: base.editingEnabled;
                         onEditingFinished: base.updateMaterialDisplayName(properties.name, text)
                     }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Brand") }
+                Row
+                {
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Brand")
+                    }
                     Cura.TextField
                     {
                         id: brandTextField
@@ -166,8 +197,17 @@ Item
                         enabled: base.editingEnabled
                         onEditingFinished: base.updateMaterialBrand(properties.brand, text)
                     }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Material Type") }
+                Row
+                {
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Material Type")
+                    }
                     Cura.TextField
                     {
                         id: materialTypeField
@@ -176,26 +216,42 @@ Item
                         enabled: base.editingEnabled
                         onEditingFinished: base.updateMaterialType(properties.material, text)
                     }
+                }
+
+                Row
+                {
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Color")
+                    }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Color") }
                     Row
                     {
                         width: informationPage.columnWidth
-                height:  parent.rowHeight
                         spacing: Math.round(UM.Theme.getSize("default_margin").width / 2)
 
                         // color indicator square
-                Rectangle
+                        Item
                         {
                             id: colorSelector
-                    color: properties.color_code
-
-                    width: Math.round(colorLabel.height * 0.75)
-                    height: Math.round(colorLabel.height * 0.75)
-                    border.width: UM.Theme.getSize("default_lining").height
 
                             anchors.verticalCenter: parent.verticalCenter
 
+                            width: childrenRect.width + 2 * UM.Theme.getSize("narrow_margin").width
+                            height: childrenRect.height + 2 * UM.Theme.getSize("narrow_margin").height
+
+                            Rectangle
+                            {
+                                color: properties.color_code
+                                width: UM.Theme.getSize("icon_indicator").width
+                                height: UM.Theme.getSize("icon_indicator").height
+                                radius: width / 2
+                                anchors.centerIn: parent
+                            }
+
                             // open the color selection dialog on click
                             MouseArea
                             {
@@ -225,13 +281,27 @@ Item
                             onAccepted: base.setMetaDataEntry("color_code", properties.color_code, color)
                         }
                     }
+                }
 
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
+                UM.Label
-
+                {
-            Label { width: parent.width; height: parent.rowHeight; font.bold: true; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Properties") }
+                    width: parent.width
-
+                    height: parent.rowHeight
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Density") }
+                    font: UM.Theme.getFont("default_bold")
+                    verticalAlignment: Qt.AlignVCenter
+                    text: catalog.i18nc("@label", "Properties")
+                }
 
+                Row
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Density")
+                    }
                     Cura.SpinBox
                     {
                         enabled: base.editingEnabled
@@ -245,8 +315,18 @@ Item
                         onEditingFinished: base.setMetaDataEntry("properties/density", properties.density, value)
                         onValueChanged: updateCostPerMeter()
                     }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Diameter") }
+                Row
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Diameter")
+                    }
                     Cura.SpinBox
                     {
                         enabled: base.editingEnabled
@@ -279,9 +359,18 @@ Item
                         }
                         onValueChanged: updateCostPerMeter()
                     }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament Cost") }
+                Row
-
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Filament Cost")
+                    }
                     Cura.SpinBox
                     {
                         id: spoolCostSpinBox
@@ -298,8 +387,18 @@ Item
                             updateCostPerMeter()
                         }
                     }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament weight") }
+                Row
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Filament weight")
+                    }
                     Cura.SpinBox
                     {
                         id: spoolWeightSpinBox
@@ -316,35 +415,53 @@ Item
                             updateCostPerMeter()
                         }
                     }
+                }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament length") }
+                Row
-            Label
+                {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Filament length")
+                    }
+                    UM.Label
                     {
                         width: informationPage.columnWidth
                         text: "~ %1 m".arg(Math.round(base.spoolLength))
-                verticalAlignment: Qt.AlignVCenter
+                        height: informationPage.rowHeight
-                height: parent.rowHeight
+                    }
                 }
 
-            Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Cost per Meter") }
+                Row
-            Label
                 {
+                    height: parent.rowHeight
+                    spacing: UM.Theme.getSize("narrow_margin").width
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
+                        width: informationPage.columnWidth
+                        text: catalog.i18nc("@label", "Cost per Meter")
+                    }
+                    UM.Label
+                    {
+                        height: informationPage.rowHeight
                         width: informationPage.columnWidth
                         text: "~ %1 %2/m".arg(base.costPerMeter.toFixed(2)).arg(base.currency)
-                verticalAlignment: Qt.AlignVCenter
+                    }
-                height: parent.rowHeight
                 }
 
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height; visible: unlinkMaterialButton.visible }
+                UM.Label
-            Label
                 {
-                width: 2 * informationPage.columnWidth
+                    height: parent.rowHeight
-                verticalAlignment: Qt.AlignVCenter
+                    width: informationPage.width
                     text: catalog.i18nc("@label", "This material is linked to %1 and shares some of its properties.").arg(base.linkedMaterialNames)
                     wrapMode: Text.WordWrap
                     visible: unlinkMaterialButton.visible
                 }
-            Button
+                Cura.SecondaryButton
                 {
                     id: unlinkMaterialButton
                     text: catalog.i18nc("@label", "Unlink Material")
@@ -356,15 +473,17 @@ Item
                     }
                 }
 
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
+                UM.Label
-
+                {
-            Label { width: parent.width; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Description") }
+                    width: informationPage.width
-
+                    height: parent.rowHeight
+                    text: catalog.i18nc("@label", "Description")
+                }
                 ReadOnlyTextArea
                 {
-                text: properties.description;
+                    text: properties.description
-                width: informationPage.columnWidth * 2
+                    width: informationPage.width
-                height: 0.75 * informationPage.columnWidth
+                    height: 0.4 * informationPage.width
                     wrapMode: Text.WordWrap
 
                     readOnly: !base.editingEnabled
@@ -372,20 +491,23 @@ Item
                     onEditingFinished: base.setMetaDataEntry("description", properties.description, text)
                 }
 
-            Label { width: parent.width; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Adhesion Information") }
+                UM.Label
+                {
+                    width: informationPage.width
+                    height: parent.rowHeight
+                    text: catalog.i18nc("@label", "Adhesion Information")
+                }
 
                 ReadOnlyTextArea
                 {
                     text: properties.adhesion_info
-                width: 2 * informationPage.columnWidth
+                    width: informationPage.width
+                    height: 0.4 * informationPage.width
                     wrapMode: Text.WordWrap
-                height: 0.75 * informationPage.columnWidth
                     readOnly: !base.editingEnabled
 
                     onEditingFinished: base.setMetaDataEntry("adhesion_info", properties.adhesion_info, text)
                 }
-
-            Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
             }
         }
 
@@ -414,7 +536,7 @@ Item
                 width: childrenRect.width
                 height: childrenRect.height
                 text: model.description
-            Label
+                UM.Label
                 {
                     id: label
                     width: base.firstColumnWidth;
@@ -477,6 +599,7 @@ Item
                 }
             }
         }
+    }
 
     function updateCostPerMeter()
     {