Create a component for selecting the output device before output the

file.

Contributes to CURA-5786.

resources/qml/ActionButton.qml

@@ -14,6 +14,7 @@ Button
     property alias iconSource: buttonIcon.source
     property alias textFont: buttonText.font
     property alias cornerRadius: backgroundRect.radius
+    property alias tooltip: tooltip.text
     property var color: UM.Theme.getColor("primary")
     property var hoverColor: UM.Theme.getColor("primary_hover")
     property var disabledColor: color
@@ -62,6 +63,14 @@ Button
         Behavior on color { ColorAnimation { duration: 50 } }
     }
 
+    ToolTip
+    {
+        id: tooltip
+        text: ""
+        delay: 500
+        visible: text != "" && button.hovered
+    }
+
     MouseArea
     {
         id: mouseArea

resources/qml/ActionPanelWidget.qml

@@ -21,7 +21,7 @@ Rectangle
     radius: UM.Theme.getSize("default_radius").width
     visible: CuraApplication.platformActivity
 
-    property bool backendStatusDone: UM.Backend.state == UM.Backend.Done
+    property bool outputAvailable: UM.Backend.state == UM.Backend.Done || UM.Backend.state == UM.Backend.Disabled
 
     Loader
     {
@@ -33,7 +33,7 @@ Rectangle
             left: parent.left
             leftMargin: UM.Theme.getSize("thick_margin").width
         }
-        sourceComponent: backendStatusDone ? outputProcessWidget : sliceProcessWidget
+        sourceComponent: outputAvailable ? outputProcessWidget : sliceProcessWidget
     }
 
     Behavior on height { NumberAnimation { duration: 100 } }

resources/qml/OutputDevicesActionButton.qml

@@ -0,0 +1,98 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.1
+import QtQuick.Layouts 1.3
+
+import UM 1.1 as UM
+import Cura 1.0 as Cura
+
+Item
+{
+    id: widget
+
+    Cura.ActionButton
+    {
+        id: saveToButton
+        height: parent.height
+
+        anchors
+        {
+            top: parent.top
+            left: parent.left
+            right: deviceSelectionMenu.visible ? deviceSelectionMenu.left : parent.right
+        }
+
+        tooltip: UM.OutputDeviceManager.activeDeviceDescription
+
+        text: UM.OutputDeviceManager.activeDeviceShortDescription
+
+        onClicked:
+        {
+            forceActiveFocus();
+            UM.OutputDeviceManager.requestWriteToDevice(UM.OutputDeviceManager.activeDevice, PrintInformation.jobName,
+                { "filter_by_machine": true, "preferred_mimetypes": Cura.MachineManager.activeMachine.preferred_output_file_formats });
+        }
+    }
+
+    Cura.ActionButton
+    {
+        id: deviceSelectionMenu
+        height: parent.height
+
+        anchors
+        {
+            top: parent.top
+            right: parent.right
+        }
+
+        tooltip: catalog.i18nc("@info:tooltip", "Select the active output device")
+        iconSource: popup.opened ? UM.Theme.getIcon("arrow_top") : UM.Theme.getIcon("arrow_bottom")
+        visible: (devicesModel.deviceCount > 1)
+
+        onClicked: popup.opened ? popup.close() : popup.open()
+
+        Popup
+        {
+            id: popup
+
+            y: -height
+            x: parent.width - width
+
+            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+
+            contentItem: Column
+            {
+                Repeater
+                {
+                    model: devicesModel
+
+                    delegate: Cura.ActionButton
+                    {
+                        text: model.description
+                        color: "transparent"
+                        hoverColor: "red"
+
+                        onClicked:
+                        {
+                            UM.OutputDeviceManager.setActiveDevice(model.id)
+                            popup.close()
+                        }
+                    }
+                }
+            }
+
+            background: Rectangle
+            {
+                opacity: visible ? 1 : 0
+                Behavior on opacity { NumberAnimation { duration: 100 } }
+                color: UM.Theme.getColor("primary")
+                border.color: UM.Theme.getColor("lining")
+                border.width: UM.Theme.getSize("default_lining").width
+            }
+        }
+    }
+
+    UM.OutputDevicesModel { id: devicesModel }
+}

resources/qml/OutputProcessWidget.qml

@@ -96,12 +96,10 @@ Column
             onClicked: console.log("Clicking preview")
         }
 
-        Cura.ActionButton
+        Cura.OutputDevicesActionButton
         {
-            width: UM.Theme.getSize("account_button").width
+            width: UM.Theme.getSize("action_panel_button").width
             height: UM.Theme.getSize("action_panel_button").height
-            text: catalog.i18nc("@button", "Save to file")
-            onClicked: console.log("Clicking action button")
         }
     }
 }

resources/qml/SliceProcessWidget.qml

@@ -28,7 +28,7 @@ Column
 
     function sliceOrStopSlicing()
     {
-        if ([UM.Backend.NotStarted, UM.Backend.Disabled].indexOf(widget.backendState) != -1)
+        if (widget.backendState == UM.Backend.NotStarted)
         {
             CuraApplication.backend.forceSlice()
         }
@@ -86,7 +86,7 @@ Column
         height: UM.Theme.getSize("action_panel_button").height
         text:
         {
-            if ([UM.Backend.NotStarted, UM.Backend.Error, UM.Backend.Disabled].indexOf(widget.backendState) != -1)
+            if ([UM.Backend.NotStarted, UM.Backend.Error].indexOf(widget.backendState) != -1)
             {
                 return catalog.i18nc("@button", "Slice")
             }
@@ -101,7 +101,7 @@ Column
         // Get the current value from the preferences
         property bool autoSlice: UM.Preferences.getValue("general/auto_slice")
         // Disable the slice process when
-        property bool disabledSlice: [UM.Backend.Done, UM.Backend.Error, UM.Backend.Disabled].indexOf(widget.backendState) != -1
+        property bool disabledSlice: [UM.Backend.Done, UM.Backend.Error].indexOf(widget.backendState) != -1
 
         disabledColor: disabledSlice ? UM.Theme.getColor("action_button_disabled") : "transparent"
         textDisabledColor: disabledSlice ?  UM.Theme.getColor("action_button_disabled_text") : UM.Theme.getColor("primary")

resources/qml/qmldir

@@ -8,4 +8,5 @@ ActionButton 1.0 ActionButton.qml
 MaterialMenu 1.0 MaterialMenu.qml
 NozzleMenu 1.0 NozzleMenu.qml
 ActionPanelWidget 1.0 ActionPanelWidget.qml
-IconLabel 1.0 IconLabel.qml
+IconLabel 1.0 IconLabel.qml
+OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml