Use a toggle button for mode switching

CURA-3574

resources/qml/Sidebar.qml

@@ -407,6 +407,8 @@ Rectangle
             }
         }
         ExclusiveGroup { id: modeMenuGroup; }
+
+        /*
         ListView{
             id: modesList
             property var index: 0
@@ -415,6 +417,54 @@ Rectangle
             anchors.top: parent.top
             anchors.left: parent.left
             width: parent.width
+        }*/
+
+        Text
+        {
+            id: toggleLeftText
+            anchors.right: modeToggleSwitch.left
+            anchors.rightMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            text: ""
+            color: UM.Theme.getColor("toggle_active_text")
+            font: UM.Theme.getFont("default")
+        }
+
+        Switch
+        {
+            id: modeToggleSwitch
+            checked: false
+            anchors.right: toggleRightText.left
+            anchors.rightMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+
+            onClicked:
+            {
+                var index = 0;
+                if (checked)
+                {
+                    index = 1;
+                }
+                updateActiveMode(index);
+            }
+
+            function updateActiveMode(index)
+            {
+                base.currentModeIndex = index;
+                UM.Preferences.setValue("cura/active_mode", index);
+            }
+
+            style: UM.Theme.styles.toggle_button
+        }
+
+        Text
+        {
+            id: toggleRightText
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            text: ""
+            color: UM.Theme.getColor("toggle_active_text")
+            font: UM.Theme.getFont("default")
         }
     }
 
@@ -541,10 +591,14 @@ Rectangle
         })
         sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "immediate": true });
 
+        toggleLeftText.text = modesListModel.get(0).text
+        toggleRightText.text = modesListModel.get(1).text
+
         var index = parseInt(UM.Preferences.getValue("cura/active_mode"))
         if(index)
         {
             currentModeIndex = index;
+            modeToggleSwitch.checked = index > 0;
         }
     }
 

resources/themes/cura/styles.qml

@@ -8,6 +8,44 @@ import QtQuick.Controls.Styles 1.1
 import UM 1.1 as UM
 
 QtObject {
+    property Component toggle_button: Component {
+        SwitchStyle {
+            groove: Rectangle {
+                implicitWidth: 40
+                implicitHeight: 15
+                radius: 9
+                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");
+                    } else {
+                        return UM.Theme.getColor("sidebar_header_bar");
+                    }
+                }
+                Behavior on border.color { ColorAnimation { duration: 50; } }
+                border.width: 2
+            }
+
+            handle: Rectangle {
+                implicitWidth: Math.round((parent.parent.width - padding.left - padding.right)/2)
+                implicitHeight: implicitWidth
+                radius: 9
+
+                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");
+                    } else {
+                        return UM.Theme.getColor("sidebar_header_bar");
+                    }
+                }
+                Behavior on color { ColorAnimation { duration: 50; } }
+            }
+        }
+    }
+
     property Component sidebar_header_button: Component {
         ButtonStyle {
             background: Rectangle {