From 3b63f92d55a9398053bb87932d43cb4396bddb46 Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Wed, 27 Feb 2019 11:50:14 +0100 Subject: [PATCH] WIP: Add base QMLs for WelcomeDialog --- resources/qml/Actions.qml | 5 +- .../qml/WelcomePages/StepIndicatorBar.qml | 34 ++++++ resources/qml/WelcomePages/StepPanel.qml | 105 ++++++++++++++++++ .../qml/WelcomePages/UserAgreementContent.qml | 41 +++++++ resources/qml/WelcomePages/WelcomeContent.qml | 65 +++++++++++ resources/qml/WelcomePages/WelcomeDialog.qml | 30 +++++ .../images/first_run_Ultimaker_cloud.svg | 16 +++ .../images/first_run_share_data.svg | 71 ++++++++++++ .../images/first_run_welcome_cura.svg | 15 +++ 9 files changed, 380 insertions(+), 2 deletions(-) create mode 100644 resources/qml/WelcomePages/StepIndicatorBar.qml create mode 100644 resources/qml/WelcomePages/StepPanel.qml create mode 100644 resources/qml/WelcomePages/UserAgreementContent.qml create mode 100644 resources/qml/WelcomePages/WelcomeContent.qml create mode 100644 resources/qml/WelcomePages/WelcomeDialog.qml create mode 100644 resources/themes/cura-light/images/first_run_Ultimaker_cloud.svg create mode 100644 resources/themes/cura-light/images/first_run_share_data.svg create mode 100644 resources/themes/cura-light/images/first_run_welcome_cura.svg diff --git a/resources/qml/Actions.qml b/resources/qml/Actions.qml index 1389801bca..368f1aa0cf 100644 --- a/resources/qml/Actions.qml +++ b/resources/qml/Actions.qml @@ -3,8 +3,9 @@ pragma Singleton -import QtQuick 2.2 +import QtQuick 2.10 import QtQuick.Controls 1.1 +import QtQuick.Controls 2.3 as Controls2 import UM 1.1 as UM import Cura 1.0 as Cura @@ -71,7 +72,7 @@ Item UM.I18nCatalog{id: catalog; name: "cura"} - Action + Controls2.Action { id: showTroubleShootingAction onTriggered: Qt.openUrlExternally("https://ultimaker.com/en/troubleshooting") diff --git a/resources/qml/WelcomePages/StepIndicatorBar.qml b/resources/qml/WelcomePages/StepIndicatorBar.qml new file mode 100644 index 0000000000..8c453c6e5d --- /dev/null +++ b/resources/qml/WelcomePages/StepIndicatorBar.qml @@ -0,0 +1,34 @@ +// Copyright (c) 2019 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.10 +import QtQuick.Controls 2.3 + + +Item +{ + id: base + + property int totalSteps: 10 + property int currentStep: 6 + property int radius: 2 + + Rectangle + { + id: background + anchors.fill: parent + color: "#f0f0f0" + radius: base.radius + } + + Rectangle + { + id: progress + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + width: (currentStep * 1.0 / totalSteps) * background.width + color: "#3282ff" + radius: base.radius + } +} diff --git a/resources/qml/WelcomePages/StepPanel.qml b/resources/qml/WelcomePages/StepPanel.qml new file mode 100644 index 0000000000..e72ba949e9 --- /dev/null +++ b/resources/qml/WelcomePages/StepPanel.qml @@ -0,0 +1,105 @@ +// Copyright (c) 2019 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtGraphicalEffects 1.0 // For the dropshadow + +import Cura 1.1 as Cura +Item +{ + id: base + + anchors.fill: parent + clip: true + + property int roundCornerRadius: 4 + property int shadowOffset: 2 + property int stepBarHeight: 12 + property int contentMargins: 4 + + property int totalSteps: 0 + property int currentStep: -1 + + property var currentItem: null + property var model: null + + onVisibleChanged: + { + if (visible) + { + base.currentStep = 0 + base.currentItem = base.model.getItem(base.currentStep) + } + } + + onCurrentStepChanged: + { + base.currentItem = base.model.getItem(base.currentStep) + } + + onModelChanged: + { + base.totalSteps = base.model.count + base.currentStep = 0 + base.currentItem = base.model.getItem(base.currentStep) + } + + // Panel background + Rectangle + { + id: panelBackground + anchors.fill: parent + anchors.margins: 10 + color: "white" // TODO + radius: base.roundCornerRadius // TODO + } + + // Drop shadow around the panel + DropShadow + { + id: shadow + // Don't blur the shadow + radius: base.roundCornerRadius + 2 + anchors.fill: parent + source: parent + horizontalOffset: base.shadowOffset + verticalOffset: base.shadowOffset + visible: true + color: UM.Theme.getColor("action_button_shadow") + // Should always be drawn behind the background. + z: panelBackground.z - 1 + } + + StepIndicatorBar + { + id: stepIndicatorBar + //anchors.margins: 10 + + totalSteps: base.totalSteps + currentStep: base.currentStep + radius: base.roundCornerRadius + + anchors + { + left: panelBackground.left + right: panelBackground.right + top: panelBackground.top + } + height: base.stepBarHeight + } + + Loader + { + id: contentLoader + anchors + { + margins: base.contentMargins + top: stepIndicatorBar.bottom + bottom: parent.bottom + left: parent.left + right: parent.right + } + source: base.currentItem.page_url + } +} diff --git a/resources/qml/WelcomePages/UserAgreementContent.qml b/resources/qml/WelcomePages/UserAgreementContent.qml new file mode 100644 index 0000000000..771f9ff1ed --- /dev/null +++ b/resources/qml/WelcomePages/UserAgreementContent.qml @@ -0,0 +1,41 @@ +// Copyright (c) 2019 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.10 +import QtQuick.Controls 2.3 + + +Component +{ + Column + { + spacing: 20 + + Label + { + id: titleLabel + anchors.horizontalCenter: parent.horizontalCenter + horizontalAlignment: Text.AlignHCenter + text: "User Agreement" // TODO + color: "blue" // TODO + //font: + renderType: NativeRendering + } + + Image { + id: curaImage + anchors.horizontalCenter: parent.horizontalCenter + source: "TODO" + } + + Label + { + id: textLabel + anchors.horizontalCenter: parent.horizontalCenter + horizontalAlignment: Text.AlignHCenter + text: "Please fllow these steps to set up\nUltimaker Cura. This will only take a few moments." + //font: + renderType: NativeRendering + } + } +} diff --git a/resources/qml/WelcomePages/WelcomeContent.qml b/resources/qml/WelcomePages/WelcomeContent.qml new file mode 100644 index 0000000000..e7e7300c12 --- /dev/null +++ b/resources/qml/WelcomePages/WelcomeContent.qml @@ -0,0 +1,65 @@ +// Copyright (c) 2019 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.10 +import QtQuick.Controls 2.3 + +import UM 1.3 as UM +import Cura 1.1 as Cura + + +// +// This component contains the content for the first page of the welcome on-boarding process. +// +Column +{ + UM.I18nCatalog { id: catalog; name: "cura" } + + spacing: 60 + + // Placeholder + Label { text: " " } + + Label + { + id: titleLabel + anchors.horizontalCenter: parent.horizontalCenter + horizontalAlignment: Text.AlignHCenter + text: catalog.i18nc("@label", "Welcome to Ultimaker Cura") + color: UM.Theme.getColor("primary_button") + font: UM.Theme.getFont("large_bold") + renderType: Text.NativeRendering + } + + Column + { + anchors.horizontalCenter: parent.horizontalCenter + spacing: 40 + + 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.") + font: UM.Theme.getFont("medium") + renderType: Text.NativeRendering + } + } + + Cura.PrimaryButton + { + id: getStartedButton + anchors.horizontalCenter: parent.horizontalCenter + text: catalog.i18nc("@button", "Get started") + width: 140 + fixedWidthMode: true + } +} diff --git a/resources/qml/WelcomePages/WelcomeDialog.qml b/resources/qml/WelcomePages/WelcomeDialog.qml new file mode 100644 index 0000000000..ee296bb371 --- /dev/null +++ b/resources/qml/WelcomePages/WelcomeDialog.qml @@ -0,0 +1,30 @@ +// Copyright (c) 2019 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Window 2.2 + +import UM 1.3 as UM +import Cura 1.1 as Cura + + +Window +{ + UM.I18nCatalog { id: catalog; name: "cura" } + + title: catalog.i18nc("@title", "Welcome to Ultimaker Cura") + modality: Qt.ApplicationModal + flags: Qt.Window | Qt.FramelessWindowHint + + width: 580 // TODO + height: 600 // TODO + color: "transparent" + + StepPanel + { + id: stepPanel + currentStep: 0 + model: CuraApplication.getWelcomePagesModel() + } +} diff --git a/resources/themes/cura-light/images/first_run_Ultimaker_cloud.svg b/resources/themes/cura-light/images/first_run_Ultimaker_cloud.svg new file mode 100644 index 0000000000..f5e52ebee9 --- /dev/null +++ b/resources/themes/cura-light/images/first_run_Ultimaker_cloud.svg @@ -0,0 +1,16 @@ + + + + Group-cloud + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/resources/themes/cura-light/images/first_run_share_data.svg b/resources/themes/cura-light/images/first_run_share_data.svg new file mode 100644 index 0000000000..0d6f8998e5 --- /dev/null +++ b/resources/themes/cura-light/images/first_run_share_data.svg @@ -0,0 +1,71 @@ + + + + Group 2 + 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 new file mode 100644 index 0000000000..76a812d2c0 --- /dev/null +++ b/resources/themes/cura-light/images/first_run_welcome_cura.svg @@ -0,0 +1,15 @@ + + + + cura + Created with Sketch. + + + + + + + + + + \ No newline at end of file