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,198 +20,86 @@ Item
         height: UM.Theme.getSize("default_lining").height
         anchors.bottom: parent.bottom
     }
-    Column
+    Row
     {
-        id: pluginInfo
+        id: tileRow
-        property var color: model.type === "plugin" && !isEnabled ? UM.Theme.getColor("lining") : UM.Theme.getColor("text")
         height: parent.height
-        anchors
+        width: parent.width
-        {
+        spacing: UM.Theme.getSize("default_margin").width
-            left: parent.left
+        topPadding: UM.Theme.getSize("default_margin").height
-            top: parent.top
+
-            right: authorInfo.left
+        CheckBox
-            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
-        {
-            text: model.description
-            maximumLineCount: 3
-            elide: Text.ElideRight
-            width: parent.width
-            wrapMode: Text.WordWrap
-            color: pluginInfo.color
-        }
-    }
-    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:
-            {
-                if (model.author_email)
-                {
-                    return "<a href=\"mailto:" + model.author_email + "?Subject=Cura: " + model.name + "\">" + model.author_name + "</a>"
-                }
-                else
-                {
-                    return model.author_name
-                }
-            }
-            width: parent.width
-            height: UM.Theme.getSize("toolbox_property_label").height
-            wrapMode: Text.WordWrap
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignLeft
-            onLinkActivated: Qt.openUrlExternally("mailto:" + model.author_email + "?Subject=Cura: " + model.name + " Plugin")
-            color: model.enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("lining")
-            linkColor: UM.Theme.getColor("text_link")
-        }
-    }
-    Column
-    {
-        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")
+            checked: isEnabled
             visible: model.type == "plugin"
+            width: visible ? UM.Theme.getSize("checkbox").width : 0
             enabled: !toolbox.isDownloading
-            style: ButtonStyle
+            style: UM.Theme.styles.checkbox
-            {
-                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
+        Column
         {
-            id: removeButton
+            id: pluginInfo
-            text: catalog.i18nc("@action:button", "Uninstall")
+            topPadding: UM.Theme.getSize("default_margin").height / 2
-            visible: !model.is_bundled
+            property var color: model.type === "plugin" && !isEnabled ? UM.Theme.getColor("lining") : UM.Theme.getColor("text")
-            enabled: !toolbox.isDownloading
+            width: tileRow.width - (authorInfo.width + pluginActions.width + 2 * tileRow.spacing + ((disableButton.visible) ? disableButton.width + tileRow.spacing : 0))
-            style: ButtonStyle
+            Label
             {
-                background: Rectangle
+                text: model.name
+                width: parent.width
+                height: UM.Theme.getSize("toolbox_property_label").height
+                wrapMode: Text.WordWrap
+                font: UM.Theme.getFont("default_bold")
+                color: pluginInfo.color
+            }
+            Label
+            {
+                text: model.description
+                maximumLineCount: 3
+                elide: Text.ElideRight
+                width: parent.width
+                wrapMode: Text.WordWrap
+                color: pluginInfo.color
+            }
+        }
+        Column
+        {
+            id: authorInfo
+            width: Math.floor(UM.Theme.getSize("toolbox_action_button").width * 1.25)
+
+            Label
+            {
+                text:
                 {
-                    implicitWidth: UM.Theme.getSize("toolbox_action_button").width
+                    if (model.author_email)
-                    implicitHeight: UM.Theme.getSize("toolbox_action_button").height
-                    color: "transparent"
-                    border
                     {
-                        width: UM.Theme.getSize("default_lining").width
+                        return "<a href=\"mailto:" + model.author_email + "?Subject=Cura: " + model.name + "\">" + model.author_name + "</a>"
-                        color: UM.Theme.getColor("lining")
+                    }
+                    else
+                    {
+                        return model.author_name
                     }
                 }
-                label: Label
+                width: parent.width
-                {
+                height: UM.Theme.getSize("toolbox_property_label").height
-                    text: control.text
+                wrapMode: Text.WordWrap
-                    color: UM.Theme.getColor("text")
+                verticalAlignment: Text.AlignVCenter
-                    verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignLeft
-                    horizontalAlignment: Text.AlignHCenter
+                onLinkActivated: Qt.openUrlExternally("mailto:" + model.author_email + "?Subject=Cura: " + model.name + " Plugin")
-                }
+                color: model.enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("lining")
+                linkColor: UM.Theme.getColor("text_link")
             }
-            onClicked: toolbox.uninstall(model.id)
         }
-        Button
+        ToolboxInstalledTileActions
         {
-            id: updateButton
+            id: pluginActions
-            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
+        Connections
         {
-            id: progressbar
+            target: toolbox
-            anchors
+            onEnabledChanged: isEnabled = toolbox.isEnabled(model.id)
-            {
+            onMetadataChanged: canUpdate = toolbox.canUpdate(model.id)
-                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
+}
-    {
-        target: toolbox
-        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]