Merge pull request #10948 from Ultimaker/CURA-8564_Add_onboarding_banners_with_link_to_explain_Cura_MP

Cura 8564 add onboarding banners with link to explain cura mp

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,16 @@ 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;
+    }
+
     model: Marketplace.LocalPackageList
     {
     }

plugins/Marketplace/resources/qml/Marketplace.qml

@@ -40,6 +40,7 @@ Window
     Rectangle
     {
         anchors.fill: parent
+        anchors.topMargin: UM.Theme.getSize("default_margin").height
         color: UM.Theme.getColor("main_background")
 
         ColumnLayout
@@ -48,11 +49,20 @@ Window
 
             spacing: UM.Theme.getSize("default_margin").height
 
+            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
+            }
+
             // Page title.
             Item
             {
                 Layout.preferredWidth: parent.width
-                Layout.preferredHeight: childrenRect.height + UM.Theme.getSize("default_margin").height
+                Layout.preferredHeight: childrenRect.height
 
                 Label
                 {
@@ -63,7 +73,6 @@ Window
                         leftMargin: UM.Theme.getSize("default_margin").width
                         right: parent.right
                         rightMargin: UM.Theme.getSize("default_margin").width
-                        bottom: parent.bottom
                     }
 
                     font: UM.Theme.getFont("large")

plugins/Marketplace/resources/qml/Materials.qml

@@ -2,10 +2,21 @@
 // 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", "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_material_banner", false);
+        bannerVisible = false;
+    }
+
     model: Marketplace.RemotePackageList
     {
         packageTypeFilter: "material"

plugins/Marketplace/resources/qml/OnboardBanner.qml

@@ -0,0 +1,124 @@
+// 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("button_icon").width
+        height: UM.Theme.getSize("button_icon").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 + UM.Theme.getSize("thin_margin").height);
+                    readMoreButton.anchors.leftMargin = 0;
+                }
+                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
+    {
+        visible: readMoreUrl !== ""
+        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

@@ -11,6 +11,12 @@ ListView
     id: packages
 
     property string pageTitle
+    property bool bannerVisible
+    property var bannerIcon
+    property string bannerText
+    property string bannerReadMoreUrl
+    property var onRemoveBanner
+
     width: parent.width
 
     clip: true

plugins/Marketplace/resources/qml/Plugins.qml

@@ -2,10 +2,21 @@
 // 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", "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_plugin_banner", false)
+        bannerVisible = false;
+    }
+
     model: Marketplace.RemotePackageList
     {
         packageTypeFilter: "plugin"