From 9bf18031ce33f41d649e5471048ac84a3dc06bd9 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Sun, 11 Nov 2018 19:15:02 +0100 Subject: [PATCH 1/2] Apply restyle of the toolbar according to the new designs. --- .../qml/ActionPanel/ActionPanelWidget.qml | 1 - resources/qml/Cura.qml | 2 + resources/qml/ExtruderButton.qml | 35 +++-- resources/qml/Toolbar.qml | 130 +++++++++++------- resources/themes/cura-light/styles.qml | 75 ++++++++++ resources/themes/cura-light/theme.json | 9 +- 6 files changed, 185 insertions(+), 67 deletions(-) diff --git a/resources/qml/ActionPanel/ActionPanelWidget.qml b/resources/qml/ActionPanel/ActionPanelWidget.qml index 0db778de5a..a1cd81e9e9 100644 --- a/resources/qml/ActionPanel/ActionPanelWidget.qml +++ b/resources/qml/ActionPanel/ActionPanelWidget.qml @@ -23,7 +23,6 @@ Rectangle border.width: UM.Theme.getSize("default_lining").width border.color: UM.Theme.getColor("lining") radius: UM.Theme.getSize("default_radius").width - visible: CuraApplication.platformActivity property bool outputAvailable: UM.Backend.state == UM.Backend.Done || UM.Backend.state == UM.Backend.Disabled diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml index dc64aeee38..819d986ece 100644 --- a/resources/qml/Cura.qml +++ b/resources/qml/Cura.qml @@ -186,6 +186,7 @@ UM.MainWindow verticalCenter: parent.verticalCenter left: parent.left } + visible: CuraApplication.platformActivity } ObjectsList @@ -235,6 +236,7 @@ UM.MainWindow anchors.bottom: parent.bottom anchors.rightMargin: UM.Theme.getSize("thick_margin").width anchors.bottomMargin: UM.Theme.getSize("thick_margin").height + visible: CuraApplication.platformActivity } Loader diff --git a/resources/qml/ExtruderButton.qml b/resources/qml/ExtruderButton.qml index 2c1b80047e..7923521658 100644 --- a/resources/qml/ExtruderButton.qml +++ b/resources/qml/ExtruderButton.qml @@ -15,37 +15,36 @@ Button text: catalog.i18ncp("@label %1 is filled in with the name of an extruder", "Print Selected Model with %1", "Print Selected Models with %1", UM.Selection.selectionCount).arg(extruder.name) - style: UM.Theme.styles.tool_button; + style: UM.Theme.styles.toolbar_button iconSource: UM.Theme.getIcon("extruder_button") checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1 enabled: UM.Selection.hasSelection && extruder.stack.isEnabled - property color customColor: base.hovered ? UM.Theme.getColor("button_hover") : UM.Theme.getColor("button"); - - Rectangle - { - anchors.fill: parent - anchors.margins: UM.Theme.getSize("default_lining").width; - - color: "transparent" - - border.width: base.checked ? UM.Theme.getSize("default_lining").width : 0; - border.color: UM.Theme.getColor("button_text") - } - Item { anchors.centerIn: parent width: UM.Theme.getSize("default_margin").width height: UM.Theme.getSize("default_margin").height + opacity: !base.enabled ? 0.2 : 1.0 Label { - anchors.centerIn: parent; - text: index + 1; - color: parent.enabled ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_disabled_text") - font: UM.Theme.getFont("default_bold"); + anchors.centerIn: parent + text: index + 1 + color: + { + if (base.checked) + { + return UM.Theme.getColor("toolbar_button_text_active") + } + else if(base.hovered) + { + return UM.Theme.getColor("toolbar_button_text_hover") + } + return UM.Theme.getColor("toolbar_button_text") + } + font: UM.Theme.getFont("default_bold") } } diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml index a04b3650df..9955ceeba7 100644 --- a/resources/qml/Toolbar.qml +++ b/resources/qml/Toolbar.qml @@ -11,75 +11,113 @@ import Cura 1.0 as Cura Item { - id: base; + id: base - width: buttons.width; + width: buttons.width height: buttons.height property int activeY - Column + Item { - id: buttons; + id: buttons + width: parent.visible ? toolButtons.width : 0 + height: childrenRect.height - anchors.bottom: parent.bottom - anchors.left: parent.left - spacing: UM.Theme.getSize("button_lining").width + Behavior on width { NumberAnimation { duration: 100 } } - Repeater + // Used to create a rounded rectangle behind the toolButtons + Rectangle { - id: repeat + anchors.fill: toolButtons + anchors.leftMargin: -radius + radius: UM.Theme.getSize("default_radius").width + border.width: UM.Theme.getSize("default_lining").width + border.color: UM.Theme.getColor("lining") + color: UM.Theme.getColor("toolbar_background") + } - model: UM.ToolModel { } - width: childrenRect.width - height: childrenRect.height - Button + Column + { + id: toolButtons + + anchors.top: parent.top + anchors.right: parent.right + spacing: UM.Theme.getSize("button_lining").width + + Repeater { - 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.tool_button + id: repeat - onCheckedChanged: + model: UM.ToolModel { } + width: childrenRect.width + height: childrenRect.height + Button { - if (checked) - { - base.activeY = y; - } - } + 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 - //Workaround since using ToolButton's onClicked would break the binding of the checked property, instead - //just catch the click so we do not trigger that behaviour. - MouseArea - { - anchors.fill: parent; - onClicked: + onCheckedChanged: { - forceActiveFocus() //First grab focus, so all the text fields are updated - if(parent.checked) + if (checked) { - UM.Controller.setActiveTool(null); + base.activeY = y; } - else + } + + //Workaround since using ToolButton's onClicked would break the binding of the checked property, instead + //just catch the click so we do not trigger that behaviour. + MouseArea + { + anchors.fill: parent; + onClicked: { - UM.Controller.setActiveTool(model.id); + forceActiveFocus() //First grab focus, so all the text fields are updated + if(parent.checked) + { + UM.Controller.setActiveTool(null); + } + else + { + UM.Controller.setActiveTool(model.id); + } } } } } } - Item { height: UM.Theme.getSize("default_margin").height; width: UM.Theme.getSize("default_lining").width; visible: extruders.count > 0 } - - Repeater + // Used to create a rounded rectangle behind the extruderButtons + Rectangle { - id: extruders - width: childrenRect.width - height: childrenRect.height - property var _model: Cura.ExtrudersModel { id: extrudersModel } - model: _model.items.length > 1 ? _model : 0 - ExtruderButton { extruder: model } + anchors.fill: extruderButtons + anchors.leftMargin: -radius + radius: UM.Theme.getSize("default_radius").width + border.width: UM.Theme.getSize("default_lining").width + border.color: UM.Theme.getColor("lining") + color: UM.Theme.getColor("toolbar_background") + } + + Column + { + id: extruderButtons + + anchors.topMargin: UM.Theme.getSize("default_margin").height + anchors.top: toolButtons.bottom + anchors.right: parent.right + + Repeater + { + id: extruders + width: childrenRect.width + height: childrenRect.height + property var _model: Cura.ExtrudersModel { id: extrudersModel } + model: _model.items.length > 1 ? _model : 0 + ExtruderButton { extruder: model } + } } } @@ -91,7 +129,7 @@ Item anchors.leftMargin: UM.Theme.getSize("default_margin").width; anchors.top: base.top; anchors.topMargin: base.activeY - z: buttons.z -1 + z: buttons.z - 1 target: Qt.point(parent.right, base.activeY + Math.round(UM.Theme.getSize("button").height/2)) arrowSize: UM.Theme.getSize("default_arrow").width diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index 503a3eddca..52ae3cd243 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -171,6 +171,81 @@ QtObject } } + property Component toolbar_button: Component + { + ButtonStyle + { + background: Item + { + implicitWidth: Theme.getSize("button").width; + implicitHeight: Theme.getSize("button").height; + + 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: + { + if(control.checkable && control.checked && control.hovered) + { + return Theme.getColor("toolbar_button_text_active_hover"); + } + else if(control.pressed || (control.checkable && control.checked)) + { + return Theme.getColor("toolbar_button_text_active"); + } + else if(control.hovered) + { + return Theme.getColor("toolbar_button_text_hover"); + } + return Theme.getColor("toolbar_button_text"); + } + + sourceSize: Theme.getSize("button_icon") + } + } + } + } + property Component tool_button: Component { ButtonStyle diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 48cf5d456d..a33ff87042 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -105,6 +105,8 @@ "action_panel_secondary": [27, 95, 202, 255], + "toolbar_background": [255, 255, 255, 255], + "text": [0, 0, 0, 255], "text_detail": [174, 174, 174, 128], "text_link": [50, 130, 255, 255], @@ -120,6 +122,11 @@ "error": [255, 140, 0, 255], "warning": [255, 190, 35, 255], + "toolbar_button_text": [10, 8, 80, 255], + "toolbar_button_text_hover": [50, 130, 255, 255], + "toolbar_button_text_active": [50, 130, 255, 255], + "toolbar_button_text_active_hover": [50, 130, 255, 255], + "button": [31, 36, 39, 255], "button_hover": [68, 72, 75, 255], "button_active": [68, 72, 75, 255], @@ -128,8 +135,6 @@ "button_text_hover": [255, 255, 255, 255], "button_text_active": [255, 255, 255, 255], "button_text_active_hover": [255, 255, 255, 255], - "button_disabled": [31, 36, 39, 255], - "button_disabled_text": [255, 255, 255, 101], "small_button": [0, 0, 0, 0], "small_button_hover": [10, 8, 80, 255], From f534885e341bd3fd1098d59e55c7231ff29c5b76 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Mon, 12 Nov 2018 09:35:32 +0100 Subject: [PATCH 2/2] Modify the color behavior of the toolbar buttons. --- resources/themes/cura-light/styles.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index 52ae3cd243..6f099bf1c5 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -225,11 +225,11 @@ QtObject height: Theme.getSize("button_icon").height; color: { - if(control.checkable && control.checked && control.hovered) + if (control.checked && control.hovered) { return Theme.getColor("toolbar_button_text_active_hover"); } - else if(control.pressed || (control.checkable && control.checked)) + else if (control.checked) { return Theme.getColor("toolbar_button_text_active"); }