Merge pull request #5020 from Ultimaker/CURA-6004_missing_tooltips

Cura 6004 missing tooltips

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")
@@ -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.
@@ -110,11 +112,9 @@ Button
         z: backgroundRect.z - 1
     }
 
-    ToolTip
+    Cura.ToolTip
     {
         id: tooltip
-        text: ""
-        delay: 500
-        visible: text != "" && button.hovered
+        visible: button.hovered
     }
 }

resources/qml/ActionPanel/OutputDevicesActionButton.qml

@@ -60,7 +60,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)

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"
 

resources/qml/ActionPanel/SliceProcessWidget.qml

@@ -109,6 +109,7 @@ Column
             fixedWidthMode: true
             anchors.fill: parent
             text: catalog.i18nc("@button", "Slice")
+            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()

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
     }
 }

resources/qml/ToolTip.qml

@@ -0,0 +1,63 @@
+// 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
+import Cura 1.0 as Cura
+
+ToolTip
+{
+    enum ContentAlignment
+    {
+        AlignLeft,
+        AlignRight
+    }
+
+    // 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
+    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:
+    {
+        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: UM.Theme.getSize("thin_margin").width
+
+    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
+    }
+}

resources/qml/ToolbarButton.qml

@@ -96,4 +96,11 @@ Button
             height: UM.Theme.getSize("button_icon").height
         }
     }
+
+    Cura.ToolTip
+    {
+        id: tooltip
+        tooltipText: base.text
+        visible: base.hovered
+    }
 }

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
+ProfileMenu 1.0 ProfileMenu.qml
+ToolTip 1.0 ToolTip.qml