CURA-5296

- Changed API to not use staging
- Fixed crash when pressing cancel
- Added loading icon

plugins/Toolbox/resources/images/loading.svg

@@ -0,0 +1 @@
+<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="animation-play-state: running; animation-delay: 0s; background-image: none; background-position: initial initial; background-repeat: initial initial;"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#0CA9E3" stroke-width="13" r="43" stroke-dasharray="202.63272615654165 69.54424205218055" style="animation-play-state: running; animation-delay: 0s;"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animateTransform></circle></svg>

plugins/Toolbox/resources/qml/ToolboxDetailTile.qml

@@ -20,7 +20,7 @@ Item
         {
             left: parent.left
             right: controls.left
-            rightMargin: UM.Theme.getSize("default_margin").width
+            rightMargin: UM.Theme.getSize("default_margin").width * 2 + UM.Theme.getSize("toolbox_loader").width
             top: parent.top
         }
         Label
@@ -53,60 +53,25 @@ Item
         anchors.top: tile.top
         width: childrenRect.width
         height: childrenRect.height
-        Button
+
+        ToolboxProgressButton
         {
             id: installButton
-            text:
+            active: toolbox.isDownloading && toolbox.activePackage == model
-            {
+            complete: tile.installed
-                if (installed)
+            readyAction: function() {
-                {
+                toolbox.activePackage = model
-                    return catalog.i18nc("@action:button", "Installed")
+                toolbox.startDownload(model.download_url)
             }
-                else
+            activeAction: function() {
-                {
+                toolbox.cancelDownload()
-                    if (toolbox.isDownloading && toolbox.activePackage == model)
-                    {
-                        return catalog.i18nc("@action:button", "Cancel")
             }
-                    else
+            completeAction: function() {
-                    {
-                        return catalog.i18nc("@action:button", "Install")
-                    }
-                }
-            }
-            enabled: installed || !(toolbox.isDownloading && toolbox.activePackage != model) //Don't allow installing while another download is running.
-            opacity: enabled ? 1.0 : 0.5
-
-            property alias installed: tile.installed
-            style: UM.Theme.styles.toolbox_action_button
-            onClicked:
-            {
-                if (installed)
-                {
                 toolbox.viewCategory = "installed"
             }
-                else
+            // Don't allow installing while another download is running
-                {
+            enabled: installed || !(toolbox.isDownloading && toolbox.activePackage != model)
-                    // if ( toolbox.isDownloading && toolbox.activePackage == model )
+            opacity: enabled ? 1.0 : 0.5
-                    if ( toolbox.isDownloading )
-                    {
-                        toolbox.cancelDownload();
-                    }
-                    else
-                    {
-                        toolbox.activePackage = model
-                        // toolbox.activePackage = model;
-                        if ( model.can_upgrade )
-                        {
-                            // toolbox.downloadAndInstallPlugin( model.update_url );
-                        }
-                        else
-                        {
-                            toolbox.startDownload( model.download_url );
-                        }
-                    }
-                }
-            }
         }
     }
 

plugins/Toolbox/resources/qml/ToolboxInstalledTileActions.qml

@@ -11,56 +11,26 @@ Column
     width: UM.Theme.getSize("toolbox_action_button").width
     spacing: UM.Theme.getSize("narrow_margin").height
 
-    Item
+    ToolboxProgressButton
-    {
-        width: parent.width
-        height: childrenRect.height
-        visible: canUpdate
-        Button
     {
         id: updateButton
-            text: catalog.i18nc("@action:button", "Update")
+        active: toolbox.isDownloading && toolbox.activePackage == model
-            style: ButtonStyle
+        readyLabel: catalog.i18nc("@action:button", "Update")
-            {
+        activeLabel: catalog.i18nc("@action:button", "Updating")
-                background: Rectangle
+        completeLabel: catalog.i18nc("@action:button", "Updated")
-                {
+        readyAction: function() {
-                    implicitWidth: UM.Theme.getSize("toolbox_action_button").width
+            toolbox.activePackage = model
-                    implicitHeight: UM.Theme.getSize("toolbox_action_button").height
+            toolbox.update(model.id)
-                    color: control.hovered ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary")
-                }
-                label: Label
-                {
-                    text: control.text
-                    color: control.hovered ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_text_hover")
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-                    font: UM.Theme.getFont("default_bold")
-                }
-            }
-            onClicked: toolbox.update(model.id)
-        }
-        ProgressBar
-        {
-            id: progressbar
-            width: parent.width
-            value: toolbox.isDownloading ? toolbox.downloadProgress : 0
-            visible: toolbox.isDownloading
-            style: ProgressBarStyle
-            {
-                background: Rectangle
-                {
-                    color: "transparent"
-                    implicitHeight: UM.Theme.getSize("toolbox_action_button").height
-                }
-                progress: Rectangle
-                {
-                    // TODO Define a good color that fits the purpuse
-                    color: "blue"
-                    opacity: 0.5
-                }
         }
+        activeAction: function() {
+            toolbox.cancelDownload()
         }
+        // Don't allow installing while another download is running
+        enabled: !(toolbox.isDownloading && toolbox.activePackage != model)
+        opacity: enabled ? 1.0 : 0.5
+        visible: canUpdate
     }
+
     Button
     {
         id: removeButton

plugins/Toolbox/resources/qml/ToolboxProgressButton.qml

@@ -0,0 +1,125 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Toolbox is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import UM 1.1 as UM
+
+
+Item
+{
+    id: base
+
+    property var active: false
+    property var complete: false
+
+    property var readyLabel: "Install"
+    property var activeLabel: "Installing"
+    property var completeLabel: "Installed"
+
+    property var readyAction: null          // Action when button is ready and clicked (likely install)
+    property var activeAction: null         // Action when button is active and clicked (likely cancel)
+    property var completeAction: null       // Action when button is complete and clicked (likely go to installed)
+
+    width: UM.Theme.getSize("toolbox_action_button").width
+    height: UM.Theme.getSize("toolbox_action_button").height
+
+    Button
+    {
+        id: button
+        text:
+        {
+            if (complete)
+            {
+                return catalog.i18nc("@action:button", "Installed")
+            }
+            else if (active)
+            {
+                return catalog.i18nc("@action:button", "Cancel")
+            }
+            else
+            {
+                return catalog.i18nc("@action:button", "Install")
+            }
+        }
+        onClicked:
+        {
+            if (complete)
+            {
+                return completeAction()
+            }
+            else if (active)
+            {
+                return activeAction()
+            }
+            else
+            {
+                return readyAction()
+            }
+        }
+        style: ButtonStyle
+        {
+            background: Rectangle
+            {
+                implicitWidth: UM.Theme.getSize("toolbox_action_button").width
+                implicitHeight: UM.Theme.getSize("toolbox_action_button").height
+                color:
+                {
+                    if (base.complete)
+                    {
+                        return UM.Theme.getColor("action_button_disabled")
+                    }
+                    else
+                    {
+                        if (control.hovered)
+                        {
+                            return UM.Theme.getColor("primary_hover")
+                        }
+                        else
+                        {
+                            return UM.Theme.getColor("primary")
+                        }
+                    }
+                }
+            }
+            label: Label
+            {
+                text: control.text
+                color:
+                {
+                    if (base.complete)
+                    {
+                        return UM.Theme.getColor("action_button_disabled_text")
+                    }
+                    else
+                    {
+                        if (control.hovered)
+                        {
+                            return UM.Theme.getColor("button_text_hover")
+                        }
+                        else
+                        {
+                            return UM.Theme.getColor("button_text")
+                        }
+                    }
+                }
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+                font: UM.Theme.getFont("default_bold")
+            }
+        }
+    }
+
+    AnimatedImage
+    {
+        id: loader
+        visible: active
+        source: "../images/loading.gif"
+        width: UM.Theme.getSize("toolbox_loader").width
+        height: UM.Theme.getSize("toolbox_loader").height
+        anchors.right: button.left
+        anchors.rightMargin: UM.Theme.getSize("default_margin").width
+        anchors.verticalCenter: button.verticalCenter
+    }
+}

plugins/Toolbox/src/Toolbox.py

@@ -350,8 +350,8 @@ class Toolbox(QObject, Extension):
 
     def resetDownload(self) -> None:
         if self._download_reply:
-            self._download_reply.abort()
             self._download_reply.downloadProgress.disconnect(self._onDownloadProgress)
+            self._download_reply.abort()
         self._download_reply = None
         self._download_request = None
         self.setDownloadProgress(0)

resources/themes/cura-light/theme.json

@@ -458,6 +458,7 @@
         "toolbox_header": [1.0, 4.0],
         "toolbox_progress_bar": [8.0, 0.5],
         "toolbox_chart_row": [1.0, 2.0],
-        "toolbox_action_button": [8.0, 2.5]
+        "toolbox_action_button": [8.0, 2.5],
+        "toolbox_loader": [2.0, 2.0]
     }
 }