Expand/Collapse sidebar

CURA-4234

resources/qml/Actions.qml

@@ -18,6 +18,7 @@ Item
     property alias redo: redoAction;
 
     property alias homeCamera: homeCameraAction;
+    property alias expandSidebar: expandSidebarAction;
 
     property alias deleteSelection: deleteSelectionAction;
     property alias centerSelection: centerSelectionAction;
@@ -389,4 +390,11 @@ Item
         text: catalog.i18nc("@action:menu", "Installed plugins...");
         iconName: "plugins_configure"
     }
+
+    Action
+    {
+        id: expandSidebarAction;
+        text: catalog.i18nc("@action:inmenu menubar:view","Expand/Collapse sidebar");
+        shortcut: "Ctrl+E";
+    }
 }

resources/qml/Cura.qml

@@ -17,7 +17,7 @@ UM.MainWindow
     id: base
     //: Cura application window title
     title: catalog.i18nc("@title:window","Ultimaker Cura");
-    viewportRect: Qt.rect(0, 0, (base.width - sidebar.width) / base.width, 1.0)
+    //viewportRect: Qt.rect(0, 0, (base.width - sidebar.width) / base.width, 1.0)
     property bool showPrintMonitor: false
 
     // This connection is here to support legacy printer output devices that use the showPrintMonitor signal on Application to switch to the monitor stage
@@ -34,6 +34,24 @@ UM.MainWindow
         }
     }
 
+    onWidthChanged:
+    {
+        // If slidebar is collapsed then it should be invisible
+        // otherwise after the main_window resize the sidebar will be fully re-drawn
+        if (sidebar.collapsed){
+            if (sidebar.visible == true){
+                sidebar.visible = false
+                sidebar.initialWidth = 0
+            }
+        }
+        else{
+            if (sidebar.visible == false){
+                sidebar.visible = true
+                sidebar.initialWidth = UM.Theme.getSize("sidebar").width
+            }
+        }
+    }
+
     Component.onCompleted:
     {
         CuraApplication.setMinimumWindowSize(UM.Theme.getSize("window_minimum_size"))
@@ -49,6 +67,15 @@ UM.MainWindow
         // This has been fixed for QtQuick Controls 2 since the Shortcut item has a context property.
         Cura.Actions.parent = backgroundItem
         CuraApplication.purgeWindows()
+
+
+        var sidebarCollaps = UM.Preferences.getValue("general/sidebar_collaps")
+
+        if (sidebarCollaps == true){
+            sidebar.collapsed = true;
+            collapsSidebarAnimation.start();
+
+        }
     }
 
     Item
@@ -369,16 +396,46 @@ UM.MainWindow
             {
                 id: sidebar
 
-                anchors
+                property bool collapsed: false;
-                {
+                property var initialWidth: UM.Theme.getSize("sidebar").width;
-                    top: topbar.bottom
+
-                    bottom: parent.bottom
+                function callExpandOrCollapse(){
-                    right: parent.right
+                    if(collapsed){
+                        sidebar.visible = true
+                        sidebar.initialWidth = UM.Theme.getSize("sidebar").width
+                        expandSidebarAnimation.start();
+                    }else{
+                        collapsSidebarAnimation.start();
+                    }
+                    collapsed = !collapsed;
+                    UM.Preferences.setValue("general/sidebar_collaps", collapsed);
                 }
 
-                width: UM.Theme.getSize("sidebar").width
+                anchors
+                {
+                    top: topbar.top
+                    bottom: parent.bottom
+                }
 
+                width: initialWidth
+                x: base.width - sidebar.width
                 source: UM.Controller.activeStage.sidebarComponent
+
+                NumberAnimation {
+                    id: collapsSidebarAnimation
+                    target: sidebar
+                    properties: "x"
+                    to: base.width
+                    duration: 500
+                }
+
+                NumberAnimation {
+                    id: expandSidebarAnimation
+                    target: sidebar
+                    properties: "x"
+                    to: base.width - sidebar.width
+                    duration: 500
+                }
             }
 
             Loader
@@ -417,6 +474,13 @@ UM.MainWindow
         }
     }
 
+    // Expand or collapse sidebar
+    Connections
+    {
+        target: Cura.Actions.expandSidebar
+        onTriggered: sidebar.callExpandOrCollapse()
+    }
+
     UM.PreferencesDialog
     {
         id: preferences

resources/qml/Sidebar.qml

@@ -87,10 +87,77 @@ Rectangle
         }
     }
 
+    ToolButton
+    {
+        id: machineSelection
+        text: Cura.MachineManager.activeMachineName
+
+        width: base.width
+        height: UM.Theme.getSize("sidebar_header").height
+        tooltip: Cura.MachineManager.activeMachineName
+
+        anchors.top: base.top
+        //anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        style: ButtonStyle
+        {
+            background: Rectangle
+            {
+                color:
+                {
+                    if(control.pressed)
+                    {
+                        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; } }
+
+                UM.RecolorImage
+                {
+                    id: downArrow
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.right: parent.right
+                    anchors.rightMargin: UM.Theme.getSize("default_margin").width
+                    width: UM.Theme.getSize("standard_arrow").width
+                    height: UM.Theme.getSize("standard_arrow").height
+                    sourceSize.width: width
+                    sourceSize.height: width
+                    color: UM.Theme.getColor("text_emphasis")
+                    source: UM.Theme.getIcon("arrow_bottom")
+                }
+                Label
+                {
+                    id: sidebarComboBoxLabel
+                    color: UM.Theme.getColor("sidebar_header_text_active")
+                    text: control.text;
+                    elide: Text.ElideRight;
+                    anchors.left: parent.left;
+                    anchors.leftMargin: UM.Theme.getSize("default_margin").width * 2
+                    anchors.right: downArrow.left;
+                    anchors.rightMargin: control.rightMargin;
+                    anchors.verticalCenter: parent.verticalCenter;
+                    font: UM.Theme.getFont("large")
+                }
+            }
+            label: Label {}
+        }
+
+        menu: PrinterMenu { }
+    }
+
     SidebarHeader {
         id: header
         width: parent.width
         visible: machineExtruderCount.properties.value > 1 || Cura.MachineManager.hasMaterials || Cura.MachineManager.hasVariants
+        anchors.top: machineSelection.bottom
 
         onShowTooltip: base.showTooltip(item, location, text)
         onHideTooltip: base.hideTooltip()

resources/qml/Topbar.qml

@@ -76,70 +76,6 @@ Rectangle
         ExclusiveGroup { id: topbarMenuGroup }
     }
 
-    ToolButton
-    {
-        id: machineSelection
-        text: Cura.MachineManager.activeMachineName
-
-        width: UM.Theme.getSize("sidebar").width
-        height: UM.Theme.getSize("sidebar_header").height
-        tooltip: Cura.MachineManager.activeMachineName
-
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: parent.right
-        style: ButtonStyle
-        {
-            background: Rectangle
-            {
-                color:
-                {
-                    if(control.pressed)
-                    {
-                        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; } }
-
-                UM.RecolorImage
-                {
-                    id: downArrow
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.right: parent.right
-                    anchors.rightMargin: UM.Theme.getSize("default_margin").width
-                    width: UM.Theme.getSize("standard_arrow").width
-                    height: UM.Theme.getSize("standard_arrow").height
-                    sourceSize.width: width
-                    sourceSize.height: width
-                    color: UM.Theme.getColor("text_emphasis")
-                    source: UM.Theme.getIcon("arrow_bottom")
-                }
-                Label
-                {
-                    id: sidebarComboBoxLabel
-                    color: UM.Theme.getColor("sidebar_header_text_active")
-                    text: control.text;
-                    elide: Text.ElideRight;
-                    anchors.left: parent.left;
-                    anchors.leftMargin: UM.Theme.getSize("default_margin").width * 2
-                    anchors.right: downArrow.left;
-                    anchors.rightMargin: control.rightMargin;
-                    anchors.verticalCenter: parent.verticalCenter;
-                    font: UM.Theme.getFont("large")
-                }
-            }
-            label: Label {}
-        }
-
-        menu: PrinterMenu { }
-    }
 
     // View orientation Item
     Row