Merge pull request #11037 from Ultimaker/CURA-8734_Package_card_refactor

Cura 8734 package card refactor

4 files changed, 723 insertions, 513 deletions

diff --git a/plugins/Marketplace/resources/qml/ManageButton.qml b/plugins/Marketplace/resources/qml/ManageButton.qml
index b2a3ec7f1b..7843805e26 100644
--- a/plugins/Marketplace/resources/qml/ManageButton.qml
+++ b/plugins/Marketplace/resources/qml/ManageButton.qml
@@ -8,229 +8,128 @@ import QtQuick.Layouts 1.1
 import UM 1.6 as UM
 import Cura 1.6 as Cura
 
-RowLayout
+Item
 {
     id: manageButton
-    property alias primaryText: primaryButton.text
-    property alias secondaryText: secondaryButton.text
-    property string busyPrimaryText: busyMessageText.text
-    property string busySecondaryText: busyMessageText.text
-    property string confirmedPrimaryText: confirmedMessageText.text
-    property string confirmedSecondaryText: confirmedMessageText.text
+    property string button_style
+    property string text
     property bool busy
     property bool confirmed
-    property bool confirmedTextChoice: true
 
     signal clicked(bool primary_action)
 
-    Cura.PrimaryButton
+    property Component primaryButton: Component
     {
-        id: primaryButton
-        enabled: manageButton.enabled
-
-        onClicked:
+        Cura.PrimaryButton
         {
-            busyMessage.text = manageButton.busyPrimaryText
-            confirmedMessage.text = manageButton.confirmedPrimaryText
-            manageButton.clicked(true)
+            id: primaryButton
+            text: manageButton.text
+
+            onClicked:
+            {
+                manageButton.clicked(true)
+            }
         }
     }
 
-    Cura.SecondaryButton
+    property Component secondaryButton: Component
     {
-        id: secondaryButton
-        enabled: manageButton.enabled
-
-        onClicked:
+        Cura.SecondaryButton
         {
-            busyMessage.text = manageButton.busySecondaryText
-            confirmedMessage.text = manageButton.confirmedSecondaryText
-            manageButton.clicked(false)
+            id: secondaryButton
+            text: manageButton.text
+
+            onClicked:
+            {
+                manageButton.clicked(false)
+            }
         }
     }
 
-    Item
+    property Component busyButton: Component
     {
-        id: busyMessage
-        property alias text: busyMessageText.text
-        height: UM.Theme.getSize("action_button").height
-        width: childrenRect.width
-
-        UM.RecolorImage
+        Item
         {
-            id: busyIndicator
-            width: height
-            anchors.left: parent.left
-            anchors.top: parent.top
-            anchors.topMargin: UM.Theme.getSize("narrow_margin").height
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: anchors.topMargin
-
-            source: UM.Theme.getIcon("Spinner")
-            color: UM.Theme.getColor("primary")
-
-            RotationAnimator
-            {
-                target: busyIndicator
-                running: busyMessage.visible
-                from: 0
-                to: 360
-                loops: Animation.Infinite
-                duration: 2500
+            id: busyMessage
+
+            UM.RecolorImage
+            {
+                id: busyIndicator
+                width: height
+                anchors.left: parent.left
+                anchors.top: parent.top
+                anchors.topMargin: UM.Theme.getSize("narrow_margin").height
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: anchors.topMargin
+
+                source: UM.Theme.getIcon("Spinner")
+                color: UM.Theme.getColor("primary")
+
+                RotationAnimator
+                {
+                    target: busyIndicator
+                    running: busyMessage.visible
+                    from: 0
+                    to: 360
+                    loops: Animation.Infinite
+                    duration: 2500
+                }
+            }
+            Label
+            {
+                id: busyMessageText
+                anchors.left: busyIndicator.right
+                anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
+                anchors.verticalCenter: parent.verticalCenter
+                text: manageButton.text
+
+                font: UM.Theme.getFont("medium_bold")
+                color: UM.Theme.getColor("primary")
             }
         }
-        Label
-        {
-            id: busyMessageText
-            anchors.left: busyIndicator.right
-            anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
-            anchors.verticalCenter: parent.verticalCenter
-
-            font: UM.Theme.getFont("medium_bold")
-            color: UM.Theme.getColor("primary")
-        }
     }
 
-    Item
+    property Component confirmButton: Component
     {
-        id: confirmedMessage
-        property alias text: confirmedMessageText.text
+        Item
+        {
 
-        height: UM.Theme.getSize("action_button").height
-        width: childrenRect.width
+            height: UM.Theme.getSize("action_button").height
+            width: childrenRect.width
 
-        Label
-        {
-            id: confirmedMessageText
-            anchors.verticalCenter: parent.verticalCenter
+            Label
+            {
+                id: confirmedMessageText
+                anchors.verticalCenter: parent.verticalCenter
+                text: manageButton.text
 
-            font: UM.Theme.getFont("medium_bold")
-            color: UM.Theme.getColor("primary")
+                font: UM.Theme.getFont("medium_bold")
+                color: UM.Theme.getColor("primary")
+            }
         }
     }
 
-    states:
-    [
-        State
-        {
-            name: "primary"
-            PropertyChanges
-            {
-                target: primaryButton
-                visible: true
-            }
-            PropertyChanges
-            {
-                target: secondaryButton
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: busyMessage
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: confirmedMessage
-                visible: false
-            }
-        },
-        State
-        {
-            name: "secondary"
-            PropertyChanges
-            {
-                target: primaryButton
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: secondaryButton
-                visible: true
-            }
-            PropertyChanges
-            {
-                target: busyMessage
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: confirmedMessage
-                visible: false
-            }
-        },
-        State
-        {
-            name: "hidden"
-            PropertyChanges
-            {
-                target: primaryButton
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: secondaryButton
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: busyMessage
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: confirmedMessage
-                visible: false
-            }
-        },
-        State
-        {
-            name: "busy"
-            PropertyChanges
-            {
-                target: primaryButton
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: secondaryButton
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: busyMessage
-                visible: true
-            }
-            PropertyChanges
-            {
-                target: confirmedMessage
-                visible: false
-            }
-        },
-        State
+    height: UM.Theme.getSize("action_button").height
+    width: childrenRect.width
+
+    Loader
+    {
+
+        sourceComponent:
         {
-            name: "confirmed"
-            PropertyChanges
-            {
-                target: primaryButton
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: secondaryButton
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: busyMessage
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: confirmedMessage
-                visible: true
-                text: manageButton.confirmedTextChoice ? manageButton.confirmedPrimaryText : manageButton.confirmedSecondaryText
+            switch (manageButton.button_style)
+            {
+                case "primary":
+                    return manageButton.primaryButton;
+                case "secondary":
+                    return manageButton.secondaryButton;
+                case "busy":
+                    return manageButton.busyButton;
+                case "confirmed":
+                    return manageButton.confirmButton;
+                default:
+                    return;
             }
         }
-    ]
+    }
 }
diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml
index f552bd8e69..5c986c2e6e 100644
--- a/plugins/Marketplace/resources/qml/PackageCard.qml
+++ b/plugins/Marketplace/resources/qml/PackageCard.qml
@@ -12,57 +12,12 @@ Rectangle
 {
     id: root
     property var packageData
-    property bool expanded: false
     property bool manageableInListView
 
     height: childrenRect.height
     color: UM.Theme.getColor("main_background")
     radius: UM.Theme.getSize("default_radius").width
 
-    states:
-    [
-        State
-        {
-            name: "Folded"
-            when: !expanded
-            PropertyChanges
-            {
-                target: shortDescription
-                visible: true
-            }
-            PropertyChanges
-            {
-                target: downloadCount
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: extendedDescription
-                visible: false
-            }
-        },
-        State
-        {
-            name: "Expanded"
-            when: expanded
-            PropertyChanges
-            {
-                target: shortDescription
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: downloadCount
-                visible: true
-            }
-            PropertyChanges
-            {
-                target: extendedDescription
-                visible: true
-            }
-        }
-    ]
-
     Column
     {
         width: parent.width
@@ -74,6 +29,7 @@ Rectangle
             width: parent.width
             height: UM.Theme.getSize("card").height
 
+            // card icon
             Image
             {
                 id: packageItem
@@ -89,6 +45,7 @@ Rectangle
                 source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg"
             }
 
+            //
             ColumnLayout
             {
                 anchors
@@ -187,6 +144,7 @@ Rectangle
                     }
                 }
 
+                // description
                 Item
                 {
                     id: shortDescription
@@ -258,32 +216,6 @@ Rectangle
                     }
                 }
 
-                Row
-                {
-                    id: downloadCount
-                    Layout.preferredWidth: parent.width
-                    Layout.fillHeight: true
-
-                    UM.RecolorImage
-                    {
-                        id: downloadsIcon
-                        width: UM.Theme.getSize("card_tiny_icon").width
-                        height: UM.Theme.getSize("card_tiny_icon").height
-
-                        source: UM.Theme.getIcon("Download")
-                        color: UM.Theme.getColor("text")
-                    }
-
-                    Label
-                    {
-                        anchors.verticalCenter: downloadsIcon.verticalCenter
-
-                        color: UM.Theme.getColor("text")
-                        font: UM.Theme.getFont("default")
-                        text: packageData.downloadCount
-                    }
-                }
-
                 // Author and action buttons.
                 RowLayout
                 {
@@ -293,6 +225,7 @@ Rectangle
 
                     spacing: UM.Theme.getSize("narrow_margin").width
 
+                    // label "By"
                     Label
                     {
                         id: authorBy
@@ -303,6 +236,7 @@ Rectangle
                         color: UM.Theme.getColor("text")
                     }
 
+                    // clickable author name
                     Cura.TertiaryButton
                     {
                         Layout.fillWidth: true
@@ -323,17 +257,34 @@ Rectangle
                     ManageButton
                     {
                         id: enableManageButton
-                        state: !(installManageButton.confirmed || updateManageButton.confirmed) ||  enableManageButton.confirmed ? packageData.stateManageEnableButton : "hidden"
+                        visible: !(installManageButton.confirmed || updateManageButton.confirmed) || enableManageButton.confirmed
+                        button_style: packageData.stateManageEnableButton
+                        Layout.alignment: Qt.AlignTop
                         busy: packageData.enableManageButton == "busy"
                         confirmed: packageData.enableManageButton == "confirmed"
-                        Layout.alignment: Qt.AlignTop
-                        primaryText: catalog.i18nc("@button", "Enable")
-                        busyPrimaryText: catalog.i18nc("@button", "Enabling...")
-                        confirmedPrimaryText: catalog.i18nc("@button", "Enabled")
-                        secondaryText: catalog.i18nc("@button", "Disable")
-                        busySecondaryText: catalog.i18nc("@button", "Disabling...")
-                        confirmedSecondaryText: catalog.i18nc("@button", "Disabled")
-                        enabled: !(installManageButton.busy || updateManageButton.busy)
+                        text: {
+                            switch (packageData.stateManageEnableButton) {
+                                case "primary":
+                                    return catalog.i18nc("@button", "Enable");
+                                case "secondary":
+                                    return catalog.i18nc("@button", "Disable");
+                                case "busy":
+                                    if (packageData.installationStatus) {
+                                        return catalog.i18nc("@button", "Enabling...");
+                                    } else {
+                                        return catalog.i18nc("@button", "Disabling...");
+                                    }
+                                case "confirmed":
+                                    if (packageData.installationStatus) {
+                                        return catalog.i18nc("@button", "Enabled");
+                                    } else {
+                                        return catalog.i18nc("@button", "Disabled");
+                                    }
+                                default:
+                                    return "";
+                            }
+                        }
+                        enabled: !installManageButton.busy && !updateManageButton.busy
 
                         onClicked:
                         {
@@ -351,18 +302,34 @@ Rectangle
                     ManageButton
                     {
                         id: installManageButton
-                        state: (root.manageableInListView || root.expanded || installManageButton.confirmed) && !(enableManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageInstallButton : "hidden"
+                        visible: (root.manageableInListView || installManageButton.confirmed) && !(enableManageButton.confirmed || updateManageButton.confirmed)
+                        button_style: packageData.stateManageInstallButton
                         busy: packageData.stateManageInstallButton == "busy"
                         confirmed: packageData.stateManageInstallButton == "confirmed"
                         Layout.alignment: Qt.AlignTop
-                        primaryText: catalog.i18nc("@button", "Install")
-                        busyPrimaryText: catalog.i18nc("@button", "Installing...")
-                        confirmedPrimaryText: catalog.i18nc("@button", "Installed")
-                        secondaryText: catalog.i18nc("@button", "Uninstall")
-                        busySecondaryText: catalog.i18nc("@button", "Uninstalling...")
-                        confirmedSecondaryText: catalog.i18nc("@button", "Uninstalled")
-                        confirmedTextChoice: packageData.installationStatus
-                        enabled: !(enableManageButton.busy || updateManageButton.busy)
+                        text: {
+                            switch (packageData.stateManageInstallButton) {
+                                case "primary":
+                                    return catalog.i18nc("@button", "Install");
+                                case "secondary":
+                                    return catalog.i18nc("@button", "Uninstall");
+                                case "busy":
+                                    if (packageData.installationStatus) {
+                                        return catalog.i18nc("@button", "Installing...");
+                                    } else {
+                                        return catalog.i18nc("@button", "Uninstalling...");
+                                    }
+                                case "confirmed":
+                                    if (packageData.installationStatus) {
+                                        return catalog.i18nc("@button", "Installed");
+                                    } else {
+                                        return catalog.i18nc("@button", "Uninstalled");
+                                    }
+                                default:
+                                    return "";
+                            }
+                        }
+                        enabled: !enableManageButton.busy && !updateManageButton.busy
 
                         onClicked:
                         {
@@ -380,243 +347,32 @@ Rectangle
                     ManageButton
                     {
                         id: updateManageButton
-                        state: (root.manageableInListView || root.expanded) && (!installManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageUpdateButton : "hidden"
+                        visible: (root.manageableInListView) && (!installManageButton.confirmed || updateManageButton.confirmed)
+
+                        button_style: packageData.stateManageUpdateButton
                         busy: packageData.stateManageUpdateButton == "busy"
                         confirmed: packageData.stateManageUpdateButton == "confirmed"
                         Layout.alignment: Qt.AlignTop
-                        primaryText: catalog.i18nc("@button", "Update")
-                        busyPrimaryText: catalog.i18nc("@button", "Updating...")
-                        confirmedPrimaryText: catalog.i18nc("@button", "Updated")
-                        enabled: !(installManageButton.busy || enableManageButton.busy)
+                        enabled: !installManageButton.busy && !enableManageButton.busy
+
+                        text: {
+                            switch (packageData.stateManageInstallButton) {
+                                case "primary":
+                                    return catalog.i18nc("@button", "Update");
+                                case "busy":
+                                    return catalog.i18nc("@button", "Updating...");
+                                case "confirmed":
+                                    return catalog.i18nc("@button", "Updated");
+                                default:
+                                    return "";
+                            }
+                        }
 
                         onClicked: packageData.updatePackageTriggered(packageData.packageId)
                     }
                 }
             }
         }
-
-        Column
-        {
-            id: extendedDescription
-            width: parent.width
-
-            padding: UM.Theme.getSize("default_margin").width
-            topPadding: 0
-            spacing: UM.Theme.getSize("default_margin").height
-
-            Label
-            {
-                width: parent.width - parent.padding * 2
-
-                text: catalog.i18nc("@header", "Description")
-                font: UM.Theme.getFont("medium_bold")
-                color: UM.Theme.getColor("text")
-                elide: Text.ElideRight
-            }
-
-            Label
-            {
-                width: parent.width - parent.padding * 2
-
-                text: packageData.formattedDescription
-                font: UM.Theme.getFont("medium")
-                color: UM.Theme.getColor("text")
-                linkColor: UM.Theme.getColor("text_link")
-                wrapMode: Text.Wrap
-                textFormat: Text.RichText
-
-                onLinkActivated: UM.UrlUtil.openUrl(link, ["http", "https"])
-            }
-
-            Column //Separate column to have no spacing between compatible printers.
-            {
-                id: compatiblePrinterColumn
-                width: parent.width - parent.padding * 2
-
-                visible: packageData.packageType === "material"
-                spacing: 0
-
-                Label
-                {
-                    width: parent.width
-
-                    text: catalog.i18nc("@header", "Compatible printers")
-                    font: UM.Theme.getFont("medium_bold")
-                    color: UM.Theme.getColor("text")
-                    elide: Text.ElideRight
-                }
-
-                Repeater
-                {
-                    model: packageData.compatiblePrinters
-
-                    Label
-                    {
-                        width: compatiblePrinterColumn.width
-
-                        text: modelData
-                        font: UM.Theme.getFont("medium")
-                        color: UM.Theme.getColor("text")
-                        elide: Text.ElideRight
-                    }
-                }
-
-                Label
-                {
-                    width: parent.width
-
-                    visible: packageData.compatiblePrinters.length == 0
-                    text: "(" + catalog.i18nc("@info", "No compatibility information") + ")"
-                    font: UM.Theme.getFont("medium")
-                    color: UM.Theme.getColor("text")
-                    elide: Text.ElideRight
-                }
-            }
-
-            Column
-            {
-                id: compatibleSupportMaterialColumn
-                width: parent.width - parent.padding * 2
-
-                visible: packageData.packageType === "material"
-                spacing: 0
-
-                Label
-                {
-                    width: parent.width
-
-                    text: catalog.i18nc("@header", "Compatible support materials")
-                    font: UM.Theme.getFont("medium_bold")
-                    color: UM.Theme.getColor("text")
-                    elide: Text.ElideRight
-                }
-
-                Repeater
-                {
-                    model: packageData.compatibleSupportMaterials
-
-                    Label
-                    {
-                        width: compatibleSupportMaterialColumn.width
-
-                        text: modelData
-                        font: UM.Theme.getFont("medium")
-                        color: UM.Theme.getColor("text")
-                        elide: Text.ElideRight
-                    }
-                }
-
-                Label
-                {
-                    width: parent.width
-
-                    visible: packageData.compatibleSupportMaterials.length == 0
-                    text: "(" + catalog.i18nc("@info No materials", "None") + ")"
-                    font: UM.Theme.getFont("medium")
-                    color: UM.Theme.getColor("text")
-                    elide: Text.ElideRight
-                }
-            }
-
-            Column
-            {
-                width: parent.width - parent.padding * 2
-
-                visible: packageData.packageType === "material"
-                spacing: 0
-
-                Label
-                {
-                    width: parent.width
-
-                    text: catalog.i18nc("@header", "Compatible with Material Station")
-                    font: UM.Theme.getFont("medium_bold")
-                    color: UM.Theme.getColor("text")
-                    elide: Text.ElideRight
-                }
-
-                Label
-                {
-                    width: parent.width
-
-                    text: packageData.isCompatibleMaterialStation ? catalog.i18nc("@info", "Yes") : catalog.i18nc("@info", "No")
-                    font: UM.Theme.getFont("medium")
-                    color: UM.Theme.getColor("text")
-                    elide: Text.ElideRight
-                }
-            }
-
-            Column
-            {
-                width: parent.width - parent.padding * 2
-
-                visible: packageData.packageType === "material"
-                spacing: 0
-
-                Label
-                {
-                    width: parent.width
-
-                    text: catalog.i18nc("@header", "Optimized for Air Manager")
-                    font: UM.Theme.getFont("medium_bold")
-                    color: UM.Theme.getColor("text")
-                    elide: Text.ElideRight
-                }
-
-                Label
-                {
-                    width: parent.width
-
-                    text: packageData.isCompatibleAirManager ? catalog.i18nc("@info", "Yes") : catalog.i18nc("@info", "No")
-                    font: UM.Theme.getFont("medium")
-                    color: UM.Theme.getColor("text")
-                    elide: Text.ElideRight
-                }
-            }
-
-            Row
-            {
-                id: externalButtonRow
-                anchors.horizontalCenter: parent.horizontalCenter
-
-                spacing: UM.Theme.getSize("narrow_margin").width
-
-                Cura.SecondaryButton
-                {
-                    text: packageData.packageType === "plugin" ? catalog.i18nc("@button", "Visit plug-in website") : catalog.i18nc("@button", "Website")
-                    iconSource: UM.Theme.getIcon("Globe")
-                    outlineColor: "transparent"
-                    onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
-                }
-
-                Cura.SecondaryButton
-                {
-                    visible: packageData.packageType === "material"
-                    text: catalog.i18nc("@button", "Buy spool")
-                    iconSource: UM.Theme.getIcon("ShoppingCart")
-                    outlineColor: "transparent"
-                    onClicked: Qt.openUrlExternally(packageData.whereToBuy)
-                }
-
-                Cura.SecondaryButton
-                {
-                    visible: packageData.packageType === "material"
-                    text: catalog.i18nc("@button", "Safety datasheet")
-                    iconSource: UM.Theme.getIcon("Warning")
-                    outlineColor: "transparent"
-                    onClicked: Qt.openUrlExternally(packageData.safetyDataSheet)
-                }
-
-                Cura.SecondaryButton
-                {
-                    visible: packageData.packageType === "material"
-                    text: catalog.i18nc("@button", "Technical datasheet")
-                    iconSource: UM.Theme.getIcon("DocumentFilled")
-                    outlineColor: "transparent"
-                    onClicked: Qt.openUrlExternally(packageData.technicalDataSheet)
-                }
-            }
-        }
     }
 
     FontMetrics
diff --git a/plugins/Marketplace/resources/qml/PackageDetails.qml b/plugins/Marketplace/resources/qml/PackageDetails.qml
index fdf1c8f92c..2599c7f28c 100644
--- a/plugins/Marketplace/resources/qml/PackageDetails.qml
+++ b/plugins/Marketplace/resources/qml/PackageDetails.qml
@@ -74,11 +74,11 @@ Item
 
             clip: true //Need to clip, not for the bottom (which is off the window) but for the top (which would overlap the header).
             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-            contentHeight: expandedPackageCard.height + UM.Theme.getSize("default_margin").height * 2
+            contentHeight: packagePage.height + UM.Theme.getSize("default_margin").height * 2
 
-            PackageCard
+            PackagePage
             {
-                id: expandedPackageCard
+                id: packagePage
                 anchors
                 {
                     left: parent.left
@@ -90,7 +90,6 @@ Item
                 }
 
                 packageData: detailPage.packageData
-                expanded: true
             }
         }
     }
diff --git a/plugins/Marketplace/resources/qml/PackagePage.qml b/plugins/Marketplace/resources/qml/PackagePage.qml
new file mode 100644
index 0000000000..fca25c4022
--- /dev/null
+++ b/plugins/Marketplace/resources/qml/PackagePage.qml
@@ -0,0 +1,556 @@
+// Copyright (c) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.1
+
+import UM 1.6 as UM
+import Cura 1.6 as Cura
+
+Rectangle
+{
+    id: root
+    property var packageData
+    property bool manageableInListView
+
+    height: childrenRect.height
+    color: UM.Theme.getColor("main_background")
+    radius: UM.Theme.getSize("default_radius").width
+
+    Column
+    {
+        width: parent.width
+
+        spacing: 0
+
+        Item
+        {
+            width: parent.width
+            height: UM.Theme.getSize("card").height
+
+            Image
+            {
+                id: packageItem
+                anchors
+                {
+                    top: parent.top
+                    left: parent.left
+                    margins: UM.Theme.getSize("default_margin").width
+                }
+                width: UM.Theme.getSize("card_icon").width
+                height: width
+
+                source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg"
+            }
+
+            ColumnLayout
+            {
+                anchors
+                {
+                    left: packageItem.right
+                    leftMargin: UM.Theme.getSize("default_margin").width
+                    right: parent.right
+                    rightMargin: UM.Theme.getSize("default_margin").width
+                    top: parent.top
+                    topMargin: UM.Theme.getSize("narrow_margin").height
+                }
+                height: packageItem.height + packageItem.anchors.margins * 2
+
+                // Title row.
+                RowLayout
+                {
+                    id: titleBar
+                    Layout.preferredWidth: parent.width
+                    Layout.preferredHeight: childrenRect.height
+
+                    Label
+                    {
+                        text: packageData.displayName
+                        font: UM.Theme.getFont("medium_bold")
+                        color: UM.Theme.getColor("text")
+                        verticalAlignment: Text.AlignTop
+                    }
+                    VerifiedIcon
+                    {
+                        enabled: packageData.isCheckedByUltimaker
+                        visible: packageData.isCheckedByUltimaker
+                    }
+
+
+                    Control
+                    {
+                        Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
+                        Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
+                        Layout.alignment: Qt.AlignCenter
+                        enabled: false  // remove!
+                        visible: false  // replace packageInfo.XXXXXX
+                        // TODO: waiting for materials card implementation
+
+                        Cura.ToolTip
+                        {
+                            tooltipText: "" // TODO
+                            visible: parent.hovered
+                        }
+
+                        UM.RecolorImage
+                        {
+                            anchors.fill: parent
+
+                            color: UM.Theme.getColor("primary")
+                            source: UM.Theme.getIcon("CheckCircle") // TODO
+                        }
+
+                        // onClicked: Qt.openUrlExternally( XXXXXX )  // TODO
+                    }
+
+                    Label
+                    {
+                        id: packageVersionLabel
+                        text: packageData.packageVersion
+                        font: UM.Theme.getFont("default")
+                        color: UM.Theme.getColor("text")
+                        Layout.fillWidth: true
+                    }
+
+                    Button
+                    {
+                        id: externalLinkButton
+
+                        // For some reason if i set padding, they don't match up. If i set all of them explicitly, it does work?
+                        leftPadding: UM.Theme.getSize("narrow_margin").width
+                        rightPadding: UM.Theme.getSize("narrow_margin").width
+                        topPadding: UM.Theme.getSize("narrow_margin").width
+                        bottomPadding: UM.Theme.getSize("narrow_margin").width
+
+                        Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width + 2 * padding
+                        Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").width + 2 * padding
+                        contentItem: UM.RecolorImage
+                        {
+                            source: UM.Theme.getIcon("LinkExternal")
+                            color: UM.Theme.getColor("icon")
+                            implicitWidth: UM.Theme.getSize("card_tiny_icon").width
+                            implicitHeight: UM.Theme.getSize("card_tiny_icon").height
+                        }
+
+                        background: Rectangle
+                        {
+                            color: externalLinkButton.hovered ? UM.Theme.getColor("action_button_hovered"): "transparent"
+                            radius: externalLinkButton.width / 2
+                        }
+                        onClicked: Qt.openUrlExternally(packageData.authorInfoUrl)
+                    }
+                }
+
+                Row
+                {
+                    id: downloadCount
+                    Layout.preferredWidth: parent.width
+                    Layout.fillHeight: true
+
+                    UM.RecolorImage
+                    {
+                        id: downloadsIcon
+                        width: UM.Theme.getSize("card_tiny_icon").width
+                        height: UM.Theme.getSize("card_tiny_icon").height
+
+                        source: UM.Theme.getIcon("Download")
+                        color: UM.Theme.getColor("text")
+                    }
+
+                    Label
+                    {
+                        anchors.verticalCenter: downloadsIcon.verticalCenter
+
+                        color: UM.Theme.getColor("text")
+                        font: UM.Theme.getFont("default")
+                        text: packageData.downloadCount
+                    }
+                }
+
+                // Author and action buttons.
+                RowLayout
+                {
+                    id: authorAndActionButton
+                    Layout.preferredWidth: parent.width
+                    Layout.preferredHeight: childrenRect.height
+
+                    spacing: UM.Theme.getSize("narrow_margin").width
+
+                    Label
+                    {
+                        id: authorBy
+                        Layout.alignment: Qt.AlignCenter
+
+                        text: catalog.i18nc("@label", "By")
+                        font: UM.Theme.getFont("default")
+                        color: UM.Theme.getColor("text")
+                    }
+
+                    Cura.TertiaryButton
+                    {
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: authorBy.height
+                        Layout.alignment: Qt.AlignCenter
+
+                        text: packageData.authorName
+                        textFont: UM.Theme.getFont("default_bold")
+                        textColor: UM.Theme.getColor("text") // override normal link color
+                        leftPadding: 0
+                        rightPadding: 0
+                        iconSource: UM.Theme.getIcon("LinkExternal")
+                        isIconOnRightSide: true
+
+                        onClicked: Qt.openUrlExternally(packageData.authorInfoUrl)
+                    }
+
+                    ManageButton
+                    {
+                        id: enableManageButton
+                        visible: !(installManageButton.confirmed || updateManageButton.confirmed) || enableManageButton.confirmed
+                        button_style: packageData.stateManageEnableButton
+                        Layout.alignment: Qt.AlignTop
+                        busy: packageData.enableManageButton == "busy"
+                        confirmed: packageData.enableManageButton == "confirmed"
+                        text: {
+                            switch (packageData.stateManageEnableButton) {
+                                case "primary":
+                                    return catalog.i18nc("@button", "Enable");
+                                case "secondary":
+                                    return catalog.i18nc("@button", "Disable");
+                                case "busy":
+                                    if (packageData.installationStatus) {
+                                        return catalog.i18nc("@button", "Enabling...");
+                                    } else {
+                                        return catalog.i18nc("@button", "Disabling...");
+                                    }
+                                case "confirmed":
+                                    if (packageData.installationStatus) {
+                                        return catalog.i18nc("@button", "Enabled");
+                                    } else {
+                                        return catalog.i18nc("@button", "Disabled");
+                                    }
+                                default:
+                                    return "";
+                            }
+                        }
+                        enabled: !installManageButton.busy && !updateManageButton.busy
+
+                        onClicked:
+                        {
+                            if (primary_action)
+                            {
+                                packageData.enablePackageTriggered(packageData.packageId)
+                            }
+                            else
+                            {
+                                packageData.disablePackageTriggered(packageData.packageId)
+                            }
+                        }
+                    }
+
+                    ManageButton
+                    {
+                        id: installManageButton
+                        visible: !(enableManageButton.confirmed || updateManageButton.confirmed)
+                        button_style: packageData.stateManageInstallButton
+                        busy: packageData.stateManageInstallButton == "busy"
+                        confirmed: packageData.stateManageInstallButton == "confirmed"
+                        Layout.alignment: Qt.AlignTop
+                        text: {
+                            switch (packageData.stateManageInstallButton) {
+                                case "primary":
+                                    return catalog.i18nc("@button", "Install");
+                                case "secondary":
+                                    return catalog.i18nc("@button", "Uninstall");
+                                case "busy":
+                                    if (packageData.installationStatus) {
+                                        return catalog.i18nc("@button", "Installing...");
+                                    } else {
+                                        return catalog.i18nc("@button", "Uninstalling...");
+                                    }
+                                case "confirmed":
+                                    if (packageData.installationStatus) {
+                                        return catalog.i18nc("@button", "Installed");
+                                    } else {
+                                        return catalog.i18nc("@button", "Uninstalled");
+                                    }
+                                default:
+                                    return "";
+                            }
+                        }
+                        enabled: !enableManageButton.busy && !updateManageButton.busy
+
+                        onClicked:
+                        {
+                            if (primary_action)
+                            {
+                                packageData.installPackageTriggered(packageData.packageId)
+                            }
+                            else
+                            {
+                                packageData.uninstallPackageTriggered(packageData.packageId)
+                            }
+                        }
+                    }
+
+                    ManageButton
+                    {
+                        id: updateManageButton
+                        visible: !installManageButton.confirmed || updateManageButton.confirmed
+
+                        button_style: packageData.stateManageUpdateButton
+                        busy: packageData.stateManageUpdateButton == "busy"
+                        confirmed: packageData.stateManageUpdateButton == "confirmed"
+                        Layout.alignment: Qt.AlignTop
+                        enabled: !installManageButton.busy && !enableManageButton.busy
+
+                        text: {
+                            switch (packageData.stateManageInstallButton) {
+                                case "primary":
+                                    return catalog.i18nc("@button", "Update");
+                                case "busy":
+                                    return catalog.i18nc("@button", "Updating...");
+                                case "confirmed":
+                                    return catalog.i18nc("@button", "Updated");
+                                default:
+                                    return "";
+                            }
+                        }
+
+                        onClicked: packageData.updatePackageTriggered(packageData.packageId)
+                    }
+                }
+            }
+        }
+
+        Column
+        {
+            id: extendedDescription
+            width: parent.width
+
+            padding: UM.Theme.getSize("default_margin").width
+            topPadding: 0
+            spacing: UM.Theme.getSize("default_margin").height
+
+            Label
+            {
+                width: parent.width - parent.padding * 2
+
+                text: catalog.i18nc("@header", "Description")
+                font: UM.Theme.getFont("medium_bold")
+                color: UM.Theme.getColor("text")
+                elide: Text.ElideRight
+            }
+
+            Label
+            {
+                width: parent.width - parent.padding * 2
+
+                text: packageData.formattedDescription
+                font: UM.Theme.getFont("medium")
+                color: UM.Theme.getColor("text")
+                linkColor: UM.Theme.getColor("text_link")
+                wrapMode: Text.Wrap
+                textFormat: Text.RichText
+
+                onLinkActivated: UM.UrlUtil.openUrl(link, ["http", "https"])
+            }
+
+            Column //Separate column to have no spacing between compatible printers.
+            {
+                id: compatiblePrinterColumn
+                width: parent.width - parent.padding * 2
+
+                visible: packageData.packageType === "material"
+                spacing: 0
+
+                Label
+                {
+                    width: parent.width
+
+                    text: catalog.i18nc("@header", "Compatible printers")
+                    font: UM.Theme.getFont("medium_bold")
+                    color: UM.Theme.getColor("text")
+                    elide: Text.ElideRight
+                }
+
+                Repeater
+                {
+                    model: packageData.compatiblePrinters
+
+                    Label
+                    {
+                        width: compatiblePrinterColumn.width
+
+                        text: modelData
+                        font: UM.Theme.getFont("medium")
+                        color: UM.Theme.getColor("text")
+                        elide: Text.ElideRight
+                    }
+                }
+
+                Label
+                {
+                    width: parent.width
+
+                    visible: packageData.compatiblePrinters.length == 0
+                    text: "(" + catalog.i18nc("@info", "No compatibility information") + ")"
+                    font: UM.Theme.getFont("medium")
+                    color: UM.Theme.getColor("text")
+                    elide: Text.ElideRight
+                }
+            }
+
+            Column
+            {
+                id: compatibleSupportMaterialColumn
+                width: parent.width - parent.padding * 2
+
+                visible: packageData.packageType === "material"
+                spacing: 0
+
+                Label
+                {
+                    width: parent.width
+
+                    text: catalog.i18nc("@header", "Compatible support materials")
+                    font: UM.Theme.getFont("medium_bold")
+                    color: UM.Theme.getColor("text")
+                    elide: Text.ElideRight
+                }
+
+                Repeater
+                {
+                    model: packageData.compatibleSupportMaterials
+
+                    Label
+                    {
+                        width: compatibleSupportMaterialColumn.width
+
+                        text: modelData
+                        font: UM.Theme.getFont("medium")
+                        color: UM.Theme.getColor("text")
+                        elide: Text.ElideRight
+                    }
+                }
+
+                Label
+                {
+                    width: parent.width
+
+                    visible: packageData.compatibleSupportMaterials.length == 0
+                    text: "(" + catalog.i18nc("@info No materials", "None") + ")"
+                    font: UM.Theme.getFont("medium")
+                    color: UM.Theme.getColor("text")
+                    elide: Text.ElideRight
+                }
+            }
+
+            Column
+            {
+                width: parent.width - parent.padding * 2
+
+                visible: packageData.packageType === "material"
+                spacing: 0
+
+                Label
+                {
+                    width: parent.width
+
+                    text: catalog.i18nc("@header", "Compatible with Material Station")
+                    font: UM.Theme.getFont("medium_bold")
+                    color: UM.Theme.getColor("text")
+                    elide: Text.ElideRight
+                }
+
+                Label
+                {
+                    width: parent.width
+
+                    text: packageData.isCompatibleMaterialStation ? catalog.i18nc("@info", "Yes") : catalog.i18nc("@info", "No")
+                    font: UM.Theme.getFont("medium")
+                    color: UM.Theme.getColor("text")
+                    elide: Text.ElideRight
+                }
+            }
+
+            Column
+            {
+                width: parent.width - parent.padding * 2
+
+                visible: packageData.packageType === "material"
+                spacing: 0
+
+                Label
+                {
+                    width: parent.width
+
+                    text: catalog.i18nc("@header", "Optimized for Air Manager")
+                    font: UM.Theme.getFont("medium_bold")
+                    color: UM.Theme.getColor("text")
+                    elide: Text.ElideRight
+                }
+
+                Label
+                {
+                    width: parent.width
+
+                    text: packageData.isCompatibleAirManager ? catalog.i18nc("@info", "Yes") : catalog.i18nc("@info", "No")
+                    font: UM.Theme.getFont("medium")
+                    color: UM.Theme.getColor("text")
+                    elide: Text.ElideRight
+                }
+            }
+
+            Row
+            {
+                id: externalButtonRow
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                spacing: UM.Theme.getSize("narrow_margin").width
+
+                Cura.SecondaryButton
+                {
+                    text: packageData.packageType === "plugin" ? catalog.i18nc("@button", "Visit plug-in website") : catalog.i18nc("@button", "Website")
+                    iconSource: UM.Theme.getIcon("Globe")
+                    outlineColor: "transparent"
+                    onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
+                }
+
+                Cura.SecondaryButton
+                {
+                    visible: packageData.packageType === "material"
+                    text: catalog.i18nc("@button", "Buy spool")
+                    iconSource: UM.Theme.getIcon("ShoppingCart")
+                    outlineColor: "transparent"
+                    onClicked: Qt.openUrlExternally(packageData.whereToBuy)
+                }
+
+                Cura.SecondaryButton
+                {
+                    visible: packageData.packageType === "material"
+                    text: catalog.i18nc("@button", "Safety datasheet")
+                    iconSource: UM.Theme.getIcon("Warning")
+                    outlineColor: "transparent"
+                    onClicked: Qt.openUrlExternally(packageData.safetyDataSheet)
+                }
+
+                Cura.SecondaryButton
+                {
+                    visible: packageData.packageType === "material"
+                    text: catalog.i18nc("@button", "Technical datasheet")
+                    iconSource: UM.Theme.getIcon("DocumentFilled")
+                    outlineColor: "transparent"
+                    onClicked: Qt.openUrlExternally(packageData.technicalDataSheet)
+                }
+            }
+        }
+    }
+
+    FontMetrics
+    {
+        id: fontMetrics
+        font: UM.Theme.getFont("default")
+    }
+}