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
This commit is contained in:
Remco Burema 2021-11-30 10:36:13 +01:00 committed by GitHub
commit 55f9771dd4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 177 additions and 2 deletions

View file

@ -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
{
}

View file

@ -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")

View file

@ -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"

View file

@ -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)
}
}

View file

@ -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

View file

@ -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"