diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml
index 612ef6b41b..779bb7d001 100755
--- a/resources/qml/Cura.qml
+++ b/resources/qml/Cura.qml
@@ -329,7 +329,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,13 +372,21 @@ UM.MainWindow
}
}
+ Topbar
+ {
+ id: topbar
+ anchors.left:parent.left
+ anchors.right: parent.right
+ anchors.top: parent.top
+ }
+
Sidebar
{
id: sidebar;
anchors
{
- top: parent.top;
+ top: topbar.bottom;
bottom: parent.bottom;
right: parent.right;
}
@@ -412,7 +421,7 @@ UM.MainWindow
color: UM.Theme.getColor("viewport_overlay")
anchors
{
- top: parent.top
+ top: topbar.bottom
bottom: parent.bottom
left:parent.left
right: sidebar.left
@@ -437,8 +446,6 @@ UM.MainWindow
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..e446fba653 100755
--- a/resources/qml/Sidebar.qml
+++ b/resources/qml/Sidebar.qml
@@ -88,221 +88,6 @@ 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
diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml
new file mode 100644
index 0000000000..3c305b522a
--- /dev/null
+++ b/resources/qml/Topbar.qml
@@ -0,0 +1,208 @@
+// 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
+
+ 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: monitoringPrint = false
+ iconSource: UM.Theme.getIcon("tab_settings");
+ property color overlayColor: "transparent"
+ property string overlayIconSource: ""
+ text: "Prepare"
+ checkable: true
+ checked: !monitoringPrint
+ exclusiveGroup: sidebarHeaderBarGroup
+
+ style: UM.Theme.styles.topbar_header_tab
+ }
+
+ Button
+ {
+ id: showMonitor
+ height: UM.Theme.getSize("sidebar_header").height
+ onClicked: monitoringPrint = true
+ 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: 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 { }
+ }
+}
\ No newline at end of file
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],