From 0c6a5328c8a1e1f4fcc986d8d904b4023de7e939 Mon Sep 17 00:00:00 2001
From: fieldOfView <aldo@fieldofview.com>
Date: Sun, 30 Apr 2017 22:52:54 +0200
Subject: [PATCH] Add hover effect to mode switch control

While simplifying theme additions
---
 resources/qml/Sidebar.qml        | 14 ++++++++++++--
 resources/themes/cura/styles.qml | 30 ++++++++++++++++++------------
 resources/themes/cura/theme.json | 17 +++++++++++------
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml
index ba5106c767..68427cad8c 100755
--- a/resources/qml/Sidebar.qml
+++ b/resources/qml/Sidebar.qml
@@ -412,7 +412,7 @@ Rectangle
         {
             id: toggleLeftText
             anchors.right: modeToggleSwitch.left
-            anchors.rightMargin: UM.Theme.getSize("toggle_button_text_anchoring_margin").width
+            anchors.rightMargin: UM.Theme.getSize("default_margin").width
             anchors.verticalCenter: parent.verticalCenter
             text: ""
             color: UM.Theme.getColor("toggle_active_text")
@@ -438,9 +438,19 @@ Rectangle
             id: modeToggleSwitch
             checked: false
             anchors.right: toggleRightText.left
-            anchors.rightMargin: UM.Theme.getSize("toggle_button_text_anchoring_margin").width
+            anchors.rightMargin: UM.Theme.getSize("default_margin").width
             anchors.verticalCenter: parent.verticalCenter
 
+            property alias _hovered: enableSupportMouseArea.containsMouse
+
+            MouseArea
+            {
+                id: enableSupportMouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                acceptedButtons: Qt.NoButton
+            }
+
             onClicked:
             {
                 var index = 0;
diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml
index 899ea3cf79..9d302c3494 100755
--- a/resources/themes/cura/styles.qml
+++ b/resources/themes/cura/styles.qml
@@ -11,16 +11,22 @@ QtObject {
     property Component toggle_button: Component {
         SwitchStyle {
             groove: Rectangle {
-                implicitWidth: UM.Theme.getSize("toggle_button_background_implicit_size").width
-                implicitHeight: UM.Theme.getSize("toggle_button_background_implicit_size").height
-                radius: UM.Theme.getSize("toggle_button_radius").width
-                border.color: {
-                    if (control.pressed || (control.checkable && control.checked)) {
-                        return UM.Theme.getColor("sidebar_header_active");
-                    } else if(control.hovered) {
-                        return UM.Theme.getColor("sidebar_header_hover");
+                implicitWidth: UM.Theme.getSize("toggle_button").width
+                implicitHeight: UM.Theme.getSize("toggle_button").height
+                radius: implicitHeight / 2
+                color: {
+                    if(control.hovered || control._hovered) {
+                        return UM.Theme.getColor("toggle_button_hover");
                     } else {
-                        return UM.Theme.getColor("sidebar_header_bar");
+                        return UM.Theme.getColor("toggle_button");
+                    }
+                }
+                Behavior on color { ColorAnimation { duration: 50; } }
+                border.color: {
+                    if(control.hovered || control._hovered) {
+                        return UM.Theme.getColor("toggle_button_border_hover");
+                    } else {
+                        return UM.Theme.getColor("toggle_button_border");
                     }
                 }
                 Behavior on border.color { ColorAnimation { duration: 50; } }
@@ -28,9 +34,9 @@ QtObject {
             }
 
             handle: Rectangle {
-                implicitWidth: UM.Theme.getSize("toggle_button_knob_implicit_size").width
-                implicitHeight: UM.Theme.getSize("toggle_button_knob_implicit_size").height
-                radius: UM.Theme.getSize("toggle_button_radius").width
+                implicitWidth: implicitHeight
+                implicitHeight: UM.Theme.getSize("toggle_button").height
+                radius: implicitHeight / 2
 
                 color: {
                     if (control.pressed || (control.checkable && control.checked)) {
diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json
index 084ee27bb2..531b233fec 100644
--- a/resources/themes/cura/theme.json
+++ b/resources/themes/cura/theme.json
@@ -175,6 +175,15 @@
         "checkbox_mark": [24, 41, 77, 255],
         "checkbox_text": [24, 41, 77, 255],
 
+        "toggle_button": [255, 255, 255, 255],
+        "toggle_button_hover": [255, 255, 255, 255],
+        "toggle_button_border": [127, 127, 127, 255],
+        "toggle_button_border_hover": [12, 169, 227, 255],
+        "toggle_button_handle": [24, 41, 77, 255],
+        "toggle_button_text": [24, 41, 77, 255],
+        "toggle_button_text_hover": [24, 41, 77, 255],
+        "toggle_button_text_selected": [24, 41, 77, 255],
+
         "tooltip": [12, 169, 227, 255],
         "tooltip_text": [255, 255, 255, 255],
 
@@ -301,6 +310,7 @@
         "layerview_row_spacing": [0.0, 0.5],
 
         "checkbox": [2.0, 2.0],
+        "toggle_button": [2.0, 1.0],
 
         "tooltip": [20.0, 10.0],
         "tooltip_margins": [1.0, 1.0],
@@ -319,11 +329,6 @@
 
         "infill_button_margin": [0.5, 0.5],
 
-        "jobspecs_line": [2.0, 2.0],
-
-        "toggle_button_text_anchoring_margin": [1.0, 1.0],
-        "toggle_button_radius": [1.0, 1.0],
-        "toggle_button_background_implicit_size": [2.0, 1.0],
-        "toggle_button_knob_implicit_size": [1.0, 1.0]
+        "jobspecs_line": [2.0, 2.0]
     }
 }