CURA-5137 Make some adjustments in the UI.

plugins/Toolbox/resources/qml/PluginBrowser.qml

@@ -12,7 +12,7 @@ import QtQuick.Controls.Styles 1.4
 import UM 1.1 as UM
 
 Window
-    {
+{
     id: base
     title: catalog.i18nc("@title:tab", "Toolbox");
     modality: Qt.ApplicationModal
@@ -75,9 +75,6 @@ Window
             }
         }
 
-
-
-
         UM.I18nCatalog { id: catalog; name: "cura" }
 
         Connections

plugins/Toolbox/resources/qml/ToolboxGrid.qml

@@ -11,30 +11,23 @@ import UM 1.1 as UM
 
 // TODO: Switch to QtQuick.Controls 2.x and remove QtQuick.Controls.Styles
 
-Rectangle
+Column
 {
     id: base
-    width: parent.width
+    height: childrenRect.height
-    height: childrenRect.height + UM.Theme.getSize("double_margin").height * 8
+    spacing: UM.Theme.getSize("base_unit").height
-    color: "transparent"
     Label
     {
         id: heading
         text: "Community Plugins"
         width: parent.width
-        height: UM.Theme.getSize("base_unit").width * 4
-        verticalAlignment: Text.AlignVCenter
         color: UM.Theme.getColor("text_medium")
         font: UM.Theme.getFont("medium")
     }
     GridLayout
     {
         id: grid
-        width: base.width
+        width: parent.width
-        anchors
-        {
-            top: heading.bottom
-        }
         columns: 3
         columnSpacing: UM.Theme.getSize("base_unit").width
         rowSpacing: UM.Theme.getSize("base_unit").height
@@ -42,7 +35,10 @@ Rectangle
         Repeater
         {
             model: manager.packagesModel
-            delegate: ToolboxGridTile {}
+            delegate: ToolboxGridTile
+            {
+                Layout.preferredWidth: (grid.width - (grid.columns - 1) * grid.columnSpacing) / grid.columns
+            }
         }
     }
 }

plugins/Toolbox/resources/qml/ToolboxGridTile.qml

@@ -13,7 +13,7 @@ Item
 {
     id: base
     height: childrenRect.height
-    Layout.fillWidth: true
+    Layout.alignment: Qt.AlignTop | Qt.AlignLeft
     Row
     {
         width: parent.width
@@ -29,22 +29,28 @@ Item
         }
         Column
         {
-            width: UM.Theme.getSize("base_unit").width * 12
+            width: parent.width - thumbnail.width - parent.spacing
+            spacing: Math.floor(UM.Theme.getSize("base_unit").width / 2)
             Label
             {
                 id: name
                 text: model.name
                 width: parent.width
                 wrapMode: Text.WordWrap
-                height: UM.Theme.getSize("base_unit").height * 2
-                verticalAlignment: Text.AlignVCenter
                 color: UM.Theme.getColor("text")
                 font: UM.Theme.getFont("default_bold")
             }
             Label
             {
                 id: info
-                text: model.description
+                text:
+                {
+                    if (model.description.length > 50)
+                    {
+                        return model.description.substring(0, 50) + "..."
+                    }
+                    return model.description
+                }
                 width: parent.width
                 wrapMode: Text.WordWrap
                 color: UM.Theme.getColor("text_medium")

plugins/Toolbox/resources/qml/ToolboxShowcase.qml

@@ -10,45 +10,30 @@ import UM 1.1 as UM
 
 // TODO: Switch to QtQuick.Controls 2.x and remove QtQuick.Controls.Styles
 
-Rectangle
+Column
 {
     id: base
-    width: parent.width
     height: childrenRect.height
-    color: "transparent"
+    spacing: UM.Theme.getSize("base_unit").height
     Label
     {
         id: heading
         text: "Top Downloads"
         width: parent.width
-        height: UM.Theme.getSize("base_unit").width * 4
-        verticalAlignment: Text.AlignVCenter
         color: UM.Theme.getColor("text_medium")
         font: UM.Theme.getFont("medium")
     }
     Row
     {
         height: childrenRect.height
-        width: childrenRect.width
         spacing: UM.Theme.getSize("base_unit").width * 2
         anchors
         {
             horizontalCenter: parent.horizontalCenter
-            top: heading.bottom    
         }
 
         ToolboxShowcaseTile {}
         ToolboxShowcaseTile {}
         ToolboxShowcaseTile {}
     }
-    Rectangle
-    {
-        color: UM.Theme.getColor("text_medium")
-        width: parent.width
-        height: UM.Theme.getSize("base_unit").height / 6
-        anchors
-        {
-            bottom: parent.bottom
-        }
-    }
 }

plugins/Toolbox/resources/qml/ToolboxViewDownloads.qml

@@ -1,7 +1,7 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // PluginBrowser is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.2
+import QtQuick 2.7
 import QtQuick.Dialogs 1.1
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
@@ -12,29 +12,31 @@ import UM 1.1 as UM
 ScrollView
 {
     id: base
-    frameVisible: false
+    frameVisible: true
-    anchors.fill: parent
+    width: parent.width
+    height: parent.height
     style: UM.Theme.styles.scrollview
     Column
     {
         width: base.width
         spacing: UM.Theme.getSize("base_unit").height
-        height: childrenRect.height
+        padding: UM.Theme.getSize("base_unit").height * 2
-        anchors
+        height: childrenRect.height + 2 * padding
-        {
-            fill: parent
-            topMargin: UM.Theme.getSize("base_unit").height
-            bottomMargin: UM.Theme.getSize("base_unit").height
-            leftMargin: UM.Theme.getSize("base_unit").width * 2
-            rightMargin: UM.Theme.getSize("base_unit").width * 2
-        }
         ToolboxShowcase
         {
             id: showcase
+            width: parent.width - 2 * parent.padding
+        }
+        Rectangle
+        {
+            color: UM.Theme.getColor("text_medium")
+            width: parent.width - 2 * parent.padding
+            height: UM.Theme.getSize("base_unit").height / 6
         }
         ToolboxGrid
         {
             id: allPlugins
+            width: parent.width - 2 * parent.padding
         }
     }
 }