From c489f911fb2b16bef7dfa5a4bac76ee83620d13b Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 27 Nov 2018 11:04:41 +0100 Subject: [PATCH] Use QtQuick 2.0 and simplify ConfigurationItem It now uses a ButtonGroup (from QtQuick2). Also, all the mess with when the border and background colours are updated and force-updated and such is now cleaned up. Contributes to issue CURA-5876. --- .../ConfigurationMenu/ConfigurationItem.qml | 189 +++++++----------- .../ConfigurationListView.qml | 10 +- 2 files changed, 83 insertions(+), 116 deletions(-) diff --git a/resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml b/resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml index 7427b5ddff..d825a8cc6e 100644 --- a/resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml +++ b/resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml @@ -7,143 +7,108 @@ import QtQuick.Controls 2.0 import UM 1.2 as UM import Cura 1.0 as Cura -Rectangle +Button { id: configurationItem property var configuration: null - property var selected: false signal activateConfiguration() height: childrenRect.height - border.width: UM.Theme.getSize("default_lining").width - border.color: updateBorderColor() - color: selected ? UM.Theme.getColor("configuration_item_active") : UM.Theme.getColor("configuration_item") - property var textColor: selected ? UM.Theme.getColor("configuration_item_text_active") : UM.Theme.getColor("configuration_item_text") - function updateBorderColor() + property var textColor: checked ? UM.Theme.getColor("configuration_item_text_active") : UM.Theme.getColor("configuration_item_text") + + contentItem: Rectangle { - border.color = selected ? UM.Theme.getColor("configuration_item_border_active") : UM.Theme.getColor("configuration_item_border") - } + height: childrenRect.height + color: parent.checked ? UM.Theme.getColor("configuration_item_active") : UM.Theme.getColor("configuration_item") + border.color: (parent.checked || parent.hovered) ? UM.Theme.getColor("primary") : UM.Theme.getColor("lining") + border.width: UM.Theme.getSize("default_lining").width - Column - { - id: contentColumn - width: parent.width - padding: UM.Theme.getSize("default_margin").width - spacing: Math.round(UM.Theme.getSize("default_margin").height / 2) - - Row + Column { - id: extruderRow + id: contentColumn + width: parent.width + padding: UM.Theme.getSize("default_margin").width + spacing: Math.round(UM.Theme.getSize("default_margin").height / 2) - width: parent.width - 2 * parent.padding - height: childrenRect.height - - spacing: UM.Theme.getSize("default_margin").width - - Repeater + Row { - id: repeater + id: extruderRow + + width: parent.width - 2 * parent.padding height: childrenRect.height - model: configuration.extruderConfigurations - delegate: PrintCoreConfiguration + + spacing: UM.Theme.getSize("default_margin").width + + Repeater { - width: Math.round(parent.width / 2) - printCoreConfiguration: modelData - mainColor: textColor + id: repeater + height: childrenRect.height + model: configuration.extruderConfigurations + delegate: PrintCoreConfiguration + { + width: Math.round(parent.width / 2) + printCoreConfiguration: modelData + mainColor: textColor + } + } + } + + //Buildplate row separator + Rectangle + { + id: separator + + visible: buildplateInformation.visible + width: parent.width - 2 * parent.padding + height: visible ? Math.round(UM.Theme.getSize("thick_lining").height / 2) : 0 + color: textColor + } + + Item + { + id: buildplateInformation + width: parent.width - 2 * parent.padding + height: childrenRect.height + visible: configuration.buildplateConfiguration != "" + + UM.RecolorImage { + id: buildplateIcon + anchors.left: parent.left + width: UM.Theme.getSize("main_window_header_button_icon").width + height: UM.Theme.getSize("main_window_header_button_icon").height + sourceSize.width: width + sourceSize.height: height + source: UM.Theme.getIcon("buildplate") + color: textColor + } + + Label + { + id: buildplateLabel + anchors.left: buildplateIcon.right + anchors.verticalCenter: buildplateIcon.verticalCenter + anchors.leftMargin: Math.round(UM.Theme.getSize("default_margin").height / 2) + text: configuration.buildplateConfiguration + renderType: Text.NativeRendering + color: textColor } } } - //Buildplate row separator - Rectangle + Connections { - id: separator - - visible: buildplateInformation.visible - width: parent.width - 2 * parent.padding - height: visible ? Math.round(UM.Theme.getSize("thick_lining").height / 2) : 0 - color: textColor - } - - Item - { - id: buildplateInformation - width: parent.width - 2 * parent.padding - height: childrenRect.height - visible: configuration.buildplateConfiguration != "" - - UM.RecolorImage { - id: buildplateIcon - anchors.left: parent.left - width: UM.Theme.getSize("main_window_header_button_icon").width - height: UM.Theme.getSize("main_window_header_button_icon").height - sourceSize.width: width - sourceSize.height: height - source: UM.Theme.getIcon("buildplate") - color: textColor - } - - Label + target: Cura.MachineManager + onCurrentConfigurationChanged: { - id: buildplateLabel - anchors.left: buildplateIcon.right - anchors.verticalCenter: buildplateIcon.verticalCenter - anchors.leftMargin: Math.round(UM.Theme.getSize("default_margin").height / 2) - text: configuration.buildplateConfiguration - renderType: Text.NativeRendering - color: textColor + configurationItem.checked = Cura.MachineManager.matchesConfiguration(configuration) } } - } - MouseArea - { - id: mouse - anchors.fill: parent - onClicked: activateConfiguration() - cursorShape: Qt.PointingHandCursor - hoverEnabled: true - onEntered: + Component.onCompleted: { - parent.border.color = UM.Theme.getColor("configuration_item_border_hover") - if (configurationItem.selected == false) - { - configurationItem.color = UM.Theme.getColor("wide_lining") - } - } - onExited: - { - updateBorderColor() - if (configurationItem.selected == false) - { - configurationItem.color = UM.Theme.getColor("configuration_item") - } - } - } - - Connections - { - target: Cura.MachineManager - onCurrentConfigurationChanged: { - configurationItem.selected = Cura.MachineManager.matchesConfiguration(configuration) - updateBorderColor() - } - } - - Component.onCompleted: - { - configurationItem.selected = Cura.MachineManager.matchesConfiguration(configuration) - updateBorderColor() - } - - onVisibleChanged: - { - if(visible) - { - // I cannot trigger function updateBorderColor() after visibility change - color = selected ? UM.Theme.getColor("configuration_item_active") : UM.Theme.getColor("configuration_item") + configurationItem.checked = Cura.MachineManager.matchesConfiguration(configuration) } } } \ No newline at end of file diff --git a/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml b/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml index 2f5bf0b1a2..7df93b9cbe 100644 --- a/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml +++ b/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml @@ -2,8 +2,7 @@ // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.7 -import QtQuick.Controls 1.4 -import QtQuick.Controls.Styles 1.4 +import QtQuick.Controls 2.4 import UM 1.2 as UM import Cura 1.0 as Cura @@ -31,8 +30,10 @@ Column width: parent.width - parent.padding height: Math.min(configurationList.contentHeight, 350 * screenScaleFactor) - style: UM.Theme.styles.scrollview - __wheelAreaScrollSpeed: 75 // Scroll three lines in one scroll event + ButtonGroup + { + buttons: configurationList.children + } ListView { @@ -64,6 +65,7 @@ Column } model: (outputDevice != null) ? outputDevice.uniqueConfigurations : [] + delegate: ConfigurationItem { width: parent.width - UM.Theme.getSize("default_margin").width