From bf59097320d7f5eaf4bd072cde2d8a841d27c550 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Mon, 29 Oct 2018 15:18:34 +0100 Subject: [PATCH 01/21] 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], From e486bf8b440dd3a392779821e4720f53537f66c3 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Mon, 29 Oct 2018 15:55:16 +0100 Subject: [PATCH 02/21] Change the primary color to a slightly different kind of blue. Contributes to CURA-5786. --- resources/themes/cura-light/theme.json | 48 +++++++++++++------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index e840a08a75..cbd5b29e87 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -75,7 +75,7 @@ "lining": [192, 193, 194, 255], "viewport_overlay": [0, 0, 0, 192], - "primary": [12, 169, 227, 255], + "primary": [50, 130, 255, 255], "primary_hover": [48, 182, 231, 255], "primary_text": [255, 255, 255, 255], "border": [127, 127, 127, 255], @@ -106,10 +106,10 @@ "text": [0, 0, 0, 255], "text_detail": [174, 174, 174, 128], - "text_link": [12, 169, 227, 255], + "text_link": [50, 130, 255, 255], "text_inactive": [174, 174, 174, 255], "text_hover": [70, 84, 113, 255], - "text_pressed": [12, 169, 227, 255], + "text_pressed": [50, 130, 255, 255], "text_subtext": [0, 0, 0, 255], "text_medium": [128, 128, 128, 255], "text_emphasis": [255, 255, 255, 255], @@ -152,16 +152,16 @@ "action_button_border": [127, 127, 127, 255], "action_button_hovered": [255, 255, 255, 255], "action_button_hovered_text": [31, 36, 39, 255], - "action_button_hovered_border": [12, 169, 227, 255], + "action_button_hovered_border": [50, 130, 255, 255], "action_button_active": [255, 255, 255, 255], "action_button_active_text": [0, 0, 0, 255], - "action_button_active_border": [12, 169, 227, 255], + "action_button_active_border": [50, 130, 255, 255], "action_button_disabled": [245, 245, 245, 255], "action_button_disabled_text": [127, 127, 127, 255], "action_button_disabled_border": [245, 245, 245, 255], - "print_button_ready": [12, 169, 227, 255], - "print_button_ready_border": [12, 169, 227, 255], + "print_button_ready": [50, 130, 255, 255], + "print_button_ready_border": [50, 130, 255, 255], "print_button_ready_text": [255, 255, 255, 255], "print_button_ready_hovered": [30, 186, 245, 243], "print_button_ready_hovered_border": [30, 186, 245, 243], @@ -193,7 +193,7 @@ "setting_control_selected": [31, 36, 39, 255], "setting_control_highlight": [255, 255, 255, 255], "setting_control_border": [127, 127, 127, 255], - "setting_control_border_highlight": [12, 169, 227, 255], + "setting_control_border_highlight": [50, 130, 255, 255], "setting_control_text": [27, 27, 27, 255], "setting_control_depth_line": [127, 127, 127, 255], "setting_control_button": [127, 127, 127, 255], @@ -231,18 +231,18 @@ "checkbox": [255, 255, 255, 255], "checkbox_hover": [255, 255, 255, 255], "checkbox_border": [64, 69, 72, 255], - "checkbox_border_hover": [12, 169, 227, 255], + "checkbox_border_hover": [50, 130, 255, 255], "checkbox_mark": [119, 122, 124, 255], "checkbox_text": [27, 27, 27, 255], "mode_switch": [255, 255, 255, 255], "mode_switch_hover": [255, 255, 255, 255], "mode_switch_border": [127, 127, 127, 255], - "mode_switch_border_hover": [12, 169, 227, 255], + "mode_switch_border_hover": [50, 130, 255, 255], "mode_switch_handle": [31, 36, 39, 255], "mode_switch_text": [31, 36, 39, 255], "mode_switch_text_hover": [31, 36, 39, 255], - "mode_switch_text_checked": [12, 169, 227, 255], + "mode_switch_text_checked": [50, 130, 255, 255], "tooltip": [68, 192, 255, 255], "tooltip_text": [255, 255, 255, 255], @@ -253,9 +253,9 @@ "message_shadow": [0, 0, 0, 120], "message_border": [127, 127, 127, 255], "message_text": [0, 0, 0, 255], - "message_button": [12, 169, 227, 255], - "message_button_hover": [12, 169, 227, 255], - "message_button_active": [12, 169, 227, 255], + "message_button": [50, 130, 255, 255], + "message_button_hover": [50, 130, 255, 255], + "message_button_active": [50, 130, 255, 255], "message_button_text": [255, 255, 255, 255], "message_button_text_hover": [255, 255, 255, 255], "message_button_text_active": [255, 255, 255, 255], @@ -266,7 +266,7 @@ "status_offline": [0, 0, 0, 255], "status_ready": [0, 205, 0, 255], - "status_busy": [12, 169, 227, 255], + "status_busy": [50, 130, 255, 255], "status_paused": [255, 140, 0, 255], "status_stopped": [236, 82, 80, 255], "status_unknown": [127, 127, 127, 255], @@ -278,7 +278,7 @@ "all_axis": [255, 255, 255, 255], "viewport_background": [245, 245, 245, 255], - "volume_outline": [12, 169, 227, 255], + "volume_outline": [50, 130, 255, 255], "buildplate": [244, 244, 244, 255], "buildplate_grid": [129, 131, 134, 255], "buildplate_grid_minor": [230, 230, 231, 255], @@ -291,7 +291,7 @@ "model_overhang": [255, 0, 0, 255], "model_unslicable": [122, 122, 122, 255], "model_unslicable_alt": [172, 172, 127, 255], - "model_selection_outline": [12, 169, 227, 255], + "model_selection_outline": [50, 130, 255, 255], "model_non_printing": [122, 122, 122, 255], "xray": [26, 26, 62, 255], @@ -317,12 +317,12 @@ "configuration_item_text_active": [0, 0, 0, 255], "configuration_item_border": [127, 127, 127, 255], "configuration_item_border_active": [12, 169, 227, 32], - "configuration_item_border_hover": [12, 169, 227, 255], + "configuration_item_border_hover": [50, 130, 255, 255], - "tab_status_connected": [12, 169, 227, 255], + "tab_status_connected": [50, 130, 255, 255], "tab_status_disconnected": [200, 200, 200, 255], - "printer_config_matched": [12, 169, 227, 255], + "printer_config_matched": [50, 130, 255, 255], "printer_config_mismatch": [127, 127, 127, 255], "toolbox_header_button_text_active": [0, 0, 0, 255], @@ -346,12 +346,12 @@ "monitor_pill_background": [245, 245, 245, 255], "monitor_placeholder_image": [230, 230, 230, 255], "monitor_printer_icon_inactive": [154, 154, 154, 255], - "monitor_printer_icon": [12, 169, 227, 255], + "monitor_printer_icon": [50, 130, 255, 255], "monitor_progress_background_text": [0,0,0,255], "monitor_progress_background": [245, 245, 245, 255], "monitor_progress_fill_inactive": [154, 154, 154, 255], "monitor_progress_fill_text": [255,255,255,255], - "monitor_progress_fill": [12, 169, 227, 255], + "monitor_progress_fill": [50, 130, 255, 255], "monitor_shadow": [0, 0, 0, 63], "monitor_skeleton_fill": [245, 245, 245, 255], "monitor_skeleton_fill_dark": [216, 216, 216, 255], @@ -440,8 +440,8 @@ "tool_button_border": [1.0, 0], - "progressbar": [26.0, 0.4], - "progressbar_radius": [0, 0], + "progressbar": [26.0, 0.75], + "progressbar_radius": [0.15, 0.15], "progressbar_control": [8.0, 0.4], "scrollbar": [0.75, 0.5], From 79ed15aee19a757a3c09cd8ad0c634b57d34a527 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 30 Oct 2018 11:52:08 +0100 Subject: [PATCH 03/21] Add the label and the icon indicating when Cura is unable to slice. Contributes to CURA-5786. --- resources/qml/ActionPanelWidget.qml | 1 + resources/qml/SliceProcessWidget.qml | 87 +++++++++++++++++++++++--- resources/themes/cura-light/theme.json | 3 +- 3 files changed, 80 insertions(+), 11 deletions(-) diff --git a/resources/qml/ActionPanelWidget.qml b/resources/qml/ActionPanelWidget.qml index d1fe999731..b4a9b4e4ec 100644 --- a/resources/qml/ActionPanelWidget.qml +++ b/resources/qml/ActionPanelWidget.qml @@ -37,6 +37,7 @@ Rectangle } Behavior on height { NumberAnimation { duration: 100 } } + Behavior on width { NumberAnimation { duration: 100 } } Component { diff --git a/resources/qml/SliceProcessWidget.qml b/resources/qml/SliceProcessWidget.qml index 67005cb133..561e38c372 100644 --- a/resources/qml/SliceProcessWidget.qml +++ b/resources/qml/SliceProcessWidget.qml @@ -12,7 +12,9 @@ Column { id: widget - spacing: UM.Theme.getSize("default_margin").height + width: UM.Theme.getSize("action_panel_button").width + + spacing: UM.Theme.getSize("thin_margin").height UM.I18nCatalog { @@ -23,30 +25,84 @@ Column property real progress: UM.Backend.progress property int backendState: UM.Backend.state - Rectangle + Item + { + id: message + width: parent.width + height: childrenRect.height + visible: widget.backendState == 4 + + UM.RecolorImage + { + id: warningImage + + anchors.left: parent.left + + source: UM.Theme.getIcon("warning") + width: UM.Theme.getSize("section_icon").width + height: UM.Theme.getSize("section_icon").height + + sourceSize.width: width + sourceSize.height: height + + color: UM.Theme.getColor("warning") + } + + Label + { + id: unableToSliceLabel + anchors.left: warningImage.right + anchors.leftMargin: UM.Theme.getSize("thin_margin").width + text: catalog.i18nc("@label:PrintjobStatus", "Unable to Slice") + color: UM.Theme.getColor("warning") + font: UM.Theme.getFont("very_small") + } + } + + // Progress bar, only visible when the backend is in the process of slice the printjob + ProgressBar { id: progressBar width: parent.width height: UM.Theme.getSize("progressbar").height + value: progress visible: widget.backendState == 2 - radius: UM.Theme.getSize("progressbar_radius").width - color: UM.Theme.getColor("progressbar_background") - Rectangle + background: Rectangle { - width: Math.max(parent.width * base.progress) - height: parent.height + anchors.fill: parent radius: UM.Theme.getSize("progressbar_radius").width - color: UM.Theme.getColor("progressbar_control") + color: UM.Theme.getColor("progressbar_background") + } + + contentItem: Item + { + anchors.fill: parent + Rectangle + { + width: progressBar.visualPosition * parent.width + 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 + width: parent.width height: UM.Theme.getSize("action_panel_button").height - text: widget.backendState == 1 ? catalog.i18nc("@button", "Prepare") : catalog.i18nc("@button", "Cancel") + text: autoSlice ? catalog.i18nc("@button", "Auto slicing...") : (widget.backendState == 1 ? catalog.i18nc("@button", "Slice") : catalog.i18nc("@button", "Cancel")) + enabled: !autoSlice + + // Get the current value from the preferences + property bool autoSlice: UM.Preferences.getValue("general/auto_slice") + + disabledColor: "transparent" + textDisabledColor: UM.Theme.getColor("primary") + outlineDisabledColor: "transparent" + onClicked: { if ([1, 5].indexOf(widget.backendState) != -1) @@ -59,4 +115,15 @@ Column } } } + + // React when the user changes the preference of having the auto slice enabled + Connections + { + target: UM.Preferences + onPreferenceChanged: + { + var autoSlice = UM.Preferences.getValue("general/auto_slice") + prepareButton.autoSlice = autoSlice + } + } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index d695ba12cf..1473a75eec 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -116,6 +116,7 @@ "text_scene_hover": [70, 84, 113, 255], "error": [255, 140, 0, 255], + "warning": [255, 190, 35, 255], "button": [31, 36, 39, 255], "button_hover": [68, 72, 75, 255], @@ -210,7 +211,7 @@ "material_compatibility_warning": [0, 0, 0, 255], "progressbar_background": [245, 245, 245, 255], - "progressbar_control": [31, 36, 39, 255], + "progressbar_control": [50, 130, 255, 255], "slider_groove": [245, 245, 245, 255], "slider_groove_border": [127, 127, 127, 255], From 45af4eec907a0113145cc15f14b11fa1b5185a51 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 30 Oct 2018 12:08:17 +0100 Subject: [PATCH 04/21] Add Shortcut action Ctrl+P to slice or stop slicing. Contributes to CURA-5786. --- resources/qml/SliceProcessWidget.qml | 58 +++++++++++++++++++++------- 1 file changed, 44 insertions(+), 14 deletions(-) diff --git a/resources/qml/SliceProcessWidget.qml b/resources/qml/SliceProcessWidget.qml index 561e38c372..c9ff7178fd 100644 --- a/resources/qml/SliceProcessWidget.qml +++ b/resources/qml/SliceProcessWidget.qml @@ -4,6 +4,7 @@ import QtQuick 2.7 import QtQuick.Controls 2.1 import QtQuick.Layouts 1.3 +import QtQuick.Controls 1.4 as Controls1 import UM 1.1 as UM import Cura 1.0 as Cura @@ -25,12 +26,24 @@ Column property real progress: UM.Backend.progress property int backendState: UM.Backend.state + function sliceOrStopSlicing() + { + if ([1, 5].indexOf(widget.backendState) != -1) // == BackendState.NotStarted or BackendState.Disabled + { + CuraApplication.backend.forceSlice() + } + else + { + CuraApplication.backend.stopSlicing() + } + } + Item { id: message width: parent.width height: childrenRect.height - visible: widget.backendState == 4 + visible: widget.backendState == 4 // == BackendState.Error UM.RecolorImage { @@ -66,7 +79,7 @@ Column width: parent.width height: UM.Theme.getSize("progressbar").height value: progress - visible: widget.backendState == 2 + visible: widget.backendState == 2 // == BackendState.Processing background: Rectangle { @@ -93,7 +106,21 @@ Column id: prepareButton width: parent.width height: UM.Theme.getSize("action_panel_button").height - text: autoSlice ? catalog.i18nc("@button", "Auto slicing...") : (widget.backendState == 1 ? catalog.i18nc("@button", "Slice") : catalog.i18nc("@button", "Cancel")) + text: + { + if (autoSlice) + { + return catalog.i18nc("@button", "Auto slicing...") + } + else if ([1, 5].indexOf(widget.backendState) != -1) // == BackendState.NotStarted or BackendState.Disabled + { + return catalog.i18nc("@button", "Slice") + } + else + { + return catalog.i18nc("@button", "Cancel") + } + } enabled: !autoSlice // Get the current value from the preferences @@ -103,17 +130,7 @@ Column textDisabledColor: UM.Theme.getColor("primary") outlineDisabledColor: "transparent" - onClicked: - { - if ([1, 5].indexOf(widget.backendState) != -1) - { - CuraApplication.backend.forceSlice() - } - else - { - CuraApplication.backend.stopSlicing() - } - } + onClicked: sliceOrStopSlicing() } // React when the user changes the preference of having the auto slice enabled @@ -126,4 +143,17 @@ Column prepareButton.autoSlice = autoSlice } } + + // Shortcut for "slice/stop" + Controls1.Action + { + shortcut: "Ctrl+P" + onTriggered: + { + if (prepareButton.enabled) + { + sliceOrStopSlicing() + } + } + } } From 00d75cd4d600866933147e9a0ae75e790ebf95e6 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 30 Oct 2018 12:28:51 +0100 Subject: [PATCH 05/21] Tweak the colors of the disabled state. Contributes to CURA-5786. --- resources/qml/SliceProcessWidget.qml | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/resources/qml/SliceProcessWidget.qml b/resources/qml/SliceProcessWidget.qml index c9ff7178fd..98f708a9b0 100644 --- a/resources/qml/SliceProcessWidget.qml +++ b/resources/qml/SliceProcessWidget.qml @@ -108,27 +108,24 @@ Column height: UM.Theme.getSize("action_panel_button").height text: { + if ([1, 4, 5].indexOf(widget.backendState) != -1) // == BackendState.NotStarted or BackendState.Error or BackendState.Disabled + { + return catalog.i18nc("@button", "Slice") + } if (autoSlice) { return catalog.i18nc("@button", "Auto slicing...") } - else if ([1, 5].indexOf(widget.backendState) != -1) // == BackendState.NotStarted or BackendState.Disabled - { - return catalog.i18nc("@button", "Slice") - } - else - { - return catalog.i18nc("@button", "Cancel") - } + return catalog.i18nc("@button", "Cancel") } - enabled: !autoSlice + enabled: !autoSlice && ([1, 2].indexOf(widget.backendState) != -1) // Get the current value from the preferences property bool autoSlice: UM.Preferences.getValue("general/auto_slice") - disabledColor: "transparent" - textDisabledColor: UM.Theme.getColor("primary") - outlineDisabledColor: "transparent" + disabledColor: ([1, 2].indexOf(widget.backendState) == -1) ? UM.Theme.getColor("action_button_disabled") : "transparent" + textDisabledColor: ([1, 2].indexOf(widget.backendState) == -1) ? UM.Theme.getColor("action_button_disabled_text") : UM.Theme.getColor("primary") + outlineDisabledColor: ([1, 2].indexOf(widget.backendState) == -1) ? UM.Theme.getColor("action_button_disabled_border") : "transparent" onClicked: sliceOrStopSlicing() } From 027bf204cd1ff6dba53b9e386e183d2251718020 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 30 Oct 2018 15:12:03 +0100 Subject: [PATCH 06/21] Use the BackendState enumeration in QML to not use integers but use the enumeration literals. Contributes to CURA-5786. --- resources/qml/SliceProcessWidget.qml | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/resources/qml/SliceProcessWidget.qml b/resources/qml/SliceProcessWidget.qml index 98f708a9b0..b9c0dc39f9 100644 --- a/resources/qml/SliceProcessWidget.qml +++ b/resources/qml/SliceProcessWidget.qml @@ -28,7 +28,7 @@ Column function sliceOrStopSlicing() { - if ([1, 5].indexOf(widget.backendState) != -1) // == BackendState.NotStarted or BackendState.Disabled + if ([UM.Backend.NotStarted, UM.Backend.Disabled].indexOf(widget.backendState) != -1) { CuraApplication.backend.forceSlice() } @@ -43,7 +43,7 @@ Column id: message width: parent.width height: childrenRect.height - visible: widget.backendState == 4 // == BackendState.Error + visible: widget.backendState == UM.Backend.Error UM.RecolorImage { @@ -79,7 +79,7 @@ Column width: parent.width height: UM.Theme.getSize("progressbar").height value: progress - visible: widget.backendState == 2 // == BackendState.Processing + visible: widget.backendState == UM.Backend.Processing background: Rectangle { @@ -108,7 +108,7 @@ Column height: UM.Theme.getSize("action_panel_button").height text: { - if ([1, 4, 5].indexOf(widget.backendState) != -1) // == BackendState.NotStarted or BackendState.Error or BackendState.Disabled + if ([UM.Backend.NotStarted, UM.Backend.Error, UM.Backend.Disabled].indexOf(widget.backendState) != -1) { return catalog.i18nc("@button", "Slice") } @@ -118,14 +118,16 @@ Column } return catalog.i18nc("@button", "Cancel") } - enabled: !autoSlice && ([1, 2].indexOf(widget.backendState) != -1) + enabled: !autoSlice && !disabledSlice // Get the current value from the preferences property bool autoSlice: UM.Preferences.getValue("general/auto_slice") + // Disable the slice process when + property bool disabledSlice: [UM.Backend.Done, UM.Backend.Error, UM.Backend.Disabled].indexOf(widget.backendState) != -1 - disabledColor: ([1, 2].indexOf(widget.backendState) == -1) ? UM.Theme.getColor("action_button_disabled") : "transparent" - textDisabledColor: ([1, 2].indexOf(widget.backendState) == -1) ? UM.Theme.getColor("action_button_disabled_text") : UM.Theme.getColor("primary") - outlineDisabledColor: ([1, 2].indexOf(widget.backendState) == -1) ? UM.Theme.getColor("action_button_disabled_border") : "transparent" + disabledColor: disabledSlice ? UM.Theme.getColor("action_button_disabled") : "transparent" + textDisabledColor: disabledSlice ? UM.Theme.getColor("action_button_disabled_text") : UM.Theme.getColor("primary") + outlineDisabledColor: disabledSlice ? UM.Theme.getColor("action_button_disabled_border") : "transparent" onClicked: sliceOrStopSlicing() } From eabd7c6b5eac0fa4fd63b2f8bb9177dd115b0767 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 30 Oct 2018 17:07:07 +0100 Subject: [PATCH 07/21] Start mocking up the panel the user gets after slicing. Also the IconLabel component was created with the aim to be reused in several places. Contributes to CURA-5786. --- resources/qml/ActionPanelWidget.qml | 2 +- resources/qml/IconLabel.qml | 48 +++++++ resources/qml/OutputProcessWidget.qml | 139 ++++++++++++-------- resources/qml/SliceProcessWidget.qml | 32 +---- resources/qml/qmldir | 3 +- resources/themes/cura-light/icons/clock.svg | 53 ++++++++ resources/themes/cura-light/icons/info.svg | 48 +++++++ resources/themes/cura-light/icons/spool.svg | 7 + 8 files changed, 251 insertions(+), 81 deletions(-) create mode 100644 resources/qml/IconLabel.qml create mode 100644 resources/themes/cura-light/icons/clock.svg create mode 100644 resources/themes/cura-light/icons/info.svg create mode 100644 resources/themes/cura-light/icons/spool.svg diff --git a/resources/qml/ActionPanelWidget.qml b/resources/qml/ActionPanelWidget.qml index b4a9b4e4ec..6c76c31f1b 100644 --- a/resources/qml/ActionPanelWidget.qml +++ b/resources/qml/ActionPanelWidget.qml @@ -21,7 +21,7 @@ Rectangle radius: UM.Theme.getSize("default_radius").width visible: CuraApplication.platformActivity - property bool backendStatusDone: UM.Backend.state == 3 + property bool backendStatusDone: UM.Backend.state == UM.Backend.Done Loader { diff --git a/resources/qml/IconLabel.qml b/resources/qml/IconLabel.qml new file mode 100644 index 0000000000..2e765e2dbc --- /dev/null +++ b/resources/qml/IconLabel.qml @@ -0,0 +1,48 @@ +// 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 + +// This item will show a label with a squared icon in the left +Item +{ + id: container + + property alias text: label.text + property alias source: icon.source + property alias color: label.color + property alias font: label.font + + height: childrenRect.height + + UM.RecolorImage + { + id: icon + + anchors.left: parent.left + + source: UM.Theme.getIcon("dot") + width: UM.Theme.getSize("section_icon").width + height: UM.Theme.getSize("section_icon").height + + sourceSize.width: width + sourceSize.height: height + + color: label.color + } + + Label + { + id: label + anchors.left: icon.right + anchors.leftMargin: UM.Theme.getSize("thin_margin").width + text: "Empty label" + color: UM.Theme.getColor("text") + font: UM.Theme.getFont("very_small") + renderType: Text.NativeRendering + } +} \ No newline at end of file diff --git a/resources/qml/OutputProcessWidget.qml b/resources/qml/OutputProcessWidget.qml index 612e4f286f..244fba57ef 100644 --- a/resources/qml/OutputProcessWidget.qml +++ b/resources/qml/OutputProcessWidget.qml @@ -4,69 +4,104 @@ import QtQuick 2.7 import QtQuick.Controls 2.1 import QtQuick.Layouts 1.3 +import QtQuick.Controls 1.4 as Controls1 import UM 1.1 as UM +import Cura 1.0 as Cura -Button +Column { - 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 + id: widget - contentItem: Row + spacing: UM.Theme.getSize("thin_margin").height + + UM.I18nCatalog { + id: catalog + name: "cura" + } + + Item + { + id: information + width: parent.width + height: childrenRect.height + + Column + { + id: timeAndCostsInformation + + anchors + { + left: parent.left + right: moreInformationIcon.left + rightMargin: UM.Theme.getSize("thin_margin").height + } + + Cura.IconLabel + { + id: estimatedTime + width: parent.width + + text: "Time" + source: UM.Theme.getIcon("clock") + font: UM.Theme.getFont("small") + } + + Cura.IconLabel + { + id: estimatedCosts + width: parent.width + + text: "Material costs" + source: UM.Theme.getIcon("spool") + font: UM.Theme.getFont("very_small") + } + } + UM.RecolorImage { - id: buttonIcon - source: "" - height: Math.round(0.6 * parent.height) - width: height + id: moreInformationIcon + + anchors + { + right: parent.right + verticalCenter: timeAndCostsInformation.verticalCenter + } + + source: UM.Theme.getIcon("info") + width: UM.Theme.getSize("section_icon").width + height: UM.Theme.getSize("section_icon").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 + color: UM.Theme.getColor("text_medium") + } + } + + Row + { + id: buttonRow + spacing: UM.Theme.getSize("default_margin").width + + Cura.ActionButton { - 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 + height: UM.Theme.getSize("action_panel_button").height + text: catalog.i18nc("@button", "Preview") + color: UM.Theme.getColor("secondary") + hoverColor: UM.Theme.getColor("secondary") + textColor: UM.Theme.getColor("primary") + textHoverColor: UM.Theme.getColor("text") + onClicked: console.log("Clicking preview") + } + + Cura.ActionButton + { + width: UM.Theme.getSize("account_button").width + height: UM.Theme.getSize("action_panel_button").height + text: catalog.i18nc("@button", "Save to file") + onClicked: console.log("Clicking action button") } } - - 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 - } -} +} \ No newline at end of file diff --git a/resources/qml/SliceProcessWidget.qml b/resources/qml/SliceProcessWidget.qml index b9c0dc39f9..38a529b04e 100644 --- a/resources/qml/SliceProcessWidget.qml +++ b/resources/qml/SliceProcessWidget.qml @@ -38,38 +38,16 @@ Column } } - Item + Cura.IconLabel { id: message width: parent.width - height: childrenRect.height visible: widget.backendState == UM.Backend.Error - UM.RecolorImage - { - id: warningImage - - anchors.left: parent.left - - source: UM.Theme.getIcon("warning") - width: UM.Theme.getSize("section_icon").width - height: UM.Theme.getSize("section_icon").height - - sourceSize.width: width - sourceSize.height: height - - color: UM.Theme.getColor("warning") - } - - Label - { - id: unableToSliceLabel - anchors.left: warningImage.right - anchors.leftMargin: UM.Theme.getSize("thin_margin").width - text: catalog.i18nc("@label:PrintjobStatus", "Unable to Slice") - color: UM.Theme.getColor("warning") - font: UM.Theme.getFont("very_small") - } + text: catalog.i18nc("@label:PrintjobStatus", "Unable to Slice") + source: UM.Theme.getIcon("warning") + color: UM.Theme.getColor("warning") + font: UM.Theme.getFont("very_small") } // Progress bar, only visible when the backend is in the process of slice the printjob diff --git a/resources/qml/qmldir b/resources/qml/qmldir index 0e5e316409..22e3ff1303 100644 --- a/resources/qml/qmldir +++ b/resources/qml/qmldir @@ -7,4 +7,5 @@ PrintSetupSelector 1.0 PrintSetupSelector.qml ActionButton 1.0 ActionButton.qml MaterialMenu 1.0 MaterialMenu.qml NozzleMenu 1.0 NozzleMenu.qml -ActionPanelWidget 1.0 ActionPanelWidget.qml \ No newline at end of file +ActionPanelWidget 1.0 ActionPanelWidget.qml +IconLabel 1.0 IconLabel.qml \ No newline at end of file diff --git a/resources/themes/cura-light/icons/clock.svg b/resources/themes/cura-light/icons/clock.svg new file mode 100644 index 0000000000..0b6cb78881 --- /dev/null +++ b/resources/themes/cura-light/icons/clock.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/themes/cura-light/icons/info.svg b/resources/themes/cura-light/icons/info.svg new file mode 100644 index 0000000000..97e4fc4f35 --- /dev/null +++ b/resources/themes/cura-light/icons/info.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/themes/cura-light/icons/spool.svg b/resources/themes/cura-light/icons/spool.svg new file mode 100644 index 0000000000..0d8ae42d9d --- /dev/null +++ b/resources/themes/cura-light/icons/spool.svg @@ -0,0 +1,7 @@ + + + + + + + From ec0d9f09b7a800f073422c102f679d7a24d44a48 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Wed, 31 Oct 2018 17:03:09 +0100 Subject: [PATCH 08/21] Create a component for selecting the output device before output the file. Contributes to CURA-5786. --- resources/qml/ActionButton.qml | 9 ++ resources/qml/ActionPanelWidget.qml | 4 +- resources/qml/OutputDevicesActionButton.qml | 98 +++++++++++++++++++++ resources/qml/OutputProcessWidget.qml | 6 +- resources/qml/SliceProcessWidget.qml | 6 +- resources/qml/qmldir | 3 +- 6 files changed, 116 insertions(+), 10 deletions(-) create mode 100644 resources/qml/OutputDevicesActionButton.qml diff --git a/resources/qml/ActionButton.qml b/resources/qml/ActionButton.qml index a1c03af143..05e75ac8c5 100644 --- a/resources/qml/ActionButton.qml +++ b/resources/qml/ActionButton.qml @@ -14,6 +14,7 @@ Button property alias iconSource: buttonIcon.source property alias textFont: buttonText.font property alias cornerRadius: backgroundRect.radius + property alias tooltip: tooltip.text property var color: UM.Theme.getColor("primary") property var hoverColor: UM.Theme.getColor("primary_hover") property var disabledColor: color @@ -62,6 +63,14 @@ Button Behavior on color { ColorAnimation { duration: 50 } } } + ToolTip + { + id: tooltip + text: "" + delay: 500 + visible: text != "" && button.hovered + } + MouseArea { id: mouseArea diff --git a/resources/qml/ActionPanelWidget.qml b/resources/qml/ActionPanelWidget.qml index 6c76c31f1b..417883af6f 100644 --- a/resources/qml/ActionPanelWidget.qml +++ b/resources/qml/ActionPanelWidget.qml @@ -21,7 +21,7 @@ Rectangle radius: UM.Theme.getSize("default_radius").width visible: CuraApplication.platformActivity - property bool backendStatusDone: UM.Backend.state == UM.Backend.Done + property bool outputAvailable: UM.Backend.state == UM.Backend.Done || UM.Backend.state == UM.Backend.Disabled Loader { @@ -33,7 +33,7 @@ Rectangle left: parent.left leftMargin: UM.Theme.getSize("thick_margin").width } - sourceComponent: backendStatusDone ? outputProcessWidget : sliceProcessWidget + sourceComponent: outputAvailable ? outputProcessWidget : sliceProcessWidget } Behavior on height { NumberAnimation { duration: 100 } } diff --git a/resources/qml/OutputDevicesActionButton.qml b/resources/qml/OutputDevicesActionButton.qml new file mode 100644 index 0000000000..b0cca0eba0 --- /dev/null +++ b/resources/qml/OutputDevicesActionButton.qml @@ -0,0 +1,98 @@ +// 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 + +Item +{ + id: widget + + Cura.ActionButton + { + id: saveToButton + height: parent.height + + anchors + { + top: parent.top + left: parent.left + right: deviceSelectionMenu.visible ? deviceSelectionMenu.left : parent.right + } + + tooltip: UM.OutputDeviceManager.activeDeviceDescription + + text: UM.OutputDeviceManager.activeDeviceShortDescription + + onClicked: + { + forceActiveFocus(); + UM.OutputDeviceManager.requestWriteToDevice(UM.OutputDeviceManager.activeDevice, PrintInformation.jobName, + { "filter_by_machine": true, "preferred_mimetypes": Cura.MachineManager.activeMachine.preferred_output_file_formats }); + } + } + + Cura.ActionButton + { + id: deviceSelectionMenu + height: parent.height + + anchors + { + top: parent.top + right: parent.right + } + + tooltip: catalog.i18nc("@info:tooltip", "Select the active output device") + iconSource: popup.opened ? UM.Theme.getIcon("arrow_top") : UM.Theme.getIcon("arrow_bottom") + visible: (devicesModel.deviceCount > 1) + + onClicked: popup.opened ? popup.close() : popup.open() + + Popup + { + id: popup + + y: -height + x: parent.width - width + + closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent + + contentItem: Column + { + Repeater + { + model: devicesModel + + delegate: Cura.ActionButton + { + text: model.description + color: "transparent" + hoverColor: "red" + + onClicked: + { + UM.OutputDeviceManager.setActiveDevice(model.id) + popup.close() + } + } + } + } + + background: Rectangle + { + opacity: visible ? 1 : 0 + Behavior on opacity { NumberAnimation { duration: 100 } } + color: UM.Theme.getColor("primary") + border.color: UM.Theme.getColor("lining") + border.width: UM.Theme.getSize("default_lining").width + } + } + } + + UM.OutputDevicesModel { id: devicesModel } +} \ No newline at end of file diff --git a/resources/qml/OutputProcessWidget.qml b/resources/qml/OutputProcessWidget.qml index 244fba57ef..d3f306fed5 100644 --- a/resources/qml/OutputProcessWidget.qml +++ b/resources/qml/OutputProcessWidget.qml @@ -96,12 +96,10 @@ Column onClicked: console.log("Clicking preview") } - Cura.ActionButton + Cura.OutputDevicesActionButton { - width: UM.Theme.getSize("account_button").width + width: UM.Theme.getSize("action_panel_button").width height: UM.Theme.getSize("action_panel_button").height - text: catalog.i18nc("@button", "Save to file") - onClicked: console.log("Clicking action button") } } } \ No newline at end of file diff --git a/resources/qml/SliceProcessWidget.qml b/resources/qml/SliceProcessWidget.qml index 38a529b04e..3ea6e09975 100644 --- a/resources/qml/SliceProcessWidget.qml +++ b/resources/qml/SliceProcessWidget.qml @@ -28,7 +28,7 @@ Column function sliceOrStopSlicing() { - if ([UM.Backend.NotStarted, UM.Backend.Disabled].indexOf(widget.backendState) != -1) + if (widget.backendState == UM.Backend.NotStarted) { CuraApplication.backend.forceSlice() } @@ -86,7 +86,7 @@ Column height: UM.Theme.getSize("action_panel_button").height text: { - if ([UM.Backend.NotStarted, UM.Backend.Error, UM.Backend.Disabled].indexOf(widget.backendState) != -1) + if ([UM.Backend.NotStarted, UM.Backend.Error].indexOf(widget.backendState) != -1) { return catalog.i18nc("@button", "Slice") } @@ -101,7 +101,7 @@ Column // Get the current value from the preferences property bool autoSlice: UM.Preferences.getValue("general/auto_slice") // Disable the slice process when - property bool disabledSlice: [UM.Backend.Done, UM.Backend.Error, UM.Backend.Disabled].indexOf(widget.backendState) != -1 + property bool disabledSlice: [UM.Backend.Done, UM.Backend.Error].indexOf(widget.backendState) != -1 disabledColor: disabledSlice ? UM.Theme.getColor("action_button_disabled") : "transparent" textDisabledColor: disabledSlice ? UM.Theme.getColor("action_button_disabled_text") : UM.Theme.getColor("primary") diff --git a/resources/qml/qmldir b/resources/qml/qmldir index 22e3ff1303..d5e4106d33 100644 --- a/resources/qml/qmldir +++ b/resources/qml/qmldir @@ -8,4 +8,5 @@ ActionButton 1.0 ActionButton.qml MaterialMenu 1.0 MaterialMenu.qml NozzleMenu 1.0 NozzleMenu.qml ActionPanelWidget 1.0 ActionPanelWidget.qml -IconLabel 1.0 IconLabel.qml \ No newline at end of file +IconLabel 1.0 IconLabel.qml +OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml \ No newline at end of file From 3a7ae58563613088006fe0cb386d20e4dad76bd2 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Wed, 31 Oct 2018 17:23:38 +0100 Subject: [PATCH 09/21] Small changes in the buttons to fit with the designs. Contributes to CURA-5786. --- resources/qml/OutputDevicesActionButton.qml | 9 +++++++-- resources/themes/cura-light/theme.json | 2 ++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/resources/qml/OutputDevicesActionButton.qml b/resources/qml/OutputDevicesActionButton.qml index b0cca0eba0..11be11a2b0 100644 --- a/resources/qml/OutputDevicesActionButton.qml +++ b/resources/qml/OutputDevicesActionButton.qml @@ -49,6 +49,7 @@ Item tooltip: catalog.i18nc("@info:tooltip", "Select the active output device") iconSource: popup.opened ? UM.Theme.getIcon("arrow_top") : UM.Theme.getIcon("arrow_bottom") + color: UM.Theme.getColor("action_panel_secondary") visible: (devicesModel.deviceCount > 1) onClicked: popup.opened ? popup.close() : popup.open() @@ -56,6 +57,7 @@ Item Popup { id: popup + padding: 0 y: -height x: parent.width - width @@ -72,7 +74,9 @@ Item { text: model.description color: "transparent" - hoverColor: "red" + outlineColor: "transparent" + cornerRadius: 0 + hoverColor: UM.Theme.getColor("primary") onClicked: { @@ -87,7 +91,8 @@ Item { opacity: visible ? 1 : 0 Behavior on opacity { NumberAnimation { duration: 100 } } - color: UM.Theme.getColor("primary") + radius: UM.Theme.getSize("default_radius") + color: UM.Theme.getColor("action_panel_secondary") border.color: UM.Theme.getColor("lining") border.width: UM.Theme.getSize("default_lining").width } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 1473a75eec..658fa00596 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -103,6 +103,8 @@ "machine_selector_hover": [68, 72, 75, 255], "machine_selector_text_active": [255, 255, 255, 255], + "action_panel_secondary": [27, 95, 202, 255], + "text": [0, 0, 0, 255], "text_detail": [174, 174, 174, 128], "text_link": [50, 130, 255, 255], From b03695dec66ef5bb10a07222fb11d96e92eb1155 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Fri, 2 Nov 2018 09:33:27 +0100 Subject: [PATCH 10/21] Add print time information and material costs to the action panel. Contributes to CURA-5786. --- resources/qml/OutputProcessWidget.qml | 33 +++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/resources/qml/OutputProcessWidget.qml b/resources/qml/OutputProcessWidget.qml index d3f306fed5..435cc6da79 100644 --- a/resources/qml/OutputProcessWidget.qml +++ b/resources/qml/OutputProcessWidget.qml @@ -30,6 +30,7 @@ Column Column { id: timeAndCostsInformation + spacing: UM.Theme.getSize("thin_margin").height anchors { @@ -43,7 +44,9 @@ Column id: estimatedTime width: parent.width - text: "Time" + property var printDuration: PrintInformation.currentPrintTime + + text: printDuration.getDisplayString(UM.DurationFormat.Long) source: UM.Theme.getIcon("clock") font: UM.Theme.getFont("small") } @@ -53,7 +56,33 @@ Column id: estimatedCosts width: parent.width - text: "Material costs" + property var printMaterialLengths: PrintInformation.materialLengths + property var printMaterialWeights: PrintInformation.materialWeights + + function getText() + { + var lengths = [] + var weights = [] + if(printMaterialLengths) + { + for(var index = 0; index < printMaterialLengths.length; index++) + { + if(printMaterialLengths[index] > 0) + { + lengths.push(printMaterialLengths[index].toFixed(2)) + weights.push(String(Math.round(printMaterialWeights[index]))) + } + } + } + if(lengths.length == 0) + { + lengths = ["0.00"] + weights = ["0"] + } + return weights.join(" + ") + "g · " + lengths.join(" + ") + "m" + } + + text: getText() source: UM.Theme.getIcon("spool") font: UM.Theme.getFont("very_small") } From 310539cb6dc84e0245a86d3e0b10aa79d413d536 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Fri, 2 Nov 2018 09:58:35 +0100 Subject: [PATCH 11/21] In the main action panel, only show the total amount of material weight and length (addition of all extruders). The information panel will show each cost separately. Contributes to CURA-5786. --- .../{ => ActionPanel}/ActionPanelWidget.qml | 0 .../OutputDevicesActionButton.qml | 0 .../{ => ActionPanel}/OutputProcessWidget.qml | 21 ++++++++----------- .../{ => ActionPanel}/SliceProcessWidget.qml | 0 4 files changed, 9 insertions(+), 12 deletions(-) rename resources/qml/{ => ActionPanel}/ActionPanelWidget.qml (100%) rename resources/qml/{ => ActionPanel}/OutputDevicesActionButton.qml (100%) rename resources/qml/{ => ActionPanel}/OutputProcessWidget.qml (84%) rename resources/qml/{ => ActionPanel}/SliceProcessWidget.qml (100%) diff --git a/resources/qml/ActionPanelWidget.qml b/resources/qml/ActionPanel/ActionPanelWidget.qml similarity index 100% rename from resources/qml/ActionPanelWidget.qml rename to resources/qml/ActionPanel/ActionPanelWidget.qml diff --git a/resources/qml/OutputDevicesActionButton.qml b/resources/qml/ActionPanel/OutputDevicesActionButton.qml similarity index 100% rename from resources/qml/OutputDevicesActionButton.qml rename to resources/qml/ActionPanel/OutputDevicesActionButton.qml diff --git a/resources/qml/OutputProcessWidget.qml b/resources/qml/ActionPanel/OutputProcessWidget.qml similarity index 84% rename from resources/qml/OutputProcessWidget.qml rename to resources/qml/ActionPanel/OutputProcessWidget.qml index 435cc6da79..bef40fdfca 100644 --- a/resources/qml/OutputProcessWidget.qml +++ b/resources/qml/ActionPanel/OutputProcessWidget.qml @@ -61,25 +61,20 @@ Column function getText() { - var lengths = [] - var weights = [] - if(printMaterialLengths) + var totalLengths = 0 + var totalWeights = 0 + if (printMaterialLengths) { for(var index = 0; index < printMaterialLengths.length; index++) { if(printMaterialLengths[index] > 0) { - lengths.push(printMaterialLengths[index].toFixed(2)) - weights.push(String(Math.round(printMaterialWeights[index]))) + totalLengths += printMaterialLengths[index] + totalWeights += Math.round(printMaterialWeights[index]) } } } - if(lengths.length == 0) - { - lengths = ["0.00"] - weights = ["0"] - } - return weights.join(" + ") + "g · " + lengths.join(" + ") + "m" + return totalWeights + "g · " + totalLengths.toFixed(2) + "m" } text: getText() @@ -116,13 +111,15 @@ Column Cura.ActionButton { + leftPadding: UM.Theme.getSize("default_margin").width + rightPadding: UM.Theme.getSize("default_margin").width height: UM.Theme.getSize("action_panel_button").height text: catalog.i18nc("@button", "Preview") color: UM.Theme.getColor("secondary") hoverColor: UM.Theme.getColor("secondary") textColor: UM.Theme.getColor("primary") textHoverColor: UM.Theme.getColor("text") - onClicked: console.log("Clicking preview") + onClicked: UM.Controller.setActiveStage("MonitorStage") } Cura.OutputDevicesActionButton diff --git a/resources/qml/SliceProcessWidget.qml b/resources/qml/ActionPanel/SliceProcessWidget.qml similarity index 100% rename from resources/qml/SliceProcessWidget.qml rename to resources/qml/ActionPanel/SliceProcessWidget.qml From c862e72514230a7ed5eee59ca3257c5c58deb968 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Fri, 2 Nov 2018 11:10:23 +0100 Subject: [PATCH 12/21] Add the print panel information as a popup that shows when the "i" icon is clicked. Contributes to CURA-5786. --- .../ActionPanel/OutputDevicesActionButton.qml | 2 +- .../qml/ActionPanel/OutputProcessWidget.qml | 16 +---- .../ActionPanel/PrintInformationWidget.qml | 62 +++++++++++++++++++ 3 files changed, 66 insertions(+), 14 deletions(-) create mode 100644 resources/qml/ActionPanel/PrintInformationWidget.qml diff --git a/resources/qml/ActionPanel/OutputDevicesActionButton.qml b/resources/qml/ActionPanel/OutputDevicesActionButton.qml index 11be11a2b0..32d5f8a73b 100644 --- a/resources/qml/ActionPanel/OutputDevicesActionButton.qml +++ b/resources/qml/ActionPanel/OutputDevicesActionButton.qml @@ -91,7 +91,7 @@ Item { opacity: visible ? 1 : 0 Behavior on opacity { NumberAnimation { duration: 100 } } - radius: UM.Theme.getSize("default_radius") + radius: UM.Theme.getSize("default_radius").width color: UM.Theme.getColor("action_panel_secondary") border.color: UM.Theme.getColor("lining") border.width: UM.Theme.getSize("default_lining").width diff --git a/resources/qml/ActionPanel/OutputProcessWidget.qml b/resources/qml/ActionPanel/OutputProcessWidget.qml index bef40fdfca..a2f9f13576 100644 --- a/resources/qml/ActionPanel/OutputProcessWidget.qml +++ b/resources/qml/ActionPanel/OutputProcessWidget.qml @@ -4,7 +4,6 @@ import QtQuick 2.7 import QtQuick.Controls 2.1 import QtQuick.Layouts 1.3 -import QtQuick.Controls 1.4 as Controls1 import UM 1.1 as UM import Cura 1.0 as Cura @@ -35,7 +34,7 @@ Column anchors { left: parent.left - right: moreInformationIcon.left + right: printInformationPanel.left rightMargin: UM.Theme.getSize("thin_margin").height } @@ -83,24 +82,15 @@ Column } } - UM.RecolorImage + PrintInformationWidget { - id: moreInformationIcon + id: printInformationPanel anchors { right: parent.right verticalCenter: timeAndCostsInformation.verticalCenter } - - source: UM.Theme.getIcon("info") - width: UM.Theme.getSize("section_icon").width - height: UM.Theme.getSize("section_icon").height - - sourceSize.width: width - sourceSize.height: height - - color: UM.Theme.getColor("text_medium") } } diff --git a/resources/qml/ActionPanel/PrintInformationWidget.qml b/resources/qml/ActionPanel/PrintInformationWidget.qml new file mode 100644 index 0000000000..f8f91869aa --- /dev/null +++ b/resources/qml/ActionPanel/PrintInformationWidget.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 UM 1.1 as UM +import Cura 1.0 as Cura + +Button +{ + id: widget + + implicitHeight: UM.Theme.getSize("section_icon").height + implicitWidth: UM.Theme.getSize("section_icon").width + + background: UM.RecolorImage + { + id: moreInformationIcon + + source: UM.Theme.getIcon("info") + width: UM.Theme.getSize("section_icon").width + height: UM.Theme.getSize("section_icon").height + + sourceSize.width: width + sourceSize.height: height + + color: widget.hovered ? UM.Theme.getColor("primary") : UM.Theme.getColor("text_medium") + } + + onClicked: popup.opened ? popup.close() : popup.open() + + Popup + { + id: popup + + y: -(height + UM.Theme.getSize("default_arrow").height + UM.Theme.getSize("thin_margin").height) + x: parent.width - width + UM.Theme.getSize("thin_margin").width + + closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent + + contentItem: Label + { + id: panel + text: "Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit, \nsed do eiusmod tempor incididunt \nut labore et dolore magna aliqua. \nUt enim ad minim veniam, ..." + } + + background: UM.PointingRectangle + { + opacity: visible ? 1 : 0 + Behavior on opacity { NumberAnimation { duration: 100 } } + color: UM.Theme.getColor("tool_panel_background") + borderColor: UM.Theme.getColor("lining") + borderWidth: UM.Theme.getSize("default_lining").width + + target: Qt.point(width - (widget.width / 2) - UM.Theme.getSize("thin_margin").width, + height + UM.Theme.getSize("default_arrow").height - UM.Theme.getSize("thin_margin").height) + + arrowSize: UM.Theme.getSize("default_arrow").width + } + } +} \ No newline at end of file From ef7ac3b089cc51712c850c3d1688ecd25cdc55d7 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Fri, 2 Nov 2018 13:29:55 +0100 Subject: [PATCH 13/21] Create the new component that gathers all the printjob information (times and material usage) in a popup that is shown when the "i" icon is pressed. Contributes to CURA-5786. --- .../ActionPanel/PrintInformationWidget.qml | 6 +- .../qml/ActionPanel/PrintJobInformation.qml | 166 ++++++++++++++++++ resources/themes/cura-light/theme.json | 2 +- 3 files changed, 170 insertions(+), 4 deletions(-) create mode 100644 resources/qml/ActionPanel/PrintJobInformation.qml diff --git a/resources/qml/ActionPanel/PrintInformationWidget.qml b/resources/qml/ActionPanel/PrintInformationWidget.qml index f8f91869aa..620c3a408c 100644 --- a/resources/qml/ActionPanel/PrintInformationWidget.qml +++ b/resources/qml/ActionPanel/PrintInformationWidget.qml @@ -39,10 +39,10 @@ Button closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent - contentItem: Label + contentItem: PrintJobInformation { - id: panel - text: "Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit, \nsed do eiusmod tempor incididunt \nut labore et dolore magna aliqua. \nUt enim ad minim veniam, ..." + id: printJobInformation + width: UM.Theme.getSize("action_panel_information_widget").width } background: UM.PointingRectangle diff --git a/resources/qml/ActionPanel/PrintJobInformation.qml b/resources/qml/ActionPanel/PrintJobInformation.qml new file mode 100644 index 0000000000..0eaa0ca46f --- /dev/null +++ b/resources/qml/ActionPanel/PrintJobInformation.qml @@ -0,0 +1,166 @@ +// 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 UM 1.1 as UM +import Cura 1.0 as Cura + +Column +{ + id: base + spacing: UM.Theme.getSize("default_margin").width + + UM.I18nCatalog + { + id: catalog + name: "cura" + } + + Column + { + id: timeSpecification + spacing: UM.Theme.getSize("thin_margin").width + width: parent.width + topPadding: UM.Theme.getSize("default_margin").height + leftPadding: UM.Theme.getSize("default_margin").width + rightPadding: UM.Theme.getSize("default_margin").width + + Label + { + text: catalog.i18nc("@label", "Time specification").toUpperCase() + color: UM.Theme.getColor("primary") + font: UM.Theme.getFont("small") + renderType: Text.NativeRendering + } + + Label + { + property var printDuration: PrintInformation.currentPrintTime + + function getTimeSpecifications() + { + // All the time information for the different features is achieved + var printTime = PrintInformation.getFeaturePrintTimes() + var totalSeconds = parseInt(printDuration.getDisplayString(UM.DurationFormat.Seconds)) + + // A message is created and displayed when the user hover the time label + var text = "" + for(var feature in printTime) + { + if(!printTime[feature].isTotalDurationZero) + { + text += "" + + "".arg(printTime[feature].getDisplayString(UM.DurationFormat.ISO8601).slice(0,-3)) + + "".arg(Math.round(100 * parseInt(printTime[feature].getDisplayString(UM.DurationFormat.Seconds)) / totalSeconds)) + + "" + } + } + text += "
" + feature + ":  %1  %1%
" + print(text) + return text + } + + text: getTimeSpecifications() + width: parent.width - 2 * UM.Theme.getSize("default_margin").width + color: UM.Theme.getColor("text") + font: UM.Theme.getFont("very_small") + renderType: Text.NativeRendering + textFormat: Text.RichText + } + } + + Column + { + id: materialSpecification + spacing: UM.Theme.getSize("thin_margin").width + width: parent.width + bottomPadding: UM.Theme.getSize("default_margin").height + leftPadding: UM.Theme.getSize("default_margin").width + rightPadding: UM.Theme.getSize("default_margin").width + + Label + { + text: catalog.i18nc("@label", "Material specification").toUpperCase() + color: UM.Theme.getColor("primary") + font: UM.Theme.getFont("small") + renderType: Text.NativeRendering + } + + Label + { + property var printMaterialLengths: PrintInformation.materialLengths + property var printMaterialWeights: PrintInformation.materialWeights + property var printMaterialCosts: PrintInformation.materialCosts + property var printMaterialNames: PrintInformation.materialNames + + function formatRow(items) + { + var rowHTML = "" + for(var item = 0; item < items.length; item++) + { + if (item == 0) + { + rowHTML += "%1".arg(items[item]) + } + else + { + rowHTML += "  %1".arg(items[item]) + } + } + rowHTML += "" + return rowHTML + } + + function getMaterialSpecifications() + { + var lengths = [] + var weights = [] + var costs = [] + var names = [] + if(printMaterialLengths) + { + for(var index = 0; index < printMaterialLengths.length; index++) + { + if(printMaterialLengths[index] > 0) + { + names.push(printMaterialNames[index]) + lengths.push(printMaterialLengths[index].toFixed(2)) + weights.push(String(Math.round(printMaterialWeights[index]))) + var cost = printMaterialCosts[index] == undefined ? 0 : printMaterialCosts[index].toFixed(2) + costs.push(cost) + } + } + } + if(lengths.length == 0) + { + lengths = ["0.00"] + weights = ["0"] + costs = ["0.00"] + } + + var text = "" + for(var index = 0; index < lengths.length; index++) + { + text += 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]), + ]) + } + text += "
" + + return text + } + + text: getMaterialSpecifications() + width: parent.width - 2 * UM.Theme.getSize("default_margin").width + color: UM.Theme.getColor("text") + font: UM.Theme.getFont("very_small") + renderType: Text.NativeRendering + textFormat: Text.RichText + } + } +} \ No newline at end of file diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 658fa00596..f354b521ee 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -379,7 +379,7 @@ "configuration_selector_widget": [35.0, 4.5], "configuration_selector_mode_tabs": [0.0, 3.0], - "action_panel_widget": [35.0, 0.0], + "action_panel_information_widget": [20.0, 0.0], "action_panel_button": [15.0, 3.0], "machine_selector_widget": [28.0, 4.5], From dba31c3af435202ef93363859017927d4a043bd2 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Fri, 2 Nov 2018 16:20:04 +0100 Subject: [PATCH 14/21] Add documentation. Contributes to CURA-5786. --- resources/qml/ActionPanel/ActionPanelWidget.qml | 4 ++++ resources/qml/ActionPanel/OutputProcessWidget.qml | 5 +++++ resources/qml/ActionPanel/SliceProcessWidget.qml | 4 ++++ 3 files changed, 13 insertions(+) diff --git a/resources/qml/ActionPanel/ActionPanelWidget.qml b/resources/qml/ActionPanel/ActionPanelWidget.qml index 417883af6f..1fc288af6a 100644 --- a/resources/qml/ActionPanel/ActionPanelWidget.qml +++ b/resources/qml/ActionPanel/ActionPanelWidget.qml @@ -8,6 +8,10 @@ import QtQuick.Layouts 1.3 import UM 1.2 as UM import Cura 1.0 as Cura + +// This element hold all the elements needed for the user to trigger the slicing process, and later +// to get information about the printing times, material consumption and the output process (such as +// saving to a file, printing over network, ... Rectangle { id: actionPanelWidget diff --git a/resources/qml/ActionPanel/OutputProcessWidget.qml b/resources/qml/ActionPanel/OutputProcessWidget.qml index a2f9f13576..5d5e5bb66c 100644 --- a/resources/qml/ActionPanel/OutputProcessWidget.qml +++ b/resources/qml/ActionPanel/OutputProcessWidget.qml @@ -8,6 +8,11 @@ import QtQuick.Layouts 1.3 import UM 1.1 as UM import Cura 1.0 as Cura + +// This element contains all the elements the user needs to visualize the data +// that is gather after the slicing process, such as printint time, material usage, ... +// There are also two buttons: one to previsualize the output layers, and the other to +// select what to do with it (such as print over network, save to file, ...) Column { id: widget diff --git a/resources/qml/ActionPanel/SliceProcessWidget.qml b/resources/qml/ActionPanel/SliceProcessWidget.qml index 3ea6e09975..e70ec45e43 100644 --- a/resources/qml/ActionPanel/SliceProcessWidget.qml +++ b/resources/qml/ActionPanel/SliceProcessWidget.qml @@ -9,6 +9,10 @@ import QtQuick.Controls 1.4 as Controls1 import UM 1.1 as UM import Cura 1.0 as Cura + +// This element contains all the elements the user needs to create a printjob from the +// model(s) that is(are) on the buildplate. Mainly the button to start/stop the slicing +// process and a progress bar to see the progress of the process. Column { id: widget From 059e681de59f073870d6858daac7b0cd85528be1 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Fri, 2 Nov 2018 16:44:50 +0100 Subject: [PATCH 15/21] Remove unused code. Contributes to CURA-5786. --- resources/qml/ActionPanel/OutputDevicesActionButton.qml | 1 - resources/qml/ActionPanel/PrintJobInformation.qml | 1 - resources/qml/Cura.qml | 8 -------- 3 files changed, 10 deletions(-) diff --git a/resources/qml/ActionPanel/OutputDevicesActionButton.qml b/resources/qml/ActionPanel/OutputDevicesActionButton.qml index 32d5f8a73b..87faa0a2bf 100644 --- a/resources/qml/ActionPanel/OutputDevicesActionButton.qml +++ b/resources/qml/ActionPanel/OutputDevicesActionButton.qml @@ -74,7 +74,6 @@ Item { text: model.description color: "transparent" - outlineColor: "transparent" cornerRadius: 0 hoverColor: UM.Theme.getColor("primary") diff --git a/resources/qml/ActionPanel/PrintJobInformation.qml b/resources/qml/ActionPanel/PrintJobInformation.qml index 0eaa0ca46f..df90e81aaf 100644 --- a/resources/qml/ActionPanel/PrintJobInformation.qml +++ b/resources/qml/ActionPanel/PrintJobInformation.qml @@ -58,7 +58,6 @@ Column } } text += "" - print(text) return text } diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml index 1f4d71e460..f7b4186515 100644 --- a/resources/qml/Cura.qml +++ b/resources/qml/Cura.qml @@ -314,14 +314,6 @@ UM.MainWindow anchors.bottom: parent.bottom 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() -// } } Loader From 2dfd354b25e3187f403cc1cffc028d61eb7bae2e Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Fri, 2 Nov 2018 16:49:31 +0100 Subject: [PATCH 16/21] Remove function and property that are only used once. Contributes to CURA-5786. --- resources/qml/ActionPanel/OutputProcessWidget.qml | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/resources/qml/ActionPanel/OutputProcessWidget.qml b/resources/qml/ActionPanel/OutputProcessWidget.qml index 5d5e5bb66c..db9a23cdf3 100644 --- a/resources/qml/ActionPanel/OutputProcessWidget.qml +++ b/resources/qml/ActionPanel/OutputProcessWidget.qml @@ -48,9 +48,7 @@ Column id: estimatedTime width: parent.width - property var printDuration: PrintInformation.currentPrintTime - - text: printDuration.getDisplayString(UM.DurationFormat.Long) + text: PrintInformation.currentPrintTime.getDisplayString(UM.DurationFormat.Long) source: UM.Theme.getIcon("clock") font: UM.Theme.getFont("small") } @@ -63,7 +61,7 @@ Column property var printMaterialLengths: PrintInformation.materialLengths property var printMaterialWeights: PrintInformation.materialWeights - function getText() + text: { var totalLengths = 0 var totalWeights = 0 @@ -80,8 +78,6 @@ Column } return totalWeights + "g · " + totalLengths.toFixed(2) + "m" } - - text: getText() source: UM.Theme.getIcon("spool") font: UM.Theme.getFont("very_small") } From 6f2e8d726dac8488f6547f39556844afbd3cf4db Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Fri, 2 Nov 2018 16:52:17 +0100 Subject: [PATCH 17/21] Remove functions that are only used once. Contributes to CURA-5786. --- resources/qml/ActionPanel/PrintJobInformation.qml | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/resources/qml/ActionPanel/PrintJobInformation.qml b/resources/qml/ActionPanel/PrintJobInformation.qml index df90e81aaf..e53a92a994 100644 --- a/resources/qml/ActionPanel/PrintJobInformation.qml +++ b/resources/qml/ActionPanel/PrintJobInformation.qml @@ -39,7 +39,7 @@ Column { property var printDuration: PrintInformation.currentPrintTime - function getTimeSpecifications() + text: { // All the time information for the different features is achieved var printTime = PrintInformation.getFeaturePrintTimes() @@ -60,8 +60,6 @@ Column text += "" return text } - - text: getTimeSpecifications() width: parent.width - 2 * UM.Theme.getSize("default_margin").width color: UM.Theme.getColor("text") font: UM.Theme.getFont("very_small") @@ -112,7 +110,7 @@ Column return rowHTML } - function getMaterialSpecifications() + text: { var lengths = [] var weights = [] @@ -153,8 +151,6 @@ Column return text } - - text: getMaterialSpecifications() width: parent.width - 2 * UM.Theme.getSize("default_margin").width color: UM.Theme.getColor("text") font: UM.Theme.getFont("very_small") From f1f1b9f168e30ddcc15fd890362e6ed86f2e5699 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 6 Nov 2018 09:45:40 +0100 Subject: [PATCH 18/21] Center icon an label vertically. Contributes to CURA-5786. --- resources/qml/IconLabel.qml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/resources/qml/IconLabel.qml b/resources/qml/IconLabel.qml index 2e765e2dbc..918485751e 100644 --- a/resources/qml/IconLabel.qml +++ b/resources/qml/IconLabel.qml @@ -24,6 +24,7 @@ Item id: icon anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter source: UM.Theme.getIcon("dot") width: UM.Theme.getSize("section_icon").width @@ -40,6 +41,7 @@ Item id: label anchors.left: icon.right anchors.leftMargin: UM.Theme.getSize("thin_margin").width + anchors.verticalCenter: parent.verticalCenter text: "Empty label" color: UM.Theme.getColor("text") font: UM.Theme.getFont("very_small") From f41ae128c2c14fb05dc84058b8f5833a396805bb Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 6 Nov 2018 11:24:41 +0100 Subject: [PATCH 19/21] Modify alignments to avoid binding loop logs. Contributes to CURA-5786. --- resources/qml/IconLabel.qml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/resources/qml/IconLabel.qml b/resources/qml/IconLabel.qml index 918485751e..7c90382892 100644 --- a/resources/qml/IconLabel.qml +++ b/resources/qml/IconLabel.qml @@ -24,7 +24,6 @@ Item id: icon anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter source: UM.Theme.getIcon("dot") width: UM.Theme.getSize("section_icon").width @@ -41,7 +40,7 @@ Item id: label anchors.left: icon.right anchors.leftMargin: UM.Theme.getSize("thin_margin").width - anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenter: icon.verticalCenter text: "Empty label" color: UM.Theme.getColor("text") font: UM.Theme.getFont("very_small") From b6b60702c054ff93c112089583c721a6ddedd44a Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 6 Nov 2018 14:32:48 +0100 Subject: [PATCH 20/21] Make the action panel to have a fixed width. Remove the animations when switching states. Contributes to CURA-5786. --- resources/qml/ActionPanel/ActionPanelWidget.qml | 7 +++---- resources/qml/ActionPanel/SliceProcessWidget.qml | 2 -- resources/themes/cura-light/theme.json | 1 + 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/resources/qml/ActionPanel/ActionPanelWidget.qml b/resources/qml/ActionPanel/ActionPanelWidget.qml index 1fc288af6a..0db778de5a 100644 --- a/resources/qml/ActionPanel/ActionPanelWidget.qml +++ b/resources/qml/ActionPanel/ActionPanelWidget.qml @@ -16,7 +16,7 @@ Rectangle { id: actionPanelWidget - width: childrenRect.width + 2 * UM.Theme.getSize("thick_margin").width + width: UM.Theme.getSize("action_panel_widget").width height: childrenRect.height + 2 * UM.Theme.getSize("thick_margin").height color: UM.Theme.getColor("main_background") @@ -36,13 +36,12 @@ Rectangle topMargin: UM.Theme.getSize("thick_margin").height left: parent.left leftMargin: UM.Theme.getSize("thick_margin").width + right: parent.right + rightMargin: UM.Theme.getSize("thick_margin").width } sourceComponent: outputAvailable ? outputProcessWidget : sliceProcessWidget } - Behavior on height { NumberAnimation { duration: 100 } } - Behavior on width { NumberAnimation { duration: 100 } } - Component { id: sliceProcessWidget diff --git a/resources/qml/ActionPanel/SliceProcessWidget.qml b/resources/qml/ActionPanel/SliceProcessWidget.qml index e70ec45e43..1ba5776b6b 100644 --- a/resources/qml/ActionPanel/SliceProcessWidget.qml +++ b/resources/qml/ActionPanel/SliceProcessWidget.qml @@ -17,8 +17,6 @@ Column { id: widget - width: UM.Theme.getSize("action_panel_button").width - spacing: UM.Theme.getSize("thin_margin").height UM.I18nCatalog diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index f354b521ee..27dfbaf807 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -379,6 +379,7 @@ "configuration_selector_widget": [35.0, 4.5], "configuration_selector_mode_tabs": [0.0, 3.0], + "action_panel_widget": [25.0, 0.0], "action_panel_information_widget": [20.0, 0.0], "action_panel_button": [15.0, 3.0], From 5dddcbd6664b38f091ce0565c01a5a6ece1cc35f Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 6 Nov 2018 15:14:27 +0100 Subject: [PATCH 21/21] Add a new property to the ActionButton to indicate whether the button has a fixed width or the width will be dependant on the content. Contributes to CURA-5786. --- resources/qml/Account/GeneralOperations.qml | 2 ++ resources/qml/Account/UserOperations.qml | 2 ++ resources/qml/ActionButton.qml | 7 +++++++ resources/qml/ActionPanel/OutputDevicesActionButton.qml | 1 + resources/qml/ActionPanel/SliceProcessWidget.qml | 1 + 5 files changed, 13 insertions(+) diff --git a/resources/qml/Account/GeneralOperations.qml b/resources/qml/Account/GeneralOperations.qml index 6bc94dd830..362e088033 100644 --- a/resources/qml/Account/GeneralOperations.qml +++ b/resources/qml/Account/GeneralOperations.qml @@ -21,6 +21,7 @@ Row textColor: UM.Theme.getColor("main_window_header_button_text_active") textHoverColor: UM.Theme.getColor("main_window_header_button_text_active") onClicked: Qt.openUrlExternally("https://account.ultimaker.com") + fixedWidthMode: true } Cura.ActionButton @@ -29,5 +30,6 @@ Row height: UM.Theme.getSize("account_button").height text: catalog.i18nc("@button", "Login") onClicked: Cura.API.account.login() + fixedWidthMode: true } } \ No newline at end of file diff --git a/resources/qml/Account/UserOperations.qml b/resources/qml/Account/UserOperations.qml index a12bfbf6d7..c167813425 100644 --- a/resources/qml/Account/UserOperations.qml +++ b/resources/qml/Account/UserOperations.qml @@ -21,6 +21,7 @@ Row textColor: UM.Theme.getColor("main_window_header_button_text_active") textHoverColor: UM.Theme.getColor("main_window_header_button_text_active") onClicked: Qt.openUrlExternally("https://account.ultimaker.com") + fixedWidthMode: true } Cura.ActionButton @@ -29,5 +30,6 @@ Row height: UM.Theme.getSize("account_button").height text: catalog.i18nc("@button", "Logout") onClicked: Cura.API.account.logout() + fixedWidthMode: true } } \ No newline at end of file diff --git a/resources/qml/ActionButton.qml b/resources/qml/ActionButton.qml index 05e75ac8c5..b35ad4ba87 100644 --- a/resources/qml/ActionButton.qml +++ b/resources/qml/ActionButton.qml @@ -24,6 +24,10 @@ Button property var outlineColor: color property var outlineHoverColor: hoverColor property var outlineDisabledColor: outlineColor + // This property is used to indicate whether the button has a fixed width or the width would depend on the contents + // Be careful when using fixedWidthMode, the translated texts can be too long that they won't fit. In any case, + // we elide the text to the right so the text will be cut off with the three dots at the end. + property var fixedWidthMode: false contentItem: Row { @@ -50,6 +54,9 @@ Button visible: text != "" renderType: Text.NativeRendering anchors.verticalCenter: parent.verticalCenter + width: fixedWidthMode ? button.width - button.leftPadding - button.rightPadding : undefined + horizontalAlignment: Text.AlignHCenter + elide: Text.ElideRight } } diff --git a/resources/qml/ActionPanel/OutputDevicesActionButton.qml b/resources/qml/ActionPanel/OutputDevicesActionButton.qml index 87faa0a2bf..be79a1893e 100644 --- a/resources/qml/ActionPanel/OutputDevicesActionButton.qml +++ b/resources/qml/ActionPanel/OutputDevicesActionButton.qml @@ -16,6 +16,7 @@ Item { id: saveToButton height: parent.height + fixedWidthMode: true anchors { diff --git a/resources/qml/ActionPanel/SliceProcessWidget.qml b/resources/qml/ActionPanel/SliceProcessWidget.qml index 1ba5776b6b..2d4a7b6b89 100644 --- a/resources/qml/ActionPanel/SliceProcessWidget.qml +++ b/resources/qml/ActionPanel/SliceProcessWidget.qml @@ -86,6 +86,7 @@ Column id: prepareButton width: parent.width height: UM.Theme.getSize("action_panel_button").height + fixedWidthMode: true text: { if ([UM.Backend.NotStarted, UM.Backend.Error].indexOf(widget.backendState) != -1)