CURA-5537 improve styling of toolbox

plugins/Toolbox/resources/qml/ToolboxDownloadsGrid.qml

@@ -1,7 +1,7 @@
 // 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 QtQuick.Layouts 1.3
@@ -9,10 +9,10 @@ import UM 1.1 as UM
 
 Column
 {
-    height: childrenRect.height
+    height: childrenRect.height + 2 * padding
     width: parent.width
     spacing: UM.Theme.getSize("default_margin").height
-
+    padding: UM.Theme.getSize("wide_margin").height
     Label
     {
         id: heading

plugins/Toolbox/resources/qml/ToolboxDownloadsPage.qml

@@ -15,22 +15,15 @@ ScrollView
     flickableItem.flickableDirection: Flickable.VerticalFlick
     Column
     {
-        width: parent.width - 2 * padding
+        width: base.width
         spacing: UM.Theme.getSize("default_margin").height
-        padding: UM.Theme.getSize("wide_margin").height
-        height: childrenRect.height + 2 * padding
+        height: childrenRect.height
 
         ToolboxDownloadsShowcase
         {
             id: showcase
             width: parent.width
         }
-        Rectangle
-        {
-            color: UM.Theme.getColor("lining")
-            width: parent.width
-            height: UM.Theme.getSize("default_lining").height
-        }
 
         ToolboxDownloadsGrid
         {

plugins/Toolbox/resources/qml/ToolboxDownloadsShowcase.qml

@@ -1,16 +1,22 @@
 // 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
 
+Rectangle
+{
+    color: UM.Theme.getColor("secondary")
+    height: childrenRect.height
+    width: parent.width
     Column
     {
-    height: childrenRect.height
+        height: childrenRect.height + 2 * padding
         spacing: UM.Theme.getSize("toolbox_showcase_spacing").width
         width: parent.width
+        padding: UM.Theme.getSize("wide_margin").height
         Label
         {
             id: heading
@@ -44,3 +50,4 @@ Column
             }
         }
     }
+}

plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml

@@ -1,37 +1,31 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Toolbox is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.3
+import QtQuick 2.7
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
+import QtGraphicalEffects 1.0
 import UM 1.1 as UM
 
-Item
-{
-    width: UM.Theme.getSize("toolbox_thumbnail_large").width
-    height: thumbnail.height + packageName.height
 Rectangle
 {
-        id: highlight
-        anchors.fill: parent
-        opacity: 0.0
-        color: UM.Theme.getColor("primary")
-    }
+    id: tileBase
+    width: UM.Theme.getSize("toolbox_thumbnail_large").width + (2 * UM.Theme.getSize("default_lining").width)
+    height: thumbnail.height + packageNameBackground.height + (2 * UM.Theme.getSize("default_lining").width)
+    border.width: UM.Theme.getSize("default_lining").width
+    border.color: UM.Theme.getColor("lining")
+    color: "transparent"
     Rectangle
     {
         id: thumbnail
         color: "white"
         width: UM.Theme.getSize("toolbox_thumbnail_large").width
         height: UM.Theme.getSize("toolbox_thumbnail_large").height
-        border
-        {
-            width: UM.Theme.getSize("default_lining").width
-            color: UM.Theme.getColor("lining")
-        }
         anchors
         {
             top: parent.top
             horizontalCenter: parent.horizontalCenter
+            topMargin: UM.Theme.getSize("default_lining").width
         }
         Image
         {
@@ -43,13 +37,23 @@ Item
             mipmap: true
         }
     }
+    Rectangle
+    {
+        id: packageNameBackground
+        color: UM.Theme.getColor("primary")
+        anchors
+        {
+            top: thumbnail.bottom
+            horizontalCenter: parent.horizontalCenter
+        }
+        height: UM.Theme.getSize("toolbox_heading_label").height
+        width: parent.width
         Label
         {
             id: packageName
             text: model.name
             anchors
             {
-            top: thumbnail.bottom
                 horizontalCenter: parent.horizontalCenter
             }
             verticalAlignment: Text.AlignVCenter
@@ -57,22 +61,25 @@ Item
             height: UM.Theme.getSize("toolbox_heading_label").height
             width: parent.width
             wrapMode: Text.WordWrap
-        color: UM.Theme.getColor("text")
+            color: UM.Theme.getColor("button_text")
             font: UM.Theme.getFont("medium_bold")
         }
+    }
     MouseArea
     {
         anchors.fill: parent
         hoverEnabled: true
         onEntered:
         {
-            thumbnail.border.color = UM.Theme.getColor("primary")
-            highlight.opacity = 0.1
+            packageName.color = UM.Theme.getColor("button_text_hover")
+            packageNameBackground.color = UM.Theme.getColor("primary_hover")
+            tileBase.border.color = UM.Theme.getColor("primary_hover")
         }
         onExited:
         {
-            thumbnail.border.color = UM.Theme.getColor("lining")
-            highlight.opacity = 0.0
+            packageName.color = UM.Theme.getColor("button_text")
+            packageNameBackground.color = UM.Theme.getColor("primary")
+            tileBase.border.color = UM.Theme.getColor("lining")
         }
         onClicked:
         {

resources/themes/cura-light/theme.json

@@ -443,7 +443,7 @@
 
         "toolbox_thumbnail_small": [6.0, 6.0],
         "toolbox_thumbnail_medium": [8.0, 8.0],
-        "toolbox_thumbnail_large": [12.0, 12.0],
+        "toolbox_thumbnail_large": [12.0, 10.0],
         "toolbox_footer": [1.0, 4.5],
         "toolbox_footer_button": [8.0, 2.5],
         "toolbox_showcase_spacing": [1.0, 1.0],