Split the action button panel in two different components that are

loaded in different moments.

The SliceProcessWidget is loaded once there is something to slice and it
also shows the process of slicing. The OutputProcessWidget will show the
print information and the actions to do to output the results, such as
Print over network, Save to file, ...

Contributes to CURA-5786.

resources/qml/ActionPanelWidget.qml

@@ -2,7 +2,7 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
-import QtQuick.Controls 2.0
+import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.3
 
 import UM 1.2 as UM
@@ -10,230 +10,43 @@ import Cura 1.0 as Cura
 
 Rectangle
 {
-    id: base
+    id: actionPanelWidget
 
-    // We need a whole lot of print duration information.
-    property variant printDuration: PrintInformation.currentPrintTime
-
-    // This widget doesn't show tooltips by itself. Instead it emits signals so others can do something with it.
-    signal showTooltip(Item item, point location, string text)
-    signal hideTooltip()
+    width: childrenRect.width + 2 * UM.Theme.getSize("thick_margin").width
+    height: childrenRect.height + 2 * UM.Theme.getSize("thick_margin").height
 
     color: UM.Theme.getColor("main_background")
+    border.width: UM.Theme.getSize("default_lining").width
+    border.color: UM.Theme.getColor("lining")
+    radius: UM.Theme.getSize("default_radius").width
+    visible: CuraApplication.platformActivity
 
-    // Also add an extra margin, as we want some breathing room around the edges.
-    height: saveButton.height + UM.Theme.getSize("thick_margin").height
-    Label
-    {
-        id: timeDetails
-        anchors.left: parent.left
-        anchors.bottom: costSpec.top
-        anchors.leftMargin: UM.Theme.getSize("thick_margin").width
+    property bool backendStatusDone: UM.Backend.state == 3
 
-        font: UM.Theme.getFont("large")
-        color: UM.Theme.getColor("text_subtext")
-        text: (!base.printDuration || !base.printDuration.valid) ? catalog.i18nc("@label Hours and minutes", "00h 00min") : base.printDuration.getDisplayString(UM.DurationFormat.Short)
-        renderType: Text.NativeRendering
-
-        MouseArea
+    Loader
     {
-            id: timeDetailsMouseArea
-            anchors.fill: parent
-            hoverEnabled: true
-
-            onEntered:
+        id: loader
+        anchors
         {
-                if(base.printDuration.valid && !base.printDuration.isTotalDurationZero)
-                {
-                    // All the time information for the different features is achieved
-                    var print_time = PrintInformation.getFeaturePrintTimes();
-                    var total_seconds = parseInt(base.printDuration.getDisplayString(UM.DurationFormat.Seconds))
-
-                    // A message is created and displayed when the user hover the time label
-                    var tooltip_html = "<b>%1</b><br/><table width=\"100%\">".arg(catalog.i18nc("@tooltip", "Time specification"));
-                    for(var feature in print_time)
-                    {
-                        if(!print_time[feature].isTotalDurationZero)
-                        {
-                            tooltip_html += "<tr><td>" + feature + ":</td>" +
-                                "<td align=\"right\" valign=\"bottom\">&nbsp;&nbsp;%1</td>".arg(print_time[feature].getDisplayString(UM.DurationFormat.ISO8601).slice(0,-3)) +
-                                "<td align=\"right\" valign=\"bottom\">&nbsp;&nbsp;%1%</td>".arg(Math.round(100 * parseInt(print_time[feature].getDisplayString(UM.DurationFormat.Seconds)) / total_seconds)) +
-                                "</td></tr>";
-                        }
-                    }
-                    tooltip_html += "</table>";
-                    base.showTooltip(parent, Qt.point(-UM.Theme.getSize("thick_margin").width, 0), tooltip_html);
-                }
-            }
-            onExited:
-            {
-                base.hideTooltip();
-            }
+            top: parent.top
+            topMargin: UM.Theme.getSize("thick_margin").height
+            left: parent.left
+            leftMargin: UM.Theme.getSize("thick_margin").width
         }
+        sourceComponent: backendStatusDone ? outputProcessWidget : sliceProcessWidget
     }
 
-    Label
+    Behavior on height { NumberAnimation { duration: 100 } }
+
+    Component
     {
-        function formatRow(items)
-        {
-            var row_html = "<tr>";
-            for(var item = 0; item < items.length; item++)
-            {
-                if (item == 0)
-                {
-                    row_html += "<td valign=\"bottom\">%1</td>".arg(items[item]);
-                }
-                else
-                {
-                    row_html += "<td align=\"right\" valign=\"bottom\">&nbsp;&nbsp;%1</td>".arg(items[item]);
-                }
-            }
-            row_html += "</tr>";
-            return row_html;
+        id: sliceProcessWidget
+        SliceProcessWidget { }
     }
 
-        function getSpecsData()
+    Component
     {
-            var lengths = [];
-            var total_length = 0;
-            var weights = [];
-            var total_weight = 0;
-            var costs = [];
-            var total_cost = 0;
-            var some_costs_known = false;
-            var names = [];
-            if(base.printMaterialLengths)
-            {
-                for(var index = 0; index < base.printMaterialLengths.length; index++)
-                {
-                    if(base.printMaterialLengths[index] > 0)
-                    {
-                        names.push(base.printMaterialNames[index]);
-                        lengths.push(base.printMaterialLengths[index].toFixed(2));
-                        weights.push(String(Math.round(base.printMaterialWeights[index])));
-                        var cost = base.printMaterialCosts[index] == undefined ? 0 : base.printMaterialCosts[index].toFixed(2);
-                        costs.push(cost);
-                        if(cost > 0)
-                        {
-                            some_costs_known = true;
-                        }
-
-                        total_length += base.printMaterialLengths[index];
-                        total_weight += base.printMaterialWeights[index];
-                        total_cost += base.printMaterialCosts[index];
-                    }
-                }
-            }
-            if(lengths.length == 0)
-            {
-                lengths = ["0.00"];
-                weights = ["0"];
-                costs = ["0.00"];
-            }
-
-            var tooltip_html = "<b>%1</b><br/><table width=\"100%\">".arg(catalog.i18nc("@label", "Cost specification"));
-            for(var index = 0; index < lengths.length; index++)
-            {
-                tooltip_html += formatRow([
-                    "%1:".arg(names[index]),
-                    catalog.i18nc("@label m for meter", "%1m").arg(lengths[index]),
-                    catalog.i18nc("@label g for grams", "%1g").arg(weights[index]),
-                    "%1&nbsp;%2".arg(UM.Preferences.getValue("cura/currency")).arg(costs[index]),
-                ]);
-            }
-            if(lengths.length > 1)
-            {
-                tooltip_html += formatRow([
-                    catalog.i18nc("@label", "Total:"),
-                    catalog.i18nc("@label m for meter", "%1m").arg(total_length.toFixed(2)),
-                    catalog.i18nc("@label g for grams", "%1g").arg(Math.round(total_weight)),
-                    "%1 %2".arg(UM.Preferences.getValue("cura/currency")).arg(total_cost.toFixed(2)),
-                ]);
-            }
-            tooltip_html += "</table>";
-            tooltipText = tooltip_html;
-
-            return tooltipText
-        }
-
-        id: costSpec
-
-        anchors.left: parent.left
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: UM.Theme.getSize("thick_margin").height
-        anchors.leftMargin: UM.Theme.getSize("thick_margin").width
-
-        font: UM.Theme.getFont("very_small")
-        renderType: Text.NativeRendering
-        color: UM.Theme.getColor("text_subtext")
-        elide: Text.ElideMiddle
-        width: parent.width
-        property string tooltipText
-        text:
-        {
-            var lengths = [];
-            var weights = [];
-            var costs = [];
-            var someCostsKnown = false;
-            if(base.printMaterialLengths)
-            {
-                for(var index = 0; index < base.printMaterialLengths.length; index++)
-                {
-                    if(base.printMaterialLengths[index] > 0)
-                    {
-                        lengths.push(base.printMaterialLengths[index].toFixed(2));
-                        weights.push(String(Math.round(base.printMaterialWeights[index])));
-                        var cost = base.printMaterialCosts[index] == undefined ? 0 : base.printMaterialCosts[index].toFixed(2);
-                        costs.push(cost);
-                        if(cost > 0)
-                        {
-                            someCostsKnown = true;
-                        }
-                    }
-                }
-            }
-            if(lengths.length == 0)
-            {
-                lengths = ["0.00"];
-                weights = ["0"];
-                costs = ["0.00"];
-            }
-            var result = lengths.join(" + ") + "m / ~ " + weights.join(" + ") + "g";
-            if(someCostsKnown)
-            {
-                result += " / ~ " + costs.join(" + ") + " " + UM.Preferences.getValue("cura/currency");
-            }
-            return result;
-        }
-
-        MouseArea
-        {
-            id: costSpecMouseArea
-            anchors.fill: parent
-            hoverEnabled: true
-
-            onEntered:
-            {
-
-                if(base.printDuration.valid && !base.printDuration.isTotalDurationZero)
-                {
-                    var show_data = costSpec.getSpecsData()
-
-                    base.showTooltip(parent, Qt.point(-UM.Theme.getSize("thick_margin").width, 0), show_data);
-                }
-            }
-            onExited:
-            {
-                base.hideTooltip();
-            }
-        }
-    }
-
-    SaveButton
-    {
-        id: saveButton
-        width: parent.width
-        height: 100 * screenScaleFactor
-        anchors.bottom: parent.bottom
+        id: outputProcessWidget
+        OutputProcessWidget { }
     }
 }

resources/qml/Cura.qml

@@ -312,17 +312,16 @@ UM.MainWindow
             {
                 anchors.right: parent.right
                 anchors.bottom: parent.bottom
-                width: UM.Theme.getSize("action_panel_widget").width
                 anchors.rightMargin: UM.Theme.getSize("thick_margin").width
                 anchors.bottomMargin: UM.Theme.getSize("thick_margin").height
-                onShowTooltip:
-                {
-                    base.showTooltip(item, location, text)
-                }
-                onHideTooltip:
-                {
-                    base.hideTooltip()
-                }
+//                onShowTooltip:
+//                {
+//                    base.showTooltip(item, location, text)
+//                }
+//                onHideTooltip:
+//                {
+//                    base.hideTooltip()
+//                }
             }
 
             Loader

resources/qml/OutputProcessWidget.qml

@@ -0,0 +1,72 @@
+// 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
+
+Button
+{
+    id: button
+    property alias cursorShape: mouseArea.cursorShape
+    property alias iconSource: buttonIcon.source
+    property alias textFont: buttonText.font
+    property alias cornerRadius: backgroundRect.radius
+    property var color: UM.Theme.getColor("primary")
+    property var hoverColor: UM.Theme.getColor("primary_hover")
+    property var disabledColor: color
+    property var textColor: UM.Theme.getColor("button_text")
+    property var textHoverColor: UM.Theme.getColor("button_text_hover")
+    property var textDisabledColor: textColor
+    property var outlineColor: color
+    property var outlineHoverColor: hoverColor
+    property var outlineDisabledColor: outlineColor
+
+    contentItem: Row
+    {
+        UM.RecolorImage
+        {
+            id: buttonIcon
+            source: ""
+            height: Math.round(0.6 * parent.height)
+            width: height
+            sourceSize.width: width
+            sourceSize.height: height
+            color: button.hovered ? button.textHoverColor : button.textColor
+            visible: source != ""
+            anchors.verticalCenter: parent.verticalCenter
+            Behavior on color { ColorAnimation { duration: 50 } }
+        }
+
+        Label
+        {
+            id: buttonText
+            text: "Preview"
+            color: button.enabled ? (button.hovered ? button.textHoverColor : button.textColor): button.textDisabledColor
+            font: UM.Theme.getFont("action_button")
+            visible: text != ""
+            renderType: Text.NativeRendering
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+    background: Rectangle
+    {
+        id: backgroundRect
+        color: button.enabled ? (button.hovered ? button.hoverColor : button.color) : button.disabledColor
+        radius: UM.Theme.getSize("action_button_radius").width
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: button.enabled ? (button.hovered ? button.outlineHoverColor : button.outlineColor) : button.outlineDisabledColor
+        Behavior on color { ColorAnimation { duration: 50 } }
+    }
+
+    MouseArea
+    {
+        id: mouseArea
+        anchors.fill: parent
+        onPressed: mouse.accepted = false
+        hoverEnabled: true
+    }
+}

resources/qml/SliceProcessWidget.qml

@@ -0,0 +1,62 @@
+// 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
+
+Column
+{
+    id: widget
+
+    spacing: UM.Theme.getSize("default_margin").height
+
+    UM.I18nCatalog
+    {
+        id: catalog
+        name: "cura"
+    }
+
+    property real progress: UM.Backend.progress
+    property int backendState: UM.Backend.state
+
+    Rectangle
+    {
+        id: progressBar
+        width: parent.width
+        height: UM.Theme.getSize("progressbar").height
+        visible: widget.backendState == 2
+        radius: UM.Theme.getSize("progressbar_radius").width
+        color: UM.Theme.getColor("progressbar_background")
+
+        Rectangle
+        {
+            width: Math.max(parent.width * base.progress)
+            height: parent.height
+            radius: UM.Theme.getSize("progressbar_radius").width
+            color: UM.Theme.getColor("progressbar_control")
+        }
+    }
+
+    Cura.ActionButton
+    {
+        id: prepareButton
+        width: UM.Theme.getSize("action_panel_button").width
+        height: UM.Theme.getSize("action_panel_button").height
+        text: widget.backendState == 1 ? catalog.i18nc("@button", "Prepare") : catalog.i18nc("@button", "Cancel")
+        onClicked:
+        {
+            if ([1, 5].indexOf(widget.backendState) != -1)
+            {
+                CuraApplication.backend.forceSlice()
+            }
+            else
+            {
+                CuraApplication.backend.stopSlicing()
+            }
+        }
+    }
+}

resources/themes/cura-light/theme.json

@@ -378,10 +378,14 @@
         "configuration_selector_mode_tabs": [0.0, 3.0],
 
         "action_panel_widget": [35.0, 0.0],
+        "action_panel_button": [15.0, 3.0],
+
         "machine_selector_widget": [28.0, 4.5],
 
         "views_selector": [0.0, 4.0],
 
+        "default_radius": [0.25, 0.25],
+
         "wide_lining": [0.5, 0.5],
         "thick_lining": [0.2, 0.2],
         "default_lining": [0.08, 0.08],