Merge branch 'fix_hover_effects' of https://github.com/fieldOfView/Cura

resources/qml/Sidebar.qml

@@ -408,18 +408,34 @@ Rectangle
         }
         ExclusiveGroup { id: modeMenuGroup; }
 
-        Text
+        Label
         {
             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")
+            color:
+            {
+                if(toggleLeftTextMouseArea.containsMouse)
+                {
+                    return UM.Theme.getColor("mode_switch_text_hover");
+                }
+                else if(!modeToggleSwitch.checked)
+                {
+                    return UM.Theme.getColor("mode_switch_text_checked");
+                }
+                else
+                {
+                    return UM.Theme.getColor("mode_switch_text");
+                }
+            }
             font: UM.Theme.getFont("default")
 
             MouseArea
             {
+                id: toggleLeftTextMouseArea
+                hoverEnabled: true
                 anchors.fill: parent
                 onClicked:
                 {
@@ -438,9 +454,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 bool _hovered: modeToggleSwitchMouseArea.containsMouse || toggleLeftTextMouseArea.containsMouse || toggleRightTextMouseArea.containsMouse
+
+            MouseArea
+            {
+                id: modeToggleSwitchMouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                acceptedButtons: Qt.NoButton
+            }
+
             onClicked:
             {
                 var index = 0;
@@ -457,20 +483,36 @@ Rectangle
                 UM.Preferences.setValue("cura/active_mode", index);
             }
 
-            style: UM.Theme.styles.toggle_button
+            style: UM.Theme.styles.mode_switch
         }
 
-        Text
+        Label
         {
             id: toggleRightText
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
             text: ""
-            color: UM.Theme.getColor("toggle_active_text")
+            color:
+            {
+                if(toggleRightTextMouseArea.containsMouse)
+                {
+                    return UM.Theme.getColor("mode_switch_text_hover");
+                }
+                else if(modeToggleSwitch.checked)
+                {
+                    return UM.Theme.getColor("mode_switch_text_checked");
+                }
+                else
+                {
+                    return UM.Theme.getColor("mode_switch_text");
+                }
+            }
             font: UM.Theme.getFont("default")
 
             MouseArea
             {
+                id: toggleRightTextMouseArea
+                hoverEnabled: true
                 anchors.fill: parent
                 onClicked:
                 {

resources/qml/SidebarSimple.qml

@@ -240,6 +240,8 @@ Item
         CheckBox
         {
             id: enableSupportCheckBox
+            property alias _hovered: enableSupportMouseArea.containsMouse
+
             anchors.top: parent.top
             anchors.left: enableSupportLabel.right
             anchors.leftMargin: UM.Theme.getSize("default_margin").width

resources/themes/cura/styles.qml

@@ -8,19 +8,25 @@ import QtQuick.Controls.Styles 1.1
 import UM 1.1 as UM
 
 QtObject {
-    property Component toggle_button: Component {
+    property Component mode_switch: Component {
         SwitchStyle {
             groove: Rectangle {
-                implicitWidth: UM.Theme.getSize("toggle_button_background_implicit_size").width
+                implicitWidth: UM.Theme.getSize("mode_switch").width
-                implicitHeight: UM.Theme.getSize("toggle_button_background_implicit_size").height
+                implicitHeight: UM.Theme.getSize("mode_switch").height
-                radius: UM.Theme.getSize("toggle_button_radius").width
+                radius: implicitHeight / 2
-                border.color: {
+                color: {
-                    if (control.pressed || (control.checkable && control.checked)) {
+                    if(control.hovered || control._hovered) {
-                        return UM.Theme.getColor("sidebar_header_active");
+                        return UM.Theme.getColor("mode_switch_hover");
-                    } else if(control.hovered) {
-                        return UM.Theme.getColor("sidebar_header_hover");
                     } else {
-                        return UM.Theme.getColor("sidebar_header_bar");
+                        return UM.Theme.getColor("mode_switch");
+                    }
+                }
+                Behavior on color { ColorAnimation { duration: 50; } }
+                border.color: {
+                    if(control.hovered || control._hovered) {
+                        return UM.Theme.getColor("mode_switch_border_hover");
+                    } else {
+                        return UM.Theme.getColor("mode_switch_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
+                implicitWidth: implicitHeight
-                implicitHeight: UM.Theme.getSize("toggle_button_knob_implicit_size").height
+                implicitHeight: UM.Theme.getSize("mode_switch").height
-                radius: UM.Theme.getSize("toggle_button_radius").width
+                radius: implicitHeight / 2
 
                 color: {
                     if (control.pressed || (control.checkable && control.checked)) {

resources/themes/cura/theme.json

@@ -175,6 +175,15 @@
         "checkbox_mark": [24, 41, 77, 255],
         "checkbox_text": [24, 41, 77, 255],
 
+        "mode_switch": [255, 255, 255, 255],
+        "mode_switch_hover": [255, 255, 255, 255],
+        "mode_switch_border": [127, 127, 127, 255],
+        "mode_switch_border_hover": [12, 169, 227, 255],
+        "mode_switch_handle": [24, 41, 77, 255],
+        "mode_switch_text": [24, 41, 77, 255],
+        "mode_switch_text_hover": [24, 41, 77, 255],
+        "mode_switch_text_checked": [12, 169, 227, 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],
+        "mode_switch": [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],
+        "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]
     }
 }