Update buttons in per object settings plugin to QtControls 2

CURA-8684

plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml

@@ -2,7 +2,8 @@
 // Uranium is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.2
-import QtQuick.Controls 1.2
+import QtQuick.Controls 2.1
+import QtQuick.Controls 1.2 as OldControls
 import QtQuick.Controls.Styles 1.2
 
 import UM 1.5 as UM
@@ -76,7 +77,7 @@ Item
             id: meshTypeButtons
             spacing: UM.Theme.getSize("default_margin").width
 
-            Button
+            ToolBarButton
             {
                 id: normalButton
                 text: catalog.i18nc("@label", "Normal model")
@@ -84,11 +85,10 @@ Item
                 property bool needBorder: true
                 checkable: true
                 onClicked: setMeshType(normalMeshType);
-                style: UM.Theme.styles.tool_button;
                 z: 4
             }
 
-            Button
+            ToolBarButton
             {
                 id: supportMeshButton
                 text: catalog.i18nc("@label", "Print as support")
@@ -96,11 +96,10 @@ Item
                 property bool needBorder: true
                 checkable:true
                 onClicked: setMeshType(supportMeshType)
-                style: UM.Theme.styles.tool_button;
                 z: 3
             }
 
-            Button
+            ToolBarButton
             {
                 id: overlapMeshButton
                 text: catalog.i18nc("@label", "Modify settings for overlaps")
@@ -108,11 +107,10 @@ Item
                 property bool needBorder: true
                 checkable:true
                 onClicked: setMeshType(infillMeshType)
-                style: UM.Theme.styles.tool_button;
                 z: 2
             }
 
-            Button
+            ToolBarButton
             {
                 id: antiOverhangMeshButton
                 text:  catalog.i18nc("@label", "Don't support overlaps")
@@ -120,7 +118,6 @@ Item
                 property bool needBorder: true
                 checkable: true
                 onClicked: setMeshType(antiOverhangMeshType)
-                style: UM.Theme.styles.tool_button;
                 z: 1
             }
 
@@ -179,7 +176,7 @@ Item
             height: Math.min(contents.count * (UM.Theme.getSize("section").height + UM.Theme.getSize("default_lining").height), maximumHeight)
             visible: currentMeshType != "anti_overhang_mesh"
 
-            ScrollView
+            OldControls.ScrollView
             {
                 height: parent.height
                 width: UM.Theme.getSize("setting").width + UM.Theme.getSize("default_margin").width
@@ -292,8 +289,6 @@ Item
 
                             onClicked: addedSettingsModel.setVisible(model.key, false)
 
-                            style: ButtonStyle
-                            {
                             background: Item
                             {
                                 UM.RecolorImage
@@ -302,12 +297,11 @@ Item
                                     width: parent.width
                                     height: width
                                     sourceSize.height: width
-                                        color: control.hovered ? UM.Theme.getColor("setting_control_button_hover") : UM.Theme.getColor("setting_control_button")
+                                    color: parent.hovered ? UM.Theme.getColor("setting_control_button_hover") : UM.Theme.getColor("setting_control_button")
                                     source: UM.Theme.getIcon("Minus")
                                 }
                             }
                         }
-                        }
 
                         // Specialty provider that only watches global_inherits (we can't filter on what property changed we get events
                         // so we bypass that to make a dedicated provider).

plugins/PerObjectSettingsTool/ToolBarButton.qml

@@ -0,0 +1,79 @@
+// Copyright (c) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.1
+import QtQuick.Controls 2.1
+
+import Cura 1.0 as Cura
+import UM 1.5 as UM
+
+ToolButton
+{
+    id: base
+
+    property alias tooltip: tooltip.text
+    property alias iconSource: icon.source;
+
+    Cura.ToolTip
+    {
+        id: tooltip
+        visible: base.hovered
+        targetPoint: Qt.point(parent.x, Math.round(parent.y + parent.height / 2))
+    }
+
+
+    background: Item
+    {
+        implicitWidth: UM.Theme.getSize("button").width
+        implicitHeight: UM.Theme.getSize("button").height
+
+        Rectangle
+        {
+            id: buttonFace
+
+            anchors.fill: parent
+            property bool down: base.pressed || (base.checkable && base.checked)
+
+            color:
+            {
+                if(base.customColor !== undefined && base.customColor !== null)
+                {
+                    return base.customColor
+                }
+                else if(base.checkable && base.checked && base.hovered)
+                {
+                    return UM.Theme.getColor("toolbar_button_active_hover")
+                }
+                else if(base.pressed || (base.checkable && base.checked))
+                {
+                    return UM.Theme.getColor("toolbar_button_active")
+                }
+                else if(base.hovered)
+                {
+                    return UM.Theme.getColor("toolbar_button_hover")
+                }
+                return UM.Theme.getColor("toolbar_background")
+            }
+            Behavior on color { ColorAnimation { duration: 50; } }
+
+            border.width: (base.hasOwnProperty("needBorder") && base.needBorder) ? UM.Theme.getSize("default_lining").width : 0
+            border.color: base.checked ? UM.Theme.getColor("icon") : UM.Theme.getColor("lining")
+        }
+    }
+
+    contentItem: Item
+    {
+        UM.RecolorImage
+        {
+            id: icon
+
+            anchors.centerIn: parent
+            opacity: base.enabled ? 1.0 : 0.2
+            width: UM.Theme.getSize("medium_button_icon").width
+            height: UM.Theme.getSize("medium_button_icon").height
+            color: UM.Theme.getColor("icon")
+
+            sourceSize: UM.Theme.getSize("medium_button_icon")
+        }
+    }
+}

resources/themes/cura-light/styles.qml

@@ -9,99 +9,6 @@ import UM 1.1 as UM
 
 QtObject
 {
-    property Component tool_button: Component
-    {
-        ButtonStyle
-        {
-            background: Item
-            {
-                implicitWidth: UM.Theme.getSize("button").width
-                implicitHeight: UM.Theme.getSize("button").height
-
-                UM.PointingRectangle
-                {
-                    id: button_tooltip
-
-                    anchors.left: parent.right
-                    anchors.leftMargin: UM.Theme.getSize("button_tooltip_arrow").width * 2
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    target: Qt.point(parent.x, y + Math.round(height/2))
-                    arrowSize: UM.Theme.getSize("button_tooltip_arrow").width
-                    color: UM.Theme.getColor("button_tooltip")
-                    opacity: control.hovered ? 1.0 : 0.0;
-                    visible: control.text != ""
-
-                    width: control.hovered ? button_tip.width + UM.Theme.getSize("button_tooltip").width : 0
-                    height: UM.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: UM.Theme.getFont("default")
-                        color: UM.Theme.getColor("tooltip_text")
-                    }
-                }
-
-                Rectangle
-                {
-                    id: buttonFace
-
-                    anchors.fill: parent
-                    property bool down: control.pressed || (control.checkable && control.checked)
-
-                    color:
-                    {
-                        if(control.customColor !== undefined && control.customColor !== null)
-                        {
-                            return control.customColor
-                        }
-                        else if(control.checkable && control.checked && control.hovered)
-                        {
-                            return UM.Theme.getColor("toolbar_button_active_hover")
-                        }
-                        else if(control.pressed || (control.checkable && control.checked))
-                        {
-                            return UM.Theme.getColor("toolbar_button_active")
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("toolbar_button_hover")
-                        }
-                        return UM.Theme.getColor("toolbar_background")
-                    }
-                    Behavior on color { ColorAnimation { duration: 50; } }
-
-                    border.width: (control.hasOwnProperty("needBorder") && control.needBorder) ? UM.Theme.getSize("default_lining").width : 0
-                    border.color: control.checked ? UM.Theme.getColor("icon") : UM.Theme.getColor("lining")
-                }
-            }
-
-            label: Item
-            {
-                UM.RecolorImage
-                {
-                    anchors.centerIn: parent
-                    opacity: control.enabled ? 1.0 : 0.2
-                    source: control.iconSource
-                    width: UM.Theme.getSize("medium_button_icon").width
-                    height: UM.Theme.getSize("medium_button_icon").height
-                    color: UM.Theme.getColor("icon")
-
-                    sourceSize: UM.Theme.getSize("medium_button_icon")
-                }
-            }
-        }
-    }
-
     property Component progressbar: Component
     {
         ProgressBarStyle