From bbfa93c9a76bcba2b837f9a0e1295745cb23ce9c Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Mon, 28 Jun 2021 14:48:54 +0200 Subject: [PATCH 1/8] Make the machineSelection header adjust its width Whenever the window gets resized, the machineSelector header will now change it size, similar to the configurationSelector next to it. CURA-8013 --- plugins/PrepareStage/PrepareMenu.qml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 87d7c5f35c..3a62daff29 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -50,8 +50,7 @@ Item { id: machineSelection headerCornerSide: Cura.RoundedRectangle.Direction.Left - Layout.minimumWidth: UM.Theme.getSize("machine_selector_widget").width - Layout.maximumWidth: UM.Theme.getSize("machine_selector_widget").width + Layout.preferredWidth: Math.round((itemRow.width - printSetupSelectorItem.width - UM.Theme.getSize("default_lining").width) * 1 / 3 - UM.Theme.getSize("default_lining").width) Layout.fillWidth: true Layout.fillHeight: true } @@ -69,7 +68,7 @@ Item id: printerSetup Layout.fillHeight: true Layout.fillWidth: true - Layout.preferredWidth: itemRow.width - machineSelection.width - printSetupSelectorItem.width - 2 * UM.Theme.getSize("default_lining").width + Layout.preferredWidth: Math.round((itemRow.width - printSetupSelectorItem.width - UM.Theme.getSize("default_lining").width) * 2 / 3 - UM.Theme.getSize("default_lining").width) } // Separator line From fae5e2cffd196feaf50e5ab128839a04f0d66bca Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Mon, 28 Jun 2021 14:53:50 +0200 Subject: [PATCH 2/8] Adjust the text of the material according to the size of the window Now, when the size of the Cura window changes and the configurationSelector gets resized, instead of eliding the material text it will now change as follows: * If it fits, display "Brand, Color, and Type" of material (e.g. Ultimaker Black PLA) * If "Brand, Color, and Type" doesn't fit, change it to "Color and Type" of material (e.g. Black PLA) * If "Color Type" doesn't fit either, display only the type (e.g. PLA) * If "Type" doesn't fit, elide it CURA-8013 --- cura/Machines/Models/ExtrudersModel.py | 8 ++- .../ConfigurationMenu/ConfigurationMenu.qml | 50 +++++++++++++++++-- 2 files changed, 54 insertions(+), 4 deletions(-) diff --git a/cura/Machines/Models/ExtrudersModel.py b/cura/Machines/Models/ExtrudersModel.py index 98865ed37e..e979a1e848 100644 --- a/cura/Machines/Models/ExtrudersModel.py +++ b/cura/Machines/Models/ExtrudersModel.py @@ -53,6 +53,9 @@ class ExtrudersModel(ListModel): EnabledRole = Qt.UserRole + 11 """Is the extruder enabled?""" + MaterialTypeRole = Qt.UserRole + 12 + """The type of the material (e.g. PLA, ABS, PETG, etc.).""" + defaultColors = ["#ffc924", "#86ec21", "#22eeee", "#245bff", "#9124ff", "#ff24c8"] """List of colours to display if there is no material or the material has no known colour. """ @@ -75,6 +78,7 @@ class ExtrudersModel(ListModel): self.addRoleName(self.StackRole, "stack") self.addRoleName(self.MaterialBrandRole, "material_brand") self.addRoleName(self.ColorNameRole, "color_name") + self.addRoleName(self.MaterialTypeRole, "material_type") self._update_extruder_timer = QTimer() self._update_extruder_timer.setInterval(100) self._update_extruder_timer.setSingleShot(True) @@ -193,7 +197,8 @@ class ExtrudersModel(ListModel): "variant": extruder.variant.getName() if extruder.variant else "", # e.g. print core "stack": extruder, "material_brand": material_brand, - "color_name": color_name + "color_name": color_name, + "material_type": extruder.material.getMetaDataEntry("material") if extruder.material else "", } items.append(item) @@ -218,6 +223,7 @@ class ExtrudersModel(ListModel): "stack": None, "material_brand": "", "color_name": "", + "material_type": "", } items.append(item) if self._items != items: diff --git a/resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml b/resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml index d388bd7a7e..6f9f30e7e6 100644 --- a/resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml +++ b/resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml @@ -63,9 +63,9 @@ Cura.ExpandablePopup // Label for the brand of the material Label { - id: typeAndBrandNameLabel + id: materialBrandColorTypeLabel - text: model.material_brand + " " + model.material + text: model.material_brand == model.color_name ? model.color_name + " " + model.material_type : model.material_brand + " " + model.color_name + " " + model.material_type elide: Text.ElideRight font: UM.Theme.getFont("default") color: UM.Theme.getColor("text") @@ -79,6 +79,50 @@ Cura.ExpandablePopup right: parent.right rightMargin: UM.Theme.getSize("default_margin").width } + visible: !truncated + } + + Label + { + id: materialColorTypeLabel + + text: model.color_name + " " + model.material_type + elide: Text.ElideRight + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + renderType: Text.NativeRendering + + anchors + { + top: extruderIcon.top + left: extruderIcon.right + leftMargin: UM.Theme.getSize("default_margin").width + right: parent.right + rightMargin: UM.Theme.getSize("default_margin").width + } + + visible: !materialBrandColorTypeLabel.visible && !truncated + } + + Label + { + id: materialTypeLabel + + text: model.material_type + elide: Text.ElideRight + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + renderType: Text.NativeRendering + + anchors + { + top: extruderIcon.top + left: extruderIcon.right + leftMargin: UM.Theme.getSize("default_margin").width + right: parent.right + rightMargin: UM.Theme.getSize("default_margin").width + } + visible: !materialBrandColorTypeLabel.visible && !materialColorTypeLabel.visible } // Label that shows the name of the variant Label @@ -97,7 +141,7 @@ Cura.ExpandablePopup { left: extruderIcon.right leftMargin: UM.Theme.getSize("default_margin").width - top: typeAndBrandNameLabel.bottom + top: materialBrandColorTypeLabel.bottom right: parent.right rightMargin: UM.Theme.getSize("default_margin").width } From eeccfc32b99eda453e3f8eaf5949dfa53c22043b Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Mon, 28 Jun 2021 14:54:44 +0200 Subject: [PATCH 3/8] Remove spacing between toolbar buttons CURA-8013 --- resources/qml/Toolbar.qml | 2 -- 1 file changed, 2 deletions(-) diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml index 89d64b06ad..b388764c74 100644 --- a/resources/qml/Toolbar.qml +++ b/resources/qml/Toolbar.qml @@ -44,7 +44,6 @@ Item anchors.top: parent.top anchors.right: parent.right - spacing: UM.Theme.getSize("default_lining").height Repeater { @@ -131,7 +130,6 @@ Item anchors.topMargin: UM.Theme.getSize("default_margin").height anchors.top: toolButtons.bottom anchors.right: parent.right - spacing: UM.Theme.getSize("default_lining").height Repeater { From 77a8f36153738b397883155131a11643d7b9ebfc Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Mon, 28 Jun 2021 14:56:26 +0200 Subject: [PATCH 4/8] Change the color of a circle around the toolbar button Instead of changing the color of the entire tool when it is hovered or selected, now a background circle will be drawn and its color will change according to whether the button is hovered/selected or not. In addition, the button icons will now be half the size of the button itself. CURA-8013 --- resources/qml/Toolbar.qml | 2 +- resources/qml/ToolbarButton.qml | 44 ++++++++++++++++++--------------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml index b388764c74..ec4d29420b 100644 --- a/resources/qml/Toolbar.qml +++ b/resources/qml/Toolbar.qml @@ -68,7 +68,7 @@ Item source: UM.Theme.getIcon(model.icon) != "" ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon color: UM.Theme.getColor("icon") - sourceSize: UM.Theme.getSize("button_icon") + sourceSize: Math.round(UM.Theme.getSize("button") / 2) } onCheckedChanged: diff --git a/resources/qml/ToolbarButton.qml b/resources/qml/ToolbarButton.qml index b3f84bba1d..206ab23dc4 100644 --- a/resources/qml/ToolbarButton.qml +++ b/resources/qml/ToolbarButton.qml @@ -25,22 +25,7 @@ Button { implicitWidth: UM.Theme.getSize("button").width implicitHeight: UM.Theme.getSize("button").height - color: - { - if (base.checked && base.hovered) - { - return UM.Theme.getColor("toolbar_button_active_hover") - } - else if (base.checked) - { - return UM.Theme.getColor("toolbar_button_active") - } - else if(base.hovered) - { - return UM.Theme.getColor("toolbar_button_hover") - } - return UM.Theme.getColor("toolbar_background") - } + color: UM.Theme.getColor("toolbar_background") radius: UM.Theme.getSize("default_radius").width Rectangle @@ -84,16 +69,35 @@ Button color: parent.color } } - - contentItem: Item + contentItem: Rectangle { opacity: parent.enabled ? 1.0 : 0.2 + implicitWidth: Math.round(UM.Theme.getSize("button").width * 0.75) + implicitHeight: Math.round(UM.Theme.getSize("button").height * 0.75) + radius: Math.round(width * 0.5) + + color: + { + if (base.checked && base.hovered) + { + return UM.Theme.getColor("toolbar_button_active_hover") + } + else if (base.checked) + { + return UM.Theme.getColor("toolbar_button_active") + } + else if(base.hovered) + { + return UM.Theme.getColor("toolbar_button_hover") + } + return UM.Theme.getColor("toolbar_background") + } Loader { id: contentItemLoader anchors.centerIn: parent - width: UM.Theme.getSize("button_icon").width - height: UM.Theme.getSize("button_icon").height + width: Math.round(UM.Theme.getSize("button").width / 2) + height: Math.round(UM.Theme.getSize("button").height / 2) } } From 294b67f72f2cf4c35256e739eeef8b9aa459d24b Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Mon, 28 Jun 2021 17:50:38 +0200 Subject: [PATCH 5/8] Replace the shadow of the PrepareMenu with a border In order for that to be possible, the background border of the ExpandablePopup and the ExpandableComponent had to be exposed. In addition, since in the `RowLayout` the `ConfigurationMenu` and the `MachineSelector` both draw a border around them, it means that there will be a double "divider" (one border line from each button). To overcome that, we set the spacing of the `RowLayout` as a `- border_width`, which ensures then that there will be only a single line of border between the two adjacent buttons. CURA-8013 --- plugins/PrepareStage/PrepareMenu.qml | 42 +++++-------------- resources/qml/ExpandableComponent.qml | 2 + resources/qml/ExpandablePopup.qml | 2 + .../PrintSetupSelector/PrintSetupSelector.qml | 3 ++ 4 files changed, 18 insertions(+), 31 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 3a62daff29..1c66979a6c 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -44,41 +44,33 @@ Item anchors.leftMargin: UM.Theme.getSize("default_margin").width height: parent.height - spacing: 0 + // This is a trick to make sure that the borders of the two adjacent buttons' borders overlap. Otherwise + // there will be double border (one from each button) + spacing: -UM.Theme.getSize("default_lining").width Cura.MachineSelector { id: machineSelection headerCornerSide: Cura.RoundedRectangle.Direction.Left + headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width + headerBackgroundBorder.color: UM.Theme.getColor("lining") + enableHeaderShadow: false Layout.preferredWidth: Math.round((itemRow.width - printSetupSelectorItem.width - UM.Theme.getSize("default_lining").width) * 1 / 3 - UM.Theme.getSize("default_lining").width) Layout.fillWidth: true Layout.fillHeight: true } - // Separator line - Rectangle - { - height: parent.height - width: UM.Theme.getSize("default_lining").width - color: UM.Theme.getColor("lining") - } - Cura.ConfigurationMenu { id: printerSetup + enableHeaderShadow: false + headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width + headerBackgroundBorder.color: UM.Theme.getColor("lining") Layout.fillHeight: true Layout.fillWidth: true Layout.preferredWidth: Math.round((itemRow.width - printSetupSelectorItem.width - UM.Theme.getSize("default_lining").width) * 2 / 3 - UM.Theme.getSize("default_lining").width) } - // Separator line - Rectangle - { - height: parent.height - width: UM.Theme.getSize("default_lining").width - color: UM.Theme.getColor("lining") - } - Item { id: printSetupSelectorItem @@ -119,24 +111,12 @@ Item id: background height: UM.Theme.getSize("stage_menu").height width: UM.Theme.getSize("stage_menu").height + border.color: UM.Theme.getColor("lining") + border.width: UM.Theme.getSize("default_lining").width radius: UM.Theme.getSize("default_radius").width color: openFileButton.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button") } - - DropShadow - { - id: shadow - // Don't blur the shadow - radius: 0 - anchors.fill: background - source: background - verticalOffset: 2 - visible: true - color: UM.Theme.getColor("action_button_shadow") - // Should always be drawn behind the background. - z: background.z - 1 - } } } } diff --git a/resources/qml/ExpandableComponent.qml b/resources/qml/ExpandableComponent.qml index f637cccdbb..872fa353a8 100644 --- a/resources/qml/ExpandableComponent.qml +++ b/resources/qml/ExpandableComponent.qml @@ -56,6 +56,8 @@ Item // How much padding is needed around the header & button property alias headerPadding: background.padding + property alias headerBackgroundBorder: background.border + // What icon should be displayed on the right. property alias iconSource: collapseButton.source diff --git a/resources/qml/ExpandablePopup.qml b/resources/qml/ExpandablePopup.qml index 7829093e8d..ef927e7682 100644 --- a/resources/qml/ExpandablePopup.qml +++ b/resources/qml/ExpandablePopup.qml @@ -50,6 +50,8 @@ Item // How much padding is needed around the header & button property alias headerPadding: background.padding + property alias headerBackgroundBorder: background.border + // What icon should be displayed on the right. property alias iconSource: collapseButton.source diff --git a/resources/qml/PrintSetupSelector/PrintSetupSelector.qml b/resources/qml/PrintSetupSelector/PrintSetupSelector.qml index 414c349bb6..a378290b03 100644 --- a/resources/qml/PrintSetupSelector/PrintSetupSelector.qml +++ b/resources/qml/PrintSetupSelector/PrintSetupSelector.qml @@ -17,6 +17,9 @@ Cura.ExpandableComponent contentPadding: UM.Theme.getSize("default_lining").width contentHeaderTitle: catalog.i18nc("@label", "Print settings") + enableHeaderShadow: false + headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width + headerBackgroundBorder.color: UM.Theme.getColor("lining") enabled: !preSlicedData disabledText: catalog.i18nc("@label shown when we load a Gcode file", "Print setup disabled. G-code file can not be modified.") From 5a3675df953f120420235566286ef1f3a215163c Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Tue, 29 Jun 2021 10:54:46 +0200 Subject: [PATCH 6/8] Calculate the width of the header items only once CURA-8013 --- plugins/PrepareStage/PrepareMenu.qml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 1c66979a6c..0a452da4a6 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -42,6 +42,7 @@ Item anchors.left: openFileButton.right anchors.right: parent.right anchors.leftMargin: UM.Theme.getSize("default_margin").width + property int machineSelectorWidth: Math.round((width - printSetupSelectorItem.width) / 3) height: parent.height // This is a trick to make sure that the borders of the two adjacent buttons' borders overlap. Otherwise @@ -55,7 +56,7 @@ Item headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width headerBackgroundBorder.color: UM.Theme.getColor("lining") enableHeaderShadow: false - Layout.preferredWidth: Math.round((itemRow.width - printSetupSelectorItem.width - UM.Theme.getSize("default_lining").width) * 1 / 3 - UM.Theme.getSize("default_lining").width) + Layout.preferredWidth: parent.machineSelectorWidth Layout.fillWidth: true Layout.fillHeight: true } @@ -68,7 +69,7 @@ Item headerBackgroundBorder.color: UM.Theme.getColor("lining") Layout.fillHeight: true Layout.fillWidth: true - Layout.preferredWidth: Math.round((itemRow.width - printSetupSelectorItem.width - UM.Theme.getSize("default_lining").width) * 2 / 3 - UM.Theme.getSize("default_lining").width) + Layout.preferredWidth: parent.machineSelectorWidth * 2 } Item From 348bf0c4c15e6d8cf059591f6764eb97d2b44f65 Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Tue, 29 Jun 2021 15:33:44 +0200 Subject: [PATCH 7/8] Remove unused import CURA-8013 --- plugins/PrepareStage/PrepareMenu.qml | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index d0fe9ede72..73c2cad39a 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -8,7 +8,6 @@ import QtQuick.Controls 2.3 import UM 1.3 as UM import Cura 1.1 as Cura -import QtGraphicalEffects 1.0 // For the dropshadow Item { From 327acfd49c004d69cdf0d37be3dc2801a06d1490 Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Wed, 30 Jun 2021 11:10:25 +0200 Subject: [PATCH 8/8] Align the material and variant labels in the center of the header CURA-8013 --- .../ConfigurationMenu/ConfigurationMenu.qml | 162 +++++++++--------- 1 file changed, 83 insertions(+), 79 deletions(-) diff --git a/resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml b/resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml index cdbd1fda3a..9d9437776d 100644 --- a/resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml +++ b/resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml @@ -56,95 +56,99 @@ Cura.ExpandablePopup id: extruderIcon materialColor: model.color extruderEnabled: model.enabled - height: parent.height - width: height + width: UM.Theme.getSize("button_icon").width + anchors.verticalCenter: parent.verticalCenter } - // Label for the brand of the material - Label + Item { - id: materialBrandColorTypeLabel - - text: model.material_brand == model.color_name ? model.color_name + " " + model.material_type : model.material_brand + " " + model.color_name + " " + model.material_type - elide: Text.ElideRight - font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") - renderType: Text.NativeRendering - - anchors - { - top: extruderIcon.top - left: extruderIcon.right - leftMargin: UM.Theme.getSize("default_margin").width - right: parent.right - rightMargin: UM.Theme.getSize("default_margin").width - } - visible: !truncated - } - - Label - { - id: materialColorTypeLabel - - text: model.color_name + " " + model.material_type - elide: Text.ElideRight - font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") - renderType: Text.NativeRendering - - anchors - { - top: extruderIcon.top - left: extruderIcon.right - leftMargin: UM.Theme.getSize("default_margin").width - right: parent.right - rightMargin: UM.Theme.getSize("default_margin").width - } - - visible: !materialBrandColorTypeLabel.visible && !truncated - } - - Label - { - id: materialTypeLabel - - text: model.material_type - elide: Text.ElideRight - font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") - renderType: Text.NativeRendering - - anchors - { - top: extruderIcon.top - left: extruderIcon.right - leftMargin: UM.Theme.getSize("default_margin").width - right: parent.right - rightMargin: UM.Theme.getSize("default_margin").width - } - visible: !materialBrandColorTypeLabel.visible && !materialColorTypeLabel.visible - } - // Label that shows the name of the variant - Label - { - id: variantLabel - - visible: Cura.MachineManager.activeMachine ? Cura.MachineManager.activeMachine.hasVariants : false - - text: model.variant - elide: Text.ElideRight - font: UM.Theme.getFont("default_bold") - color: UM.Theme.getColor("text") - renderType: Text.NativeRendering - + height: childrenRect.height anchors { left: extruderIcon.right leftMargin: UM.Theme.getSize("default_margin").width - top: materialBrandColorTypeLabel.bottom + verticalCenter: parent.verticalCenter right: parent.right rightMargin: UM.Theme.getSize("default_margin").width } + // Label for the brand of the material + Label + { + id: materialBrandColorTypeLabel + + text: model.material_brand == model.color_name ? model.color_name + " " + model.material_type : model.material_brand + " " + model.color_name + " " + model.material_type + elide: Text.ElideRight + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + renderType: Text.NativeRendering + + anchors + { + top: parent.top + left: parent.left + right: parent.right + } + visible: !truncated + } + + Label + { + id: materialColorTypeLabel + + text: model.color_name + " " + model.material_type + elide: Text.ElideRight + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + renderType: Text.NativeRendering + + anchors + { + top: parent.top + left: parent.left + right: parent.right + } + + visible: !materialBrandColorTypeLabel.visible && !truncated + } + + Label + { + id: materialTypeLabel + + text: model.material_type + elide: Text.ElideRight + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + renderType: Text.NativeRendering + + anchors + { + top: parent.top + left: parent.left + right: parent.right + } + visible: !materialBrandColorTypeLabel.visible && !materialColorTypeLabel.visible + } + // Label that shows the name of the variant + Label + { + id: variantLabel + + visible: Cura.MachineManager.activeMachine ? Cura.MachineManager.activeMachine.hasVariants : false + + text: model.variant + elide: Text.ElideRight + font: UM.Theme.getFont("default_bold") + color: UM.Theme.getColor("text") + renderType: Text.NativeRendering + + anchors + { + left: parent.left + top: materialBrandColorTypeLabel.bottom + right: parent.right + } + } } } }