diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml
index 612ef6b41b..b1e5c8f2f2 100755
--- a/resources/qml/Cura.qml
+++ b/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
diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml
index ec187cef91..b57b56c292 100755
--- a/resources/qml/Sidebar.qml
+++ b/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", "Print Setup
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", "Print Monitor
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()
}
diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml
new file mode 100644
index 0000000000..1d51c8eccc
--- /dev/null
+++ b/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 { }
+ }
+}
diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml
index c4c441da43..d161d33d56 100755
--- a/resources/themes/cura/styles.qml
+++ b/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;
- implicitHeight: Theme.getSize("button").height;
+ implicitWidth: Theme.getSize("topbar_button").width;
+ implicitHeight: Theme.getSize("topbar_button").height;
Rectangle {
id: buttonFace;
@@ -174,27 +174,48 @@ QtObject {
}
}
- 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
+ label: Item
+ {
- sourceSize: Theme.getSize("button_icon")
- }
- UM.RecolorImage {
- visible: control.overlayIconSource != ""
- color: control.overlayColor
- anchors.centerIn: parent
- opacity: !control.enabled ? 0.2 : 1.0
- source: control.overlayIconSource
- width: Theme.getSize("button_icon").width
+ implicitHeight: Theme.getSize("button_icon").height
+ implicitWidth: Theme.getSize("topbar_button").width;
+ Item
+ {
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.verticalCenter: parent.verticalCenter;
+ width: childrenRect.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")
+ }
}
}
}
diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json
index a36f271fe8..60b542dbf4 100644
--- a/resources/themes/cura/theme.json
+++ b/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],