Merge pull request #4015 from Ultimaker/CURA-5537_toolbox_style_improvements

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,46 +1,53 @@
 // 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
 
-Column
+Rectangle
 {
+    color: UM.Theme.getColor("secondary")
     height: childrenRect.height
-    spacing: UM.Theme.getSize("toolbox_showcase_spacing").width
     width: parent.width
-    Label
+    Column
     {
-        id: heading
-        text: catalog.i18nc("@label", "Featured")
+        height: childrenRect.height + 2 * padding
+        spacing: UM.Theme.getSize("toolbox_showcase_spacing").width
         width: parent.width
-        color: UM.Theme.getColor("text_medium")
-        font: UM.Theme.getFont("medium")
-    }
-    Grid
-    {
-        height: childrenRect.height
-        spacing: UM.Theme.getSize("wide_margin").width
-        columns: 3
-        anchors
+        padding: UM.Theme.getSize("wide_margin").height
+        Label
         {
-            horizontalCenter: parent.horizontalCenter
+            id: heading
+            text: catalog.i18nc("@label", "Featured")
+            width: parent.width
+            color: UM.Theme.getColor("text_medium")
+            font: UM.Theme.getFont("medium")
         }
-        Repeater
+        Grid
         {
-            model: {
-                if ( toolbox.viewCategory == "plugin" )
-                {
-                    return toolbox.pluginsShowcaseModel
-                }
-                if ( toolbox.viewCategory == "material" )
-                {
-                    return toolbox.materialsShowcaseModel
+            height: childrenRect.height
+            spacing: UM.Theme.getSize("wide_margin").width
+            columns: 3
+            anchors
+            {
+                horizontalCenter: parent.horizontalCenter
+            }
+            Repeater
+            {
+                model: {
+                    if ( toolbox.viewCategory == "plugin" )
+                    {
+                        return toolbox.pluginsShowcaseModel
+                    }
+                    if ( toolbox.viewCategory == "material" )
+                    {
+                        return toolbox.materialsShowcaseModel
+                    }
                 }
+                delegate: ToolboxDownloadsShowcaseTile {}
             }
-            delegate: ToolboxDownloadsShowcaseTile {}
         }
     }
 }

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
+Rectangle
 {
-    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,22 +37,33 @@ Item
             mipmap: true
         }
     }
-    Label
+    Rectangle
     {
-        id: packageName
-        text: model.name
+        id: packageNameBackground
+        color: UM.Theme.getColor("primary")
         anchors
         {
             top: thumbnail.bottom
             horizontalCenter: parent.horizontalCenter
         }
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
         height: UM.Theme.getSize("toolbox_heading_label").height
         width: parent.width
-        wrapMode: Text.WordWrap
-        color: UM.Theme.getColor("text")
-        font: UM.Theme.getFont("medium_bold")
+        Label
+        {
+            id: packageName
+            text: model.name
+            anchors
+            {
+                horizontalCenter: parent.horizontalCenter
+            }
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+            height: UM.Theme.getSize("toolbox_heading_label").height
+            width: parent.width
+            wrapMode: Text.WordWrap
+            color: UM.Theme.getColor("button_text")
+            font: UM.Theme.getFont("medium_bold")
+        }
     }
     MouseArea
     {
@@ -66,13 +71,15 @@ Item
         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],