Merge pull request #2064 from Ultimaker/feature_top_navigation_bar

Feature top navigation bar

resources/qml/Cura.qml

@@ -18,7 +18,17 @@ UM.MainWindow
     //: Cura application window title
     title: catalog.i18nc("@title:window","Cura");
     viewportRect: Qt.rect(0, 0, (base.width - sidebar.width) / base.width, 1.0)
-    property bool monitoringPrint: false
+    property bool showPrintMonitor: false
+
+    Connections
+    {
+        target: Printer
+        onShowPrintMonitor:
+        {
+            base.showPrintMonitor = show;
+        }
+    }
+
     Component.onCompleted:
     {
         CuraApplication.setMinimumWindowSize(UM.Theme.getSize("window_minimum_size"))
@@ -329,7 +339,8 @@ UM.MainWindow
                 tooltip: '';
                 anchors
                 {
-                    top: parent.top;
+                    top: topbar.bottom;
+                    topMargin: UM.Theme.getSize("default_margin").height;
                     left: parent.left;
                 }
                 action: Cura.Actions.open;
@@ -371,19 +382,30 @@ UM.MainWindow
                 }
             }
 
+            Topbar
+            {
+                id: topbar
+                anchors.left:parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+                monitoringPrint: base.showPrintMonitor
+                onStartMonitoringPrint: base.showPrintMonitor = true
+                onStopMonitoringPrint: base.showPrintMonitor = false
+            }
+
             Sidebar
             {
                 id: sidebar;
 
                 anchors
                 {
-                    top: parent.top;
+                    top: topbar.bottom;
                     bottom: parent.bottom;
                     right: parent.right;
                 }
                 z: 1
-                onMonitoringPrintChanged: base.monitoringPrint = monitoringPrint
                 width: UM.Theme.getSize("sidebar").width;
+                monitoringPrint: base.showPrintMonitor
             }
 
             Button
@@ -412,13 +434,13 @@ UM.MainWindow
                 color: UM.Theme.getColor("viewport_overlay")
                 anchors
                 {
-                    top: parent.top
+                    top: topbar.bottom
                     bottom: parent.bottom
                     left:parent.left
                     right: sidebar.left
                 }
                 visible: opacity > 0
-                opacity: base.monitoringPrint ? 0.75 : 0
+                opacity: base.showPrintMonitor ? 0.75 : 0
 
                 Behavior on opacity { NumberAnimation { duration: 100; } }
 
@@ -433,12 +455,10 @@ UM.MainWindow
             Loader
             {
                 sourceComponent: Cura.MachineManager.printerOutputDevices.length > 0 ? Cura.MachineManager.printerOutputDevices[0].monitorItem: null
-                visible: base.monitoringPrint
+                visible: base.showPrintMonitor
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.horizontalCenterOffset: - UM.Theme.getSize("sidebar").width / 2
-
-
             }
 
             UM.MessageStack

resources/qml/Sidebar.qml

@@ -15,24 +15,15 @@ Rectangle
     id: base;
 
     property int currentModeIndex;
-    property bool monitoringPrint: false;  // When adding more "tabs", one want to replace this bool with a ListModel
     property bool hideSettings: PrintInformation.preSliced
-    Connections
-    {
-        target: Printer
-        onShowPrintMonitor:
-        {
-            base.monitoringPrint = show;
-            showSettings.checked = !show;
-            showMonitor.checked = show;
-        }
-    }
 
     // Is there an output device for this printer?
     property bool printerConnected: Cura.MachineManager.printerOutputDevices.length != 0
     property bool printerAcceptsCommands: printerConnected && Cura.MachineManager.printerOutputDevices[0].acceptsCommands
     property int backendState: UM.Backend.state;
 
+    property bool monitoringPrint: false
+
     color: UM.Theme.getColor("sidebar")
     UM.I18nCatalog { id: catalog; name:"cura"}
 
@@ -88,227 +79,10 @@ Rectangle
         }
     }
 
-    // Printer selection and mode selection buttons for changing between Setting & Monitor print mode
-    Rectangle
-    {
-        id: sidebarHeaderBar
-        anchors.left: parent.left
-        anchors.right: parent.right
-        height: childrenRect.height
-        color: UM.Theme.getColor("sidebar_header_bar")
-
-        Row
-        {
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.rightMargin: UM.Theme.getSize("default_margin").width
-            spacing: UM.Theme.getSize("default_margin").width
-
-            ToolButton
-            {
-                id: machineSelection
-                text: Cura.MachineManager.activeMachineName
-
-                width: parent.width - (showSettings.width + showMonitor.width + 2 * UM.Theme.getSize("default_margin").width)
-                height: UM.Theme.getSize("sidebar_header").height
-                tooltip: Cura.MachineManager.activeMachineName
-
-                anchors.verticalCenter: parent.verticalCenter
-                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; } }
-
-                        Rectangle {
-                            id: underline;
-
-                            anchors.left: parent.left
-                            anchors.right: parent.right
-                            anchors.bottom: parent.bottom
-                            height: UM.Theme.getSize("sidebar_header_highlight").height
-                            color: UM.Theme.getColor("sidebar_header_highlight_hover")
-                            visible: control.hovered || control.pressed
-                        }
-
-                        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_reversed")
-                            source: UM.Theme.getIcon("arrow_bottom")
-                        }
-                        Label {
-                            id: sidebarComboBoxLabel
-                            color: UM.Theme.getColor("text_reversed")
-                            text: control.text;
-                            elide: Text.ElideRight;
-                            anchors.left: parent.left;
-                            anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                            anchors.right: downArrow.left;
-                            anchors.rightMargin: control.rightMargin;
-                            anchors.verticalCenter: parent.verticalCenter;
-                            font: UM.Theme.getFont("large")
-                        }
-                    }
-                    label: Label{}
-                }
-
-                menu: PrinterMenu { }
-            }
-
-            Button
-            {
-                id: showSettings
-                width: height
-                height: UM.Theme.getSize("sidebar_header").height
-                onClicked: monitoringPrint = false
-                iconSource: UM.Theme.getIcon("tab_settings");
-                property color overlayColor: "transparent"
-                property string overlayIconSource: ""
-
-                checkable: true
-                checked: !monitoringPrint
-                exclusiveGroup: sidebarHeaderBarGroup
-                property string tooltipText: catalog.i18nc("@tooltip", "<b>Print Setup</b><br/><br/>Edit or review the settings for the active print job.")
-
-                onHoveredChanged: {
-                    if (hovered)
-                    {
-                        tooltipDelayTimer.item = showSettings
-                        tooltipDelayTimer.text = tooltipText
-                        tooltipDelayTimer.start();
-                    }
-                    else
-                    {
-                        tooltipDelayTimer.stop();
-                        base.hideTooltip();
-                    }
-                }
-
-                style:  UM.Theme.styles.sidebar_header_tab
-            }
-
-            Button
-            {
-                id: showMonitor
-                width: height
-                height: UM.Theme.getSize("sidebar_header").height
-                onClicked: monitoringPrint = true
-                iconSource: printerConnected ? UM.Theme.getIcon("tab_monitor_with_status") : UM.Theme.getIcon("tab_monitor")
-                property color overlayColor:
-                {
-                    if(!printerAcceptsCommands)
-                    {
-                        return UM.Theme.getColor("status_unknown");
-                    }
-
-                    if(Cura.MachineManager.printerOutputDevices[0].printerState == "maintenance")
-                    {
-                        return UM.Theme.getColor("status_busy");
-                    }
-                    switch(Cura.MachineManager.printerOutputDevices[0].jobState)
-                    {
-                        case "printing":
-                        case "pre_print":
-                        case "wait_cleanup":
-                        case "pausing":
-                        case "resuming":
-                            return UM.Theme.getColor("status_busy");
-                        case "ready":
-                        case "":
-                            return UM.Theme.getColor("status_ready");
-                        case "paused":
-                            return UM.Theme.getColor("status_paused");
-                        case "error":
-                            return UM.Theme.getColor("status_stopped");
-                        case "offline":
-                            return UM.Theme.getColor("status_offline");
-                        default:
-                            return UM.Theme.getColor("text_reversed");
-                    }
-                }
-                property string overlayIconSource:
-                {
-                    if(!printerConnected)
-                    {
-                        return "";
-                    }
-                    else if(!printerAcceptsCommands)
-                    {
-                        return UM.Theme.getIcon("tab_status_unknown");
-                    }
-
-                    if(Cura.MachineManager.printerOutputDevices[0].printerState == "maintenance")
-                    {
-                        return UM.Theme.getIcon("tab_status_busy");
-                    }
-
-                    switch(Cura.MachineManager.printerOutputDevices[0].jobState)
-                    {
-                        case "printing":
-                        case "pre_print":
-                        case "wait_cleanup":
-                        case "pausing":
-                        case "resuming":
-                            return UM.Theme.getIcon("tab_status_busy");
-                        case "ready":
-                        case "":
-                            return UM.Theme.getIcon("tab_status_connected")
-                        case "paused":
-                            return UM.Theme.getIcon("tab_status_paused")
-                        case "error":
-                            return UM.Theme.getIcon("tab_status_stopped")
-                        case "offline":
-                            return UM.Theme.getIcon("tab_status_offline")
-                        default:
-                            return ""
-                    }
-                }
-
-                checkable: true
-                checked: monitoringPrint
-                exclusiveGroup: sidebarHeaderBarGroup
-                property string tooltipText: catalog.i18nc("@tooltip", "<b>Print Monitor</b><br/><br/>Monitor the state of the connected printer and the print job in progress.")
-
-                onHoveredChanged: {
-                    if (hovered)
-                    {
-                        tooltipDelayTimer.item = showMonitor
-                        tooltipDelayTimer.text = tooltipText
-                        tooltipDelayTimer.start();
-                    }
-                    else
-                    {
-                        tooltipDelayTimer.stop();
-                        base.hideTooltip();
-                    }
-                }
-
-                style:  UM.Theme.styles.sidebar_header_tab
-            }
-            ExclusiveGroup { id: sidebarHeaderBarGroup }
-        }
-    }
-
     SidebarHeader {
         id: header
         width: parent.width
 
-        anchors.top: sidebarHeaderBar.bottom
-
         onShowTooltip: base.showTooltip(item, location, text)
         onHideTooltip: base.hideTooltip()
     }

resources/qml/Topbar.qml

@@ -0,0 +1,211 @@
+// Copyright (c) 2017 Ultimaker B.V.
+// Cura is released under the terms of the AGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Layouts 1.1
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+import "Menus"
+
+Rectangle
+{
+    id: base
+    anchors.left: parent.left
+    anchors.right: parent.right
+    height: UM.Theme.getSize("sidebar_header").height
+    color: UM.Theme.getColor("sidebar_header_bar")
+
+    property bool printerConnected: Cura.MachineManager.printerOutputDevices.length != 0
+    property bool printerAcceptsCommands: printerConnected && Cura.MachineManager.printerOutputDevices[0].acceptsCommands
+    property bool monitoringPrint: false
+    signal startMonitoringPrint()
+    signal stopMonitoringPrint()
+
+    Row
+    {
+        anchors.left: parent.left
+        anchors.right: machineSelection.left
+        anchors.rightMargin: UM.Theme.getSize("default_margin").width
+        spacing: UM.Theme.getSize("default_margin").width
+
+        Button
+        {
+            id: showSettings
+            height: UM.Theme.getSize("sidebar_header").height
+            onClicked: base.stopMonitoringPrint()
+            iconSource: UM.Theme.getIcon("tab_settings");
+            property color overlayColor: "transparent"
+            property string overlayIconSource: ""
+            text: "Prepare"
+            checkable: true
+            checked: !base.monitoringPrint
+            exclusiveGroup: sidebarHeaderBarGroup
+
+            style:  UM.Theme.styles.topbar_header_tab
+        }
+
+        Button
+        {
+            id: showMonitor
+            height: UM.Theme.getSize("sidebar_header").height
+            onClicked: base.startMonitoringPrint()
+            text: "Print"
+            iconSource: printerConnected ? UM.Theme.getIcon("tab_monitor_with_status") : UM.Theme.getIcon("tab_monitor")
+            property color overlayColor:
+            {
+                if(!printerAcceptsCommands)
+                {
+                    return UM.Theme.getColor("status_unknown");
+                }
+
+                if(Cura.MachineManager.printerOutputDevices[0].printerState == "maintenance")
+                {
+                    return UM.Theme.getColor("status_busy");
+                }
+                switch(Cura.MachineManager.printerOutputDevices[0].jobState)
+                {
+                    case "printing":
+                    case "pre_print":
+                    case "wait_cleanup":
+                    case "pausing":
+                    case "resuming":
+                        return UM.Theme.getColor("status_busy");
+                    case "ready":
+                    case "":
+                        return UM.Theme.getColor("status_ready");
+                    case "paused":
+                        return UM.Theme.getColor("status_paused");
+                    case "error":
+                        return UM.Theme.getColor("status_stopped");
+                    case "offline":
+                        return UM.Theme.getColor("status_offline");
+                    default:
+                        return UM.Theme.getColor("text_reversed");
+                }
+            }
+            property string overlayIconSource:
+            {
+                if(!printerConnected)
+                {
+                    return "";
+                }
+                else if(!printerAcceptsCommands)
+                {
+                    return UM.Theme.getIcon("tab_status_unknown");
+                }
+
+                if(Cura.MachineManager.printerOutputDevices[0].printerState == "maintenance")
+                {
+                    return UM.Theme.getIcon("tab_status_busy");
+                }
+
+                switch(Cura.MachineManager.printerOutputDevices[0].jobState)
+                {
+                    case "printing":
+                    case "pre_print":
+                    case "wait_cleanup":
+                    case "pausing":
+                    case "resuming":
+                        return UM.Theme.getIcon("tab_status_busy");
+                    case "ready":
+                    case "":
+                        return UM.Theme.getIcon("tab_status_connected")
+                    case "paused":
+                        return UM.Theme.getIcon("tab_status_paused")
+                    case "error":
+                        return UM.Theme.getIcon("tab_status_stopped")
+                    case "offline":
+                        return UM.Theme.getIcon("tab_status_offline")
+                    default:
+                        return ""
+                }
+            }
+
+            checkable: true
+            checked: base.monitoringPrint
+            exclusiveGroup: sidebarHeaderBarGroup
+
+            style:  UM.Theme.styles.topbar_header_tab
+        }
+
+        ExclusiveGroup { id: sidebarHeaderBarGroup }
+    }
+
+    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; } }
+
+                Rectangle
+                {
+                    id: underline;
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.bottom: parent.bottom
+                    height: UM.Theme.getSize("sidebar_header_highlight").height
+                    color: UM.Theme.getColor("sidebar_header_highlight_hover")
+                    visible: control.hovered || control.pressed
+                }
+
+                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_reversed")
+                    source: UM.Theme.getIcon("arrow_bottom")
+                }
+                Label
+                {
+                    id: sidebarComboBoxLabel
+                    color: UM.Theme.getColor("text_reversed")
+                    text: control.text;
+                    elide: Text.ElideRight;
+                    anchors.left: parent.left;
+                    anchors.leftMargin: UM.Theme.getSize("default_margin").width
+                    anchors.right: downArrow.left;
+                    anchors.rightMargin: control.rightMargin;
+                    anchors.verticalCenter: parent.verticalCenter;
+                    font: UM.Theme.getFont("large")
+                }
+            }
+            label: Label {}
+        }
+
+        menu: PrinterMenu { }
+    }
+}

resources/themes/cura/styles.qml

@@ -138,11 +138,11 @@ QtObject {
         }
     }
 
-    property Component sidebar_header_tab: Component {
+    property Component topbar_header_tab: Component {
         ButtonStyle {
             background: Item {
-                implicitWidth: Theme.getSize("button").width;
+                implicitWidth: Theme.getSize("topbar_button").width;
-                implicitHeight: Theme.getSize("button").height;
+                implicitHeight: Theme.getSize("topbar_button").height;
 
                 Rectangle {
                     id: buttonFace;
@@ -174,27 +174,48 @@ QtObject {
                 }
             }
 
-            label: Item {
+            label: Item
-                UM.RecolorImage {
+            {
-                    color: UM.Theme.getColor("text_reversed")
-                    anchors.centerIn: parent
-                    opacity: !control.enabled ? 0.2 : 1.0
-                    source: control.iconSource
-                    width: Theme.getSize("button_icon").width
-                    height: Theme.getSize("button_icon").height
 
-                    sourceSize: Theme.getSize("button_icon")
+                implicitHeight: Theme.getSize("button_icon").height
-                }
+                implicitWidth: Theme.getSize("topbar_button").width;
-                UM.RecolorImage {
+                Item
-                    visible: control.overlayIconSource != ""
+                {
-                    color: control.overlayColor
+                    anchors.horizontalCenter: parent.horizontalCenter
-                    anchors.centerIn: parent
+                    anchors.verticalCenter: parent.verticalCenter;
-                    opacity: !control.enabled ? 0.2 : 1.0
+                    width: childrenRect.width
-                    source: control.overlayIconSource
-                    width: Theme.getSize("button_icon").width
                     height: Theme.getSize("button_icon").height
+                    UM.RecolorImage
+                    {
+                        id: icon
+                        color: UM.Theme.getColor("text_reversed")
+                        opacity: !control.enabled ? 0.2 : 1.0
+                        source: control.iconSource
+                        width: Theme.getSize("button_icon").width
+                        height: Theme.getSize("button_icon").height
 
-                    sourceSize: Theme.getSize("button_icon")
+                        sourceSize: Theme.getSize("button_icon")
+                    }
+                    UM.RecolorImage
+                    {
+                        visible: control.overlayIconSource != ""
+                        color: control.overlayColor
+                        opacity: !control.enabled ? 0.2 : 1.0
+                        source: control.overlayIconSource
+                        width: Theme.getSize("button_icon").width
+                        height: Theme.getSize("button_icon").height
+
+                        sourceSize: Theme.getSize("button_icon")
+                    }
+                    Label
+                    {
+                        text: control.text;
+                        anchors.left: icon.right
+                        anchors.leftMargin: Theme.getSize("default_margin").width
+                        anchors.verticalCenter: parent.verticalCenter;
+                        font: UM.Theme.getFont("large");
+                        color: UM.Theme.getColor("text_reversed")
+                    }
                 }
             }
         }

resources/themes/cura/theme.json

@@ -291,6 +291,8 @@
         "button_icon": [2.5, 2.5],
         "button_lining": [0, 0],
 
+        "topbar_button": [17, 4],
+
         "button_tooltip": [1.0, 1.3],
         "button_tooltip_arrow": [0.25, 0.25],