Monitor Tab - Use camera button on camera stream

- Fixes: Video feed close button is always out of sight
- Makes improvement to camera icon

Contributes to CL-1049

plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml

@@ -19,7 +19,7 @@ Rectangle
     UM.RecolorImage
     {
         id: icon
-        width: parent.width - 1
+        width: parent.width / 2
         height: width
         anchors.verticalCenter: parent.verticalCenter
         anchors.horizontalCenter: parent.horizontalCenter

plugins/UM3NetworkPrinting/resources/qml/ClusterControlItem.qml

@@ -626,7 +626,7 @@ Component
                                     color: "black"
                                 }
 
-                                DotButton
+                                CameraButton
                                 {
                                     id: showCameraButton
                                     iconSource: "../svg/camera-icon.svg"

plugins/UM3NetworkPrinting/resources/qml/PrinterVideoStream.qml

@@ -23,38 +23,50 @@ Item
         z: 0
     }
 
-    Button
+    CameraButton
     {
-        id: backButton
+        id: closeCameraButton
-        anchors.bottom: cameraImage.top
+        iconSource: UM.Theme.getIcon("cross1")
-        anchors.bottomMargin: UM.Theme.getSize("default_margin").width
+        anchors
-        anchors.right: cameraImage.right
-
-        // TODO: Hardcoded sizes
-        width: 20 * screenScaleFactor
-        height: 20 * screenScaleFactor
-
-        onClicked: OutputDevice.setActiveCamera(null)
-
-        style: ButtonStyle
         {
-            label: Item
+            top: cameraImage.top
-            {
+            topMargin: UM.Theme.getSize("default_margin").height
-                UM.RecolorImage
+            right: cameraImage.right
-                {
+            rightMargin: UM.Theme.getSize("default_margin").width
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    width: control.width
-                    height: control.height
-                    sourceSize.width: width
-                    sourceSize.height: width
-                    source: UM.Theme.getIcon("cross1")
-                }
-            }
-            background: Item {}
         }
+        z: 999
     }
 
+    // Button
+    // {
+    //     id: backButton
+        
+
+    //     // TODO: Hardcoded sizes
+    //     width: 20 * screenScaleFactor
+    //     height: 20 * screenScaleFactor
+
+    //     onClicked: OutputDevice.setActiveCamera(null)
+
+    //     style: ButtonStyle
+    //     {
+    //         label: Item
+    //         {
+    //             UM.RecolorImage
+    //             {
+    //                 anchors.verticalCenter: parent.verticalCenter
+    //                 anchors.horizontalCenter: parent.horizontalCenter
+    //                 width: control.width
+    //                 height: control.height
+    //                 sourceSize.width: width
+    //                 sourceSize.height: width
+    //                 source: UM.Theme.getIcon("cross1")
+    //             }
+    //         }
+    //         background: Item {}
+    //     }
+    // }
+
     Image
     {
         id: cameraImage

plugins/UM3NetworkPrinting/resources/svg/camera-icon.svg

@@ -1,6 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g fill="none" fill-rule="evenodd">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-<!--        <rect width="48" height="48" fill="#00A6EC" rx="24"/>-->
+    <desc>Created with Sketch.</desc>
-        <path stroke="#FFF" stroke-width="2.5" d="M32.75 16.25h-19.5v15.5h19.5v-4.51l3.501 1.397c.181.072.405.113.638.113.333 0 .627-.081.81-.2.036-.024.048-.028.051-.011V18.487c-.26-.23-.976-.332-1.499-.124L32.75 19.76v-3.51z"/>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M39.0204082,32.810726 L39.0204082,40 L0,40 L0,8 L39.0204082,8 L39.0204082,13.382823 L42.565076,11.9601033 C44.1116852,11.3414006 46.2176038,11.5575311 47.3294911,12.5468926 L48,13.1435139 L48,32.1994839 C48,32.8444894 47.6431099,33.4236728 46.9293296,33.9370341 C45.8586592,34.707076 45.395355,34.5806452 44.4537143,34.5806452 C43.7935857,34.5806452 43.1386795,34.4629571 42.5629467,34.2325919 L39.0204082,32.810726 Z M35.0204082,12 L4,12 L4,36 L35.0204082,36 L35.0204082,26.8950804 L37.7653798,27.9968275 L44,30.4992132 L44,15.6943364 L35.0204082,19.298468 L35.0204082,12 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
     </g>
 </svg>