Merge branch 'CURA-8008_open_file_button_dropdown' of github.com:Ultimaker/Cura

plugins/PrepareStage/PrepareMenu.qml

@@ -1,7 +1,7 @@
-// Copyright (c) 2018 Ultimaker B.V.
+// Copyright (c) 2021 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.7
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.3
 
@@ -13,6 +13,8 @@ Item
 {
     id: prepareMenu
 
+    property var fileProviderModel: CuraApplication.getFileProviderModel()
+
     UM.I18nCatalog
     {
         id: catalog
@@ -36,9 +38,9 @@ Item
         {
             id: itemRow
 
-            anchors.left: openFileButton.right
+            anchors.left: parent.left
             anchors.right: parent.right
-            anchors.leftMargin: UM.Theme.getSize("default_margin").width
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width + openFileButton.width + openFileMenu.width
             property int machineSelectorWidth: Math.round((width - printSetupSelectorItem.width) / 3)
 
             height: parent.height
@@ -74,22 +76,129 @@ Item
             }
         }
 
+        //Pop-up shown when there are multiple items to select from.
+        Cura.ExpandablePopup
+        {
+            id: openFileMenu
+            visible: prepareMenu.fileProviderModel.count > 1
+
+            contentAlignment: Cura.ExpandablePopup.ContentAlignment.AlignLeft
+            headerCornerSide: Cura.RoundedRectangle.Direction.All
+            headerPadding: Math.round((parent.height - UM.Theme.getSize("button_icon").height) / 2)
+            contentPadding: UM.Theme.getSize("default_lining").width
+            enabled: visible
+
+            height: parent.height
+            width: visible ? (headerPadding * 3 + UM.Theme.getSize("button_icon").height + iconSize) : 0
+
+            headerItem: UM.RecolorImage
+            {
+                id: menuIcon
+                source: UM.Theme.getIcon("Folder", "medium")
+                color: UM.Theme.getColor("icon")
+
+                sourceSize.height: height
+            }
+
+            contentItem: Item
+            {
+                id: popup
+
+                Column
+                {
+                    id: openProviderColumn
+
+                    //The column doesn't automatically listen to its children rect if the children change internally, so we need to explicitly update the size.
+                    onChildrenRectChanged:
+                    {
+                        popup.height = childrenRect.height
+                        popup.width = childrenRect.width
+                    }
+                    onPositioningComplete:
+                    {
+                        popup.height = childrenRect.height
+                        popup.width = childrenRect.width
+                    }
+
+                    Label
+                    {
+                        text: catalog.i18nc("@menu:header", "Open file")
+                        color: UM.Theme.getColor("text_medium")
+                        font: UM.Theme.getFont("medium")
+                        renderType: Text.NativeRendering
+                        verticalAlignment: Text.AlignVCenter
+
+                        width: contentWidth
+                        height: UM.Theme.getSize("action_button").height
+                        leftPadding: UM.Theme.getSize("default_margin").width
+                    }
+
+                    Repeater
+                    {
+                        model: prepareMenu.fileProviderModel
+                        delegate: Button
+                        {
+                            leftPadding: UM.Theme.getSize("default_margin").width
+                            rightPadding: UM.Theme.getSize("default_margin").width
+                            width: contentItem.width + leftPadding + rightPadding
+                            height: UM.Theme.getSize("action_button").height
+                            hoverEnabled: true
+
+                            contentItem: Label
+                            {
+                                text: model.displayText
+                                color: UM.Theme.getColor("text")
+                                font: UM.Theme.getFont("medium")
+                                renderType: Text.NativeRendering
+                                verticalAlignment: Text.AlignVCenter
+
+                                width: contentWidth
+                                height: parent.height
+                            }
+
+                            onClicked:
+                            {
+                                if(model.index == 0) //The 0th element is the "From Disk" option, which should activate the open local file dialog.
+                                {
+                                    Cura.Actions.open.trigger();
+                                }
+                                else
+                                {
+                                    prepareMenu.fileProviderModel.trigger(model.name);
+                                }
+                            }
+
+                            background: Rectangle
+                            {
+                                color: parent.hovered ? UM.Theme.getColor("action_button_hovered") : "transparent"
+                                radius: UM.Theme.getSize("action_button_radius").width
+                                width: popup.width
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        //If there is just a single item, show a button instead that directly chooses the one option.
         Button
         {
             id: openFileButton
-            height: UM.Theme.getSize("stage_menu").height
+            visible: prepareMenu.fileProviderModel.count <= 1
-            width: UM.Theme.getSize("stage_menu").height
+
+            height: parent.height
+            width: visible ? height : 0 //Square button (and don't take up space if invisible).
             onClicked: Cura.Actions.open.trigger()
+            enabled: visible && prepareMenu.fileProviderModel.count > 0
             hoverEnabled: true
 
             contentItem: Item
             {
-                anchors.fill: parent
                 UM.RecolorImage
                 {
                     id: buttonIcon
-                    anchors.centerIn: parent
                     source: UM.Theme.getIcon("Folder", "medium")
+                    anchors.centerIn: parent
                     width: UM.Theme.getSize("button_icon").width
                     height: UM.Theme.getSize("button_icon").height
                     color: UM.Theme.getColor("icon")
@@ -101,8 +210,8 @@ Item
             background: Rectangle
             {
                 id: background
-                height: UM.Theme.getSize("stage_menu").height
+                height: parent.height
-                width: UM.Theme.getSize("stage_menu").height
+                width: parent.width
                 border.color: UM.Theme.getColor("lining")
                 border.width: UM.Theme.getSize("default_lining").width
 

resources/qml/ExpandableComponent.qml

@@ -167,7 +167,7 @@ Item
                     verticalCenter: parent.verticalCenter
                     margins: background.padding
                 }
-                source: expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
+                source: UM.Theme.getIcon("ChevronSingleDown")
                 visible: source != ""
                 width: UM.Theme.getSize("standard_arrow").width
                 height: UM.Theme.getSize("standard_arrow").height

resources/qml/ExpandablePopup.qml

@@ -180,7 +180,7 @@ Item
                     verticalCenter: parent.verticalCenter
                     margins: background.padding
                 }
-                source: expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
+                source: UM.Theme.getIcon("ChevronSingleDown")
                 visible: source != ""
                 width: UM.Theme.getSize("standard_arrow").width
                 height: UM.Theme.getSize("standard_arrow").height