Merge branch 'marketplace_redesign' into CURA-8565_marketplace_plugin_details

Conflicts:
	plugins/Marketplace/resources/qml/Marketplace.qml -> Whole layout changed, while the onboarding banner got added. I re-added the onboarding banner item and the new search link at locations where I thought it was appropriate.
	plugins/Marketplace/resources/qml/Packages.qml -> A small conflict where new properties got added while I moved the width property up a bit for consistency. Easy enough to fix.

cura/CuraApplication.py

@@ -572,6 +572,10 @@ class CuraApplication(QtApplication):
 
         preferences.addPreference("general/accepted_user_agreement", False)
 
+        preferences.addPreference("cura/market_place_show_plugin_banner", True)
+        preferences.addPreference("cura/market_place_show_material_banner", True)
+        preferences.addPreference("cura/market_place_show_manage_packages_banner", True)
+
         for key in [
             "dialog_load_path",  # dialog_save_path is in LocalFileOutputDevicePlugin
             "dialog_profile_path",

plugins/Marketplace/resources/qml/ManagedPackages.qml

@@ -10,6 +10,17 @@ import UM 1.4 as UM
 Packages
 {
     pageTitle: catalog.i18nc("@header", "Manage packages")
+
+    bannerVisible: UM.Preferences.getValue("cura/market_place_show_manage_packages_banner");
+    bannerIcon: UM.Theme.getIcon("ArrowDoubleCircleRight")
+    bannerText: catalog.i18nc("@text", "Manage your Ultimaker Cura plugins and material profiles here. Make sure to keep your plugins up to date and backup your setup regularly.")
+    bannerReadMoreUrl: "" // TODO add when support page is ready
+    onRemoveBanner: function() {
+        UM.Preferences.setValue("cura/market_place_show_manage_packages_banner", false);
+        bannerVisible = false;
+    }
+    searchInBrowserUrl: "https://marketplace.ultimaker.com/app/cura/plugins?utm_source=cura&utm_medium=software&utm_campaign=marketplace-search-plugins-browser"
+
     model: Marketplace.LocalPackageList
     {
     }

plugins/Marketplace/resources/qml/Marketplace.qml

@@ -86,6 +86,15 @@ Window
                     }
                 }
 
+                OnboardBanner
+                {
+                    visible: content.item && content.item.bannerVisible
+                    text: content.item && content.item.bannerText
+                    icon: content.item && content.item.bannerIcon
+                    onRemove: content.item && content.item.onRemoveBanner
+                    readMoreUrl: content.item && content.item.bannerReadMoreUrl
+                }
+
                 // Search & Top-Level Tabs
                 Item
                 {
@@ -167,6 +176,17 @@ Window
                     }
                 }
 
+                Cura.TertiaryButton
+                {
+                    text: catalog.i18nc("@info", "Search in the browser")
+                    iconSource: UM.Theme.getIcon("LinkExternal")
+
+                    isIconOnRightSide: true
+                    font: UM.Theme.getFont("default")
+
+                    onClicked: content.item && Qt.openUrlExternally(content.item.searchInBrowserUrl)
+                }
+
                 // Page contents.
                 Rectangle
                 {

plugins/Marketplace/resources/qml/Materials.qml

@@ -2,10 +2,22 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import Marketplace 1.0 as Marketplace
+import UM 1.4 as UM
 
 Packages
 {
     pageTitle: catalog.i18nc("@header", "Install Materials")
+
+    bannerVisible:  UM.Preferences.getValue("cura/market_place_show_material_banner")
+    bannerIcon: UM.Theme.getIcon("Spool")
+    bannerText: catalog.i18nc("@text", "Select and install material profiles optimised for your Ultimaker 3D printers.")
+    bannerReadMoreUrl: "" // TODO add when support page is ready
+    onRemoveBanner: function() {
+        UM.Preferences.setValue("cura/market_place_show_material_banner", false);
+        bannerVisible = false;
+    }
+    searchInBrowserUrl: "https://marketplace.ultimaker.com/app/cura/materials?utm_source=cura&utm_medium=software&utm_campaign=marketplace-search-materials-browser"
+
     model: Marketplace.RemotePackageList
     {
         packageTypeFilter: "material"

plugins/Marketplace/resources/qml/OnboardBanner.qml

@@ -0,0 +1,123 @@
+// 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
+
+// Onboarding banner.
+Rectangle
+{
+    property alias icon: onboardingIcon.source
+    property alias text: infoText.text
+    property var onRemove
+    property string readMoreUrl
+
+    Layout.preferredHeight: childrenRect.height + 2 * UM.Theme.getSize("default_margin").height
+    anchors
+    {
+        margins: UM.Theme.getSize("default_margin").width
+        left: parent.left
+        right: parent.right
+    }
+
+    color: UM.Theme.getColor("action_panel_secondary")
+
+    // Icon
+    UM.RecolorImage
+    {
+        id: onboardingIcon
+        anchors
+        {
+            top: parent.top
+            left: parent.left
+            margins: UM.Theme.getSize("default_margin").width
+        }
+        width: UM.Theme.getSize("banner_icon_size").width
+        height: UM.Theme.getSize("banner_icon_size").height
+    }
+
+    // Close button
+    UM.SimpleButton
+    {
+        id: onboardingClose
+        anchors
+        {
+            top: parent.top
+            right: parent.right
+            margins: UM.Theme.getSize("default_margin").width
+        }
+        width: UM.Theme.getSize("message_close").width
+        height: UM.Theme.getSize("message_close").height
+        color: UM.Theme.getColor("primary_text")
+        hoverColor: UM.Theme.getColor("primary_text_hover")
+        iconSource: UM.Theme.getIcon("Cancel")
+
+        onClicked: onRemove()
+    }
+
+    // Body
+    Label {
+        id: infoText
+        anchors
+        {
+            top: parent.top
+            left: onboardingIcon.right
+            right: onboardingClose.left
+            margins: UM.Theme.getSize("default_margin").width
+        }
+
+        font: UM.Theme.getFont("default")
+
+        renderType: Text.NativeRendering
+        color: UM.Theme.getColor("primary_text")
+        wrapMode: Text.Wrap
+        elide: Text.ElideRight
+
+        onLineLaidOut:
+        {
+            if(line.isLast)
+            {
+                // Check if read more button still fits after the body text
+                if (line.implicitWidth + readMoreButton.width + UM.Theme.getSize("default_margin").width > width)
+                {
+                    // If it does place it after the body text
+                    readMoreButton.anchors.bottomMargin = -(fontMetrics.height);
+                    readMoreButton.anchors.leftMargin = UM.Theme.getSize("thin_margin").width;
+                }
+                else
+                {
+                    // Otherwise place it under the text
+                    readMoreButton.anchors.leftMargin = line.implicitWidth + UM.Theme.getSize("default_margin").width;
+                    readMoreButton.anchors.bottomMargin = 0;
+                }
+            }
+        }
+    }
+
+    FontMetrics
+    {
+        id: fontMetrics
+        font: UM.Theme.getFont("default")
+    }
+
+    Cura.TertiaryButton
+    {
+        id: readMoreButton
+        anchors.left: infoText.left
+        anchors.bottom: infoText.bottom
+        text: "Learn More"
+        textFont: UM.Theme.getFont("default")
+        textColor: infoText.color
+        leftPadding: 0
+        rightPadding: 0
+        iconSource: UM.Theme.getIcon("LinkExternal")
+        isIconOnRightSide: true
+        height: fontMetrics.height
+
+        onClicked: Qt.openUrlExternally(readMoreUrl)
+    }
+}

plugins/Marketplace/resources/qml/Packages.qml

@@ -13,6 +13,12 @@ ListView
 
     property string pageTitle
     property var selectedPackage
+    property string searchInBrowserUrl
+    property bool bannerVisible
+    property var bannerIcon
+    property string bannerText
+    property string bannerReadMoreUrl
+    property var onRemoveBanner
 
     clip: true
 

plugins/Marketplace/resources/qml/Plugins.qml

@@ -2,10 +2,22 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import Marketplace 1.0 as Marketplace
+import UM 1.4 as UM
 
 Packages
 {
     pageTitle: catalog.i18nc("@header", "Install Plugins")
+
+    bannerVisible: UM.Preferences.getValue("cura/market_place_show_plugin_banner")
+    bannerIcon: UM.Theme.getIcon("Shop")
+    bannerText: catalog.i18nc("@text", "Streamline your workflow and customize your Ultimaker Cura experience with plugins contributed by our amazing community of users.")
+    bannerReadMoreUrl: "" // TODO add when support page is ready
+    onRemoveBanner: function() {
+        UM.Preferences.setValue("cura/market_place_show_plugin_banner", false)
+        bannerVisible = false;
+    }
+    searchInBrowserUrl: "https://marketplace.ultimaker.com/app/cura/plugins?utm_source=cura&utm_medium=software&utm_campaign=marketplace-search-plugins-browser"
+
     model: Marketplace.RemotePackageList
     {
         packageTypeFilter: "plugin"

resources/themes/cura-light/theme.json

@@ -684,6 +684,8 @@
         "table_row": [2.0, 2.0],
 
         "welcome_wizard_content_image_big": [18, 15],
-        "welcome_wizard_cloud_content_image": [4, 4]
+        "welcome_wizard_cloud_content_image": [4, 4],
+
+        "banner_icon_size": [2.0, 2.0]
     }
 }