Change layout of the installed plugins tab.

- There were some alignment problems when there were more than 2 buttons
in a column (disable, uninstall and update)
- Now the progress bar shows on top of the "Update" button.

plugins/Toolbox/resources/qml/ToolboxInstalledTile.qml

@@ -1,21 +1,18 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Toolbox is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.2
+import QtQuick 2.7
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 import UM 1.1 as UM
 
 Item
 {
+    height: UM.Theme.getSize("toolbox_installed_tile").height
+    width: parent.width
     property bool canUpdate: false
     property bool isEnabled: true
-    height: UM.Theme.getSize("toolbox_installed_tile").height
+
-    anchors
-    {
-        left: parent.left
-        right: parent.right
-    }
     Rectangle
     {
         color: UM.Theme.getColor("lining")
@@ -23,30 +20,40 @@ Item
         height: UM.Theme.getSize("default_lining").height
         anchors.bottom: parent.bottom
     }
+    Row
+    {
+        id: tileRow
+        height: parent.height
+        width: parent.width
+        spacing: UM.Theme.getSize("default_margin").width
+        topPadding: UM.Theme.getSize("default_margin").height
+
+        CheckBox
+        {
+            id: disableButton
+            checked: isEnabled
+            visible: model.type == "plugin"
+            width: visible ? UM.Theme.getSize("checkbox").width : 0
+            enabled: !toolbox.isDownloading
+            style: UM.Theme.styles.checkbox
+            onClicked: toolbox.isEnabled(model.id) ? toolbox.disable(model.id) : toolbox.enable(model.id)
+        }
         Column
         {
             id: pluginInfo
+            topPadding: UM.Theme.getSize("default_margin").height / 2
             property var color: model.type === "plugin" && !isEnabled ? UM.Theme.getColor("lining") : UM.Theme.getColor("text")
-        height: parent.height
+            width: tileRow.width - (authorInfo.width + pluginActions.width + 2 * tileRow.spacing + ((disableButton.visible) ? disableButton.width + tileRow.spacing : 0))
-        anchors
-        {
-            left: parent.left
-            top: parent.top
-            right: authorInfo.left
-            topMargin: UM.Theme.getSize("default_margin").height
-            rightMargin: UM.Theme.getSize("default_margin").width
-        }
             Label
             {
                 text: model.name
                 width: parent.width
                 height: UM.Theme.getSize("toolbox_property_label").height
                 wrapMode: Text.WordWrap
-            verticalAlignment: Text.AlignVCenter
                 font: UM.Theme.getFont("default_bold")
                 color: pluginInfo.color
             }
-        Text
+            Label
             {
                 text: model.description
                 maximumLineCount: 3
@@ -59,15 +66,8 @@ Item
         Column
         {
             id: authorInfo
-        height: parent.height
             width: Math.floor(UM.Theme.getSize("toolbox_action_button").width * 1.25)
-        anchors
+
-        {
-            top: parent.top
-            topMargin: UM.Theme.getSize("default_margin").height
-            right: pluginActions.left
-            rightMargin: UM.Theme.getSize("default_margin").width
-        }
             Label
             {
                 text:
@@ -91,125 +91,9 @@ Item
                 linkColor: UM.Theme.getColor("text_link")
             }
         }
-    Column
+        ToolboxInstalledTileActions
         {
             id: pluginActions
-        width: childrenRect.width
-        height: childrenRect.height
-        spacing: UM.Theme.getSize("default_margin").height
-        anchors
-        {
-            top: parent.top
-            right: parent.right
-            topMargin: UM.Theme.getSize("default_margin").height
-        }
-        Button
-        {
-            id: disableButton
-            text: isEnabled ? catalog.i18nc("@action:button", "Disable") : catalog.i18nc("@action:button", "Enable")
-            visible: model.type == "plugin"
-            enabled: !toolbox.isDownloading
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    implicitWidth: UM.Theme.getSize("toolbox_action_button").width
-                    implicitHeight: UM.Theme.getSize("toolbox_action_button").height
-                    color: "transparent"
-                    border
-                    {
-                        width: UM.Theme.getSize("default_lining").width
-                        color: UM.Theme.getColor("lining")
-                    }
-                }
-                label: Label
-                {
-                    text: control.text
-                    color: UM.Theme.getColor("text")
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-                }
-            }
-            onClicked: toolbox.isEnabled(model.id) ? toolbox.disable(model.id) : toolbox.enable(model.id)
-        }
-        Button
-        {
-            id: removeButton
-            text: catalog.i18nc("@action:button", "Uninstall")
-            visible: !model.is_bundled
-            enabled: !toolbox.isDownloading
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    implicitWidth: UM.Theme.getSize("toolbox_action_button").width
-                    implicitHeight: UM.Theme.getSize("toolbox_action_button").height
-                    color: "transparent"
-                    border
-                    {
-                        width: UM.Theme.getSize("default_lining").width
-                        color: UM.Theme.getColor("lining")
-                    }
-                }
-                label: Label
-                {
-                    text: control.text
-                    color: UM.Theme.getColor("text")
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-                }
-            }
-            onClicked: toolbox.uninstall(model.id)
-        }
-        Button
-        {
-            id: updateButton
-            text: catalog.i18nc("@action:button", "Update")
-            visible: canUpdate
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    implicitWidth: UM.Theme.getSize("toolbox_action_button").width
-                    implicitHeight: UM.Theme.getSize("toolbox_action_button").height
-                    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
-            anchors
-            {
-                left: updateButton.left
-                right: updateButton.right
-                top: updateButton.bottom
-                topMargin: Math.floor(UM.Theme.getSize("default_margin") / 4)
-            }
-            value: toolbox.isDownloading ? toolbox.downloadProgress : 0
-            visible: toolbox.isDownloading
-            style: ProgressBarStyle
-            {
-                background: Rectangle
-                {
-                    color: UM.Theme.getColor("lining")
-                    implicitHeight: Math.floor(UM.Theme.getSize("toolbox_progress_bar").height)
-                }
-                progress: Rectangle
-                {
-                    color: UM.Theme.getColor("primary")
-                }
-            }
-        }
         }
         Connections
         {
@@ -217,4 +101,5 @@ Item
             onEnabledChanged: isEnabled = toolbox.isEnabled(model.id)
             onMetadataChanged: canUpdate = toolbox.canUpdate(model.id)
         }
+    }
 }

plugins/Toolbox/resources/qml/ToolboxInstalledTileActions.qml

@@ -0,0 +1,93 @@
+// 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
+{
+    width: UM.Theme.getSize("toolbox_action_button").width
+    spacing: UM.Theme.getSize("narrow_margin").height
+
+    Item
+    {
+        width: parent.width
+        height: childrenRect.height
+        visible: canUpdate
+        Button
+        {
+            id: updateButton
+            text: catalog.i18nc("@action:button", "Update")
+            style: ButtonStyle
+            {
+                background: Rectangle
+                {
+                    implicitWidth: UM.Theme.getSize("toolbox_action_button").width
+                    implicitHeight: UM.Theme.getSize("toolbox_action_button").height
+                    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
+                }
+            }
+        }
+    }
+    Button
+    {
+        id: removeButton
+        text: catalog.i18nc("@action:button", "Uninstall")
+        visible: !model.is_bundled
+        enabled: !toolbox.isDownloading
+        style: ButtonStyle
+        {
+            background: Rectangle
+            {
+                implicitWidth: UM.Theme.getSize("toolbox_action_button").width
+                implicitHeight: UM.Theme.getSize("toolbox_action_button").height
+                color: "transparent"
+                border
+                {
+                    width: UM.Theme.getSize("default_lining").width
+                    color: UM.Theme.getColor("lining")
+                }
+            }
+            label: Label
+            {
+                text: control.text
+                color: UM.Theme.getColor("text")
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+        onClicked: toolbox.uninstall(model.id)
+    }
+}

resources/themes/cura-light/theme.json

@@ -69,8 +69,6 @@
 
     "colors": {
 
-
-
         "sidebar": [255, 255, 255, 255],
         "lining": [192, 193, 194, 255],
         "viewport_overlay": [0, 0, 0, 192],
@@ -458,7 +456,6 @@
         "toolbox_property_label": [1.0, 2.0],
         "toolbox_heading_label": [1.0, 4.0],
         "toolbox_header": [1.0, 4.0],
-        "toolbox_action_button": [8.0, 2.5],
         "toolbox_progress_bar": [8.0, 0.5],
         "toolbox_chart_row": [1.0, 2.0],
         "toolbox_action_button": [8.0, 2.5]