diff --git a/resources/qml/WelcomePages/CloudContent.qml b/resources/qml/WelcomePages/CloudContent.qml index 48410f7f12..692ad12a29 100644 --- a/resources/qml/WelcomePages/CloudContent.qml +++ b/resources/qml/WelcomePages/CloudContent.qml @@ -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 += "

" + t + "

" - - t = catalog.i18nc("@text", "- Stay flexible by syncing your setup and loading it anywhere") - full_text += "

" + t + "

" - - t = catalog.i18nc("@text", "- Increase efficiency with a remote workflow on Ultimaker printers") - full_text += "

" + t + "

" - - 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 diff --git a/resources/qml/WelcomePages/WelcomeContent.qml b/resources/qml/WelcomePages/WelcomeContent.qml index 1464e363a8..45a0bf4a7c 100644 --- a/resources/qml/WelcomePages/WelcomeContent.qml +++ b/resources/qml/WelcomePages/WelcomeContent.qml @@ -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 + } } } diff --git a/resources/themes/cura-light/icons/group.svg b/resources/themes/cura-light/icons/group.svg new file mode 100644 index 0000000000..0debb0f300 --- /dev/null +++ b/resources/themes/cura-light/icons/group.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/resources/themes/cura-light/icons/material_spool.svg b/resources/themes/cura-light/icons/material_spool.svg new file mode 100644 index 0000000000..66cc02a57b --- /dev/null +++ b/resources/themes/cura-light/icons/material_spool.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/resources/themes/cura-light/icons/package.svg b/resources/themes/cura-light/icons/package.svg new file mode 100644 index 0000000000..4f74a43c42 --- /dev/null +++ b/resources/themes/cura-light/icons/package.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/resources/themes/cura-light/images/first_run_ultimaker_cloud.svg b/resources/themes/cura-light/images/first_run_ultimaker_cloud.svg index 1e9b313862..1476e7705d 100644 --- a/resources/themes/cura-light/images/first_run_ultimaker_cloud.svg +++ b/resources/themes/cura-light/images/first_run_ultimaker_cloud.svg @@ -1,12 +1,17 @@ - - - - Group-cloud - Created with Sketch. - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + diff --git a/resources/themes/cura-light/images/first_run_welcome_cura.svg b/resources/themes/cura-light/images/first_run_welcome_cura.svg index fddb073c82..3d957884b4 100644 --- a/resources/themes/cura-light/images/first_run_welcome_cura.svg +++ b/resources/themes/cura-light/images/first_run_welcome_cura.svg @@ -1,11 +1,17 @@ - - - - cura - Created with Sketch. - - - - + + + + + + + + + + + + + + + - \ No newline at end of file + diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 5a99b023eb..789161f9fc 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -34,6 +34,11 @@ "weight": 50, "family": "Noto Sans" }, + "huge_bold": { + "size": 1.8, + "weight": 63, + "family": "Noto Sans" + }, "medium": { "size": 1.16, "weight": 40, @@ -576,7 +581,7 @@ "monitor_preheat_temperature_control": [4.5, 2.0], - "welcome_wizard_window": [46.0, 45], + "welcome_wizard_window": [46, 45], "modal_window_minimum": [60.0, 45], "license_window_minimum": [45, 45], "wizard_progress": [10.0, 0.0], @@ -633,6 +638,9 @@ "monitor_progress_bar": [16.5, 1.0], "monitor_margin": [1.5, 1.5], - "table_row": [2.0, 2.0] + "table_row": [2.0, 2.0], + + "welcome_wizard_content_image_big": [18, 15], + "welcome_wizard_cloud_content_image": [4, 4] } }