From bf59097320d7f5eaf4bd072cde2d8a841d27c550 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Mon, 29 Oct 2018 15:18:34 +0100 Subject: [PATCH] Split the action button panel in two different components that are loaded in different moments. The SliceProcessWidget is loaded once there is something to slice and it also shows the process of slicing. The OutputProcessWidget will show the print information and the actions to do to output the results, such as Print over network, Save to file, ... Contributes to CURA-5786. --- resources/qml/ActionPanelWidget.qml | 239 +++---------------------- resources/qml/Cura.qml | 17 +- resources/qml/OutputProcessWidget.qml | 72 ++++++++ resources/qml/SliceProcessWidget.qml | 62 +++++++ resources/themes/cura-light/theme.json | 4 + 5 files changed, 172 insertions(+), 222 deletions(-) create mode 100644 resources/qml/OutputProcessWidget.qml create mode 100644 resources/qml/SliceProcessWidget.qml diff --git a/resources/qml/ActionPanelWidget.qml b/resources/qml/ActionPanelWidget.qml index b5dc7f83c9..d1fe999731 100644 --- a/resources/qml/ActionPanelWidget.qml +++ b/resources/qml/ActionPanelWidget.qml @@ -2,7 +2,7 @@ // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.7 -import QtQuick.Controls 2.0 +import QtQuick.Controls 2.1 import QtQuick.Layouts 1.3 import UM 1.2 as UM @@ -10,230 +10,43 @@ import Cura 1.0 as Cura Rectangle { - id: base + id: actionPanelWidget - // We need a whole lot of print duration information. - property variant printDuration: PrintInformation.currentPrintTime - - // This widget doesn't show tooltips by itself. Instead it emits signals so others can do something with it. - signal showTooltip(Item item, point location, string text) - signal hideTooltip() + width: childrenRect.width + 2 * UM.Theme.getSize("thick_margin").width + height: childrenRect.height + 2 * UM.Theme.getSize("thick_margin").height color: UM.Theme.getColor("main_background") + border.width: UM.Theme.getSize("default_lining").width + border.color: UM.Theme.getColor("lining") + radius: UM.Theme.getSize("default_radius").width + visible: CuraApplication.platformActivity - // Also add an extra margin, as we want some breathing room around the edges. - height: saveButton.height + UM.Theme.getSize("thick_margin").height - Label + property bool backendStatusDone: UM.Backend.state == 3 + + Loader { - id: timeDetails - anchors.left: parent.left - anchors.bottom: costSpec.top - anchors.leftMargin: UM.Theme.getSize("thick_margin").width - - font: UM.Theme.getFont("large") - color: UM.Theme.getColor("text_subtext") - text: (!base.printDuration || !base.printDuration.valid) ? catalog.i18nc("@label Hours and minutes", "00h 00min") : base.printDuration.getDisplayString(UM.DurationFormat.Short) - renderType: Text.NativeRendering - - MouseArea + id: loader + anchors { - id: timeDetailsMouseArea - anchors.fill: parent - hoverEnabled: true - - onEntered: - { - if(base.printDuration.valid && !base.printDuration.isTotalDurationZero) - { - // All the time information for the different features is achieved - var print_time = PrintInformation.getFeaturePrintTimes(); - var total_seconds = parseInt(base.printDuration.getDisplayString(UM.DurationFormat.Seconds)) - - // A message is created and displayed when the user hover the time label - var tooltip_html = "%1
".arg(catalog.i18nc("@tooltip", "Time specification")); - for(var feature in print_time) - { - if(!print_time[feature].isTotalDurationZero) - { - tooltip_html += "" + - "".arg(print_time[feature].getDisplayString(UM.DurationFormat.ISO8601).slice(0,-3)) + - "".arg(Math.round(100 * parseInt(print_time[feature].getDisplayString(UM.DurationFormat.Seconds)) / total_seconds)) + - ""; - } - } - tooltip_html += "
" + feature + ":  %1  %1%
"; - base.showTooltip(parent, Qt.point(-UM.Theme.getSize("thick_margin").width, 0), tooltip_html); - } - } - onExited: - { - base.hideTooltip(); - } + top: parent.top + topMargin: UM.Theme.getSize("thick_margin").height + left: parent.left + leftMargin: UM.Theme.getSize("thick_margin").width } + sourceComponent: backendStatusDone ? outputProcessWidget : sliceProcessWidget } - Label + Behavior on height { NumberAnimation { duration: 100 } } + + Component { - function formatRow(items) - { - var row_html = ""; - for(var item = 0; item < items.length; item++) - { - if (item == 0) - { - row_html += "%1".arg(items[item]); - } - else - { - row_html += "  %1".arg(items[item]); - } - } - row_html += ""; - return row_html; - } - - function getSpecsData() - { - var lengths = []; - var total_length = 0; - var weights = []; - var total_weight = 0; - var costs = []; - var total_cost = 0; - var some_costs_known = false; - var names = []; - if(base.printMaterialLengths) - { - for(var index = 0; index < base.printMaterialLengths.length; index++) - { - if(base.printMaterialLengths[index] > 0) - { - names.push(base.printMaterialNames[index]); - lengths.push(base.printMaterialLengths[index].toFixed(2)); - weights.push(String(Math.round(base.printMaterialWeights[index]))); - var cost = base.printMaterialCosts[index] == undefined ? 0 : base.printMaterialCosts[index].toFixed(2); - costs.push(cost); - if(cost > 0) - { - some_costs_known = true; - } - - total_length += base.printMaterialLengths[index]; - total_weight += base.printMaterialWeights[index]; - total_cost += base.printMaterialCosts[index]; - } - } - } - if(lengths.length == 0) - { - lengths = ["0.00"]; - weights = ["0"]; - costs = ["0.00"]; - } - - var tooltip_html = "%1
".arg(catalog.i18nc("@label", "Cost specification")); - for(var index = 0; index < lengths.length; index++) - { - tooltip_html += formatRow([ - "%1:".arg(names[index]), - catalog.i18nc("@label m for meter", "%1m").arg(lengths[index]), - catalog.i18nc("@label g for grams", "%1g").arg(weights[index]), - "%1 %2".arg(UM.Preferences.getValue("cura/currency")).arg(costs[index]), - ]); - } - if(lengths.length > 1) - { - tooltip_html += formatRow([ - catalog.i18nc("@label", "Total:"), - catalog.i18nc("@label m for meter", "%1m").arg(total_length.toFixed(2)), - catalog.i18nc("@label g for grams", "%1g").arg(Math.round(total_weight)), - "%1 %2".arg(UM.Preferences.getValue("cura/currency")).arg(total_cost.toFixed(2)), - ]); - } - tooltip_html += "
"; - tooltipText = tooltip_html; - - return tooltipText - } - - id: costSpec - - anchors.left: parent.left - anchors.bottom: parent.bottom - anchors.bottomMargin: UM.Theme.getSize("thick_margin").height - anchors.leftMargin: UM.Theme.getSize("thick_margin").width - - font: UM.Theme.getFont("very_small") - renderType: Text.NativeRendering - color: UM.Theme.getColor("text_subtext") - elide: Text.ElideMiddle - width: parent.width - property string tooltipText - text: - { - var lengths = []; - var weights = []; - var costs = []; - var someCostsKnown = false; - if(base.printMaterialLengths) - { - for(var index = 0; index < base.printMaterialLengths.length; index++) - { - if(base.printMaterialLengths[index] > 0) - { - lengths.push(base.printMaterialLengths[index].toFixed(2)); - weights.push(String(Math.round(base.printMaterialWeights[index]))); - var cost = base.printMaterialCosts[index] == undefined ? 0 : base.printMaterialCosts[index].toFixed(2); - costs.push(cost); - if(cost > 0) - { - someCostsKnown = true; - } - } - } - } - if(lengths.length == 0) - { - lengths = ["0.00"]; - weights = ["0"]; - costs = ["0.00"]; - } - var result = lengths.join(" + ") + "m / ~ " + weights.join(" + ") + "g"; - if(someCostsKnown) - { - result += " / ~ " + costs.join(" + ") + " " + UM.Preferences.getValue("cura/currency"); - } - return result; - } - - MouseArea - { - id: costSpecMouseArea - anchors.fill: parent - hoverEnabled: true - - onEntered: - { - - if(base.printDuration.valid && !base.printDuration.isTotalDurationZero) - { - var show_data = costSpec.getSpecsData() - - base.showTooltip(parent, Qt.point(-UM.Theme.getSize("thick_margin").width, 0), show_data); - } - } - onExited: - { - base.hideTooltip(); - } - } + id: sliceProcessWidget + SliceProcessWidget { } } - SaveButton + Component { - id: saveButton - width: parent.width - height: 100 * screenScaleFactor - anchors.bottom: parent.bottom + id: outputProcessWidget + OutputProcessWidget { } } } \ No newline at end of file diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml index 3e2515cb3e..1f4d71e460 100644 --- a/resources/qml/Cura.qml +++ b/resources/qml/Cura.qml @@ -312,17 +312,16 @@ UM.MainWindow { anchors.right: parent.right anchors.bottom: parent.bottom - width: UM.Theme.getSize("action_panel_widget").width anchors.rightMargin: UM.Theme.getSize("thick_margin").width anchors.bottomMargin: UM.Theme.getSize("thick_margin").height - onShowTooltip: - { - base.showTooltip(item, location, text) - } - onHideTooltip: - { - base.hideTooltip() - } +// onShowTooltip: +// { +// base.showTooltip(item, location, text) +// } +// onHideTooltip: +// { +// base.hideTooltip() +// } } Loader diff --git a/resources/qml/OutputProcessWidget.qml b/resources/qml/OutputProcessWidget.qml new file mode 100644 index 0000000000..612e4f286f --- /dev/null +++ b/resources/qml/OutputProcessWidget.qml @@ -0,0 +1,72 @@ +// Copyright (c) 2018 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.7 +import QtQuick.Controls 2.1 +import QtQuick.Layouts 1.3 + +import UM 1.1 as UM + +Button +{ + id: button + property alias cursorShape: mouseArea.cursorShape + property alias iconSource: buttonIcon.source + property alias textFont: buttonText.font + property alias cornerRadius: backgroundRect.radius + property var color: UM.Theme.getColor("primary") + property var hoverColor: UM.Theme.getColor("primary_hover") + property var disabledColor: color + property var textColor: UM.Theme.getColor("button_text") + property var textHoverColor: UM.Theme.getColor("button_text_hover") + property var textDisabledColor: textColor + property var outlineColor: color + property var outlineHoverColor: hoverColor + property var outlineDisabledColor: outlineColor + + contentItem: Row + { + UM.RecolorImage + { + id: buttonIcon + source: "" + height: Math.round(0.6 * parent.height) + width: height + sourceSize.width: width + sourceSize.height: height + color: button.hovered ? button.textHoverColor : button.textColor + visible: source != "" + anchors.verticalCenter: parent.verticalCenter + Behavior on color { ColorAnimation { duration: 50 } } + } + + Label + { + id: buttonText + text: "Preview" + color: button.enabled ? (button.hovered ? button.textHoverColor : button.textColor): button.textDisabledColor + font: UM.Theme.getFont("action_button") + visible: text != "" + renderType: Text.NativeRendering + anchors.verticalCenter: parent.verticalCenter + } + } + + background: Rectangle + { + id: backgroundRect + color: button.enabled ? (button.hovered ? button.hoverColor : button.color) : button.disabledColor + radius: UM.Theme.getSize("action_button_radius").width + border.width: UM.Theme.getSize("default_lining").width + border.color: button.enabled ? (button.hovered ? button.outlineHoverColor : button.outlineColor) : button.outlineDisabledColor + Behavior on color { ColorAnimation { duration: 50 } } + } + + MouseArea + { + id: mouseArea + anchors.fill: parent + onPressed: mouse.accepted = false + hoverEnabled: true + } +} diff --git a/resources/qml/SliceProcessWidget.qml b/resources/qml/SliceProcessWidget.qml new file mode 100644 index 0000000000..67005cb133 --- /dev/null +++ b/resources/qml/SliceProcessWidget.qml @@ -0,0 +1,62 @@ +// Copyright (c) 2018 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.7 +import QtQuick.Controls 2.1 +import QtQuick.Layouts 1.3 + +import UM 1.1 as UM +import Cura 1.0 as Cura + +Column +{ + id: widget + + spacing: UM.Theme.getSize("default_margin").height + + UM.I18nCatalog + { + id: catalog + name: "cura" + } + + property real progress: UM.Backend.progress + property int backendState: UM.Backend.state + + Rectangle + { + id: progressBar + width: parent.width + height: UM.Theme.getSize("progressbar").height + visible: widget.backendState == 2 + radius: UM.Theme.getSize("progressbar_radius").width + color: UM.Theme.getColor("progressbar_background") + + Rectangle + { + width: Math.max(parent.width * base.progress) + height: parent.height + radius: UM.Theme.getSize("progressbar_radius").width + color: UM.Theme.getColor("progressbar_control") + } + } + + Cura.ActionButton + { + id: prepareButton + width: UM.Theme.getSize("action_panel_button").width + height: UM.Theme.getSize("action_panel_button").height + text: widget.backendState == 1 ? catalog.i18nc("@button", "Prepare") : catalog.i18nc("@button", "Cancel") + onClicked: + { + if ([1, 5].indexOf(widget.backendState) != -1) + { + CuraApplication.backend.forceSlice() + } + else + { + CuraApplication.backend.stopSlicing() + } + } + } +} diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 29e3774e1f..e840a08a75 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -378,10 +378,14 @@ "configuration_selector_mode_tabs": [0.0, 3.0], "action_panel_widget": [35.0, 0.0], + "action_panel_button": [15.0, 3.0], + "machine_selector_widget": [28.0, 4.5], "views_selector": [0.0, 4.0], + "default_radius": [0.25, 0.25], + "wide_lining": [0.5, 0.5], "thick_lining": [0.2, 0.2], "default_lining": [0.08, 0.08],