From 69daa0d91a2d7a70fa9d4e3a5d90778799dbca31 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Sun, 11 Nov 2018 12:44:56 +0100 Subject: [PATCH 1/7] Rename Toolbox menu to Marketplace. It was remove by mistake in a merge conflict. Contributes to CURA-5784. --- resources/qml/MainWindow/ApplicationMenu.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/qml/MainWindow/ApplicationMenu.qml b/resources/qml/MainWindow/ApplicationMenu.qml index d3bc115419..04c068cb54 100644 --- a/resources/qml/MainWindow/ApplicationMenu.qml +++ b/resources/qml/MainWindow/ApplicationMenu.qml @@ -86,7 +86,7 @@ Item Menu { id: plugin_menu - title: catalog.i18nc("@title:menu menubar:toplevel", "&Toolbox") + title: catalog.i18nc("@title:menu menubar:toplevel", "&Marketplace") MenuItem { action: Cura.Actions.browsePackages } } From 3669a3791dc04f9fa35a9ef62cd3e57b8667ce94 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Sun, 11 Nov 2018 12:56:30 +0100 Subject: [PATCH 2/7] Hide the Preview shortcut in the action panel when the active stage is the PreviewStage. Also adjust the size of the output button when the Preview button is not visible. Contributes to CURA-5786. --- resources/qml/ActionPanel/OutputProcessWidget.qml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/resources/qml/ActionPanel/OutputProcessWidget.qml b/resources/qml/ActionPanel/OutputProcessWidget.qml index 0ea956d1dc..f4e014b1ec 100644 --- a/resources/qml/ActionPanel/OutputProcessWidget.qml +++ b/resources/qml/ActionPanel/OutputProcessWidget.qml @@ -102,6 +102,8 @@ Column Cura.ActionButton { + id: previewStageShortcut + leftPadding: UM.Theme.getSize("default_margin").width rightPadding: UM.Theme.getSize("default_margin").width height: UM.Theme.getSize("action_panel_button").height @@ -111,11 +113,12 @@ Column textColor: UM.Theme.getColor("primary") textHoverColor: UM.Theme.getColor("text") onClicked: UM.Controller.setActiveStage("PreviewStage") + visible: UM.Controller.activeStage != null && UM.Controller.activeStage.stageId != "PreviewStage" } Cura.OutputDevicesActionButton { - width: UM.Theme.getSize("action_panel_button").width + width: previewStageShortcut.visible ? UM.Theme.getSize("action_panel_button").width : parent.width height: UM.Theme.getSize("action_panel_button").height } } From f65b1f8fbc183fb1b696baacc263c54ef9246f03 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Sun, 11 Nov 2018 13:16:38 +0100 Subject: [PATCH 3/7] Add soft animation to the entire popup and not only in the background. This prevents the content to show before the background. Contributes to CURA-5784. --- resources/qml/Account/AccountWidget.qml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/resources/qml/Account/AccountWidget.qml b/resources/qml/Account/AccountWidget.qml index e37523296f..d3bd6fd130 100644 --- a/resources/qml/Account/AccountWidget.qml +++ b/resources/qml/Account/AccountWidget.qml @@ -51,6 +51,9 @@ Button closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent + opacity: opened ? 1 : 0 + Behavior on opacity { NumberAnimation { duration: 100 } } + contentItem: AccountDetails { id: panel @@ -61,8 +64,6 @@ Button background: UM.PointingRectangle { - opacity: visible ? 1 : 0 - Behavior on opacity { NumberAnimation { duration: 100 } } color: UM.Theme.getColor("tool_panel_background") borderColor: UM.Theme.getColor("lining") borderWidth: UM.Theme.getSize("default_lining").width From 8a63a79896b3c22f94562ddc0aec1b939103494b Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Sun, 11 Nov 2018 13:17:59 +0100 Subject: [PATCH 4/7] Add soft animation to the entire popup and not only in the background. This prevents the content to show before the background. Contributes to CURA-5786. --- .../ActionPanel/PrintInformationWidget.qml | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/resources/qml/ActionPanel/PrintInformationWidget.qml b/resources/qml/ActionPanel/PrintInformationWidget.qml index 620c3a408c..82707576e0 100644 --- a/resources/qml/ActionPanel/PrintInformationWidget.qml +++ b/resources/qml/ActionPanel/PrintInformationWidget.qml @@ -7,29 +7,30 @@ import QtQuick.Controls 2.1 import UM 1.1 as UM import Cura 1.0 as Cura -Button +UM.RecolorImage { id: widget - implicitHeight: UM.Theme.getSize("section_icon").height - implicitWidth: UM.Theme.getSize("section_icon").width + //implicitHeight: UM.Theme.getSize("section_icon").height + //implicitWidth: UM.Theme.getSize("section_icon").width - background: UM.RecolorImage + source: UM.Theme.getIcon("info") + width: UM.Theme.getSize("section_icon").width + height: UM.Theme.getSize("section_icon").height + + sourceSize.width: width + sourceSize.height: height + + color: popup.opened ? UM.Theme.getColor("primary") : UM.Theme.getColor("text_medium") + + MouseArea { - id: moreInformationIcon - - source: UM.Theme.getIcon("info") - width: UM.Theme.getSize("section_icon").width - height: UM.Theme.getSize("section_icon").height - - sourceSize.width: width - sourceSize.height: height - - color: widget.hovered ? UM.Theme.getColor("primary") : UM.Theme.getColor("text_medium") + anchors.fill: parent + hoverEnabled: true + onEntered: popup.open() + onExited: popup.close() } - onClicked: popup.opened ? popup.close() : popup.open() - Popup { id: popup @@ -39,6 +40,9 @@ Button closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent + opacity: opened ? 1 : 0 + Behavior on opacity { NumberAnimation { duration: 100 } } + contentItem: PrintJobInformation { id: printJobInformation @@ -47,8 +51,6 @@ Button background: UM.PointingRectangle { - opacity: visible ? 1 : 0 - Behavior on opacity { NumberAnimation { duration: 100 } } color: UM.Theme.getColor("tool_panel_background") borderColor: UM.Theme.getColor("lining") borderWidth: UM.Theme.getSize("default_lining").width From 38a80ecae59eeac754f10cd2ef00054ed09c3ba2 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Sun, 11 Nov 2018 14:06:52 +0100 Subject: [PATCH 5/7] Make some tweaks in the UI for the preview stage. Clean up the default theme a bit by removing unused entries. Contributes to CURA-5829. --- plugins/SimulationView/LayerSlider.qml | 10 ++--- plugins/SimulationView/PathSlider.qml | 9 ++-- .../SimulationViewMainComponent.qml | 4 +- resources/themes/cura-dark/theme.json | 1 - resources/themes/cura-light/styles.qml | 41 ------------------- resources/themes/cura-light/theme.json | 33 ++++++--------- 6 files changed, 21 insertions(+), 77 deletions(-) diff --git a/plugins/SimulationView/LayerSlider.qml b/plugins/SimulationView/LayerSlider.qml index 7916cd62b3..42b8cf0ba0 100644 --- a/plugins/SimulationView/LayerSlider.qml +++ b/plugins/SimulationView/LayerSlider.qml @@ -21,15 +21,12 @@ Item property color lowerHandleColor: UM.Theme.getColor("slider_handle") property color rangeHandleColor: UM.Theme.getColor("slider_groove_fill") property color handleActiveColor: UM.Theme.getColor("slider_handle_active") - property real handleLabelWidth: UM.Theme.getSize("slider_layerview_background").width property var activeHandle: upperHandle // Track properties property real trackThickness: UM.Theme.getSize("slider_groove").width // width of the slider track - property real trackRadius: trackThickness / 2 + property real trackRadius: UM.Theme.getSize("slider_groove_radius").width property color trackColor: UM.Theme.getColor("slider_groove") - property real trackBorderWidth: 1 - property color trackBorderColor: UM.Theme.getColor("slider_groove_border") // value properties property real maximumValue: 100 @@ -90,8 +87,6 @@ Item radius: sliderRoot.trackRadius anchors.centerIn: sliderRoot color: sliderRoot.trackColor - border.width: sliderRoot.trackBorderWidth - border.color: sliderRoot.trackBorderColor visible: sliderRoot.layersVisible } @@ -140,9 +135,10 @@ Item Rectangle { - width: sliderRoot.trackThickness - 2 * sliderRoot.trackBorderWidth + width: sliderRoot.trackThickness height: parent.height + sliderRoot.handleSize anchors.centerIn: parent + radius: sliderRoot.trackRadius color: sliderRoot.rangeHandleColor } diff --git a/plugins/SimulationView/PathSlider.qml b/plugins/SimulationView/PathSlider.qml index 701e54e398..c7a43c6407 100644 --- a/plugins/SimulationView/PathSlider.qml +++ b/plugins/SimulationView/PathSlider.qml @@ -23,10 +23,8 @@ Item // track properties property real trackThickness: UM.Theme.getSize("slider_groove").width - property real trackRadius: trackThickness / 2 + property real trackRadius: UM.Theme.getSize("slider_groove_radius").width property color trackColor: UM.Theme.getColor("slider_groove") - property real trackBorderWidth: 1 // width of the slider track border - property color trackBorderColor: UM.Theme.getColor("slider_groove_border") // value properties property real maximumValue: 100 @@ -68,8 +66,6 @@ Item radius: sliderRoot.trackRadius anchors.centerIn: sliderRoot color: sliderRoot.trackColor - border.width: sliderRoot.trackBorderWidth - border.color: sliderRoot.trackBorderColor visible: sliderRoot.pathsVisible } @@ -86,9 +82,10 @@ Item Rectangle { - height: sliderRoot.trackThickness - 2 * sliderRoot.trackBorderWidth + height: sliderRoot.trackThickness width: parent.width + sliderRoot.handleSize anchors.centerIn: parent + radius: sliderRoot.trackRadius color: sliderRoot.rangeColor } } diff --git a/plugins/SimulationView/SimulationViewMainComponent.qml b/plugins/SimulationView/SimulationViewMainComponent.qml index 784938e5c2..4e038a1cf1 100644 --- a/plugins/SimulationView/SimulationViewMainComponent.qml +++ b/plugins/SimulationView/SimulationViewMainComponent.qml @@ -18,7 +18,7 @@ Item { id: pathSlider height: UM.Theme.getSize("slider_handle").width - width: UM.Theme.getSize("layerview_menu_size").width + width: UM.Theme.getSize("slider_layerview_size").height anchors.bottom: parent.bottom anchors.bottomMargin: UM.Theme.getSize("default_margin").height @@ -166,7 +166,7 @@ Item id: layerSlider width: UM.Theme.getSize("slider_handle").width - height: UM.Theme.getSize("layerview_menu_size").height + height: UM.Theme.getSize("slider_layerview_size").height anchors { diff --git a/resources/themes/cura-dark/theme.json b/resources/themes/cura-dark/theme.json index 344efb6fd1..62b1dbfa0f 100644 --- a/resources/themes/cura-dark/theme.json +++ b/resources/themes/cura-dark/theme.json @@ -135,7 +135,6 @@ "slider_handle": [255, 255, 255, 255], "slider_handle_hover": [77, 182, 226, 255], "slider_handle_active": [68, 192, 255, 255], - "slider_handle_border": [39, 44, 48, 255], "slider_text_background": [255, 255, 255, 255], "checkbox": [43, 48, 52, 255], diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index dacff1b42b..503a3eddca 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -915,47 +915,6 @@ QtObject } } - property Component slider: Component - { - SliderStyle - { - groove: Rectangle - { - implicitWidth: control.width - implicitHeight: Theme.getSize("slider_groove").height - - color: Theme.getColor("slider_groove") - border.width: Theme.getSize("default_lining").width - border.color: Theme.getColor("slider_groove_border") - - radius: Math.round(width / 2) - - Rectangle - { - anchors - { - left: parent.left - top: parent.top - bottom: parent.bottom - } - color: Theme.getColor("slider_groove_fill"); - width: Math.round((control.value / (control.maximumValue - control.minimumValue)) * parent.width); - radius: Math.round(width / 2); - } - } - handle: Rectangle - { - width: Theme.getSize("slider_handle").width; - height: Theme.getSize("slider_handle").height; - color: control.hovered ? Theme.getColor("slider_handle_hover") : Theme.getColor("slider_handle"); - border.width: Theme.getSize("default_lining").width - border.color: control.hovered ? Theme.getColor("slider_handle_hover_border") : Theme.getColor("slider_handle_border") - radius: Math.round(Theme.getSize("slider_handle").width / 2); //Round. - Behavior on color { ColorAnimation { duration: 50; } } - } - } - } - property Component text_field: Component { TextFieldStyle diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index f882277d65..48cf5d456d 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -131,11 +131,11 @@ "button_disabled": [31, 36, 39, 255], "button_disabled_text": [255, 255, 255, 101], - "small_button": [31, 36, 39, 0], - "small_button_hover": [68, 72, 75, 255], - "small_button_active": [68, 72, 75, 255], - "small_button_active_hover": [68, 72, 75, 255], - "small_button_text": [31, 36, 39, 197], + "small_button": [0, 0, 0, 0], + "small_button_hover": [10, 8, 80, 255], + "small_button_active": [10, 8, 80, 255], + "small_button_active_hover": [10, 8, 80, 255], + "small_button_text": [171, 171, 191, 255], "small_button_text_hover": [255, 255, 255, 255], "small_button_text_active": [255, 255, 255, 255], "small_button_text_active_hover": [255, 255, 255, 255], @@ -215,13 +215,11 @@ "progressbar_background": [245, 245, 245, 255], "progressbar_control": [50, 130, 255, 255], - "slider_groove": [245, 245, 245, 255], - "slider_groove_border": [127, 127, 127, 255], - "slider_groove_fill": [127, 127, 127, 255], - "slider_handle": [0, 0, 0, 255], + "slider_groove": [223, 223, 223, 255], + "slider_groove_fill": [10, 8, 80, 255], + "slider_handle": [10, 8, 80, 255], "slider_handle_hover": [77, 182, 226, 255], - "slider_handle_active": [68, 192, 255, 255], - "slider_handle_border": [39, 44, 48, 255], + "slider_handle_active": [50, 130, 255, 255], "slider_text_background": [255, 255, 255, 255], "quality_slider_unavailable": [179, 179, 179, 255], @@ -449,17 +447,12 @@ "scrollbar": [0.75, 0.5], - "quality_slider_bar": [1, 0.2], - - "slider_groove": [0.3, 0.3], - "slider_handle": [1.0, 1.0], - "slider_layerview_size": [1.0, 22.0], - "slider_layerview_background": [4.0, 0.0], - "slider_layerview_margin": [1.0, 1.5], + "slider_groove": [0.5, 0.5], + "slider_groove_radius": [0.15, 0.15], + "slider_handle": [1.5, 1.5], + "slider_layerview_size": [1.0, 26.0], "layerview_menu_size": [15, 20], - "layerview_menu_size_material_color_mode": [15, 16], - "layerview_menu_size_collapsed": [15, 6], "layerview_legend_size": [1.0, 1.0], "layerview_row": [11.0, 1.5], "layerview_row_spacing": [0.0, 0.5], From 9bf18031ce33f41d649e5471048ac84a3dc06bd9 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Sun, 11 Nov 2018 19:15:02 +0100 Subject: [PATCH 6/7] 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 7/7] 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"); }