From 2bf641efcfef28bbdae869ab3bfb6d8d4f70d8de Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Mon, 10 Dec 2018 09:09:58 +0100 Subject: [PATCH 1/4] Add a Cura Tooltip to show in some buttons Contributes to CURA-6004. --- resources/qml/ActionButton.qml | 8 ++-- .../ActionPanel/OutputDevicesActionButton.qml | 1 - .../qml/ActionPanel/SliceProcessWidget.qml | 1 + resources/qml/PrintSetupTooltip.qml | 5 +-- resources/qml/ToolTip.qml | 43 +++++++++++++++++++ resources/qml/ToolbarButton.qml | 7 +++ resources/qml/qmldir | 3 +- resources/themes/cura-light/theme.json | 2 +- 8 files changed, 59 insertions(+), 11 deletions(-) create mode 100644 resources/qml/ToolTip.qml diff --git a/resources/qml/ActionButton.qml b/resources/qml/ActionButton.qml index 7177120f35..aa4d3f21c0 100644 --- a/resources/qml/ActionButton.qml +++ b/resources/qml/ActionButton.qml @@ -16,7 +16,7 @@ Button property alias iconSource: buttonIconLeft.source property alias textFont: buttonText.font property alias cornerRadius: backgroundRect.radius - property alias tooltip: tooltip.text + property alias tooltip: tooltip.tooltipText property alias cornerSide: backgroundRect.cornerSide property color color: UM.Theme.getColor("primary") @@ -109,11 +109,9 @@ Button z: backgroundRect.z - 1 } - ToolTip + Cura.ToolTip { id: tooltip - text: "" - delay: 500 - visible: text != "" && button.hovered + show: button.hovered } } \ No newline at end of file diff --git a/resources/qml/ActionPanel/OutputDevicesActionButton.qml b/resources/qml/ActionPanel/OutputDevicesActionButton.qml index 9a6c97bcff..2858bc267c 100644 --- a/resources/qml/ActionPanel/OutputDevicesActionButton.qml +++ b/resources/qml/ActionPanel/OutputDevicesActionButton.qml @@ -55,7 +55,6 @@ Item leftPadding: UM.Theme.getSize("narrow_margin").width //Need more space than usual here for wide text. rightPadding: UM.Theme.getSize("narrow_margin").width - tooltip: popup.opened ? "" : catalog.i18nc("@info:tooltip", "Select the active output device") iconSource: popup.opened ? UM.Theme.getIcon("arrow_top") : UM.Theme.getIcon("arrow_bottom") color: UM.Theme.getColor("action_panel_secondary") visible: (devicesModel.deviceCount > 1) diff --git a/resources/qml/ActionPanel/SliceProcessWidget.qml b/resources/qml/ActionPanel/SliceProcessWidget.qml index 18caeafb40..2d377abcd8 100644 --- a/resources/qml/ActionPanel/SliceProcessWidget.qml +++ b/resources/qml/ActionPanel/SliceProcessWidget.qml @@ -109,6 +109,7 @@ Column fixedWidthMode: true anchors.fill: parent text: catalog.i18nc("@button", "Slice") + tooltip: "Start slicing process" enabled: widget.backendState != UM.Backend.Error visible: widget.backendState == UM.Backend.NotStarted || widget.backendState == UM.Backend.Error onClicked: sliceOrStopSlicing() diff --git a/resources/qml/PrintSetupTooltip.qml b/resources/qml/PrintSetupTooltip.qml index 4fa4ef9dd7..693b703813 100644 --- a/resources/qml/PrintSetupTooltip.qml +++ b/resources/qml/PrintSetupTooltip.qml @@ -2,9 +2,7 @@ // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.7 -import QtQuick.Controls 1.1 -import QtQuick.Controls.Styles 1.1 -import QtQuick.Layouts 1.1 +import QtQuick.Controls 2.3 import UM 1.0 as UM @@ -57,5 +55,6 @@ UM.PointingRectangle { textFormat: Text.RichText font: UM.Theme.getFont("default"); color: UM.Theme.getColor("tooltip_text"); + renderType: Text.NativeRendering } } diff --git a/resources/qml/ToolTip.qml b/resources/qml/ToolTip.qml new file mode 100644 index 0000000000..ed71d3983b --- /dev/null +++ b/resources/qml/ToolTip.qml @@ -0,0 +1,43 @@ +// 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.0 as UM + +ToolTip +{ + // This property indicates when the tooltip has to show, for instance when a button is hovered + property bool show: false + + property alias tooltipText: tooltip.text + property var targetPoint: Qt.point(0, 0) + + id: tooltip + text: "" + delay: 500 + visible: text != "" && show + font: UM.Theme.getFont("default") + + background: UM.PointingRectangle + { + id: backgroundRect + color: UM.Theme.getColor("tooltip") + + target: Qt.point(targetPoint.x - tooltip.x, targetPoint.y - tooltip.y) + + arrowSize: UM.Theme.getSize("default_arrow").width + } + + contentItem: Label + { + id: label + text: tooltip.text + font: tooltip.font + wrapMode: Text.Wrap + textFormat: Text.RichText + color: UM.Theme.getColor("tooltip_text") + renderType: Text.NativeRendering + } +} \ No newline at end of file diff --git a/resources/qml/ToolbarButton.qml b/resources/qml/ToolbarButton.qml index adff73fb7c..307d49302c 100644 --- a/resources/qml/ToolbarButton.qml +++ b/resources/qml/ToolbarButton.qml @@ -96,4 +96,11 @@ Button height: UM.Theme.getSize("button_icon").height } } + + Cura.ToolTip + { + id: tooltip + tooltipText: base.text + show: base.hovered + } } diff --git a/resources/qml/qmldir b/resources/qml/qmldir index 1dc21150ce..80e0f8be46 100644 --- a/resources/qml/qmldir +++ b/resources/qml/qmldir @@ -14,4 +14,5 @@ PrinterTypeLabel 1.0 PrinterTypeLabel.qml ViewsSelector 1.0 ViewsSelector.qml ToolbarButton 1.0 ToolbarButton.qml SettingView 1.0 SettingView.qml -ProfileMenu 1.0 ProfileMenu.qml \ No newline at end of file +ProfileMenu 1.0 ProfileMenu.qml +ToolTip 1.0 ToolTip.qml \ No newline at end of file diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 16d13b9652..86201db809 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -240,7 +240,7 @@ "checkbox_disabled": [223, 223, 223, 255], "checkbox_text": [35, 35, 35, 255], - "tooltip": [68, 192, 255, 255], + "tooltip": [19, 19, 19, 255], "tooltip_text": [255, 255, 255, 255], "tool_button_border": [255, 255, 255, 0], From 3953c7bb3a4400f7e49fe3ee53052e317b341f62 Mon Sep 17 00:00:00 2001 From: Aleksei S Date: Wed, 19 Dec 2018 14:24:02 +0100 Subject: [PATCH 2/4] Added Tooltip alignment CURA-6004 --- resources/qml/ActionButton.qml | 2 ++ .../qml/ActionPanel/OutputProcessWidget.qml | 2 ++ resources/qml/ToolTip.qml | 29 +++++++++++++++++-- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/resources/qml/ActionButton.qml b/resources/qml/ActionButton.qml index 675cbb588e..9ceade6a57 100644 --- a/resources/qml/ActionButton.qml +++ b/resources/qml/ActionButton.qml @@ -31,6 +31,8 @@ Button property alias shadowColor: shadow.color property alias shadowEnabled: shadow.visible + property alias toolTipContentAlignment: tooltip.contentAlignment + // This property is used to indicate whether the button has a fixed width or the width would depend on the contents // Be careful when using fixedWidthMode, the translated texts can be too long that they won't fit. In any case, // we elide the text to the right so the text will be cut off with the three dots at the end. diff --git a/resources/qml/ActionPanel/OutputProcessWidget.qml b/resources/qml/ActionPanel/OutputProcessWidget.qml index eb6dc5b417..03fa00d504 100644 --- a/resources/qml/ActionPanel/OutputProcessWidget.qml +++ b/resources/qml/ActionPanel/OutputProcessWidget.qml @@ -123,6 +123,8 @@ Column tooltip: text fixedWidthMode: true + toolTipContentAlignment: Cura.ToolTip.ContentAlignment.AlignLeft + onClicked: UM.Controller.setActiveStage("PreviewStage") visible: UM.Controller.activeStage != null && UM.Controller.activeStage.stageId != "PreviewStage" diff --git a/resources/qml/ToolTip.qml b/resources/qml/ToolTip.qml index ed71d3983b..5e7d436d70 100644 --- a/resources/qml/ToolTip.qml +++ b/resources/qml/ToolTip.qml @@ -5,14 +5,26 @@ import QtQuick 2.7 import QtQuick.Controls 2.3 import UM 1.0 as UM +import Cura 1.0 as Cura ToolTip { + + enum ContentAlignment + { + AlignLeft, + AlignRight + } + // This property indicates when the tooltip has to show, for instance when a button is hovered property bool show: false + // Defines the alignment of the content, by default to the left + property int contentAlignment: Cura.ToolTip.ContentAlignment.AlignRight + property alias tooltipText: tooltip.text - property var targetPoint: Qt.point(0, 0) + property var targetPoint: Qt.point(parent.x, y + Math.round(height/2)) + id: tooltip text: "" @@ -20,13 +32,24 @@ ToolTip visible: text != "" && show font: UM.Theme.getFont("default") + x: + { + if (contentAlignment == Cura.ToolTip.ContentAlignment.AlignLeft) + { + return (label.width + Math.round(UM.Theme.getSize("default_arrow").width * 1.2) + padding * 2) * -1 + } + return parent.width + Math.round(UM.Theme.getSize("default_arrow").width * 1.2 + padding) + } + + y: Math.round(parent.height / 2 - label.height / 2 ) - padding + + padding: 2 + background: UM.PointingRectangle { id: backgroundRect color: UM.Theme.getColor("tooltip") - target: Qt.point(targetPoint.x - tooltip.x, targetPoint.y - tooltip.y) - arrowSize: UM.Theme.getSize("default_arrow").width } From 3f599bd06f817ad39aaeb9d50b6939760e5505ea Mon Sep 17 00:00:00 2001 From: Jaime van Kessel Date: Thu, 20 Dec 2018 16:31:57 +0100 Subject: [PATCH 3/4] Ensure that the tooltip text is translated CURA-6004 --- resources/qml/ActionPanel/SliceProcessWidget.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/qml/ActionPanel/SliceProcessWidget.qml b/resources/qml/ActionPanel/SliceProcessWidget.qml index ab5e224c90..79c0186443 100644 --- a/resources/qml/ActionPanel/SliceProcessWidget.qml +++ b/resources/qml/ActionPanel/SliceProcessWidget.qml @@ -109,7 +109,7 @@ Column fixedWidthMode: true anchors.fill: parent text: catalog.i18nc("@button", "Slice") - tooltip: "Start slicing process" + tooltip: catalog.i18nc("@label", "Start the slicing process") enabled: widget.backendState != UM.Backend.Error visible: widget.backendState == UM.Backend.NotStarted || widget.backendState == UM.Backend.Error onClicked: sliceOrStopSlicing() From 0965d909c09bdc27acb6c04084f35a7d5fac6ed5 Mon Sep 17 00:00:00 2001 From: Jaime van Kessel Date: Thu, 20 Dec 2018 16:41:26 +0100 Subject: [PATCH 4/4] Remove the show property from the tooltip This was a bit of a weird setup, so i removed it. This way the tooltip can be used in the same way as the regular tooltip (by simply setting the visibility) CURA-6004 --- resources/qml/ActionButton.qml | 2 +- resources/qml/ToolTip.qml | 11 ++++------- resources/qml/ToolbarButton.qml | 2 +- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/resources/qml/ActionButton.qml b/resources/qml/ActionButton.qml index 9ceade6a57..6cab04e5ec 100644 --- a/resources/qml/ActionButton.qml +++ b/resources/qml/ActionButton.qml @@ -115,6 +115,6 @@ Button Cura.ToolTip { id: tooltip - show: button.hovered + visible: button.hovered } } \ No newline at end of file diff --git a/resources/qml/ToolTip.qml b/resources/qml/ToolTip.qml index 5e7d436d70..87586f76d8 100644 --- a/resources/qml/ToolTip.qml +++ b/resources/qml/ToolTip.qml @@ -9,28 +9,25 @@ import Cura 1.0 as Cura ToolTip { - enum ContentAlignment { AlignLeft, AlignRight } - // This property indicates when the tooltip has to show, for instance when a button is hovered - property bool show: false - // Defines the alignment of the content, by default to the left property int contentAlignment: Cura.ToolTip.ContentAlignment.AlignRight property alias tooltipText: tooltip.text property var targetPoint: Qt.point(parent.x, y + Math.round(height/2)) - id: tooltip text: "" delay: 500 - visible: text != "" && show font: UM.Theme.getFont("default") + + // If the text is not set, just set the height to 0 to prevent it from showing + height: text != "" ? label.contentHeight + 2 * UM.Theme.getSize("thin_margin").width: 0 x: { @@ -43,7 +40,7 @@ ToolTip y: Math.round(parent.height / 2 - label.height / 2 ) - padding - padding: 2 + padding: UM.Theme.getSize("thin_margin").width background: UM.PointingRectangle { diff --git a/resources/qml/ToolbarButton.qml b/resources/qml/ToolbarButton.qml index 307d49302c..b3f84bba1d 100644 --- a/resources/qml/ToolbarButton.qml +++ b/resources/qml/ToolbarButton.qml @@ -101,6 +101,6 @@ Button { id: tooltip tooltipText: base.text - show: base.hovered + visible: base.hovered } }