diff --git a/resources/qml/Preferences/Materials/MaterialsSyncDialog.qml b/resources/qml/Preferences/Materials/MaterialsSyncDialog.qml index cc2985a8a8..0360e2c94b 100644 --- a/resources/qml/Preferences/Materials/MaterialsSyncDialog.qml +++ b/resources/qml/Preferences/Materials/MaterialsSyncDialog.qml @@ -20,6 +20,7 @@ Window width: minimumWidth height: minimumHeight modality: Qt.ApplicationModal + color: UM.Theme.getColor("main_background") property variant syncModel property alias pageIndex: swipeView.currentIndex @@ -32,11 +33,11 @@ Window anchors.fill: parent interactive: false - Rectangle + Item { id: introPage - color: UM.Theme.getColor("main_background") - Column + + ColumnLayout { spacing: UM.Theme.getSize("default_margin").height anchors.fill: parent @@ -46,66 +47,64 @@ Window { text: catalog.i18nc("@title:header", "Sync materials with printers") font: UM.Theme.getFont("large_bold") + Layout.fillWidth: true } UM.Label { text: catalog.i18nc("@text", "Following a few simple steps, you will be able to synchronize all your material profiles with your printers.") font: UM.Theme.getFont("medium") - wrapMode: Text.Wrap - width: parent.width + Layout.fillWidth: true } + Image { + Layout.fillWidth: true + Layout.fillHeight: true source: UM.Theme.getImage("material_ecosystem") - width: parent.width + fillMode: Image.PreserveAspectFit sourceSize.width: width } - } - Cura.PrimaryButton - { - id: startButton - anchors + Item { - right: parent.right - rightMargin: UM.Theme.getSize("default_margin").width - bottom: parent.bottom - bottomMargin: UM.Theme.getSize("default_margin").height - } - text: catalog.i18nc("@button", "Start") - onClicked: - { - if(Cura.API.account.isLoggedIn) + Layout.preferredHeight: childrenRect.height + Layout.alignment: Qt.AlignBottom + Layout.fillWidth: true + + Cura.TertiaryButton { - swipeView.currentIndex += 2; //Skip sign in page. + text: catalog.i18nc("@button", "Why do I need to sync material profiles?") + iconSource: UM.Theme.getIcon("LinkExternal") + isIconOnRightSide: true + onClicked: Qt.openUrlExternally("https://support.ultimaker.com/hc/en-us/articles/360013137919?utm_source=cura&utm_medium=software&utm_campaign=sync-material-printer-why") } - else + + Cura.PrimaryButton { - swipeView.currentIndex += 1; + anchors.right: parent.right + text: catalog.i18nc("@button", "Start") + onClicked: + { + if(Cura.API.account.isLoggedIn) + { + swipeView.currentIndex += 2; //Skip sign in page. + } + else + { + swipeView.currentIndex += 1; + } + } } } } - Cura.TertiaryButton - { - anchors - { - left: parent.left - leftMargin: UM.Theme.getSize("default_margin").width - verticalCenter: startButton.verticalCenter - } - text: catalog.i18nc("@button", "Why do I need to sync material profiles?") - iconSource: UM.Theme.getIcon("LinkExternal") - isIconOnRightSide: true - onClicked: Qt.openUrlExternally("https://support.ultimaker.com/hc/en-us/articles/360013137919?utm_source=cura&utm_medium=software&utm_campaign=sync-material-printer-why") - } } - Rectangle + Item { id: signinPage - color: UM.Theme.getColor("main_background") - Connections //While this page is active, continue to the next page if the user logs in. + // While this page is active, continue to the next page if the user logs in. + Connections { target: Cura.API.account function onLoginStateChanged(is_logged_in) @@ -127,34 +126,31 @@ Window { text: catalog.i18nc("@title:header", "Sign in") font: UM.Theme.getFont("large_bold") - Layout.preferredHeight: height + Layout.fillWidth: true } UM.Label { text: catalog.i18nc("@text", "To automatically sync the material profiles with all your printers connected to Digital Factory you need to be signed in in Cura.") font: UM.Theme.getFont("medium") - wrapMode: Text.Wrap - width: parent.width - Layout.maximumWidth: width - Layout.preferredHeight: height + Layout.fillWidth: true } - Item + + Image { - Layout.preferredWidth: parent.width + Layout.alignment: Qt.AlignCenter + Layout.preferredWidth: parent.width / 2 + source: UM.Theme.getImage("first_run_ultimaker_cloud") Layout.fillHeight: true - Image - { - source: UM.Theme.getImage("first_run_ultimaker_cloud") - width: parent.width / 2 - sourceSize.width: width - anchors.centerIn: parent - } + sourceSize.width: width + fillMode: Image.PreserveAspectFit } + Item { - width: parent.width - height: childrenRect.height - Layout.preferredHeight: height + Layout.preferredHeight: childrenRect.height + Layout.alignment: Qt.AlignBottom + Layout.fillWidth: true + Cura.SecondaryButton { anchors.left: parent.left @@ -171,10 +167,9 @@ Window } } - Rectangle + Item { id: printerListPage - color: UM.Theme.getColor("main_background") ColumnLayout { @@ -185,7 +180,6 @@ Window Row { - Layout.preferredHeight: childrenRect.height spacing: UM.Theme.getSize("default_margin").width states: [ @@ -216,7 +210,7 @@ Window { id: printerListHeaderIcon width: UM.Theme.getSize("section_icon").width - height: width + height: UM.Theme.getSize("section_icon").height anchors.verticalCenter: parent.verticalCenter } UM.Label @@ -229,24 +223,22 @@ Window } Row { - Layout.preferredWidth: parent.width + Layout.fillWidth: true Layout.preferredHeight: childrenRect.height UM.Label { id: syncStatusLabel - - width: parent.width - UM.Theme.getSize("default_margin").width - troubleshootingLink.width - + anchors.left: parent.left wrapMode: Text.Wrap elide: Text.ElideRight visible: text !== "" - text: "" font: UM.Theme.getFont("medium") } Cura.TertiaryButton { id: troubleshootingLink + anchors.right: parent.right text: catalog.i18nc("@button", "Troubleshooting") visible: typeof syncModel !== "undefined" && syncModel.exportUploadStatus == "error" iconSource: UM.Theme.getIcon("LinkExternal") @@ -256,8 +248,7 @@ Window ListView { id: printerList - width: parent.width - Layout.preferredWidth: width + Layout.fillWidth: true Layout.fillHeight: true clip: true @@ -372,94 +363,82 @@ Window footer: Item { - width: printerList.width - printerListScrollBar - height: { - if(!visible) - { - return 0; - } - let h = UM.Theme.getSize("card").height + printerListTroubleshooting.height + UM.Theme.getSize("default_margin").height * 2; //1 margin between content and footer, 1 for troubleshooting link. - return h; - } + width: printerList.width - printerListScrollBar.width + height: childrenRect.height + UM.Theme.getSize("default_margin").height visible: includeOfflinePrinterList.count - cloudPrinterList.count > 0 && typeof syncModel !== "undefined" && syncModel.exportUploadStatus === "idle" Rectangle { - anchors.fill: parent - anchors.topMargin: UM.Theme.getSize("default_margin").height - + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right border.color: UM.Theme.getColor("lining") border.width: UM.Theme.getSize("default_lining").width + anchors.topMargin: UM.Theme.getSize("default_margin").height + height: childrenRect.height + 2 * UM.Theme.getSize("thick_margin").height + color: "transparent" - Row + GridLayout { - anchors - { - fill: parent - margins: Math.round(UM.Theme.getSize("card").height - UM.Theme.getSize("machine_selector_icon").width) / 2 //Same margin as in other cards. - } - spacing: UM.Theme.getSize("default_margin").width + columns: 3 + rows: 2 + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.leftMargin: UM.Theme.getSize("thick_margin").width + anchors.rightMargin: UM.Theme.getSize("thick_margin").width + anchors.topMargin: UM.Theme.getSize("thick_margin").height + anchors.bottomMargin: UM.Theme.getSize("thick_margin").height + columnSpacing: UM.Theme.getSize("default_margin").width + rowSpacing: UM.Theme.getSize("default_margin").height UM.StatusIcon { - id: infoIcon - width: UM.Theme.getSize("section_icon").width - height: width - //Fake anchor.verticalCenter: printersMissingText.verticalCenter, since we can't anchor to things that aren't siblings. - anchors.top: parent.top - anchors.topMargin: Math.round(printersMissingText.height / 2 - height / 2) - + Layout.preferredWidth: UM.Theme.getSize("section_icon").width + Layout.preferredHeight: UM.Theme.getSize("section_icon").height status: UM.StatusIcon.Status.WARNING } - Column + UM.Label { - //Fill the total width. Can't use layouts because we need the anchors for vertical alignment. - width: parent.width - infoIcon.width - refreshListButton.width - parent.spacing * 2 - - spacing: UM.Theme.getSize("default_margin").height - - UM.Label - { - id: printersMissingText - text: catalog.i18nc("@text Asking the user whether printers are missing in a list.", "Printers missing?") - + "\n" - + catalog.i18nc("@text", "Make sure all your printers are turned ON and connected to Digital Factory.") - font: UM.Theme.getFont("medium") - elide: Text.ElideRight - } - Cura.TertiaryButton - { - id: printerListTroubleshooting - leftPadding: 0 //Want to visually align this to the text. - - text: catalog.i18nc("@button", "Troubleshooting") - iconSource: UM.Theme.getIcon("LinkExternal") - onClicked: Qt.openUrlExternally("https://support.ultimaker.com/hc/en-us/articles/360012019239?utm_source=cura&utm_medium=software&utm_campaign=sync-material-wizard-troubleshoot-cloud-printer") - } + Layout.fillWidth: true + Layout.alignment: Qt.AlignVCenter + text: catalog.i18nc("@text Asking the user whether printers are missing in a list.", "Printers missing?") + + "\n" + + catalog.i18nc("@text", "Make sure all your printers are turned ON and connected to Digital Factory.") + font: UM.Theme.getFont("medium") + elide: Text.ElideRight } Cura.SecondaryButton { id: refreshListButton - //Fake anchor.verticalCenter: printersMissingText.verticalCenter, since we can't anchor to things that aren't siblings. - anchors.top: parent.top - anchors.topMargin: Math.round(printersMissingText.height / 2 - height / 2) - + Layout.alignment: Qt.AlignVCenter text: catalog.i18nc("@button", "Refresh List") iconSource: UM.Theme.getIcon("ArrowDoubleCircleRight") onClicked: Cura.API.account.sync(true) } + + Cura.TertiaryButton + { + id: printerListTroubleshooting + Layout.column: 1 + Layout.row: 1 + Layout.fillWidth: true + leftPadding: 0 + text: catalog.i18nc("@button", "Troubleshooting") + iconSource: UM.Theme.getIcon("LinkExternal") + onClicked: Qt.openUrlExternally("https://support.ultimaker.com/hc/en-us/articles/360012019239?utm_source=cura&utm_medium=software&utm_campaign=sync-material-wizard-troubleshoot-cloud-printer") + } } } } } Item { - width: parent.width - height: childrenRect.height - Layout.preferredWidth: width - Layout.preferredHeight: height + Layout.fillWidth: true + Layout.preferredHeight: childrenRect.height + Layout.alignment: Qt.AlignBottom Cura.SecondaryButton { @@ -545,7 +524,8 @@ Window } } - ColumnLayout //Placeholder for when the user has no cloud printers. + // Placeholder for when the user has no cloud printers. + ColumnLayout { spacing: UM.Theme.getSize("default_margin").height anchors.fill: parent @@ -556,44 +536,50 @@ Window { text: catalog.i18nc("@title:header", "No printers found") font: UM.Theme.getFont("large_bold") - Layout.preferredWidth: width - Layout.preferredHeight: height + Layout.fillWidth: true } - Image + + Item { - source: UM.Theme.getImage("3d_printer_faded") - sourceSize.width: width - fillMode: Image.PreserveAspectFit - Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: parent.width / 3 + Layout.fillWidth: true + Layout.fillHeight: true + + Image + { + anchors.fill: parent + source: UM.Theme.getImage("3d_printer_faded") + sourceSize.width: width + fillMode: Image.PreserveAspectFit + } } + UM.Label { text: catalog.i18nc("@text", "It seems like you don't have any compatible printers connected to Digital Factory. Make sure your printer is connected and it's running the latest firmware.") - width: parent.width + Layout.fillWidth: true horizontalAlignment: Text.AlignHCenter wrapMode: Text.Wrap - Layout.preferredWidth: width - Layout.preferredHeight: height } + Item { - Layout.preferredWidth: parent.width - Layout.fillHeight: true + Layout.fillWidth: true + Layout.preferredHeight: parent.height / 4 Cura.TertiaryButton { text: catalog.i18nc("@button", "Learn how to connect your printer to Digital Factory") iconSource: UM.Theme.getIcon("LinkExternal") onClicked: Qt.openUrlExternally("https://support.ultimaker.com/hc/en-us/articles/360012019239?utm_source=cura&utm_medium=software&utm_campaign=sync-material-wizard-add-cloud-printer") anchors.horizontalCenter: parent.horizontalCenter + maximumWidth: parent.width } } + Item { - width: parent.width - height: childrenRect.height - Layout.preferredWidth: width - Layout.preferredHeight: height + Layout.preferredHeight: childrenRect.height + Layout.alignment: Qt.AlignBottom + Layout.fillWidth: true Cura.SecondaryButton { @@ -601,30 +587,34 @@ Window text: catalog.i18nc("@button", "Sync materials with USB") onClicked: swipeView.currentIndex = removableDriveSyncPage.SwipeView.index } - Cura.PrimaryButton + + RowLayout { - id: disabledSyncButton anchors.right: parent.right - text: catalog.i18nc("@button", "Sync") - enabled: false //If there are no printers, always disable this button. - } - Cura.SecondaryButton - { - anchors.right: disabledSyncButton.left - anchors.rightMargin: UM.Theme.getSize("default_margin").width - text: catalog.i18nc("@button", "Refresh") - iconSource: UM.Theme.getIcon("ArrowDoubleCircleRight") - outlineColor: "transparent" - onClicked: Cura.API.account.sync(true) + spacing: UM.Theme.getSize("default_margin").width + + Cura.SecondaryButton + { + text: catalog.i18nc("@button", "Refresh") + iconSource: UM.Theme.getIcon("ArrowDoubleCircleRight") + outlineColor: "transparent" + onClicked: Cura.API.account.sync(true) + } + + Cura.PrimaryButton + { + id: disabledSyncButton + text: catalog.i18nc("@button", "Sync") + enabled: false // If there are no printers, always disable this button. + } } } } } - Rectangle + Item { id: removableDriveSyncPage - color: UM.Theme.getColor("main_background") ColumnLayout { @@ -636,46 +626,52 @@ Window { text: catalog.i18nc("@title:header", "Sync material profiles via USB") font: UM.Theme.getFont("large_bold") - Layout.preferredHeight: height + Layout.fillWidth: true } UM.Label { text: catalog.i18nc("@text In the UI this is followed by a list of steps the user needs to take.", "Follow the following steps to load the new material profiles to your printer.") font: UM.Theme.getFont("medium") wrapMode: Text.Wrap - width: parent.width - Layout.maximumWidth: width - Layout.preferredHeight: height + Layout.fillWidth: true } - Row + + RowLayout { - width: parent.width - Layout.preferredWidth: width + Layout.fillWidth: true Layout.fillHeight: true spacing: UM.Theme.getSize("default_margin").width - Image + Item { - source: UM.Theme.getImage("insert_usb") - width: parent.width / 3 - height: width - anchors.verticalCenter: parent.verticalCenter - sourceSize.width: width + Layout.preferredWidth: parent.width / 3 + Layout.fillHeight: true + + Image + { + anchors.fill: parent + source: UM.Theme.getImage("insert_usb") + verticalAlignment: Image.AlignVCenter + horizontalAlignment: Image.AlignHCenter + fillMode: Image.PreserveAspectFit + sourceSize.width: width + } } + UM.Label { + Layout.alignment: Qt.AlignCenter + Layout.fillWidth: true text: "1. " + catalog.i18nc("@text", "Click the export material archive button.") + "\n2. " + catalog.i18nc("@text", "Save the .umm file on a USB stick.") + "\n3. " + catalog.i18nc("@text", "Insert the USB stick into your printer and launch the procedure to load new material profiles.") font: UM.Theme.getFont("medium") - wrapMode: Text.Wrap - width: parent.width * 2 / 3 - UM.Theme.getSize("default_margin").width - anchors.verticalCenter: parent.verticalCenter } } Cura.TertiaryButton { + Layout.fillWidth: true text: catalog.i18nc("@button", "How to load new material profiles to my printer") iconSource: UM.Theme.getIcon("LinkExternal") onClicked: Qt.openUrlExternally("https://support.ultimaker.com/hc/en-us/articles/4403319801106/?utm_source=cura&utm_medium=software&utm_campaign=add-material-profiles-via-usb") @@ -683,10 +679,9 @@ Window Item { - width: parent.width - height: childrenRect.height - Layout.preferredWidth: width - Layout.preferredHeight: height + Layout.preferredHeight: childrenRect.height + Layout.alignment: Qt.AlignBottom + Layout.fillWidth: true Cura.SecondaryButton { @@ -719,24 +714,22 @@ Window } } - Cura.GlobalStacksModel + property variant cloudPrinterList: Cura.GlobalStacksModel { - id: cloudPrinterList filterConnectionType: 3 //Only show cloud connections. filterOnlineOnly: true //Only show printers that are online. filterCapabilities: ["import_material"] //Only show printers that can receive the material profiles. } - Cura.GlobalStacksModel + + property variant includeOfflinePrinterList: Cura.GlobalStacksModel { //In order to show a refresh button only when there are offline cloud printers, we need to know if there are any offline printers. //A global stacks model without the filter for online-only printers allows this. - id: includeOfflinePrinterList filterConnectionType: 3 //Still only show cloud connections. } - FileDialog + property variant exportUsbDialog: FileDialog { - id: exportUsbDialog title: catalog.i18nc("@title:window", "Export All Materials") selectExisting: false nameFilters: ["Material archives (*.umm)", "All files (*)"]