Merge pull request #1698 from Ultimaker/feature_CURA-3574_toggle_button

CURA-3574: Use a toggle button mode switching

resources/qml/Sidebar.qml

@@ -407,14 +407,53 @@ Rectangle
             }
         }
         ExclusiveGroup { id: modeMenuGroup; }
-        ListView{
+
-            id: modesList
+        Text
-            property var index: 0
+        {
-            model: modesListModel
+            id: toggleLeftText
-            delegate: wizardDelegate
+            anchors.right: modeToggleSwitch.left
-            anchors.top: parent.top
+            anchors.rightMargin: UM.Theme.getSize("toggle_button_text_anchoring_margin").width
-            anchors.left: parent.left
+            anchors.verticalCenter: parent.verticalCenter
-            width: parent.width
+            text: ""
+            color: UM.Theme.getColor("toggle_active_text")
+            font: UM.Theme.getFont("default")
+        }
+
+        Switch
+        {
+            id: modeToggleSwitch
+            checked: false
+            anchors.right: toggleRightText.left
+            anchors.rightMargin: UM.Theme.getSize("toggle_button_text_anchoring_margin").width
+            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 +580,14 @@ Rectangle
         })
         sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "immediate": true });
 
-        var index = parseInt(UM.Preferences.getValue("cura/active_mode"))
+        toggleLeftText.text = modesListModel.get(0).text;
-        if(index)
+        toggleRightText.text = modesListModel.get(1).text;
+
+        var index = parseInt(UM.Preferences.getValue("cura/active_mode"));
+        if (index)
         {
             currentModeIndex = index;
+            modeToggleSwitch.checked = index > 0;
         }
     }
 
@@ -567,4 +610,4 @@ Rectangle
         watchedProperties: [ "value" ]
         storeIndex: 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: 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");
+                    } else {
+                        return UM.Theme.getColor("sidebar_header_bar");
+                    }
+                }
+                Behavior on border.color { ColorAnimation { duration: 50; } }
+                border.width: 1
+            }
+
+            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
+
+                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 {

resources/themes/cura/theme.json

@@ -319,6 +319,11 @@
 
         "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]
     }
 }