Added smallRating widget to featured plugins

CURA-6013

plugins/Toolbox/resources/qml/SmallRatingWidget.qml

@@ -11,7 +11,7 @@ Row
     height: UM.Theme.getSize("rating_star").height
     visible: model.average_rating > 0 //Has a rating at all.
     spacing: UM.Theme.getSize("thick_lining").width
-
+    width: starIcon.width + spacing + numRatingsLabel.width
     UM.RecolorImage
     {
         id: starIcon
@@ -23,9 +23,11 @@ Row
 
     Label
     {
+        id: numRatingsLabel
         text: model.average_rating.toFixed(1) + " (" + model.num_ratings + " " + catalog.i18nc("@label", "ratings") + ")"
         verticalAlignment: Text.AlignVCenter
         height: starIcon.height
+        width: contentWidth
         anchors.verticalCenter: starIcon.verticalCenter
         color: starIcon.color
         font: UM.Theme.getFont("small")

plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml

@@ -13,90 +13,67 @@ Rectangle
     property int installedPackages: toolbox.viewCategory == "material" ? toolbox.getNumberOfInstalledPackagesByAuthor(model.id) : (toolbox.isInstalled(model.id) ? 1 : 0)
     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)
+    height: thumbnail.height + packageName.height + rating.height + UM.Theme.getSize("default_margin").width
     border.width: UM.Theme.getSize("default_lining").width
     border.color: UM.Theme.getColor("lining")
-    color: "transparent"
+    color: UM.Theme.getColor("main_background")
-    Rectangle
+    Image
     {
         id: thumbnail
-        color: UM.Theme.getColor("main_background")
+        height: UM.Theme.getSize("toolbox_thumbnail_large").height - 4 * UM.Theme.getSize("default_margin").height
-        width: UM.Theme.getSize("toolbox_thumbnail_large").width
+        width: UM.Theme.getSize("toolbox_thumbnail_large").height - 4 * UM.Theme.getSize("default_margin").height
-        height: UM.Theme.getSize("toolbox_thumbnail_large").height
+        fillMode: Image.PreserveAspectFit
+        source: model.icon_url || "../images/logobot.svg"
+        mipmap: true
         anchors
         {
             top: parent.top
+            topMargin: UM.Theme.getSize("default_margin").height
             horizontalCenter: parent.horizontalCenter
-            topMargin: UM.Theme.getSize("default_lining").width
-        }
-        Image
-        {
-            anchors.centerIn: parent
-            width: UM.Theme.getSize("toolbox_thumbnail_large").width - 2 * UM.Theme.getSize("default_margin").width
-            height: UM.Theme.getSize("toolbox_thumbnail_large").height - 2 * UM.Theme.getSize("default_margin").height
-            fillMode: Image.PreserveAspectFit
-            source: model.icon_url || "../images/logobot.svg"
-            mipmap: true
-        }
-        UM.RecolorImage
-        {
-            width: (parent.width * 0.3) | 0
-            height: (parent.height * 0.3) | 0
-            anchors
-            {
-                bottom: parent.bottom
-                right: parent.right
-                bottomMargin: UM.Theme.getSize("default_lining").width
-            }
-            visible: installedPackages != 0
-            color: (installedPackages == packageCount) ? UM.Theme.getColor("primary") : UM.Theme.getColor("border")
-            source: "../images/installed_check.svg"
         }
     }
-    Rectangle
+    Label
     {
-        id: packageNameBackground
+        id: packageName
-        color: UM.Theme.getColor("primary")
+        text: model.name
         anchors
         {
-            top: thumbnail.bottom
             horizontalCenter: parent.horizontalCenter
+            top: thumbnail.bottom
         }
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
         height: UM.Theme.getSize("toolbox_heading_label").height
         width: parent.width
-        Label
+        wrapMode: Text.WordWrap
-        {
+        font: UM.Theme.getFont("medium_bold")
-            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")
-        }
     }
+    UM.RecolorImage
+    {
+        width: (parent.width * 0.20) | 0
+        height: (parent.height * 0.20) | 0
+        anchors
+        {
+            bottom: parent.bottom
+            right: parent.right
+            bottomMargin: UM.Theme.getSize("default_lining").width
+        }
+        visible: installedPackages != 0
+        color: (installedPackages == packageCount) ? UM.Theme.getColor("primary") : UM.Theme.getColor("border")
+        source: "../images/installed_check.svg"
+    }
+
+    SmallRatingWidget
+    {
+        id: rating
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: UM.Theme.getSize("narrow_margin").height
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
     MouseArea
     {
         anchors.fill: parent
-        hoverEnabled: true
-        onEntered:
-        {
-            packageName.color = UM.Theme.getColor("button_text_hover")
-            packageNameBackground.color = UM.Theme.getColor("primary_hover")
-            tileBase.border.color = UM.Theme.getColor("primary_hover")
-        }
-        onExited:
-        {
-            packageName.color = UM.Theme.getColor("button_text")
-            packageNameBackground.color = UM.Theme.getColor("primary")
-            tileBase.border.color = UM.Theme.getColor("lining")
-        }
         onClicked:
         {
             base.selection = model