Allow open file button to resize depending on content items

This re-links the widths, heights and paddings such that we can later change the width of the button depending on its contents.
However there is a complication: Buttons automatically change the size of the contents based on the size of the button minus its padding. So making the size of the button in turn depend on its contents causes a binding loop.
To get around this binding loop, we need to manually calculate the size of the button, such that the size of the contents ends up exactly right.

Contributes to issue CURA-8008.

1 files changed, 24 insertions, 12 deletions

diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml
index 2d3814309e..4e6c37961c 100644
--- a/plugins/PrepareStage/PrepareMenu.qml
+++ b/plugins/PrepareStage/PrepareMenu.qml
@@ -77,24 +77,36 @@ Item
         Button
         {
             id: openFileButton
+
+            //Make the button square if the contents are.
+            leftPadding: topPadding
+            rightPadding: topPadding
+            bottomPadding: topPadding
+
             height: UM.Theme.getSize("stage_menu").height
-            width: UM.Theme.getSize("stage_menu").height
+            width: openFileIconContainer.width + leftPadding + rightPadding
             onClicked: Cura.Actions.open.trigger()
             hoverEnabled: true
 
-            contentItem: Item
+            contentItem: Row
             {
-                anchors.fill: parent
-                UM.RecolorImage
+                Item
                 {
-                    id: buttonIcon
-                    anchors.centerIn: parent
-                    source: UM.Theme.getIcon("Folder", "medium")
-                    width: UM.Theme.getSize("button_icon").width
-                    height: UM.Theme.getSize("button_icon").height
-                    color: UM.Theme.getColor("icon")
-
-                    sourceSize.height: height
+                    id: openFileIconContainer
+                    height: parent.height
+                    width: height //Square button.
+
+                    UM.RecolorImage
+                    {
+                        id: buttonIcon
+                        anchors.centerIn: parent
+                        source: UM.Theme.getIcon("Folder", "medium")
+                        width: UM.Theme.getSize("button_icon").width
+                        height: UM.Theme.getSize("button_icon").height
+                        color: UM.Theme.getColor("icon")
+
+                        sourceSize.height: height
+                    }
                 }
             }