From 5939ff9b8111f6244f37470e17f07703cd2dca06 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Thu, 26 Jan 2017 14:17:07 +0100 Subject: [PATCH 1/2] Make header tab button color stylable The monitor tab icon is split up in a base monitor tab icon and a status overlay, each with their own color. --- resources/qml/Sidebar.qml | 33 +++++++++++- resources/themes/cura/icons/tab_monitor.svg | 2 +- .../themes/cura/icons/tab_monitor_busy.svg | 7 +-- .../cura/icons/tab_monitor_connected.svg | 5 +- .../themes/cura/icons/tab_monitor_offline.svg | 5 +- .../themes/cura/icons/tab_monitor_paused.svg | 5 +- .../themes/cura/icons/tab_monitor_stopped.svg | 54 +++++++++++++++++-- .../themes/cura/icons/tab_monitor_unknown.svg | 5 +- .../cura/icons/tab_monitor_with_status.svg | 4 ++ resources/themes/cura/styles.qml | 22 ++++++-- 10 files changed, 113 insertions(+), 29 deletions(-) create mode 100644 resources/themes/cura/icons/tab_monitor_with_status.svg diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index d27569c6b8..7803c3eec9 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -175,6 +175,9 @@ Rectangle 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 @@ -203,9 +206,34 @@ Rectangle width: height height: UM.Theme.getSize("sidebar_header").height onClicked: monitoringPrint = true - iconSource: { + iconSource: printerConnected ? UM.Theme.getIcon("tab_monitor_with_status") : UM.Theme.getIcon("tab_monitor") + property color overlayColor: + { + 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 UM.Theme.getIcon("tab_monitor"); + return ""; else if(!printerAcceptsCommands) return UM.Theme.getIcon("tab_monitor_unknown"); @@ -233,6 +261,7 @@ Rectangle return UM.Theme.getIcon("tab_monitor") } } + checkable: true checked: monitoringPrint exclusiveGroup: sidebarHeaderBarGroup diff --git a/resources/themes/cura/icons/tab_monitor.svg b/resources/themes/cura/icons/tab_monitor.svg index 9658a6af5f..2677cec6e2 100644 --- a/resources/themes/cura/icons/tab_monitor.svg +++ b/resources/themes/cura/icons/tab_monitor.svg @@ -1,3 +1,3 @@ - + diff --git a/resources/themes/cura/icons/tab_monitor_busy.svg b/resources/themes/cura/icons/tab_monitor_busy.svg index 84ab2e23f1..cb72fdd623 100644 --- a/resources/themes/cura/icons/tab_monitor_busy.svg +++ b/resources/themes/cura/icons/tab_monitor_busy.svg @@ -1,7 +1,4 @@ - - - - - + diff --git a/resources/themes/cura/icons/tab_monitor_connected.svg b/resources/themes/cura/icons/tab_monitor_connected.svg index ef2bfbf8f5..16ec7d7523 100644 --- a/resources/themes/cura/icons/tab_monitor_connected.svg +++ b/resources/themes/cura/icons/tab_monitor_connected.svg @@ -1,5 +1,4 @@ - - - + diff --git a/resources/themes/cura/icons/tab_monitor_offline.svg b/resources/themes/cura/icons/tab_monitor_offline.svg index 4a16d5a559..850ca1bc03 100644 --- a/resources/themes/cura/icons/tab_monitor_offline.svg +++ b/resources/themes/cura/icons/tab_monitor_offline.svg @@ -1,5 +1,4 @@ - - - + diff --git a/resources/themes/cura/icons/tab_monitor_paused.svg b/resources/themes/cura/icons/tab_monitor_paused.svg index 10cdc9a2a3..feffb7894c 100644 --- a/resources/themes/cura/icons/tab_monitor_paused.svg +++ b/resources/themes/cura/icons/tab_monitor_paused.svg @@ -1,5 +1,4 @@ - - - + diff --git a/resources/themes/cura/icons/tab_monitor_stopped.svg b/resources/themes/cura/icons/tab_monitor_stopped.svg index 6f63c7c2db..86386d3a6b 100644 --- a/resources/themes/cura/icons/tab_monitor_stopped.svg +++ b/resources/themes/cura/icons/tab_monitor_stopped.svg @@ -1,5 +1,51 @@ - - - - + + + + + + image/svg+xml + + + + + + + diff --git a/resources/themes/cura/icons/tab_monitor_unknown.svg b/resources/themes/cura/icons/tab_monitor_unknown.svg index 3d798c7e27..1033b39a4c 100644 --- a/resources/themes/cura/icons/tab_monitor_unknown.svg +++ b/resources/themes/cura/icons/tab_monitor_unknown.svg @@ -1,5 +1,4 @@ - - - + diff --git a/resources/themes/cura/icons/tab_monitor_with_status.svg b/resources/themes/cura/icons/tab_monitor_with_status.svg new file mode 100644 index 0000000000..dc3b373313 --- /dev/null +++ b/resources/themes/cura/icons/tab_monitor_with_status.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml index a57f60b387..64b4436622 100644 --- a/resources/themes/cura/styles.qml +++ b/resources/themes/cura/styles.qml @@ -100,12 +100,24 @@ QtObject { } label: Item { - Image { - anchors.centerIn: parent; + 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; + source: control.iconSource + width: Theme.getSize("button_icon").width + height: Theme.getSize("button_icon").height + + 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 + height: Theme.getSize("button_icon").height sourceSize: Theme.getSize("button_icon") } From e2a9fc0d797f8fe339f9c1d38372a53f87b0d3ef Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Thu, 26 Jan 2017 14:32:47 +0100 Subject: [PATCH 2/2] Rename header tab status overlays to make them reusable The "settings" tab could use a status overlay to show setting errors and slicing paused states. --- resources/qml/Sidebar.qml | 31 ++++++++++++++----- ...b_monitor_busy.svg => tab_status_busy.svg} | 0 ...connected.svg => tab_status_connected.svg} | 0 ...tor_offline.svg => tab_status_offline.svg} | 0 ...nitor_paused.svg => tab_status_paused.svg} | 0 ...tor_stopped.svg => tab_status_stopped.svg} | 0 ...tor_unknown.svg => tab_status_unknown.svg} | 0 resources/themes/cura/theme.json | 1 + 8 files changed, 24 insertions(+), 8 deletions(-) rename resources/themes/cura/icons/{tab_monitor_busy.svg => tab_status_busy.svg} (100%) rename resources/themes/cura/icons/{tab_monitor_connected.svg => tab_status_connected.svg} (100%) rename resources/themes/cura/icons/{tab_monitor_offline.svg => tab_status_offline.svg} (100%) rename resources/themes/cura/icons/{tab_monitor_paused.svg => tab_status_paused.svg} (100%) rename resources/themes/cura/icons/{tab_monitor_stopped.svg => tab_status_stopped.svg} (100%) rename resources/themes/cura/icons/{tab_monitor_unknown.svg => tab_status_unknown.svg} (100%) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index 7803c3eec9..148606679f 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -209,6 +209,15 @@ Rectangle 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": @@ -233,13 +242,17 @@ Rectangle property string overlayIconSource: { if(!printerConnected) + { return ""; + } else if(!printerAcceptsCommands) - return UM.Theme.getIcon("tab_monitor_unknown"); + { + return UM.Theme.getIcon("tab_status_unknown"); + } if(Cura.MachineManager.printerOutputDevices[0].printerState == "maintenance") { - return UM.Theme.getIcon("tab_monitor_busy"); + return UM.Theme.getIcon("tab_status_busy"); } switch(Cura.MachineManager.printerOutputDevices[0].jobState) @@ -247,18 +260,20 @@ Rectangle case "printing": case "pre_print": case "wait_cleanup": - return UM.Theme.getIcon("tab_monitor_busy"); + case "pausing": + case "resuming": + return UM.Theme.getIcon("tab_status_busy"); case "ready": case "": - return UM.Theme.getIcon("tab_monitor_connected") + return UM.Theme.getIcon("tab_status_connected") case "paused": - return UM.Theme.getIcon("tab_monitor_paused") + return UM.Theme.getIcon("tab_status_paused") case "error": - return UM.Theme.getIcon("tab_monitor_stopped") + return UM.Theme.getIcon("tab_status_stopped") case "offline": - return UM.Theme.getIcon("tab_monitor_offline") + return UM.Theme.getIcon("tab_status_offline") default: - return UM.Theme.getIcon("tab_monitor") + return "" } } diff --git a/resources/themes/cura/icons/tab_monitor_busy.svg b/resources/themes/cura/icons/tab_status_busy.svg similarity index 100% rename from resources/themes/cura/icons/tab_monitor_busy.svg rename to resources/themes/cura/icons/tab_status_busy.svg diff --git a/resources/themes/cura/icons/tab_monitor_connected.svg b/resources/themes/cura/icons/tab_status_connected.svg similarity index 100% rename from resources/themes/cura/icons/tab_monitor_connected.svg rename to resources/themes/cura/icons/tab_status_connected.svg diff --git a/resources/themes/cura/icons/tab_monitor_offline.svg b/resources/themes/cura/icons/tab_status_offline.svg similarity index 100% rename from resources/themes/cura/icons/tab_monitor_offline.svg rename to resources/themes/cura/icons/tab_status_offline.svg diff --git a/resources/themes/cura/icons/tab_monitor_paused.svg b/resources/themes/cura/icons/tab_status_paused.svg similarity index 100% rename from resources/themes/cura/icons/tab_monitor_paused.svg rename to resources/themes/cura/icons/tab_status_paused.svg diff --git a/resources/themes/cura/icons/tab_monitor_stopped.svg b/resources/themes/cura/icons/tab_status_stopped.svg similarity index 100% rename from resources/themes/cura/icons/tab_monitor_stopped.svg rename to resources/themes/cura/icons/tab_status_stopped.svg diff --git a/resources/themes/cura/icons/tab_monitor_unknown.svg b/resources/themes/cura/icons/tab_status_unknown.svg similarity index 100% rename from resources/themes/cura/icons/tab_monitor_unknown.svg rename to resources/themes/cura/icons/tab_status_unknown.svg diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index 31caeeabd4..23ebacd7f9 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -193,6 +193,7 @@ "status_busy": [12, 169, 227, 255], "status_paused": [255, 140, 0, 255], "status_stopped": [236, 82, 80, 255], + "status_unknown": [127, 127, 127, 255], "disabled_axis": [127, 127, 127, 255], "x_axis": [255, 0, 0, 255],