Updated action button

CURA-5941

resources/qml/ActionButton.qml

@@ -1,22 +1,17 @@
 // 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.1
-
 import QtGraphicalEffects 1.0 // For the dropshadow
-
 import UM 1.1 as UM
-
 Button
 {
     id: button
-    property alias iconSource: buttonIcon.source
+    property alias iconSource: buttonIconLeft.source
-    property alias iconSourceRight: buttonIconRight.source
+    property var iconOnRightSide: false
     property alias textFont: buttonText.font
     property alias cornerRadius: backgroundRect.radius
     property alias tooltip: tooltip.text
-
     property color color: UM.Theme.getColor("primary")
     property color hoverColor: UM.Theme.getColor("primary_hover")
     property color disabledColor: color
@@ -26,33 +21,31 @@ Button
     property color outlineColor: color
     property color outlineHoverColor: hoverColor
     property color outlineDisabledColor: outlineColor
-
     hoverEnabled: true
-
     property alias shadowColor: shadow.color
     property alias shadowEnabled: shadow.visible
-
     // 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
-
+    leftPadding: UM.Theme.getSize("default_margin").width
-    width: buttonIcon.width + buttonText.width + buttonIconRight.width
+    rightPadding: UM.Theme.getSize("default_margin").width
-    contentItem: Item
+    height: UM.Theme.getSize("action_button").height
+    contentItem: Row
     {
+        //Icon if displayed on the left side.
         UM.RecolorImage
         {
-            id: buttonIcon
+            id: buttonIconLeft
             source: ""
-            height: Math.round(0.6 * parent.height)
+            height: buttonText.height
-            width: height
+            width: visible ? height : 0
             sourceSize.width: width
             sourceSize.height: height
             color: button.hovered ? button.textHoverColor : button.textColor
-            visible: source != ""
+            visible: source != "" && !button.iconOnRightSide
             anchors.verticalCenter: parent.verticalCenter
         }
-
         Label
         {
             id: buttonText
@@ -66,22 +59,21 @@ Button
             horizontalAlignment: Text.AlignHCenter
             elide: Text.ElideRight
         }
-
+        //Icon if displayed on the right side.
         UM.RecolorImage
         {
             id: buttonIconRight
-            source: ""
+            source: buttonIconLeft.source
-            height: Math.round(0.6 * parent.height)
+            anchors.right: parent.right
-            width: height
+            height: buttonText.height
+            width: visible ? height : 0
             sourceSize.width: width
             sourceSize.height: height
-            color: button.hovered ? button.textHoverColor : button.textColor
+            color: buttonIconLeft.color
-            visible: source != ""
+            visible: source != "" && button.iconOnRightSide
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter: buttonIconLeft.verticalCenter
-            anchors.right: source != "" ? parent.right : undefined
         }
     }
-
     background: Rectangle
     {
         id: backgroundRect
@@ -90,7 +82,6 @@ Button
         border.width: UM.Theme.getSize("default_lining").width
         border.color: button.enabled ? (button.hovered ? button.outlineHoverColor : button.outlineColor) : button.outlineDisabledColor
     }
-
     DropShadow
     {
         id: shadow
@@ -103,7 +94,6 @@ Button
         // Should always be drawn behind the background.
         z: backgroundRect.z - 1
     }
-
     ToolTip
     {
         id: tooltip

resources/qml/PrintSetupSelector.qml

@@ -323,18 +323,9 @@ Cura.ExpandableComponent
             Cura.ActionButton
             {
                 id: settingControlButton
-                leftPadding: UM.Theme.getSize("default_margin").width
-                rightPadding: UM.Theme.getSize("default_margin").width
-                height: UM.Theme.getSize("action_panel_button").height
-                text: catalog.i18nc("@button", "Custom")
-                color: UM.Theme.getColor("secondary")
-                hoverColor: UM.Theme.getColor("secondary")
-                textColor: UM.Theme.getColor("primary")
-                textHoverColor: UM.Theme.getColor("text")
-                iconSourceRight: UM.Theme.getIcon("arrow_right")
-                width: UM.Theme.getSize("print_setup_action_button").width
-                fixedWidthMode: true
                 visible: currentModeIndex == 0
+                text: catalog.i18nc("@button", "Custom")
+                width: UM.Theme.getSize("print_setup_action_button").width
                 anchors
                 {
                     top: parent.top
@@ -344,6 +335,13 @@ Cura.ExpandableComponent
                     rightMargin: UM.Theme.getSize("narrow_margin").height
                 }
 
+                color: UM.Theme.getColor("secondary")
+                hoverColor: UM.Theme.getColor("secondary")
+                textColor: UM.Theme.getColor("primary")
+                textHoverColor: UM.Theme.getColor("text")
+                iconSource: UM.Theme.getIcon("arrow_right")
+                iconOnRightSide: true
+
                 onClicked: currentModeIndex = 1
             }
 
@@ -351,13 +349,17 @@ Cura.ExpandableComponent
             {
                 height: UM.Theme.getSize("action_panel_button").height
                 text: catalog.i18nc("@button", "Recommended")
+
                 color: UM.Theme.getColor("secondary")
                 hoverColor: UM.Theme.getColor("secondary")
                 textColor: UM.Theme.getColor("primary")
                 textHoverColor: UM.Theme.getColor("text")
+
                 iconSource: UM.Theme.getIcon("arrow_left")
+
                 width: UM.Theme.getSize("print_setup_action_button").width
                 fixedWidthMode: true
+
                 visible: currentModeIndex == 1
                 anchors
                 {