diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml index 35048925eb..094e138fbd 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/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/qml/Topbar.qml b/resources/qml/Topbar.qml index 9342e4d781..1b9f6cad65 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 @@ -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("topbar_logo_right_margin").width anchors.right: machineSelection.left anchors.rightMargin: UM.Theme.getSize("default_margin").width spacing: UM.Theme.getSize("default_margin").width @@ -41,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") @@ -49,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) { @@ -124,7 +107,7 @@ Rectangle case "error": return UM.Theme.getIcon("tab_status_stopped") default: - return "" + return UM.Theme.getIcon("tab_status_unknown") } } @@ -132,18 +115,19 @@ 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 } } + ToolButton { id: machineSelection text: Cura.MachineManager.activeMachineName - width: UM.Theme.getSize("sidebar").width; + width: UM.Theme.getSize("sidebar").width height: UM.Theme.getSize("sidebar_header").height tooltip: Cura.MachineManager.activeMachineName @@ -200,7 +184,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_settings.svg b/resources/themes/cura-light/icons/tab_settings.svg deleted file mode 100644 index e2a4860647..0000000000 --- a/resources/themes/cura-light/icons/tab_settings.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - 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 afc1df1d5b..cedb861da5 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -90,36 +90,100 @@ QtObject { } } + property Component topbar_header_tab_no_overlay: Component { + ButtonStyle { + background: Rectangle { + implicitHeight: Theme.getSize("topbar_button").height + implicitWidth: Theme.getSize("topbar_button").width + color: "transparent" + anchors.fill: parent + + Rectangle + { + id: underline + + 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: Rectangle { + implicitHeight: Theme.getSize("topbar_button_icon").height + implicitWidth: Theme.getSize("topbar_button").width + color: "transparent" + anchors.fill: parent + + Item + { + anchors.centerIn: parent + width: textLabel.width + icon.width + Theme.getSize("default_margin").width / 2 + Label + { + 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: + { + 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"); + } + } + } + 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 { - implicitWidth: Theme.getSize("topbar_button").width; - implicitHeight: Theme.getSize("topbar_button").height; + implicitHeight: Theme.getSize("topbar_button").height + implicitWidth: Theme.getSize("topbar_button").width + Theme.getSize("topbar_button_icon").width Rectangle { id: buttonFace; - 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 { 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 + 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 } @@ -129,57 +193,60 @@ QtObject { label: Item { implicitHeight: Theme.getSize("topbar_button_icon").height - implicitWidth: Theme.getSize("topbar_button").width; + 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 - UM.RecolorImage - { - id: icon - color: UM.Theme.getColor("text_emphasis") - opacity: !control.enabled ? 0.2 : 1.0 - source: control.iconSource - width: Theme.getSize("topbar_button_icon").width - height: Theme.getSize("topbar_button_icon").height - - sourceSize: Theme.getSize("topbar_button_icon") - } - Image - { - visible: control.overlayIconSource != "" - opacity: !control.enabled ? 0.2 : 1.0 - source: control.overlayIconSource - width: Theme.getSize("topbar_button_icon").width - height: Theme.getSize("topbar_button_icon").height - - sourceSize: Theme.getSize("topbar_button_icon") - } Label { text: control.text; - anchors.left: icon.right - anchors.leftMargin: Theme.getSize("default_margin").width + 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: 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"); } } } + 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 8025ed61be..d4d12c24cd 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], @@ -165,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], @@ -264,7 +272,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], "extruder_button_material_margin": [0.50, 0.9], "extruder_button_material": [0.75, 0.75], @@ -305,8 +313,9 @@ "button_icon": [2.5, 2.5], "button_lining": [0, 0], - "topbar_button": [17, 4], - "topbar_button_icon": [3.125, 2.5], + "topbar_logo_right_margin": [3, 0], + "topbar_button": [8, 4], + "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 diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index 3f9d98b5b4..46da3cbe7a 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -243,7 +243,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],