From 77a8f36153738b397883155131a11643d7b9ebfc Mon Sep 17 00:00:00 2001
From: Konstantinos Karmas <konskarm@gmail.com>
Date: Mon, 28 Jun 2021 14:56:26 +0200
Subject: [PATCH] Change the color of a circle around the toolbar button

Instead of changing the color of the entire tool when it is hovered or selected, now a background circle will be drawn and its color will change according to whether the button is hovered/selected or not.

In addition, the button icons will now be half the size of the button itself.

CURA-8013
---
 resources/qml/Toolbar.qml       |  2 +-
 resources/qml/ToolbarButton.qml | 44 ++++++++++++++++++---------------
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml
index b388764c74..ec4d29420b 100644
--- a/resources/qml/Toolbar.qml
+++ b/resources/qml/Toolbar.qml
@@ -68,7 +68,7 @@ Item
                         source: UM.Theme.getIcon(model.icon) != "" ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
                         color: UM.Theme.getColor("icon")
 
-                        sourceSize: UM.Theme.getSize("button_icon")
+                        sourceSize: Math.round(UM.Theme.getSize("button") / 2)
                     }
 
                     onCheckedChanged:
diff --git a/resources/qml/ToolbarButton.qml b/resources/qml/ToolbarButton.qml
index b3f84bba1d..206ab23dc4 100644
--- a/resources/qml/ToolbarButton.qml
+++ b/resources/qml/ToolbarButton.qml
@@ -25,22 +25,7 @@ Button
     {
         implicitWidth: UM.Theme.getSize("button").width
         implicitHeight: UM.Theme.getSize("button").height
-        color:
-        {
-            if (base.checked && base.hovered)
-            {
-                return UM.Theme.getColor("toolbar_button_active_hover")
-            }
-            else if (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")
-        }
+        color: UM.Theme.getColor("toolbar_background")
         radius: UM.Theme.getSize("default_radius").width
 
         Rectangle
@@ -84,16 +69,35 @@ Button
             color: parent.color
         }
     }
-
-    contentItem: Item
+    contentItem: Rectangle
     {
         opacity: parent.enabled ? 1.0 : 0.2
+        implicitWidth: Math.round(UM.Theme.getSize("button").width * 0.75)
+        implicitHeight: Math.round(UM.Theme.getSize("button").height * 0.75)
+        radius: Math.round(width * 0.5)
+
+        color:
+        {
+            if (base.checked && base.hovered)
+            {
+                return UM.Theme.getColor("toolbar_button_active_hover")
+            }
+            else if (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")
+        }
         Loader
         {
             id: contentItemLoader
             anchors.centerIn: parent
-            width: UM.Theme.getSize("button_icon").width
-            height: UM.Theme.getSize("button_icon").height
+            width: Math.round(UM.Theme.getSize("button").width / 2)
+            height: Math.round(UM.Theme.getSize("button").height / 2)
         }
     }