Monitor Tab - Create reusable button

Contributes to CL-1049

plugins/UM3NetworkPrinting/resources/qml/ClusterControlItem.qml

@@ -626,41 +626,14 @@ Component
                                     color: "black"
                                 }
 
-                                Rectangle
+                                DotButton
                                 {
                                     id: showCameraButton
-                                    width: 36 * screenScaleFactor
-                                    height: width
-                                    radius: 0.5 * width
-                                    anchors.left: parent.left
-                                    anchors.bottom: printJobPreview.bottom
-                                    color: showCameraMouseArea.containsMouse ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary")
-                                    UM.RecolorImage
-                                    {
-                                        id: showCameraIcon
-                                        width: parent.width - 1
-                                        height: width
-                                        anchors.verticalCenter: parent.verticalCenter
-                                        anchors.horizontalCenter: parent.horizontalCenter
-                                        color: UM.Theme.getColor("primary_text")
-                                        source: "../svg/camera-icon.svg"
-                                    }
-                                    MouseArea
+                                    iconSource: "../svg/camera-icon.svg"
+                                    anchors
                                     {
-                                        id: showCameraMouseArea
-                                        anchors.fill:parent
-                                        hoverEnabled: true
-                                        onClicked:
-                                        {
-                                            if (OutputDevice.activeCamera !== null)
-                                            {
-                                                OutputDevice.setActiveCamera(null)
-                                            }
-                                            else
-                                            {
-                                                OutputDevice.setActiveCamera(modelData.camera)
-                                            }
-                                        }
+                                        left: parent.left
+                                        bottom: printJobPreview.bottom
                                     }
                                 }
                             }

plugins/UM3NetworkPrinting/resources/qml/DotButton.qml

@@ -0,0 +1,47 @@
+import QtQuick 2.3
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.3
+import QtQuick.Controls 2.0 as Controls2
+import QtGraphicalEffects 1.0
+
+import UM 1.3 as UM
+import Cura 1.0 as Cura
+
+Rectangle
+{
+    property var iconSource: null
+
+    width: 36 * screenScaleFactor
+    height: width
+    radius: 0.5 * width
+    color: clickArea.containsMouse ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary")
+
+    UM.RecolorImage
+    {
+        id: icon
+        width: parent.width - 1
+        height: width
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: UM.Theme.getColor("primary_text")
+        source: iconSource
+    }
+
+    MouseArea
+    {
+        id: clickArea
+        anchors.fill:parent
+        hoverEnabled: true
+        onClicked:
+        {
+            if (OutputDevice.activeCamera !== null)
+            {
+                OutputDevice.setActiveCamera(null)
+            }
+            else
+            {
+                OutputDevice.setActiveCamera(modelData.camera)
+            }
+        }
+    }
+}