From 309061ce3113df6dd7f7c9e9762526b1ce0973c5 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 27 Nov 2018 17:16:52 +0100 Subject: [PATCH 1/7] Add a new ToolbarButton Now also the Extruder button is a toolbar button since it will show in the toolbar. --- resources/qml/ExtruderButton.qml | 18 +++---- resources/qml/Toolbar.qml | 25 ++++++--- resources/qml/ToolbarButton.qml | 92 ++++++++++++++++++++++++++++++++ resources/qml/qmldir | 3 +- 4 files changed, 117 insertions(+), 21 deletions(-) create mode 100644 resources/qml/ToolbarButton.qml diff --git a/resources/qml/ExtruderButton.qml b/resources/qml/ExtruderButton.qml index d7cbdc52bc..feb399d528 100644 --- a/resources/qml/ExtruderButton.qml +++ b/resources/qml/ExtruderButton.qml @@ -7,7 +7,7 @@ import QtQuick.Controls 2.0 import UM 1.2 as UM import Cura 1.0 as Cura -Button +Cura.ToolbarButton { id: base @@ -18,22 +18,16 @@ Button checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1 enabled: UM.Selection.hasSelection && extruder.stack.isEnabled - background: Item {} - contentItem: Item + toolItem: ExtruderIcon { - // For some reason if the extruder icon is not enclosed to the item, the size changes to fill the size of the button - ExtruderIcon - { - anchors.centerIn: parent - materialColor: model.color - extruderEnabled: extruder.stack.isEnabled - property int index: extruder.index - } + materialColor: extruder.color + extruderEnabled: extruder.stack.isEnabled + property int index: extruder.index } onClicked: { forceActiveFocus() //First grab focus, so all the text fields are updated - CuraActions.setExtruderForSelection(extruder.id); + CuraActions.setExtruderForSelection(extruder.id) } } diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml index 0240aaab26..3a4e7704c0 100644 --- a/resources/qml/Toolbar.qml +++ b/resources/qml/Toolbar.qml @@ -55,17 +55,25 @@ Item model: UM.ToolModel { id: toolsModel } width: childrenRect.width height: childrenRect.height - Button + + delegate: ToolbarButton { text: model.name + (model.shortcut ? (" (" + model.shortcut + ")") : "") - iconSource: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon checkable: true checked: model.active enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled - style: UM.Theme.styles.toolbar_button - property bool isFirstElement: toolsModel.getItem(0).id == model.id - property bool isLastElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id + topElement: toolsModel.getItem(0).id == model.id + bottomElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id + + toolItem: UM.RecolorImage + { + opacity: parent.enabled ? 1.0 : 0.2 + source: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon + color: UM.Theme.getColor("toolbar_button_text") + + sourceSize: UM.Theme.getSize("button_icon") + } onCheckedChanged: { @@ -128,11 +136,12 @@ Item height: childrenRect.height property var _model: Cura.ExtrudersModel { id: extrudersModel } model: _model.items.length > 1 ? _model : 0 - ExtruderButton + + delegate: ExtruderButton { extruder: model - height: UM.Theme.getSize("button").width - width: UM.Theme.getSize("button").width + topElement: extrudersModel.getItem(0).id == model.id + bottomElement: extrudersModel.getItem(extrudersModel.rowCount() - 1).id == model.id } } } diff --git a/resources/qml/ToolbarButton.qml b/resources/qml/ToolbarButton.qml new file mode 100644 index 0000000000..7241b489b6 --- /dev/null +++ b/resources/qml/ToolbarButton.qml @@ -0,0 +1,92 @@ +// 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.3 + +import UM 1.2 as UM +import Cura 1.0 as Cura + +Button +{ + id: base + + property alias toolItem: contentItemLoader.sourceComponent + property bool topElement: false + property bool bottomElement: false + + hoverEnabled: true + + background: Rectangle + { + 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 "red" //UM.Theme.getColor("toolbar_button_active") + } + else if(base.hovered) + { + return UM.Theme.getColor("toolbar_button_hover") + } + return UM.Theme.getColor("toolbar_background") + } + radius: UM.Theme.getSize("default_radius").width + + Rectangle + { + id: topSquare + anchors + { + left: parent.left + right: parent.right + top: parent.top + } + height: parent.radius + color: base.topElement ? "transparent" : parent.color + } + + Rectangle + { + id: bottomSquare + anchors + { + left: parent.left + right: parent.right + bottom: parent.bottom + } + height: parent.radius + color: base.bottomElement ? "transparent" : parent.color + } + + Rectangle + { + id: leftSquare + anchors + { + left: parent.left + top: parent.top + bottom: parent.bottom + } + width: parent.radius + color: parent.color + } + } + + contentItem: Item + { + Loader + { + id: contentItemLoader + anchors.centerIn: parent + width: UM.Theme.getSize("button_icon").width + height: UM.Theme.getSize("button_icon").height + } + } +} diff --git a/resources/qml/qmldir b/resources/qml/qmldir index 43ae4411af..2475f398f8 100644 --- a/resources/qml/qmldir +++ b/resources/qml/qmldir @@ -12,4 +12,5 @@ IconLabel 1.0 IconLabel.qml OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml ExpandableComponent 1.0 ExpandableComponent.qml PrinterTypeLabel 1.0 PrinterTypeLabel.qml -ViewsSelector 1.0 ViewsSelector.qml \ No newline at end of file +ViewsSelector 1.0 ViewsSelector.qml +ToolbarButton 1.0 ToolbarButton.qml \ No newline at end of file From 14b460a626bfbb58b0bc8eff6621f46e8d400ecb Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 27 Nov 2018 17:25:10 +0100 Subject: [PATCH 2/7] Remove unused styles --- resources/qml/Toolbar.qml | 5 +- resources/qml/ToolbarButton.qml | 3 +- resources/themes/cura-light/styles.qml | 117 ------------------------- 3 files changed, 3 insertions(+), 122 deletions(-) diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml index 3a4e7704c0..0207c8ec49 100644 --- a/resources/qml/Toolbar.qml +++ b/resources/qml/Toolbar.qml @@ -2,9 +2,7 @@ // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.2 -import QtQuick.Controls 1.1 -import QtQuick.Controls.Styles 1.1 -import QtQuick.Layouts 1.1 +import QtQuick.Controls 2.3 import UM 1.2 as UM import Cura 1.0 as Cura @@ -68,7 +66,6 @@ Item toolItem: UM.RecolorImage { - opacity: parent.enabled ? 1.0 : 0.2 source: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon color: UM.Theme.getColor("toolbar_button_text") diff --git a/resources/qml/ToolbarButton.qml b/resources/qml/ToolbarButton.qml index 7241b489b6..b5e5aab475 100644 --- a/resources/qml/ToolbarButton.qml +++ b/resources/qml/ToolbarButton.qml @@ -29,7 +29,7 @@ Button } else if (base.checked) { - return "red" //UM.Theme.getColor("toolbar_button_active") + return UM.Theme.getColor("toolbar_button_active") } else if(base.hovered) { @@ -81,6 +81,7 @@ Button contentItem: Item { + opacity: parent.enabled ? 1.0 : 0.2 Loader { id: contentItemLoader diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index f00aab44c0..e040d91df9 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -171,123 +171,6 @@ QtObject } } - property Component toolbar_button: Component - { - ButtonStyle - { - background: Rectangle - { - implicitWidth: Theme.getSize("button").width - implicitHeight: Theme.getSize("button").height - color: - { - if (control.checked && control.hovered) - { - return Theme.getColor("toolbar_button_active_hover") - } - else if (control.checked) - { - return Theme.getColor("toolbar_button_active") - } - else if(control.hovered) - { - return Theme.getColor("toolbar_button_hover") - } - return Theme.getColor("toolbar_background") - } - radius: UM.Theme.getSize("default_radius").width - - Rectangle - { - id: topSquare - anchors - { - left: parent.left - right: parent.right - top: parent.top - } - height: parent.radius - color: control.isFirstElement ? "transparent" : parent.color - } - - Rectangle - { - id: bottomSquare - anchors - { - left: parent.left - right: parent.right - bottom: parent.bottom - } - height: parent.radius - color: control.isLastElement ? "transparent" : parent.color - } - - Rectangle - { - id: leftSquare - anchors - { - left: parent.left - top: parent.top - bottom: parent.bottom - } - width: parent.radius - color: parent.color - } - - // This is the tooltip - UM.PointingRectangle - { - id: button_tooltip - - anchors.left: parent.right - anchors.leftMargin: Theme.getSize("button_tooltip_arrow").width * 2 - anchors.verticalCenter: parent.verticalCenter - - target: Qt.point(parent.x, y + Math.round(height/2)) - arrowSize: Theme.getSize("button_tooltip_arrow").width - color: Theme.getColor("button_tooltip") - opacity: control.hovered ? 1.0 : 0.0; - visible: control.text != "" - - width: control.hovered ? button_tip.width + Theme.getSize("button_tooltip").width : 0 - height: Theme.getSize("button_tooltip").height - - Behavior on width { NumberAnimation { duration: 100; } } - Behavior on opacity { NumberAnimation { duration: 100; } } - - Label - { - id: button_tip - - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter; - - text: control.text; - font: Theme.getFont("button_tooltip"); - color: Theme.getColor("tooltip_text"); - } - } - } - - label: Item - { - UM.RecolorImage - { - anchors.centerIn: parent; - opacity: !control.enabled ? 0.2 : 1.0 - source: control.iconSource; - width: Theme.getSize("button_icon").width; - height: Theme.getSize("button_icon").height; - color: Theme.getColor("toolbar_button_text"); - - sourceSize: Theme.getSize("button_icon") - } - } - } - } - property Component tool_button: Component { ButtonStyle From c1c5eb221913dd7ce7538ef9d4120f7b69866729 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Wed, 28 Nov 2018 09:44:37 +0100 Subject: [PATCH 3/7] Rename the properties to quickly identify that they are a boolean Contributes to CURA-5984. --- resources/qml/Toolbar.qml | 8 ++++---- resources/qml/ToolbarButton.qml | 12 ++++++++---- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml index 0207c8ec49..d16f949014 100644 --- a/resources/qml/Toolbar.qml +++ b/resources/qml/Toolbar.qml @@ -61,8 +61,8 @@ Item checked: model.active enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled - topElement: toolsModel.getItem(0).id == model.id - bottomElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id + isTopElement: toolsModel.getItem(0).id == model.id + isBottomElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id toolItem: UM.RecolorImage { @@ -137,8 +137,8 @@ Item delegate: ExtruderButton { extruder: model - topElement: extrudersModel.getItem(0).id == model.id - bottomElement: extrudersModel.getItem(extrudersModel.rowCount() - 1).id == model.id + isTopElement: extrudersModel.getItem(0).id == model.id + isBottomElement: extrudersModel.getItem(extrudersModel.rowCount() - 1).id == model.id } } } diff --git a/resources/qml/ToolbarButton.qml b/resources/qml/ToolbarButton.qml index b5e5aab475..9e81939ba2 100644 --- a/resources/qml/ToolbarButton.qml +++ b/resources/qml/ToolbarButton.qml @@ -12,8 +12,12 @@ Button id: base property alias toolItem: contentItemLoader.sourceComponent - property bool topElement: false - property bool bottomElement: false + + // These two properties indicate whether the toolbar button is at the top of the toolbar column or at the bottom. + // If it is somewhere in the middle, then both has to be false. If there is only one element in the column, then + // both properties have to be set to true. This is used to create a rounded corner. + property bool isTopElement: false + property bool isBottomElement: false hoverEnabled: true @@ -49,7 +53,7 @@ Button top: parent.top } height: parent.radius - color: base.topElement ? "transparent" : parent.color + color: base.isTopElement ? "transparent" : parent.color } Rectangle @@ -62,7 +66,7 @@ Button bottom: parent.bottom } height: parent.radius - color: base.bottomElement ? "transparent" : parent.color + color: base.isBottomElement ? "transparent" : parent.color } Rectangle From bfebb33123f34894887719f114c942485a48b540 Mon Sep 17 00:00:00 2001 From: Jaime van Kessel Date: Wed, 28 Nov 2018 10:28:16 +0100 Subject: [PATCH 4/7] Code style CURA-5984 Co-Authored-By: diegopradogesto --- resources/qml/Toolbar.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml index d16f949014..07522dd535 100644 --- a/resources/qml/Toolbar.qml +++ b/resources/qml/Toolbar.qml @@ -66,7 +66,7 @@ Item toolItem: UM.RecolorImage { - source: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon + source: UM.Theme.getIcon(model.icon) != "" ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon color: UM.Theme.getColor("toolbar_button_text") sourceSize: UM.Theme.getSize("button_icon") From 454b47e3a0e7c9d50a5e8ebad5933182872f0782 Mon Sep 17 00:00:00 2001 From: Jaime van Kessel Date: Wed, 28 Nov 2018 10:29:35 +0100 Subject: [PATCH 5/7] Change visibility behavior of the rectangle CURA-5984 Co-Authored-By: diegopradogesto --- resources/qml/ToolbarButton.qml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/qml/ToolbarButton.qml b/resources/qml/ToolbarButton.qml index 9e81939ba2..90e9160d3d 100644 --- a/resources/qml/ToolbarButton.qml +++ b/resources/qml/ToolbarButton.qml @@ -66,7 +66,8 @@ Button bottom: parent.bottom } height: parent.radius - color: base.isBottomElement ? "transparent" : parent.color + color: parent.color + visible: base.isBottomElement } Rectangle From d0da70a7eea8c6991afebc5488e7a2c39fae9ab1 Mon Sep 17 00:00:00 2001 From: Jaime van Kessel Date: Wed, 28 Nov 2018 10:29:53 +0100 Subject: [PATCH 6/7] Change visibility of the rectangle CURA-5984 Co-Authored-By: diegopradogesto --- resources/qml/ToolbarButton.qml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/qml/ToolbarButton.qml b/resources/qml/ToolbarButton.qml index 90e9160d3d..157c6a34ac 100644 --- a/resources/qml/ToolbarButton.qml +++ b/resources/qml/ToolbarButton.qml @@ -53,7 +53,8 @@ Button top: parent.top } height: parent.radius - color: base.isTopElement ? "transparent" : parent.color + color: parent.color + visible: base.isTopElement } Rectangle From bfa2ff5f5ed84a06460f29a79f1b5cd0e1979187 Mon Sep 17 00:00:00 2001 From: Jaime van Kessel Date: Wed, 28 Nov 2018 10:46:07 +0100 Subject: [PATCH 7/7] Invert visibility of bottom & topsquare It got derped. --- resources/qml/ToolbarButton.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/qml/ToolbarButton.qml b/resources/qml/ToolbarButton.qml index 157c6a34ac..adff73fb7c 100644 --- a/resources/qml/ToolbarButton.qml +++ b/resources/qml/ToolbarButton.qml @@ -54,7 +54,7 @@ Button } height: parent.radius color: parent.color - visible: base.isTopElement + visible: !base.isTopElement } Rectangle @@ -68,7 +68,7 @@ Button } height: parent.radius color: parent.color - visible: base.isBottomElement + visible: !base.isBottomElement } Rectangle