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..07522dd535 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 @@ -55,17 +53,24 @@ 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 + isTopElement: toolsModel.getItem(0).id == model.id + isBottomElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id + + toolItem: UM.RecolorImage + { + 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 +133,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 + 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 new file mode 100644 index 0000000000..adff73fb7c --- /dev/null +++ b/resources/qml/ToolbarButton.qml @@ -0,0 +1,99 @@ +// 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 + + // 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 + + 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 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: parent.color + visible: !base.isTopElement + } + + Rectangle + { + id: bottomSquare + anchors + { + left: parent.left + right: parent.right + bottom: parent.bottom + } + height: parent.radius + color: parent.color + visible: !base.isBottomElement + } + + Rectangle + { + id: leftSquare + anchors + { + left: parent.left + top: parent.top + bottom: parent.bottom + } + width: parent.radius + color: parent.color + } + } + + contentItem: Item + { + opacity: parent.enabled ? 1.0 : 0.2 + 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 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