Use `SecondaryButton` in the usb print panel inplace of tye style prop

The Jog buttons are not changed yet as these button make use of the
`checked` property this is not yet implemented for Cura's `Action` and
by extension Cura's `Secondary` button.

CURA-8684

resources/qml/MonitorButton.qml

@@ -266,7 +266,7 @@ Item
             }
         }
 
-        Button
+        Cura.SecondaryButton
         {
             id: pauseResumeButton
 
@@ -309,11 +309,9 @@ Item
                     activePrintJob.setState("pause");
                 }
             }
-
-            style: UM.Theme.styles.print_setup_action_button
         }
 
-        Button
+        Cura.SecondaryButton
         {
             id: abortButton
 
@@ -325,8 +323,6 @@ Item
 
             text: catalog.i18nc("@label", "Abort Print")
             onClicked: confirmationDialog.visible = true
-
-            style: UM.Theme.styles.print_setup_action_button
         }
 
         MessageDialog

resources/qml/PrinterOutput/ExtruderBox.qml

@@ -223,7 +223,7 @@ Item
             }
         }
 
-        Button //The pre-heat button.
+        Cura.SecondaryButton
         {
             id: preheatButton
             height: UM.Theme.getSize("setting_control").height
@@ -255,96 +255,19 @@ Item
             anchors.right: parent.right
             anchors.bottom: parent.bottom
             anchors.margins: UM.Theme.getSize("default_margin").width
-            style: ButtonStyle {
-                background: Rectangle
-                {
-                    border.width: UM.Theme.getSize("default_lining").width
-                    implicitWidth: actualLabel.contentWidth + (UM.Theme.getSize("default_margin").width * 2)
-                    border.color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_border");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active_border");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered_border");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("action_button_border");
-                        }
-                    }
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("action_button");
-                        }
-                    }
-                    Behavior on color
-                    {
-                        ColorAnimation
-                        {
-                            duration: 50
-                        }
-                    }
 
-                    Label
-                    {
-                        id: actualLabel
-                        anchors.centerIn: parent
-                        color:
-                        {
-                            if(!control.enabled)
-                            {
-                                return UM.Theme.getColor("action_button_disabled_text");
-                            }
-                            else if(control.pressed)
-                            {
-                                return UM.Theme.getColor("action_button_active_text");
-                            }
-                            else if(control.hovered)
-                            {
-                                return UM.Theme.getColor("action_button_hovered_text");
-                            }
-                            else
-                            {
-                                return UM.Theme.getColor("action_button_text");
-                            }
-                        }
-                        font: UM.Theme.getFont("medium")
-                        text:
-                        {
-                            if(extruderModel == null)
-                            {
-                                return ""
-                            }
-                            if(extruderModel.isPreheating )
-                            {
-                                return catalog.i18nc("@button Cancel pre-heating", "Cancel")
-                            } else
-                            {
-                                return catalog.i18nc("@button", "Pre-heat")
-                            }
-                        }
-                    }
+            text:
+            {
+                if(extruderModel == null)
+                {
+                    return ""
+                }
+                if(extruderModel.isPreheating )
+                {
+                    return catalog.i18nc("@button Cancel pre-heating", "Cancel")
+                } else
+                {
+                    return catalog.i18nc("@button", "Pre-heat")
                 }
             }
 

resources/qml/PrinterOutput/HeatedBedBox.qml

@@ -214,7 +214,7 @@ Item
             }
         }
 
-        Button // The pre-heat button.
+        Cura.SecondaryButton // The pre-heat button.
         {
             id: preheatButton
             height: UM.Theme.getSize("setting_control").height
@@ -246,96 +246,19 @@ Item
             anchors.right: parent.right
             anchors.bottom: parent.bottom
             anchors.margins: UM.Theme.getSize("default_margin").width
-            style: ButtonStyle {
-                background: Rectangle
-                {
-                    border.width: UM.Theme.getSize("default_lining").width
-                    implicitWidth: actualLabel.contentWidth + (UM.Theme.getSize("default_margin").width * 2)
-                    border.color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_border");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active_border");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered_border");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("action_button_border");
-                        }
-                    }
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("action_button");
-                        }
-                    }
-                    Behavior on color
-                    {
-                        ColorAnimation
-                        {
-                            duration: 50
-                        }
-                    }
 
-                    Label
-                    {
-                        id: actualLabel
-                        anchors.centerIn: parent
-                        color:
-                        {
-                            if(!control.enabled)
-                            {
-                                return UM.Theme.getColor("action_button_disabled_text");
-                            }
-                            else if(control.pressed)
-                            {
-                                return UM.Theme.getColor("action_button_active_text");
-                            }
-                            else if(control.hovered)
-                            {
-                                return UM.Theme.getColor("action_button_hovered_text");
-                            }
-                            else
-                            {
-                                return UM.Theme.getColor("action_button_text");
-                            }
-                        }
-                        font: UM.Theme.getFont("medium")
-                        text:
-                        {
-                            if(printerModel == null)
-                            {
-                                return ""
-                            }
-                            if(printerModel.isPreheating )
-                            {
-                                return catalog.i18nc("@button Cancel pre-heating", "Cancel")
-                            } else
-                            {
-                                return catalog.i18nc("@button", "Pre-heat")
-                            }
-                        }
-                    }
+            text:
+            {
+                if(printerModel == null)
+                {
+                    return ""
+                }
+                if(printerModel.isPreheating )
+                {
+                    return catalog.i18nc("@button Cancel pre-heating", "Cancel")
+                } else
+                {
+                    return catalog.i18nc("@button", "Pre-heat")
                 }
             }
 

resources/qml/PrinterOutput/ManualPrinterControl.qml

@@ -92,14 +92,13 @@ Item
                     Layout.preferredHeight: height
                 }
 
-                Button
+                Cura.SecondaryButton
                 {
                     Layout.row: 1
                     Layout.column: 1
                     Layout.preferredWidth: width
                     Layout.preferredHeight: height
                     iconSource: UM.Theme.getIcon("ChevronSingleUp");
-                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -109,14 +108,13 @@ Item
                     }
                 }
 
-                Button
+                Cura.SecondaryButton
                 {
                     Layout.row: 2
                     Layout.column: 0
                     Layout.preferredWidth: width
                     Layout.preferredHeight: height
                     iconSource: UM.Theme.getIcon("ChevronSingleLeft");
-                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -126,14 +124,13 @@ Item
                     }
                 }
 
-                Button
+                Cura.SecondaryButton
                 {
                     Layout.row: 2
                     Layout.column: 2
                     Layout.preferredWidth: width
                     Layout.preferredHeight: height
                     iconSource: UM.Theme.getIcon("ChevronSingleRight");
-                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -143,14 +140,13 @@ Item
                     }
                 }
 
-                Button
+                Cura.SecondaryButton
                 {
                     Layout.row: 3
                     Layout.column: 1
                     Layout.preferredWidth: width
                     Layout.preferredHeight: height
                     iconSource: UM.Theme.getIcon("ChevronSingleDown");
-                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -160,14 +156,13 @@ Item
                     }
                 }
 
-                Button
+                Cura.SecondaryButton
                 {
                     Layout.row: 2
                     Layout.column: 1
                     Layout.preferredWidth: width
                     Layout.preferredHeight: height
                     iconSource: UM.Theme.getIcon("House");
-                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -192,10 +187,9 @@ Item
                     horizontalAlignment: Text.AlignHCenter
                 }
 
-                Button
+                Cura.SecondaryButton
                 {
                     iconSource: UM.Theme.getIcon("ChevronSingleUp");
-                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -205,10 +199,9 @@ Item
                     }
                 }
 
-                Button
+                Cura.SecondaryButton
                 {
                     iconSource: UM.Theme.getIcon("House");
-                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -218,10 +211,9 @@ Item
                     }
                 }
 
-                Button
+                Cura.SecondaryButton
                 {
                     iconSource: UM.Theme.getIcon("ChevronSingleDown");
-                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -270,8 +262,6 @@ Item
                         checkable: true
                         checked: distancesRow.currentDistance == model.value
                         onClicked: distancesRow.currentDistance = model.value
-
-                        style: UM.Theme.styles.monitor_checkable_button_style
                     }
                 }
             }

resources/themes/cura-light/styles.qml

@@ -372,233 +372,4 @@ QtObject
             }
         }
     }
-
-    property Component print_setup_action_button: Component
-    {
-        ButtonStyle
-        {
-            background: Rectangle
-            {
-                border.width: UM.Theme.getSize("default_lining").width
-                border.color:
-                {
-                    if(!control.enabled)
-                    {
-                        return UM.Theme.getColor("action_button_disabled_border");
-                    }
-                    else if(control.pressed)
-                    {
-                        return UM.Theme.getColor("action_button_active_border");
-                    }
-                    else if(control.hovered)
-                    {
-                        return UM.Theme.getColor("action_button_hovered_border");
-                    }
-                    else
-                    {
-                        return UM.Theme.getColor("action_button_border");
-                    }
-                }
-                color:
-                {
-                    if(!control.enabled)
-                    {
-                        return UM.Theme.getColor("action_button_disabled");
-                    }
-                    else if(control.pressed)
-                    {
-                        return UM.Theme.getColor("action_button_active");
-                    }
-                    else if(control.hovered)
-                    {
-                        return UM.Theme.getColor("action_button_hovered");
-                    }
-                    else
-                    {
-                        return UM.Theme.getColor("action_button");
-                    }
-                }
-                Behavior on color { ColorAnimation { duration: 50 } }
-
-                implicitWidth: actualLabel.contentWidth + (UM.Theme.getSize("thick_margin").width * 2)
-
-                Label
-                {
-                    id: actualLabel
-                    anchors.centerIn: parent
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_text");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active_text");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered_text");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("action_button_text");
-                        }
-                    }
-                    font: UM.Theme.getFont("medium")
-                    text: control.text
-                }
-            }
-            label: Item { }
-        }
-    }
-
-    property Component monitor_button_style: Component
-    {
-        ButtonStyle
-        {
-            background: Rectangle
-            {
-                border.width: UM.Theme.getSize("default_lining").width
-                border.color:
-                {
-                    if(!control.enabled)
-                    {
-                        return UM.Theme.getColor("action_button_disabled_border");
-                    }
-                    else if(control.pressed)
-                    {
-                        return UM.Theme.getColor("action_button_active_border");
-                    }
-                    else if(control.hovered)
-                    {
-                        return UM.Theme.getColor("action_button_hovered_border");
-                    }
-                    return UM.Theme.getColor("action_button_border");
-                }
-                color:
-                {
-                    if(!control.enabled)
-                    {
-                        return UM.Theme.getColor("action_button_disabled");
-                    }
-                    else if(control.pressed)
-                    {
-                        return UM.Theme.getColor("action_button_active");
-                    }
-                    else if(control.hovered)
-                    {
-                        return UM.Theme.getColor("action_button_hovered");
-                    }
-                    return UM.Theme.getColor("action_button");
-                }
-                Behavior on color
-                {
-                    ColorAnimation
-                    {
-                        duration: 50
-                    }
-                }
-            }
-
-            label: Item
-            {
-                UM.RecolorImage
-                {
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    width: Math.floor(control.width / 2)
-                    height: Math.floor(control.height / 2)
-                    sourceSize.height: width
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_text");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active_text");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered_text");
-                        }
-                        return UM.Theme.getColor("action_button_text");
-                    }
-                    source: control.iconSource
-                }
-            }
-        }
-    }
-
-    property Component monitor_checkable_button_style: Component
-    {
-        ButtonStyle {
-            background: Rectangle {
-                border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width
-                border.color:
-                {
-                    if(!control.enabled)
-                    {
-                        return UM.Theme.getColor("action_button_disabled_border");
-                    }
-                    else if (control.checked || control.pressed)
-                    {
-                        return UM.Theme.getColor("action_button_active_border");
-                    }
-                    else if(control.hovered)
-                    {
-                        return UM.Theme.getColor("action_button_hovered_border");
-                    }
-                    return UM.Theme.getColor("action_button_border");
-                }
-                color:
-                {
-                    if(!control.enabled)
-                    {
-                        return UM.Theme.getColor("action_button_disabled");
-                    }
-                    else if (control.checked || control.pressed)
-                    {
-                        return UM.Theme.getColor("action_button_active");
-                    }
-                    else if (control.hovered)
-                    {
-                        return UM.Theme.getColor("action_button_hovered");
-                    }
-                    return UM.Theme.getColor("action_button");
-                }
-                Behavior on color { ColorAnimation { duration: 50; } }
-                Label {
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.leftMargin: UM.Theme.getSize("default_lining").width * 2
-                    anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_text");
-                        }
-                        else if (control.checked || control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active_text");
-                        }
-                        else if (control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered_text");
-                        }
-                        return UM.Theme.getColor("action_button_text");
-                    }
-                    font: UM.Theme.getFont("default")
-                    text: control.text
-                    horizontalAlignment: Text.AlignHCenter
-                    elide: Text.ElideMiddle
-                }
-            }
-            label: Item { }
-        }
-    }
 }