From c6d614156f1bd492147d9955f841074ae592f8c7 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Thu, 31 Aug 2017 16:09:16 +0200 Subject: [PATCH 01/13] Move the Cura logo into the top bar Looks ugly there, I think, but the colours will be changed eventually so we'll see. Contributes to issue CURA-4213. --- resources/qml/Cura.qml | 22 ---------------------- resources/qml/Topbar.qml | 18 +++++++++++++++++- 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml index 85b17e28a2..d4055f59f8 100755 --- a/resources/qml/Cura.qml +++ b/resources/qml/Cura.qml @@ -353,28 +353,6 @@ UM.MainWindow action: Cura.Actions.open; } - Image - { - id: logo - anchors - { - left: parent.left - leftMargin: UM.Theme.getSize("default_margin").width; - bottom: parent.bottom - bottomMargin: UM.Theme.getSize("default_margin").height; - } - - source: UM.Theme.getImage("logo"); - width: UM.Theme.getSize("logo").width; - height: UM.Theme.getSize("logo").height; - z: -1; - - sourceSize.width: width; - sourceSize.height: height; - } - - - Toolbar { id: toolbar; diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml index 210b9e1cfa..b66e29cf52 100644 --- a/resources/qml/Topbar.qml +++ b/resources/qml/Topbar.qml @@ -29,9 +29,25 @@ Rectangle name:"cura" } + Image + { + id: logo + anchors.left: parent.left + anchors.leftMargin: UM.Theme.getSize("default_margin").width + anchors.verticalCenter: parent.verticalCenter + + source: UM.Theme.getImage("logo"); + width: UM.Theme.getSize("logo").width; + height: UM.Theme.getSize("logo").height; + + sourceSize.width: width; + sourceSize.height: height; + } + Row { - anchors.left: parent.left + anchors.left: logo.right + anchors.leftMargin: UM.Theme.getSize("default_margin").width anchors.right: machineSelection.left anchors.rightMargin: UM.Theme.getSize("default_margin").width spacing: UM.Theme.getSize("default_margin").width From bec786b140f1f4671516373e6b37df605e0642e9 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Thu, 31 Aug 2017 17:13:56 +0200 Subject: [PATCH 02/13] Move printer status icon outside of the monitor button It's positioned on the right side now above the side bar. Contributes to issue CURA-4213. --- resources/qml/Topbar.qml | 163 ++++++++++++++++++++++----------------- 1 file changed, 91 insertions(+), 72 deletions(-) diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml index b66e29cf52..d97b6fc10f 100644 --- a/resources/qml/Topbar.qml +++ b/resources/qml/Topbar.qml @@ -57,7 +57,6 @@ Rectangle 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: catalog.i18nc("@title:tab","Prepare") @@ -74,76 +73,6 @@ Rectangle height: UM.Theme.getSize("sidebar_header").height onClicked: base.startMonitoringPrint() text: catalog.i18nc("@title:tab", "Monitor") - 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 @@ -155,12 +84,102 @@ Rectangle ExclusiveGroup { id: sidebarHeaderBarGroup } } + UM.RecolorImage + { + id: machineIcon + width: UM.Theme.getSize("button_icon").width //TODO: Once the light design is merged, the theme defines a different size for the top bar icons. + height: UM.Theme.getSize("button_icon").height + anchors.verticalCenter: parent.verticalCenter + anchors.right: machineSelection.left + anchors.rightMargin: UM.Theme.getSize("default_margin").width //TODO: With the light design comes a different margin here. + + source: printerConnected ? UM.Theme.getIcon("tab_monitor_with_status") : UM.Theme.getIcon("tab_monitor") + } + + UM.RecolorImage + { + id: machineStatusIcon + width: machineIcon.width + height: machineIcon.height + anchors.fill: machineIcon + + source: + { + 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 "" + } + } + color: //TODO: In the light design, this is no longer coloured but takes the colour from the SVG icon. + { + 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"); + } + } + } + ToolButton { id: machineSelection text: Cura.MachineManager.activeMachineName - width: UM.Theme.getSize("sidebar").width; + width: UM.Theme.getSize("sidebar").width - machineIcon.width - UM.Theme.getSize("default_margin").width * 2 //TODO: The light design has a different margin here. height: UM.Theme.getSize("sidebar_header").height tooltip: Cura.MachineManager.activeMachineName From d13b693da002ce24eabc8b7107aedede97d43556 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Thu, 31 Aug 2017 17:24:12 +0200 Subject: [PATCH 03/13] Hide icons if top bar buttons have no icon Otherwise there's some empty space there and the RecolourImage will colour that space white. Contributes to issue CURA-4213. --- resources/themes/cura/styles.qml | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml index 30e3ce9ab8..f96c2380c0 100755 --- a/resources/themes/cura/styles.qml +++ b/resources/themes/cura/styles.qml @@ -156,22 +156,23 @@ QtObject { height: Theme.getSize("button_icon").height UM.RecolorImage { + visible: control.iconSource != "" id: icon color: UM.Theme.getColor("text_reversed") opacity: !control.enabled ? 0.2 : 1.0 source: control.iconSource - width: Theme.getSize("button_icon").width + width: visible ? Theme.getSize("button_icon").width : 0 height: Theme.getSize("button_icon").height sourceSize: Theme.getSize("button_icon") } UM.RecolorImage { - visible: control.overlayIconSource != "" + visible: control.overlayIconSource != "" && control.iconSource != "" color: control.overlayColor opacity: !control.enabled ? 0.2 : 1.0 source: control.overlayIconSource - width: Theme.getSize("button_icon").width + width: visible ? Theme.getSize("button_icon").width : 0 height: Theme.getSize("button_icon").height sourceSize: Theme.getSize("button_icon") @@ -180,7 +181,7 @@ QtObject { { text: control.text; anchors.left: icon.right - anchors.leftMargin: Theme.getSize("default_margin").width + anchors.leftMargin: icon.visible ? Theme.getSize("default_margin").width : 0 anchors.verticalCenter: parent.verticalCenter; font: UM.Theme.getFont("large"); color: UM.Theme.getColor("text_reversed") From 28d18d88e5d95acda95f45b6319e6a415f184ea1 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Thu, 31 Aug 2017 17:30:44 +0200 Subject: [PATCH 04/13] Make top bar buttons smaller Contributes to issue CURA-4213. --- resources/themes/cura/theme.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index 7e5f6ae199..a025f15d1d 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -293,7 +293,7 @@ "button_icon": [2.5, 2.5], "button_lining": [0, 0], - "topbar_button": [17, 4], + "topbar_button": [8, 4], "button_tooltip": [1.0, 1.3], "button_tooltip_arrow": [0.25, 0.25], From 31af4b7dde6c74c39dca94978204e749071b3f47 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Thu, 31 Aug 2017 17:34:23 +0200 Subject: [PATCH 05/13] Remove unused icon Contributes to issue CURA-4213. --- resources/themes/cura/icons/tab_settings.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 resources/themes/cura/icons/tab_settings.svg diff --git a/resources/themes/cura/icons/tab_settings.svg b/resources/themes/cura/icons/tab_settings.svg deleted file mode 100644 index 0d90db81ef..0000000000 --- a/resources/themes/cura/icons/tab_settings.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From 88c74b30c2f322d9a3b2f4232a461879af25a9e2 Mon Sep 17 00:00:00 2001 From: Jaime van Kessel Date: Mon, 4 Sep 2017 11:48:54 +0200 Subject: [PATCH 06/13] Added missing QML properties --- resources/qml/Topbar.qml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml index d97b6fc10f..bec159e6c5 100644 --- a/resources/qml/Topbar.qml +++ b/resources/qml/Topbar.qml @@ -73,7 +73,8 @@ Rectangle height: UM.Theme.getSize("sidebar_header").height onClicked: base.startMonitoringPrint() text: catalog.i18nc("@title:tab", "Monitor") - + property color overlayColor: "transparent" + property string overlayIconSource: "" checkable: true checked: base.monitoringPrint exclusiveGroup: sidebarHeaderBarGroup From e44aedc4b9ebe45106dc8169fc80db8aa652274c Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Tue, 5 Sep 2017 10:56:55 +0200 Subject: [PATCH 07/13] Make logo smaller CURA-4213 --- resources/themes/cura-light/theme.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index a28833903e..1f5b231d27 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -259,7 +259,7 @@ "default_margin": [1.0, 1.0], "default_lining": [0.08, 0.08], "default_arrow": [0.8, 0.8], - "logo": [9.5, 2.0], + "logo": [7.6, 1.6], "sidebar": [35.0, 10.0], "sidebar_margin": [1.71, 1.43], From afb885015572f0c715cc4ea72f67cade7b490b2c Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Tue, 5 Sep 2017 10:58:28 +0200 Subject: [PATCH 08/13] Update topbar button style CURA-4213 --- resources/themes/cura-light/styles.qml | 6 +++--- resources/themes/cura-light/theme.json | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index b51d4159d9..57c08ca9d6 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -116,10 +116,10 @@ QtObject { Rectangle { id: underline; - anchors.left: parent.left - anchors.right: parent.right + anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom - height: UM.Theme.getSize("sidebar_header_highlight").height + width: Theme.getSize("topbar_button").width + height: Theme.getSize("sidebar_header_highlight").height color: control.checked ? UM.Theme.getColor("sidebar_header_highlight") : UM.Theme.getColor("sidebar_header_highlight_hover") visible: control.hovered || control.checked } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 1f5b231d27..6d666b6413 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -297,6 +297,7 @@ "button_icon": [2.5, 2.5], "button_lining": [0, 0], + "topbar_logo_right_margin": [3, 0], "topbar_button": [8, 4], "topbar_button_icon": [3.125, 2.5], From 3e3f15d33f0a9f301f5fe61e136f64ed593ef985 Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Tue, 5 Sep 2017 10:59:12 +0200 Subject: [PATCH 09/13] Larger gap between the logo and topbar buttons CURA-4213 --- resources/qml/Topbar.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml index 91f7b36bb5..7baeb002f1 100644 --- a/resources/qml/Topbar.qml +++ b/resources/qml/Topbar.qml @@ -47,7 +47,7 @@ Rectangle Row { anchors.left: logo.right - anchors.leftMargin: UM.Theme.getSize("default_margin").width + anchors.leftMargin: UM.Theme.getSize("topbar_logo_right_margin").width anchors.right: machineSelection.left anchors.rightMargin: UM.Theme.getSize("default_margin").width spacing: UM.Theme.getSize("default_margin").width From 3f6f4a129165d0f389fbb1e01261f6c7621320e0 Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Tue, 5 Sep 2017 11:10:47 +0200 Subject: [PATCH 10/13] Fix merge conflict for topbar monitor button CURA-4106 --- resources/qml/Topbar.qml | 162 +++++++++++++++++---------------------- 1 file changed, 70 insertions(+), 92 deletions(-) diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml index 7baeb002f1..3fd7baef1c 100644 --- a/resources/qml/Topbar.qml +++ b/resources/qml/Topbar.qml @@ -73,8 +73,75 @@ Rectangle height: UM.Theme.getSize("sidebar_header").height onClicked: base.startMonitoringPrint() text: catalog.i18nc("@title:tab", "Monitor") - property color overlayColor: "transparent" - property string overlayIconSource: "" + iconSource: 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") + default: + return "" + } + } + checkable: true checked: base.monitoringPrint exclusiveGroup: sidebarHeaderBarGroup @@ -85,102 +152,13 @@ Rectangle ExclusiveGroup { id: sidebarHeaderBarGroup } } - UM.RecolorImage - { - id: machineIcon - width: UM.Theme.getSize("button_icon").width //TODO: Once the light design is merged, the theme defines a different size for the top bar icons. - height: UM.Theme.getSize("button_icon").height - anchors.verticalCenter: parent.verticalCenter - anchors.right: machineSelection.left - anchors.rightMargin: UM.Theme.getSize("default_margin").width //TODO: With the light design comes a different margin here. - - source: printerConnected ? UM.Theme.getIcon("tab_monitor_with_status") : UM.Theme.getIcon("tab_monitor") - } - - UM.RecolorImage - { - id: machineStatusIcon - width: machineIcon.width - height: machineIcon.height - anchors.fill: machineIcon - - source: - { - 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 "" - } - } - color: //TODO: In the light design, this is no longer coloured but takes the colour from the SVG icon. - { - 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"); - } - } - } ToolButton { id: machineSelection text: Cura.MachineManager.activeMachineName - width: UM.Theme.getSize("sidebar").width - machineIcon.width - UM.Theme.getSize("default_margin").width * 2 //TODO: The light design has a different margin here. + width: UM.Theme.getSize("sidebar").width height: UM.Theme.getSize("sidebar_header").height tooltip: Cura.MachineManager.activeMachineName From 4b08a5611a8c7523f12b39cf67ab1a3812e68858 Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Tue, 5 Sep 2017 11:37:03 +0200 Subject: [PATCH 11/13] Make topbar transparent and update text style CURA-4213 --- resources/qml/Topbar.qml | 2 +- resources/themes/cura-light/styles.qml | 18 +++++------------- resources/themes/cura-light/theme.json | 8 ++++++++ 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml index 3fd7baef1c..e29b9abf86 100644 --- a/resources/qml/Topbar.qml +++ b/resources/qml/Topbar.qml @@ -16,7 +16,7 @@ Rectangle anchors.left: parent.left anchors.right: parent.right height: UM.Theme.getSize("sidebar_header").height - color: UM.Theme.getColor("sidebar_header_bar") + color: "transparent" property bool printerConnected: Cura.MachineManager.printerOutputDevices.length != 0 property bool printerAcceptsCommands: printerConnected && Cura.MachineManager.printerOutputDevices[0].acceptsCommands diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index 57c08ca9d6..cfe35ca789 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -102,15 +102,7 @@ QtObject { anchors.fill: parent; property bool down: control.pressed || (control.checkable && control.checked); - color: { - if(control.pressed || (control.checkable && control.checked)) { - return Theme.getColor("sidebar_header_active"); - } else if(control.hovered) { - return Theme.getColor("sidebar_header_hover"); - } else { - return Theme.getColor("sidebar_header_bar"); - } - } + color: "transparent" Behavior on color { ColorAnimation { duration: 50; } } Rectangle { @@ -165,20 +157,20 @@ QtObject { anchors.left: icon.right anchors.leftMargin: icon.visible ? Theme.getSize("default_margin").width : 0 anchors.verticalCenter: parent.verticalCenter; - font: UM.Theme.getFont("large"); + font: control.checked ? UM.Theme.getFont("large") : UM.Theme.getFont("large_nonbold") color: { if(control.hovered) { - return UM.Theme.getColor("sidebar_header_text_hover"); + return UM.Theme.getColor("topbar_button_text_hovered"); } if(control.checked) { - return UM.Theme.getColor("sidebar_header_text_active"); + return UM.Theme.getColor("topbar_button_text_active"); } else { - return UM.Theme.getColor("sidebar_header_text_inactive"); + return UM.Theme.getColor("topbar_button_text_inactive"); } } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 6d666b6413..85f62c2851 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -9,6 +9,10 @@ "bold": true, "family": "Open Sans" }, + "large_nonbold": { + "size": 1.25, + "family": "Open Sans" + }, "default": { "size": 1.15, "family": "Open Sans" @@ -59,6 +63,10 @@ "border": [127, 127, 127, 255], "secondary": [245, 245, 245, 255], + "topbar_button_text_active": [0, 0, 0, 255], + "topbar_button_text_inactive": [128, 128, 128, 255], + "topbar_button_text_hovered": [0, 0, 0, 255], + "text": [24, 41, 77, 255], "text_detail": [174, 174, 174, 128], "text_link": [12, 169, 227, 255], From 60c7d2f22e97fb5a8acb291da92291856b528535 Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Tue, 5 Sep 2017 12:41:43 +0200 Subject: [PATCH 12/13] Update topbar CURA-4213 --- resources/qml/Topbar.qml | 46 +---- .../themes/cura-light/icons/tab_monitor.svg | 4 - .../cura-light/icons/tab_status_busy.svg | 10 +- .../cura-light/icons/tab_status_connected.svg | 8 +- .../cura-light/icons/tab_status_paused.svg | 9 +- .../cura-light/icons/tab_status_stopped.svg | 9 +- .../cura-light/icons/tab_status_unknown.svg | 9 +- resources/themes/cura-light/styles.qml | 183 ++++++++++++------ resources/themes/cura-light/theme.json | 2 +- .../themes/cura/icons/tab_status_busy.svg | 9 - .../cura/icons/tab_status_connected.svg | 7 - .../themes/cura/icons/tab_status_paused.svg | 8 - .../themes/cura/icons/tab_status_stopped.svg | 8 - .../themes/cura/icons/tab_status_unknown.svg | 8 - resources/themes/cura/images/logo.svg | 8 - 15 files changed, 141 insertions(+), 187 deletions(-) delete mode 100644 resources/themes/cura-light/icons/tab_monitor.svg delete mode 100644 resources/themes/cura/icons/tab_status_busy.svg delete mode 100644 resources/themes/cura/icons/tab_status_connected.svg delete mode 100644 resources/themes/cura/icons/tab_status_paused.svg delete mode 100644 resources/themes/cura/icons/tab_status_stopped.svg delete mode 100644 resources/themes/cura/icons/tab_status_unknown.svg delete mode 100644 resources/themes/cura/images/logo.svg diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml index e29b9abf86..c5d46873cb 100644 --- a/resources/qml/Topbar.qml +++ b/resources/qml/Topbar.qml @@ -64,53 +64,21 @@ Rectangle checked: !base.monitoringPrint exclusiveGroup: sidebarHeaderBarGroup - style: UM.Theme.styles.topbar_header_tab + style: UM.Theme.styles.topbar_header_tab } Button { id: showMonitor + width: UM.Theme.getSize("topbar_button").width height: UM.Theme.getSize("sidebar_header").height onClicked: base.startMonitoringPrint() text: catalog.i18nc("@title:tab", "Monitor") - iconSource: 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: + property string iconSource: { if(!printerConnected) { - return ""; + return UM.Theme.getIcon("tab_status_unknown"); } else if(!printerAcceptsCommands) { @@ -138,7 +106,7 @@ Rectangle case "error": return UM.Theme.getIcon("tab_status_stopped") default: - return "" + return UM.Theme.getIcon("tab_status_unknown") } } @@ -146,7 +114,7 @@ Rectangle checked: base.monitoringPrint exclusiveGroup: sidebarHeaderBarGroup - style: UM.Theme.styles.topbar_header_tab + style: UM.Theme.styles.topbar_header_tab_no_overlay } ExclusiveGroup { id: sidebarHeaderBarGroup } @@ -215,7 +183,7 @@ Rectangle text: control.text; elide: Text.ElideRight; anchors.left: parent.left; - anchors.leftMargin: UM.Theme.getSize("default_margin").width + anchors.leftMargin: UM.Theme.getSize("default_margin").width * 2 anchors.right: downArrow.left; anchors.rightMargin: control.rightMargin; anchors.verticalCenter: parent.verticalCenter; diff --git a/resources/themes/cura-light/icons/tab_monitor.svg b/resources/themes/cura-light/icons/tab_monitor.svg deleted file mode 100644 index afc661a22d..0000000000 --- a/resources/themes/cura-light/icons/tab_monitor.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/resources/themes/cura-light/icons/tab_status_busy.svg b/resources/themes/cura-light/icons/tab_status_busy.svg index cf8e384d88..4df1a5b733 100644 --- a/resources/themes/cura-light/icons/tab_status_busy.svg +++ b/resources/themes/cura-light/icons/tab_status_busy.svg @@ -1,9 +1 @@ - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/resources/themes/cura-light/icons/tab_status_connected.svg b/resources/themes/cura-light/icons/tab_status_connected.svg index 56aecdf0a7..4960e97d0f 100644 --- a/resources/themes/cura-light/icons/tab_status_connected.svg +++ b/resources/themes/cura-light/icons/tab_status_connected.svg @@ -1,7 +1 @@ - - - - - - - \ No newline at end of file +tab_status_connected \ No newline at end of file diff --git a/resources/themes/cura-light/icons/tab_status_paused.svg b/resources/themes/cura-light/icons/tab_status_paused.svg index 0ec744ad86..7358d76305 100644 --- a/resources/themes/cura-light/icons/tab_status_paused.svg +++ b/resources/themes/cura-light/icons/tab_status_paused.svg @@ -1,8 +1 @@ - - - - - - - - \ No newline at end of file +tab_status_paused \ No newline at end of file diff --git a/resources/themes/cura-light/icons/tab_status_stopped.svg b/resources/themes/cura-light/icons/tab_status_stopped.svg index ec1afaec81..d93f477ea7 100644 --- a/resources/themes/cura-light/icons/tab_status_stopped.svg +++ b/resources/themes/cura-light/icons/tab_status_stopped.svg @@ -1,8 +1 @@ - - - - - - - - \ No newline at end of file +tab_status_stopped \ No newline at end of file diff --git a/resources/themes/cura-light/icons/tab_status_unknown.svg b/resources/themes/cura-light/icons/tab_status_unknown.svg index 382a2b2d8b..1ba37e06be 100644 --- a/resources/themes/cura-light/icons/tab_status_unknown.svg +++ b/resources/themes/cura-light/icons/tab_status_unknown.svg @@ -1,8 +1 @@ - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index d40fa1c9d1..cedb861da5 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -90,72 +90,44 @@ QtObject { } } - property Component topbar_header_tab: Component { + property Component topbar_header_tab_no_overlay: Component { ButtonStyle { - background: Item { - implicitWidth: Theme.getSize("topbar_button").width; - implicitHeight: Theme.getSize("topbar_button").height; + background: Rectangle { + implicitHeight: Theme.getSize("topbar_button").height + implicitWidth: Theme.getSize("topbar_button").width + color: "transparent" + anchors.fill: parent - Rectangle { - id: buttonFace; + Rectangle + { + id: underline - anchors.fill: parent; - property bool down: control.pressed || (control.checkable && control.checked); - - color: "transparent" - Behavior on color { ColorAnimation { duration: 50; } } - - Rectangle { - id: underline; - - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.bottom - width: Theme.getSize("topbar_button").width - height: Theme.getSize("sidebar_header_highlight").height - color: control.checked ? UM.Theme.getColor("sidebar_header_highlight") : UM.Theme.getColor("sidebar_header_highlight_hover") - visible: control.hovered || control.checked - } + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + width: parent.width + height: Theme.getSize("sidebar_header_highlight").height + color: control.checked ? UM.Theme.getColor("sidebar_header_highlight") : "transparent" + visible: control.hovered || control.checked } } - label: Item - { + label: Rectangle { implicitHeight: Theme.getSize("topbar_button_icon").height - implicitWidth: Theme.getSize("topbar_button").width; + implicitWidth: Theme.getSize("topbar_button").width + color: "transparent" + anchors.fill: parent + Item { - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter; - width: childrenRect.width - height: Theme.getSize("topbar_button_icon").height - UM.RecolorImage - { - visible: control.iconSource != "" - id: icon - color: UM.Theme.getColor("text_emphasis") - opacity: !control.enabled ? 0.2 : 1.0 - source: control.iconSource - width: visible ? Theme.getSize("topbar_button_icon").width : 0 - height: Theme.getSize("topbar_button_icon").height - - sourceSize: Theme.getSize("topbar_button_icon") - } - UM.RecolorImage - { - visible: control.overlayIconSource != "" && control.iconSource != "" - color: control.overlayColor - opacity: !control.enabled ? 0.2 : 1.0 - source: control.overlayIconSource - width: visible ? Theme.getSize("topbar_button_icon").width : 0 - height: Theme.getSize("topbar_button_icon").height - - sourceSize: Theme.getSize("topbar_button_icon") - } + anchors.centerIn: parent + width: textLabel.width + icon.width + Theme.getSize("default_margin").width / 2 Label { - text: control.text; - anchors.left: icon.right - anchors.leftMargin: icon.visible ? Theme.getSize("default_margin").width : 0 + id: textLabel + text: control.text + anchors.right: icon.visible ? icon.left : parent.right + anchors.rightMargin: icon.visible ? Theme.getSize("default_margin").width / 2 : 0 anchors.verticalCenter: parent.verticalCenter; font: control.checked ? UM.Theme.getFont("large") : UM.Theme.getFont("large_nonbold") color: @@ -174,6 +146,107 @@ QtObject { } } } + Image + { + id: icon + visible: control.iconSource != "" + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + opacity: !control.enabled ? 0.2 : 1.0 + source: control.iconSource + width: visible ? Theme.getSize("topbar_button_icon").width : 0 + height: Theme.getSize("topbar_button_icon").height + + sourceSize: Theme.getSize("topbar_button_icon") + } + } + } + } + } + + property Component topbar_header_tab: Component { + ButtonStyle { + background: Item { + implicitHeight: Theme.getSize("topbar_button").height + implicitWidth: Theme.getSize("topbar_button").width + Theme.getSize("topbar_button_icon").width + + Rectangle { + id: buttonFace; + anchors.fill: parent; + + color: "transparent" + Behavior on color { ColorAnimation { duration: 50; } } + + Rectangle { + id: underline; + + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + width: Theme.getSize("topbar_button").width + Theme.getSize("topbar_button_icon").width + height: Theme.getSize("sidebar_header_highlight").height + color: control.checked ? UM.Theme.getColor("sidebar_header_highlight") : UM.Theme.getColor("sidebar_header_highlight_hover") + visible: control.hovered || control.checked + } + } + } + + label: Item + { + implicitHeight: Theme.getSize("topbar_button_icon").height + implicitWidth: Theme.getSize("topbar_button").width + Theme.getSize("topbar_button_icon").width + Item + { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter; + width: childrenRect.width + height: Theme.getSize("topbar_button_icon").height + Label + { + text: control.text; + anchors.right: (icon.visible || overlayIcon.visible) ? icon.left : parent.right + anchors.rightMargin: (icon.visible || overlayIcon.visible) ? Theme.getSize("default_margin").width : 0 + anchors.verticalCenter: parent.verticalCenter; + font: control.checked ? UM.Theme.getFont("large") : UM.Theme.getFont("large_nonbold") + color: + { + if(control.hovered) + { + return UM.Theme.getColor("topbar_button_text_hovered"); + } + if(control.checked) + { + return UM.Theme.getColor("topbar_button_text_active"); + } + else + { + return UM.Theme.getColor("topbar_button_text_inactive"); + } + } + } + UM.RecolorImage + { + visible: control.iconSource != "" + id: icon + color: UM.Theme.getColor("text_emphasis") + opacity: !control.enabled ? 0.2 : 1.0 + source: control.iconSource + width: visible ? Theme.getSize("topbar_button_icon").width : 0 + height: Theme.getSize("topbar_button_icon").height + + sourceSize: Theme.getSize("topbar_button_icon") + } + UM.RecolorImage + { + id: overlayIcon + visible: control.overlayIconSource != "" && control.iconSource != "" + color: control.overlayColor + opacity: !control.enabled ? 0.2 : 1.0 + source: control.overlayIconSource + width: visible ? Theme.getSize("topbar_button_icon").width : 0 + height: Theme.getSize("topbar_button_icon").height + + sourceSize: Theme.getSize("topbar_button_icon") + } } } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 398fbac3eb..0eb66c9e76 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -310,7 +310,7 @@ "topbar_logo_right_margin": [3, 0], "topbar_button": [8, 4], - "topbar_button_icon": [3.125, 2.5], + "topbar_button_icon": [1.2, 1.2], "button_tooltip": [1.0, 1.3], "button_tooltip_arrow": [0.25, 0.25], diff --git a/resources/themes/cura/icons/tab_status_busy.svg b/resources/themes/cura/icons/tab_status_busy.svg deleted file mode 100644 index 7b5774e71b..0000000000 --- a/resources/themes/cura/icons/tab_status_busy.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/resources/themes/cura/icons/tab_status_connected.svg b/resources/themes/cura/icons/tab_status_connected.svg deleted file mode 100644 index 7997ffbee6..0000000000 --- a/resources/themes/cura/icons/tab_status_connected.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/resources/themes/cura/icons/tab_status_paused.svg b/resources/themes/cura/icons/tab_status_paused.svg deleted file mode 100644 index 606d4cb96c..0000000000 --- a/resources/themes/cura/icons/tab_status_paused.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/resources/themes/cura/icons/tab_status_stopped.svg b/resources/themes/cura/icons/tab_status_stopped.svg deleted file mode 100644 index 6cd0f18b17..0000000000 --- a/resources/themes/cura/icons/tab_status_stopped.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/resources/themes/cura/icons/tab_status_unknown.svg b/resources/themes/cura/icons/tab_status_unknown.svg deleted file mode 100644 index 5e46eec55b..0000000000 --- a/resources/themes/cura/icons/tab_status_unknown.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/resources/themes/cura/images/logo.svg b/resources/themes/cura/images/logo.svg deleted file mode 100644 index 545b42d193..0000000000 --- a/resources/themes/cura/images/logo.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file From e18528d2ca596ce74ed3d722c681193155f4e259 Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Wed, 6 Sep 2017 15:49:54 +0200 Subject: [PATCH 13/13] Fix position of the material compatibility warning CURA-4148 --- resources/qml/SidebarHeader.qml | 31 +++++++++++++------------- resources/themes/cura-light/theme.json | 2 +- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/resources/qml/SidebarHeader.qml b/resources/qml/SidebarHeader.qml index 391b6c131a..3c26638b0a 100644 --- a/resources/qml/SidebarHeader.qml +++ b/resources/qml/SidebarHeader.qml @@ -357,6 +357,22 @@ Column anchors.right: parent.right width: parent.width * 0.7 + UM.Theme.getSize("sidebar_margin").width + UM.RecolorImage + { + id: warningImage + anchors.right: materialInfoLabel.left + anchors.rightMargin: UM.Theme.getSize("default_margin").width + anchors.verticalCenter: parent.Bottom + source: UM.Theme.getIcon("warning") + width: UM.Theme.getSize("section_icon").width + height: UM.Theme.getSize("section_icon").height + //sourceSize.width: width + 5 + //sourceSize.height: width + 5 + + color: UM.Theme.getColor("setting_validation_warning") + visible: !Cura.MachineManager.isCurrentSetupSupported + } + Text { id: materialInfoLabel @@ -395,21 +411,6 @@ Column onExited: base.hideTooltip(); } } - - UM.RecolorImage - { - id: warningImage - anchors.right: parent.right - anchors.verticalCenter: parent.Bottom - source: UM.Theme.getIcon("warning") - width: UM.Theme.getSize("section_icon").width - height: UM.Theme.getSize("section_icon").height - //sourceSize.width: width + 5 - //sourceSize.height: width + 5 - - color: UM.Theme.getColor("setting_validation_warning") - visible: !Cura.MachineManager.isCurrentSetupSupported - } } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 46d5ff0662..d4d12c24cd 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -173,7 +173,7 @@ "setting_validation_error_background": [255, 57, 14, 255], "setting_validation_error": [127, 127, 127, 255], "setting_validation_warning_background": [255, 186, 15, 255], - "setting_validation_warning": [127, 127, 127, 255], + "setting_validation_warning": [0, 0, 0, 255], "setting_validation_ok": [255, 255, 255, 255], "progressbar_background": [245, 245, 245, 255],