From a5cb4cd316fcea12af92762900d5942b9d2fbdb7 Mon Sep 17 00:00:00 2001 From: Aleksei S Date: Mon, 11 Dec 2017 10:53:48 +0100 Subject: [PATCH] Expand/Collapse sidebar CURA-4234 --- resources/qml/Actions.qml | 8 ++++ resources/qml/Cura.qml | 78 +++++++++++++++++++++++++++++++++++---- resources/qml/Sidebar.qml | 67 +++++++++++++++++++++++++++++++++ resources/qml/Topbar.qml | 64 -------------------------------- 4 files changed, 146 insertions(+), 71 deletions(-) diff --git a/resources/qml/Actions.qml b/resources/qml/Actions.qml index 054a6bed09..cf3581ca0c 100644 --- a/resources/qml/Actions.qml +++ b/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"; + } } diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml index 5530468c4c..37607d237d 100644 --- a/resources/qml/Cura.qml +++ b/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 - { - top: topbar.bottom - bottom: parent.bottom - right: parent.right + property bool collapsed: false; + property var initialWidth: UM.Theme.getSize("sidebar").width; + + function callExpandOrCollapse(){ + 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 diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index ea66aca50f..a45303aab8 100644 --- a/resources/qml/Sidebar.qml +++ b/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() diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml index 99910b24a2..865cd287c3 100644 --- a/resources/qml/Topbar.qml +++ b/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