Ensure that the packagecard looks like the design

CURA-8561

plugins/Marketplace/resources/qml/PackageCard.qml

@@ -12,9 +12,8 @@ Rectangle
 {
     property var packageData
 
-    width: parent ? parent.width - UM.Theme.getSize("thin_margin").width : 0
+    width: parent ? parent.width - UM.Theme.getSize("default_margin").width : 0
-    height: childrenRect.height + UM.Theme.getSize("thin_margin").height * 2
+    height: UM.Theme.getSize("card").height
-
     color: UM.Theme.getColor("main_background")
     radius: UM.Theme.getSize("default_radius").width
 
@@ -25,11 +24,6 @@ Rectangle
             name: "Folded"
             when: true  // TODO
             PropertyChanges
-            {
-                target: downloadCountRow
-                visible: false
-            }
-            PropertyChanges
             {
                 target: descriptionArea
                 visible: true
@@ -40,11 +34,6 @@ Rectangle
             name: "Header"
             when: false  // TODO
             PropertyChanges
-            {
-                target: downloadCountRow
-                visible: true
-            }
-            PropertyChanges
             {
                 target: descriptionArea
                 visible: false
@@ -59,7 +48,7 @@ Rectangle
         {
             top: parent.top
             left: parent.left
-            margins: UM.Theme.getSize("thin_margin").width
+            margins: UM.Theme.getSize("default_margin").width
         }
         width: UM.Theme.getSize("card_icon").width
         height: width
@@ -67,25 +56,23 @@ Rectangle
         source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg"
     }
 
-    Column
-    {
-        anchors
-        {
-            top: parent.top
-            left: packageItem.right
-            right: parent.right
-            margins: UM.Theme.getSize("thin_margin").width
-        }
-
     RowLayout //Title row.
     {
-            width: parent.width
+        id: titleBar
-            spacing: UM.Theme.getSize("thin_margin").width
+        anchors
+        {
+            left: packageItem.right
+            right: parent.right
+            top: parent.top
+            topMargin: UM.Theme.getSize("default_margin").height
+            leftMargin: UM.Theme.getSize("default_margin").width
+            rightMargin:UM.Theme.getSize("thick_margin").width
+        }
+
         Label
         {
-
             text: packageData.displayName
-                font: UM.Theme.getFont("medium_bold")
+            font: UM.Theme.getFont("large_bold")
             color: UM.Theme.getColor("text")
             verticalAlignment: Text.AlignTop
         }
@@ -94,8 +81,7 @@ Rectangle
         {
             Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
             Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
-                //width: UM.Theme.getSize("card_tiny_icon").width
+
-                //height: UM.Theme.getSize("card_tiny_icon").height
 
             enabled: packageData.isVerified
             visible: packageData.isVerified
@@ -151,6 +137,7 @@ Rectangle
 
         Label
         {
+            id: packageVersionLabel
             text: packageData.packageVersion
             font: UM.Theme.getFont("default")
             color: UM.Theme.getColor("text")
@@ -161,48 +148,27 @@ Rectangle
         {
             id: externalLinkButton
 
-                Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
+            Layout.preferredWidth: packageVersionLabel.height
-                Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
+            Layout.preferredHeight: packageVersionLabel.height
             Layout.alignment: Qt.AlignTop
-
             iconSource: UM.Theme.getIcon("LinkExternal")
             hoverColor: UM.Theme.getColor("text_link")
             onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
         }
     }
 
-        RowLayout
-        {
-            id: downloadCountRow
-
-            x: UM.Theme.getSize("thin_margin").width
-            y: UM.Theme.getSize("thin_margin").height
-
-            spacing: UM.Theme.getSize("thin_margin").width
-
-            UM.RecolorImage
-            {
-                id: downloadCountIcon
-                width: UM.Theme.getSize("card_tiny_icon").width
-                height: UM.Theme.getSize("card_tiny_icon").height
-                color: UM.Theme.getColor("icon")
-
-                source: UM.Theme.getIcon("Download")
-            }
-
-            Label
-            {
-                id: downloadCountLabel
-                text: packageData.downloadCount
-            }
-        }
-
     Item
     {
         id: descriptionArea
-            width: parent.width
         height: descriptionLabel.height
-
+        anchors
+        {
+            top: titleBar.bottom
+            left: packageItem.right
+            right: parent.right
+            rightMargin: UM.Theme.getSize("default_margin").width
+            leftMargin: UM.Theme.getSize("default_margin").width
+        }
         Label
         {
             id: descriptionLabel
@@ -220,7 +186,7 @@ Rectangle
             {
                 if(truncated && line.isLast)
                 {
-                        let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ") - UM.Theme.getSize("default_margin").width;
+                    let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ") - 2 * UM.Theme.getSize("default_margin").width;
                     if(line.implicitWidth > max_line_width)
                     {
                         line.width = max_line_width;
@@ -233,11 +199,22 @@ Rectangle
                 }
             }
         }
+        Label
+        {
+            id: tripleDotLabel
+            anchors.left: parent.left
+            anchors.leftMargin: descriptionLabel.lastLineWidth
+            anchors.bottom: readMoreButton.bottom
 
+            text: "… "
+            font: descriptionLabel.font
+            color: descriptionLabel.color
+            visible: descriptionLabel.truncated
+        }
         Cura.TertiaryButton
         {
             id: readMoreButton
-                anchors.right: parent.right
+            anchors.left: tripleDotLabel.right
             anchors.bottom: parent.bottom
             height: fontMetrics.height //Height of a single line.
 
@@ -254,25 +231,19 @@ Rectangle
             // NOTE: Is this the right URL for this action?
             onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
         }
-
-            Label
-            {
-                anchors.left: parent.left
-                anchors.leftMargin: descriptionLabel.lastLineWidth
-                anchors.bottom: readMoreButton.bottom
-
-                text: "… "
-                font: descriptionLabel.font
-                color: descriptionLabel.color
-                visible: descriptionLabel.truncated
-            }
     }
 
     RowLayout //Author and action buttons.
     {
+        id: authorAndACtionButton
         width: parent.width
-            Layout.alignment: Qt.AlignTop
+        anchors
-            spacing: UM.Theme.getSize("thin_margin").width
+        {
+            bottom: parent.bottom
+            left: packageItem.right
+            margins: UM.Theme.getSize("default_margin").height
+        }
+        spacing: UM.Theme.getSize("narrow_margin").width
 
         Label
         {
@@ -325,7 +296,6 @@ Rectangle
             visible: false  // not functional right now, also only when unfolding and required
         }
     }
-    }
 
     FontMetrics
     {