Merge branch 'cura4.0_action_panel' into cura4.0_header

resources/qml/ActionButton.qml

@@ -14,6 +14,7 @@ Button
     property alias iconSource: buttonIcon.source
     property alias textFont: buttonText.font
     property alias cornerRadius: backgroundRect.radius
+    property alias tooltip: tooltip.text
     property var color: UM.Theme.getColor("primary")
     property var hoverColor: UM.Theme.getColor("primary_hover")
     property var disabledColor: color
@@ -23,6 +24,10 @@ Button
     property var outlineColor: color
     property var outlineHoverColor: hoverColor
     property var outlineDisabledColor: outlineColor
+    // 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.
+    property var fixedWidthMode: false
 
     contentItem: Row
     {
@@ -48,6 +53,9 @@ Button
             visible: text != ""
             renderType: Text.NativeRendering
             anchors.verticalCenter: parent.verticalCenter
+            width: fixedWidthMode ? button.width - button.leftPadding - button.rightPadding : undefined
+            horizontalAlignment: Text.AlignHCenter
+            elide: Text.ElideRight
         }
     }
 
@@ -60,6 +68,14 @@ Button
         border.color: button.enabled ? (button.hovered ? button.outlineHoverColor : button.outlineColor) : button.outlineDisabledColor
     }
 
+    ToolTip
+    {
+        id: tooltip
+        text: ""
+        delay: 500
+        visible: text != "" && button.hovered
+    }
+
     MouseArea
     {
         id: mouseArea