CURA-5296 Improve button styling

plugins/Toolbox/resources/qml/ToolboxDetailTile.qml

@@ -9,7 +9,6 @@ import UM 1.1 as UM
 Item
 {
     id: tile
-    property bool installed: toolbox.isInstalled(model.id)
     width: detailList.width - UM.Theme.getSize("wide_margin").width
     height: normalData.height + compatibilityChart.height + 4 * UM.Theme.getSize("default_margin").height
     Item
@@ -46,7 +45,7 @@ Item
         }
     }
 
-    Item
+    ToolboxDetailTileActions
     {
         id: controls
         anchors.right: tile.right
@@ -54,28 +53,6 @@ Item
         width: childrenRect.width
         height: childrenRect.height
 
-        ToolboxProgressButton
-        {
-            id: installButton
-            active: toolbox.isDownloading && toolbox.activePackage == model
-            complete: tile.installed
-            readyAction: function()
-            {
-                toolbox.activePackage = model
-                toolbox.startDownload(model.download_url)
-            }
-            activeAction: function()
-            {
-                toolbox.cancelDownload()
-            }
-            completeAction: function()
-            {
-                toolbox.viewCategory = "installed"
-            }
-            // Don't allow installing while another download is running
-            enabled: installed || !(toolbox.isDownloading && toolbox.activePackage != model)
-            opacity: enabled ? 1.0 : 0.5
-        }
     }
 
     ToolboxCompatibilityChart
@@ -94,9 +71,4 @@ Item
         anchors.top: compatibilityChart.bottom
         anchors.topMargin: UM.Theme.getSize("default_margin").height + UM.Theme.getSize("wide_margin").height //Normal margin for spacing after chart, wide margin between items.
     }
-    Connections
-    {
-        target: toolbox
-        onInstallChanged: installed = toolbox.isInstalled(model.id)
-    }
 }

plugins/Toolbox/resources/qml/ToolboxDetailTileActions.qml

@@ -0,0 +1,66 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Toolbox is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import UM 1.1 as UM
+
+Column
+{
+    property bool installed: toolbox.isInstalled(model.id)
+    property bool canUpdate: toolbox.canUpdate(model.id)
+    width: UM.Theme.getSize("toolbox_action_button").width
+    spacing: UM.Theme.getSize("narrow_margin").height
+
+    ToolboxProgressButton
+    {
+        id: installButton
+        active: toolbox.isDownloading && toolbox.activePackage == model
+        complete: installed
+        readyAction: function()
+        {
+            toolbox.activePackage = model
+            toolbox.startDownload(model.download_url)
+        }
+        activeAction: function()
+        {
+            toolbox.cancelDownload()
+        }
+        completeAction: function()
+        {
+            toolbox.viewCategory = "installed"
+        }
+        // Don't allow installing while another download is running
+        enabled: installed || !(toolbox.isDownloading && toolbox.activePackage != model)
+        opacity: enabled ? 1.0 : 0.5
+    }
+
+    ToolboxProgressButton
+    {
+        id: updateButton
+        active: toolbox.isDownloading && toolbox.activePackage == model
+        readyLabel: catalog.i18nc("@action:button", "Update")
+        activeLabel: catalog.i18nc("@action:button", "Updating")
+        completeLabel: catalog.i18nc("@action:button", "Updated")
+        readyAction: function()
+        {
+            toolbox.activePackage = model
+            toolbox.update(model.id)
+        }
+        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: installed && canUpdate
+    }
+    Connections
+    {
+        target: toolbox
+        onInstallChanged: installed = toolbox.isInstalled(model.id)
+        onMetadataChanged: canUpdate = toolbox.canUpdate(model.id)
+    }
+}

plugins/Toolbox/resources/qml/ToolboxInstalledTileActions.qml

@@ -49,7 +49,17 @@ Column
                 border
                 {
                     width: UM.Theme.getSize("default_lining").width
-                    color: UM.Theme.getColor("lining")
+                    color:
+                    {
+                        if (control.hovered)
+                        {
+                            return UM.Theme.getColor("primary_hover")
+                        }
+                        else
+                        {
+                            return UM.Theme.getColor("lining")
+                        }
+                    }
                 }
             }
             label: Label
@@ -58,6 +68,7 @@ Column
                 color: UM.Theme.getColor("text")
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignHCenter
+                font: UM.Theme.getFont("default")
             }
         }
         onClicked: toolbox.uninstall(model.id)

plugins/Toolbox/resources/qml/ToolboxProgressButton.qml

@@ -68,7 +68,7 @@ Item
                 {
                     if (base.complete)
                     {
-                        return UM.Theme.getColor("action_button_disabled")
+                        return "transparent"
                     }
                     else
                     {
@@ -82,6 +82,31 @@ Item
                         }
                     }
                 }
+                border
+                {
+                    width:
+                    {
+                        if (base.complete)
+                        {
+                            UM.Theme.getSize("default_lining").width
+                        }
+                        else
+                        {
+                            return 0
+                        }
+                    }
+                    color:
+                    {
+                        if (control.hovered)
+                        {
+                            return UM.Theme.getColor("primary_hover")
+                        }
+                        else
+                        {
+                            return UM.Theme.getColor("lining")
+                        }
+                    }
+                }
             }
             label: Label
             {
@@ -90,7 +115,7 @@ Item
                 {
                     if (base.complete)
                     {
-                        return UM.Theme.getColor("action_button_disabled_text")
+                        return UM.Theme.getColor("text")
                     }
                     else
                     {
@@ -106,7 +131,17 @@ Item
                 }
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignHCenter
-                font: UM.Theme.getFont("default_bold")
+                font:
+                {
+                    if (base.complete)
+                    {
+                        return UM.Theme.getFont("default")
+                    }
+                    else
+                    {
+                        return UM.Theme.getFont("default_bold")
+                    }
+                }
             }
         }
     }

resources/bundled_packages.json

@@ -974,7 +974,7 @@
             "package_type": "material",
             "display_name": "Ultimaker ABS",
             "description": "Example package for material and quality profiles for Ultimaker materials.",
-            "package_version": "1.0.0",
+            "package_version": "0.5.0",
             "cura_version": 4,
             "website": "https://ultimaker.com/products/materials/abs",
             "author": {