From 2f22002fd59e2be44934c0ff5c904c93a03fd690 Mon Sep 17 00:00:00 2001
From: "c.lamboo" <casperlamboo@gmail.com>
Date: Mon, 6 Jun 2022 21:45:48 +0200
Subject: [PATCH] Add header and footer components to Dialog

This provides control over how the header (the header is newly introduced in this commit) and footer components are rendered. The footer is the area where the `leftButtoons` and `rightButtons` are rendered. Having control over how this is rendered introduces for instance the possibility to render the buttons within a warning area (an example of this can bee seen in the WorkspaceDialog).

CURA-6990
---
 plugins/3MFReader/WorkspaceDialog.qml | 58 ++++++++++++++++++++++++---
 resources/qml/ColorDialog.qml         |  2 +-
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/plugins/3MFReader/WorkspaceDialog.qml b/plugins/3MFReader/WorkspaceDialog.qml
index 6ac7ac701e..d0250abfd8 100644
--- a/plugins/3MFReader/WorkspaceDialog.qml
+++ b/plugins/3MFReader/WorkspaceDialog.qml
@@ -451,26 +451,72 @@ UM.Dialog
         }
     }
 
-    buttonWarningText: "The material used in this project is currently not installed in Cura.<br/>Install the material profile and reopen the project."
-    buttonWarning: manager.missingPackages.length > 0
+    property bool warning: manager.missingPackages.length > 0
+
+    footerComponent: Rectangle
+    {
+        color: warning ? UM.Theme.getColor("warning") : "transparent"
+        anchors.bottom: parent.bottom
+        width: parent.width
+        height: childrenRect.height + 2 * base.margin
+
+        Column
+        {
+            height: childrenRect.height
+            spacing: base.margin
+
+            anchors.margins: base.margin
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+
+            RowLayout
+            {
+                id: warningRow
+                height: childrenRect.height
+                visible: warning
+                spacing: base.margin
+                UM.ColorImage
+                {
+                    width: UM.Theme.getSize("extruder_icon").width
+                    height: UM.Theme.getSize("extruder_icon").height
+                    source: UM.Theme.getIcon("Warning")
+                }
+
+                UM.Label
+                {
+                    id: warningText
+                    text: "The material used in this project is currently not installed in Cura.<br/>Install the material profile and reopen the project."
+                }
+            }
+
+            Loader
+            {
+                width: parent.width
+                height: childrenRect.height
+                sourceComponent: buttonRow
+            }
+        }
+    }
+
     buttonSpacing: UM.Theme.getSize("default_margin").width
 
     rightButtons: [
         Cura.TertiaryButton
         {
-            visible: !buttonWarning
+            visible: !warning
             text: catalog.i18nc("@action:button", "Cancel")
             onClicked: reject()
         },
         Cura.PrimaryButton
         {
-            visible: !buttonWarning
+            visible: !warning
             text: catalog.i18nc("@action:button", "Open")
             onClicked: accept()
         },
         Cura.TertiaryButton
         {
-            visible: buttonWarning
+            visible: warning
             text: catalog.i18nc("@action:button", "Open project anyway")
             onClicked: {
                 manager.showMissingMaterialsWarning();
@@ -479,7 +525,7 @@ UM.Dialog
         },
         Cura.PrimaryButton
         {
-            visible: buttonWarning
+            visible: warning
             text: catalog.i18nc("@action:button", "Install missing material")
             onClicked: manager.installMissingPackages()
         }
diff --git a/resources/qml/ColorDialog.qml b/resources/qml/ColorDialog.qml
index 49adcf0cca..e5216a3404 100644
--- a/resources/qml/ColorDialog.qml
+++ b/resources/qml/ColorDialog.qml
@@ -29,7 +29,7 @@ UM.Dialog
     // the size of the dialog ourselves.
     // Ugly workaround for windows having overlapping elements due to incorrect dialog width
     minimumWidth: content.width + (Qt.platform.os == "windows" ? 4 * margin : 2 * margin)
-    minimumHeight: content.height + buttonArea.height + (Qt.platform.os == "windows" ? 5 * margin : 3 * margin)
+    minimumHeight: content.height + footer.height + (Qt.platform.os == "windows" ? 5 * margin : 3 * margin)
 
     property alias color: colorInput.text
     property var swatchColors: [