Merge branch 'CURA-8094_onoarding_flow' of github.com:Ultimaker/Cura

This commit is contained in:
Jaime van Kessel 2021-03-25 13:12:44 +01:00
commit ab95af167c
No known key found for this signature in database
GPG key ID: 3710727397403C91
8 changed files with 248 additions and 94 deletions

View file

@ -34,93 +34,167 @@ Item
}
}
Label
{
id: titleLabel
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter
text: catalog.i18nc("@label", "Ultimaker Account")
color: UM.Theme.getColor("primary_button")
font: UM.Theme.getFont("huge")
renderType: Text.NativeRendering
}
// Area where the cloud contents can be put. Pictures, texts and such.
Item
{
id: cloudContentsArea
anchors
{
top: titleLabel.bottom
top: parent.top
bottom: skipButton.top
left: parent.left
right: parent.right
topMargin: UM.Theme.getSize("default_margin").height
}
// Pictures and texts are arranged using Columns with spacing. The whole picture and text area is centered in
// the cloud contents area.
Column
{
anchors.centerIn: parent
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
height: childrenRect.height
spacing: 20 * screenScaleFactor
spacing: UM.Theme.getSize("thick_margin").height
Image // Cloud image
Label
{
id: titleLabel
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter
text: catalog.i18nc("@label", "Sign in to the Ultimaker platform")
color: UM.Theme.getColor("primary_button")
font: UM.Theme.getFont("huge")
renderType: Text.NativeRendering
}
// Filler item
Item
{
height: UM.Theme.getSize("default_margin").height
width: parent.width
}
// Cloud image
Image
{
id: cloudImage
anchors.horizontalCenter: parent.horizontalCenter
source: UM.Theme.getImage("first_run_ultimaker_cloud")
fillMode: Image.PreserveAspectFit
width: UM.Theme.getSize("welcome_wizard_content_image_big").width
sourceSize.width: width
sourceSize.height: height
}
Label // A title-ish text
// Filler item
Item
{
id: highlightTextLabel
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter
text: catalog.i18nc("@text", "Your key to connected 3D printing")
textFormat: Text.RichText
color: UM.Theme.getColor("primary")
font: UM.Theme.getFont("medium")
renderType: Text.NativeRendering
height: UM.Theme.getSize("default_margin").height
width: parent.width
}
Label // A number of text items
// Motivational icons
Row
{
id: textLabel
anchors.horizontalCenter: parent.horizontalCenter
text:
id: motivationRow
width: parent.width
Column
{
// There are 3 text items, each of which is translated separately as a single piece of text.
var full_text = ""
var t = ""
id: marketplaceColumn
width: Math.round(parent.width / 3)
spacing: UM.Theme.getSize("default_margin").height
t = catalog.i18nc("@text", "- Customize your experience with more print profiles and plugins")
full_text += "<p>" + t + "</p>"
t = catalog.i18nc("@text", "- Stay flexible by syncing your setup and loading it anywhere")
full_text += "<p>" + t + "</p>"
t = catalog.i18nc("@text", "- Increase efficiency with a remote workflow on Ultimaker printers")
full_text += "<p>" + t + "</p>"
return full_text
Image
{
id: marketplaceImage
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
width: UM.Theme.getSize("welcome_wizard_cloud_content_image").width
source: UM.Theme.getIcon("package")
sourceSize.width: width
sourceSize.height: height
}
Label
{
id: marketplaceTextLabel
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
text: catalog.i18nc("@text", "Add material settings and plugins from the Marketplace")
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
color: UM.Theme.getColor("text")
font: UM.Theme.getFont("default")
renderType: Text.NativeRendering
}
}
Column
{
id: syncColumn
width: Math.round(parent.width / 3)
spacing: UM.Theme.getSize("default_margin").height
Image
{
id: syncImage
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
width: UM.Theme.getSize("welcome_wizard_cloud_content_image").width
source: UM.Theme.getIcon("material_spool")
sourceSize.width: width
sourceSize.height: height
}
Label
{
id: syncTextLabel
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
text: catalog.i18nc("@text", "Backup and sync your material settings and plugins")
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
color: UM.Theme.getColor("text")
font: UM.Theme.getFont("default")
renderType: Text.NativeRendering
}
}
Column
{
id: communityColumn
width: Math.round(parent.width / 3)
spacing: UM.Theme.getSize("default_margin").height
Image
{
id: communityImage
anchors.horizontalCenter: communityColumn.horizontalCenter
fillMode: Image.PreserveAspectFit
width: UM.Theme.getSize("welcome_wizard_cloud_content_image").width
source: UM.Theme.getIcon("group")
sourceSize.width: width
sourceSize.height: height
}
Label
{
id: communityTextLabel
anchors.horizontalCenter: communityColumn.horizontalCenter
width: parent.width
text: catalog.i18nc("@text", "Share ideas and get help from 48,000+ users in the Ultimaker Community")
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
color: UM.Theme.getColor("text")
font: UM.Theme.getFont("default")
renderType: Text.NativeRendering
}
}
textFormat: Text.RichText
font: UM.Theme.getFont("medium")
color: UM.Theme.getColor("text")
renderType: Text.NativeRendering
}
// "Sign in" and "Create an account" exist inside the column
// Sign in Button
Cura.PrimaryButton
{
id: signInButton
height: createAccountButton.height
width: createAccountButton.width
anchors.horizontalCenter: parent.horizontalCenter
text: catalog.i18nc("@button", "Sign in")
onClicked: Cura.API.account.login()
@ -135,16 +209,15 @@ Item
}
}
Cura.SecondaryButton
// Create an account button
Cura.TertiaryButton
{
id: createAccountButton
anchors.horizontalCenter: parent.horizontalCenter
text: catalog.i18nc("@button","Create account")
onClicked: Qt.openUrlExternally(CuraApplication.ultimakerCloudAccountRootUrl + "/app/create")
text: catalog.i18nc("@text", "Create a free Ultimaker Account")
onClicked: Qt.openUrlExternally(CuraApplication.ultimakerCloudAccountRootUrl + "/app/create")
}
}
}
// The "Skip" button exists on the bottom right

View file

@ -7,7 +7,6 @@ import QtQuick.Controls 2.3
import UM 1.3 as UM
import Cura 1.1 as Cura
//
// This component contains the content for the "Welcome" page of the welcome on-boarding process.
//
@ -15,11 +14,39 @@ Item
{
UM.I18nCatalog { id: catalog; name: "cura" }
Column // Arrange the items vertically and put everything in the center
// Arrange the items vertically and put everything in the center
Column
{
anchors.centerIn: parent
width: parent.width
spacing: 2 * UM.Theme.getSize("wide_margin").height
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: UM.Theme.getSize("thick_margin").height
width:parent.width
// Filler item
Item
{
height: UM.Theme.getSize("thick_margin").width
width: parent.width
}
Image
{
id: curaImage
anchors.horizontalCenter: parent.horizontalCenter
source: UM.Theme.getImage("first_run_welcome_cura")
fillMode: Image.PreserveAspectFit
width: UM.Theme.getSize("welcome_wizard_content_image_big").width
sourceSize.width: width
sourceSize.height: height
}
// Filler item
Item
{
height: UM.Theme.getSize("thick_margin").width
width: parent.width
}
Label
{
@ -28,35 +55,43 @@ Item
horizontalAlignment: Text.AlignHCenter
text: catalog.i18nc("@label", "Welcome to Ultimaker Cura")
color: UM.Theme.getColor("primary_button")
font: UM.Theme.getFont("huge")
font: UM.Theme.getFont("huge_bold")
renderType: Text.NativeRendering
}
Image
{
id: curaImage
anchors.horizontalCenter: parent.horizontalCenter
source: UM.Theme.getImage("first_run_welcome_cura")
}
Label
{
id: textLabel
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter
text: catalog.i18nc("@text", "Please follow these steps to set up\nUltimaker Cura. This will only take a few moments.")
width: titleLabel.width + 2 * UM.Theme.getSize("thick_margin").width
text: catalog.i18nc("@text", "Please follow these steps to set up Ultimaker Cura. This will only take a few moments.")
wrapMode: Text.Wrap
font: UM.Theme.getFont("medium")
color: UM.Theme.getColor("text")
renderType: Text.NativeRendering
}
// Filler item
Item
{
height: UM.Theme.getSize("thick_margin").height
width: parent.width
}
Cura.PrimaryButton
{
id: getStartedButton
anchors.horizontalCenter: parent.horizontalCenter
anchors.margins: UM.Theme.getSize("wide_margin").width
text: catalog.i18nc("@button", "Get started")
onClicked: base.showNextPage()
}
// Filler item
Item
{
height: UM.Theme.getSize("thick_margin").height
width: parent.width
}
}
}