Move details plane caption to management page

This way the caption can be correctly aligned with the hamburger menu
button

CURA-8979

resources/qml/Preferences/MachinesPage.qml

@@ -14,13 +14,21 @@ UM.ManagementPage
     id: base
 
     title: catalog.i18nc("@title:tab", "Printers")
+    detailsPlaneCation: base.currentItem && base.currentItem.name ? base.currentItem.name : ""
+
     model: Cura.GlobalStacksModel { }
 
     sectionRole: "discoverySource"
 
     activeId: Cura.MachineManager.activeMachine !== null ? Cura.MachineManager.activeMachine.id: ""
     activeIndex: activeMachineIndex()
-    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
+    onHamburgeButtonClicked: {
+        const hamburerButtonHeight = hamburger_button.height;
+        menu.popup(hamburger_button, -menu.width + hamburger_button.width / 2, hamburger_button.height);
+        // for some reason the height of the hamburger changes when opening the popup
+        // reset height to initial heigt
+        hamburger_button.height = hamburerButtonHeight;
+    }
     hamburgerButtonVisible: Cura.MachineManager.activeMachine !== null
 
     function activeMachineIndex()
@@ -43,60 +51,39 @@ UM.ManagementPage
         }
     ]
 
-    Item
+    Flow
     {
-        id: content_item
+        visible: base.currentItem != null && currentItem && currentItem.id == Cura.MachineManager.activeMachine.id
-        visible: base.currentItem != null
         anchors.fill: parent
+        spacing: UM.Theme.getSize("default_margin").height
 
-
+        Repeater
-        UM.Label
         {
-            id: machineName
+            id: machineActionRepeater
-            text: base.currentItem && base.currentItem.name ? base.currentItem.name : ""
+            model: base.currentItem ? Cura.MachineActionManager.getSupportedActions(Cura.MachineManager.getDefinitionByMachineId(base.currentItem.id)) : null
-            font: UM.Theme.getFont("large_bold")
-            width: parent.width
-            elide: Text.ElideRight
-        }
 
-        Flow
+            Item
-        {
-            id: machineActions
-            visible: currentItem && currentItem.id == Cura.MachineManager.activeMachine.id
-            anchors
             {
-                left: parent.left
+                width: Math.round(childrenRect.width + 2 * screenScaleFactor)
-                right: parent.right
+                height: childrenRect.height
-                top: machineName.bottom
+                Cura.SecondaryButton
-                topMargin: UM.Theme.getSize("default_margin").height
-            }
-            spacing: UM.Theme.getSize("default_margin").height
-
-            Repeater
-            {
-                id: machineActionRepeater
-                model: base.currentItem ? Cura.MachineActionManager.getSupportedActions(Cura.MachineManager.getDefinitionByMachineId(base.currentItem.id)) : null
-
-                Item
                 {
-                    width: Math.round(childrenRect.width + 2 * screenScaleFactor)
+                    text: machineActionRepeater.model[index].label
-                    height: childrenRect.height
+                    onClicked:
-                    Cura.SecondaryButton
                     {
-                        text: machineActionRepeater.model[index].label
+                        var currentItem = machineActionRepeater.model[index]
-                        onClicked:
+                        actionDialog.loader.manager = currentItem
-                        {
+                        actionDialog.loader.source = currentItem.qmlPath
-                            var currentItem = machineActionRepeater.model[index]
+                        actionDialog.title = currentItem.label
-                            actionDialog.loader.manager = currentItem
+                        actionDialog.show()
-                            actionDialog.loader.source = currentItem.qmlPath
-                            actionDialog.title = currentItem.label
-                            actionDialog.show()
-                        }
                     }
                 }
             }
         }
+    }
 
+    Item
+    {
         UM.Dialog
         {
             id: actionDialog
@@ -139,6 +126,7 @@ UM.ManagementPage
                 objectList.onCurrentIndexChanged()
             }
         }
+
         Cura.Menu
         {
             id: menu

resources/qml/Preferences/Materials/MaterialsDetailsPanel.qml

@@ -50,29 +50,11 @@ Item
         materialProperties.approximate_diameter = currentItem.approximate_diameter || "0"
     }
 
-    // Material title Label
-    UM.Label {
-        id: profileName
-
-        width: parent.width
-        text: materialProperties.name
-        font: UM.Theme.getFont("large_bold")
-        elide: Text.ElideRight
-    }
-
     // Material detailed information view below the title Label
     MaterialsView
     {
         id: materialDetailsView
-        anchors
+        anchors.fill: parent
-        {
-            left: parent.left
-            right: parent.right
-            top: profileName.bottom
-            topMargin: UM.Theme.getSize("default_margin").height
-            bottom: parent.bottom
-        }
-
         editingEnabled: currentItem != null && !currentItem.is_read_only
         onResetSelectedMaterial: base.resetExpandedActiveMaterial()
 

resources/qml/Preferences/Materials/MaterialsPage.qml

@@ -68,6 +68,7 @@ UM.ManagementPage
     }
 
     title: catalog.i18nc("@title:tab", "Materials")
+    detailsPlaneCation: currentItem.name
     scrollviewCaption: catalog.i18nc("@label", "Materials compatible with active printer:") + `<br /><b>${Cura.MachineManager.activeMachine.name}</b>`
 
     buttons: [
@@ -107,8 +108,13 @@ UM.ManagementPage
         }
     ]
 
-    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
+    onHamburgeButtonClicked: {
-
+        const hamburerButtonHeight = hamburger_button.height;
+        menu.popup(hamburger_button, -menu.width + hamburger_button.width / 2, hamburger_button.height);
+        // for some reason the height of the hamburger changes when opening the popup
+        // reset height to initial heigt
+        hamburger_button.height = hamburerButtonHeight;
+    }
     listContent: ScrollView
     {
         id: materialScrollView
@@ -137,12 +143,14 @@ UM.ManagementPage
         }
     }
 
+    MaterialsDetailsPanel
+    {
+        id: materialDetailsPanel
+        anchors.fill: parent
+    }
 
     Item
     {
-        id: content_item
-        anchors.fill: parent
-
         Cura.Menu
         {
             id: menu
@@ -197,12 +205,6 @@ UM.ManagementPage
             }
         }
 
-        MaterialsDetailsPanel
-        {
-            id: materialDetailsPanel
-            anchors.fill: parent
-        }
-
         // Dialogs
         Cura.MessageDialog
         {

resources/qml/Preferences/ProfilesPage.qml

@@ -46,8 +46,6 @@ UM.ManagementPage
     property string newQualityNameToSelect: ""
     property bool toActivateNewQuality: false
 
-    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
-
     onCreateProfile:
     {
         createQualityDialog.object = Cura.ContainerManager.makeUniqueName(Cura.MachineManager.activeQualityOrQualityChangesName);
@@ -56,10 +54,18 @@ UM.ManagementPage
     }
 
     title: catalog.i18nc("@title:tab", "Profiles")
+    detailsPlaneCation: base.currentItemDisplayName
     scrollviewCaption: catalog.i18nc("@label", "Profiles compatible with active printer:") + "<br><b>" + Cura.MachineManager.activeMachine.name + "</b>"
 
     hamburgerButtonVisible: hasCurrentItem
+    onHamburgeButtonClicked: {
+        const hamburerButtonHeight = hamburger_button.height;
+        menu.popup(hamburger_button, -menu.width + hamburger_button.width / 2, hamburger_button.height);
 
+        // for some reason the height of the hamburger changes when opening the popup
+        // reset height to initial heigt
+        hamburger_button.height = hamburerButtonHeight;
+    }
     sectionRole: "section_name"
 
     model: qualityManagementModel
@@ -86,10 +92,110 @@ UM.ManagementPage
         }
     ]
 
+    Column
+    {
+        id: detailsPanelHeaderColumn
+        anchors
+        {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+
+        spacing: UM.Theme.getSize("default_margin").height
+        visible: base.currentItem != null
+
+        Flow
+        {
+            id: currentSettingsActions
+            width: parent.width
+
+            visible: base.hasCurrentItem && base.currentItem.name == Cura.MachineManager.activeQualityOrQualityChangesName && base.currentItem.intent_category == Cura.MachineManager.activeIntentCategory
+
+            Cura.SecondaryButton
+            {
+                text: catalog.i18nc("@action:button", "Update profile with current settings/overrides")
+                enabled: Cura.MachineManager.hasUserSettings && objectList.currentIndex && !objectList.currentIndex.is_read_only
+                onClicked: Cura.ContainerManager.updateQualityChanges()
+            }
+
+            Cura.SecondaryButton
+            {
+                text: catalog.i18nc("@action:button", "Discard current changes")
+                enabled: Cura.MachineManager.hasUserSettings
+                onClicked: Cura.ContainerManager.clearUserContainers()
+            }
+        }
+
+        UM.Label
+        {
+            id: defaultsMessage
+            visible: false
+            text: catalog.i18nc("@action:label", "This profile uses the defaults specified by the printer, so it has no settings/overrides in the list below.")
+            width: parent.width
+        }
+        UM.Label
+        {
+            id: noCurrentSettingsMessage
+            visible: base.isCurrentItemActivated && !Cura.MachineManager.hasUserSettings
+            text: catalog.i18nc("@action:label", "Your current settings match the selected profile.")
+            width: parent.width
+        }
+
+        UM.TabRow
+        {
+            id: profileExtruderTabs
+            UM.TabRowButton // One extra tab for the global settings.
+            {
+                text: catalog.i18nc("@title:tab", "Global Settings")
+            }
+
+            Repeater
+            {
+                model: base.extrudersModel
+
+                UM.TabRowButton
+                {
+                    text: model.name
+                }
+            }
+        }
+    }
+
+    Rectangle
+    {
+        color: UM.Theme.getColor("main_background")
+        anchors
+        {
+            top: detailsPanelHeaderColumn.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
+    }
+
+    Cura.ProfileOverview
+    {
+        anchors
+        {
+            top: detailsPanelHeaderColumn.bottom
+            margins: UM.Theme.getSize("default_margin").height
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+
+        visible: detailsPanelHeaderColumn.visible
+        qualityItem: base.currentItem
+        extruderPosition: profileExtruderTabs.currentIndex - 1
+    }
+
     Item
     {
-        id: content_item
-        anchors.fill: parent
         // This connection makes sure that we will switch to the correct quality after the model gets updated
         Connections
         {
@@ -294,115 +400,5 @@ UM.ManagementPage
                 CuraApplication.setDefaultPath("dialog_profile_path", folder);
             }
         }
-
-        Column
-        {
-            id: detailsPanelHeaderColumn
-            anchors
-            {
-                left: parent.left
-                right: parent.right
-                top: parent.top
-            }
-
-            spacing: UM.Theme.getSize("default_margin").height
-            visible: base.currentItem != null
-            UM.Label
-            {
-                anchors.left: parent.left
-                anchors.right: parent.right
-                text: base.currentItemDisplayName
-                font: UM.Theme.getFont("large_bold")
-                elide: Text.ElideRight
-            }
-
-            Flow
-            {
-                id: currentSettingsActions
-                width: parent.width
-
-                visible: base.hasCurrentItem && base.currentItem.name == Cura.MachineManager.activeQualityOrQualityChangesName && base.currentItem.intent_category == Cura.MachineManager.activeIntentCategory
-
-                Cura.SecondaryButton
-                {
-                    text: catalog.i18nc("@action:button", "Update profile with current settings/overrides")
-                    enabled: Cura.MachineManager.hasUserSettings && objectList.currentIndex && !objectList.currentIndex.is_read_only
-                    onClicked: Cura.ContainerManager.updateQualityChanges()
-                }
-
-                Cura.SecondaryButton
-                {
-                    text: catalog.i18nc("@action:button", "Discard current changes")
-                    enabled: Cura.MachineManager.hasUserSettings
-                    onClicked: Cura.ContainerManager.clearUserContainers()
-                }
-            }
-
-            UM.Label
-            {
-                id: defaultsMessage
-                visible: false
-                text: catalog.i18nc("@action:label", "This profile uses the defaults specified by the printer, so it has no settings/overrides in the list below.")
-                width: parent.width
-            }
-            UM.Label
-            {
-                id: noCurrentSettingsMessage
-                visible: base.isCurrentItemActivated && !Cura.MachineManager.hasUserSettings
-                text: catalog.i18nc("@action:label", "Your current settings match the selected profile.")
-                width: parent.width
-            }
-
-            UM.TabRow
-            {
-                id: profileExtruderTabs
-                UM.TabRowButton // One extra tab for the global settings.
-                {
-                    text: catalog.i18nc("@title:tab", "Global Settings")
-                }
-
-                Repeater
-                {
-                    model: base.extrudersModel
-
-                    UM.TabRowButton
-                    {
-                        text: model.name
-                    }
-                }
-            }
-        }
-
-        Rectangle
-        {
-            color: UM.Theme.getColor("main_background")
-            anchors
-            {
-                top: detailsPanelHeaderColumn.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
-        }
-
-        Cura.ProfileOverview
-        {
-            anchors
-            {
-                top: detailsPanelHeaderColumn.bottom
-                margins: UM.Theme.getSize("default_margin").height
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-
-            visible: detailsPanelHeaderColumn.visible
-            qualityItem: base.currentItem
-            extruderPosition: profileExtruderTabs.currentIndex - 1
-        }
     }
 }