From ba6e79c81f5f4d13cc25d3c47c41d10dc470539c Mon Sep 17 00:00:00 2001
From: Ghostkeeper <rubend@tutanota.com>
Date: Wed, 7 Jul 2021 11:27:07 +0200
Subject: [PATCH] Rework parts of camera button

The new button should be consistent with the looks of the tool buttons. I've given it the same size as the inner part of the tool buttons, reworked the background so that it matches. I'm also giving it the 'secondary button' style which is also used for one other button. But that other detail button should get the same style anyway so that's fine too.

I've also turned this icon into an actual button. That way it can get focus when using keyboard navigation and works better with tools for blind and such.

Contributes to issue CURA-8202.
---
 .../resources/qml/CameraButton.qml            | 50 ++++++++-----------
 resources/themes/cura-light/theme.json        |  2 +-
 2 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml b/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml
index 2e3d17ceb0..8dca61ec38 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml
@@ -1,23 +1,26 @@
-// Copyright (c) 2019 Ultimaker B.V.
+// Copyright (c) 2021 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.3
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.4
 import QtQuick.Controls.Styles 1.3
 import UM 1.3 as UM
 import Cura 1.0 as Cura
 
-Rectangle
+Button
 {
-    id: base
-
-    property var enabled: true
-
     property var iconSource: null
-    color: enabled ? UM.Theme.getColor("monitor_icon_primary") : UM.Theme.getColor("monitor_icon_disabled")
-    height: width
-    radius: Math.round(0.5 * width)
-    width: 24 * screenScaleFactor
+    width: UM.Theme.getSize("button").width * 0.75 //Matching the size of the content of tool buttons.
+    height: UM.Theme.getSize("button").height * 0.75
+
+    hoverEnabled: true
+
+    background: Rectangle
+    {
+        anchors.fill: parent
+        radius: 0.5 * width
+        color: parent.enabled ? (parent.hovered ? UM.Theme.getColor("monitor_secondary_button_hover") : "transparent") : UM.Theme.getColor("monitor_icon_disabled")
+    }
 
     UM.RecolorImage
     {
@@ -27,30 +30,21 @@ Rectangle
             horizontalCenter: parent.horizontalCenter
             verticalCenter: parent.verticalCenter
         }
-        color: UM.Theme.getColor("monitor_icon_accent")
+        color: UM.Theme.getColor("primary")
         height: width
         source: iconSource
         width: Math.round(parent.width / 2)
     }
 
-    MouseArea
+    onClicked:
     {
-        id: clickArea
-        anchors.fill: parent
-        hoverEnabled: base.enabled
-        onClicked:
+        if (OutputDevice.activeCameraUrl != "")
         {
-            if (base.enabled)
-            {
-                if (OutputDevice.activeCameraUrl != "")
-                {
-                    OutputDevice.setActiveCameraUrl("")
-                }
-                else
-                {
-                    OutputDevice.setActiveCameraUrl(modelData.cameraUrl)
-                }
-            }
+            OutputDevice.setActiveCameraUrl("")
+        }
+        else
+        {
+            OutputDevice.setActiveCameraUrl(modelData.cameraUrl)
         }
     }
 }
diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json
index bf4542b444..9ad8c03d07 100644
--- a/resources/themes/cura-light/theme.json
+++ b/resources/themes/cura-light/theme.json
@@ -437,7 +437,7 @@
         "monitor_icon_accent": [255, 255, 255, 255],
         "monitor_icon_disabled": [238, 238, 238, 255],
 
-        "monitor_secondary_button_hover": [228, 228, 228, 255],
+        "monitor_secondary_button_hover": [232, 242, 252, 255],
         "monitor_secondary_button": [240, 240, 240, 255],
         "monitor_secondary_button_text": [30, 102, 215, 255],
         "monitor_secondary_button_shadow": [216, 216, 216, 255],