GitHub-Proxy/Cura
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura synced 2025-05-15 04:18:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2064 from Ultimaker/feature_top_navigation_bar

Browse Source 
Feature top navigation bar
This commit is contained in:
Lipu Fei 2017-07-04 15:46:03 +02:00 committed by GitHub
commit b43a09d773
5 changed files with 286 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
resources/qml/Cura.qml
View File

@ -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

230
resources/qml/Sidebar.qml
View File

@ -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()
}

211
resources/qml/Topbar.qml Normal file
View File

@ -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 { }
}
}

63
resources/themes/cura/styles.qml
View File

@ -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")
}
}
}
}

2
resources/themes/cura/theme.json
View File

@ -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],