From e642b4ebe95a66d392d0411e371354a39a30eae7 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Wed, 7 Dec 2016 17:41:04 +0100 Subject: [PATCH 1/5] Tweak 2.4 sidebar changes * Make extruder-tabs more clear on badly calibrated displays * Make infill selection same width as other "Recommended" controls * Move printer selection to the top bar * Add animation to support extruder selection combobox --- resources/qml/Sidebar.qml | 62 ++++++++++++++++++++++++++++---- resources/qml/SidebarHeader.qml | 60 +++++++++++-------------------- resources/qml/SidebarSimple.qml | 13 +++---- resources/themes/cura/theme.json | 2 +- 4 files changed, 84 insertions(+), 53 deletions(-) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index 77e82b5f92..be08083a16 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -8,6 +8,7 @@ import QtQuick.Layouts 1.1 import UM 1.2 as UM import Cura 1.0 as Cura +import "Menus" Rectangle { @@ -85,12 +86,60 @@ Rectangle Row { anchors.left: parent.left - anchors.leftMargin: UM.Theme.getSize("default_margin").width; + anchors.leftMargin: UM.Theme.getSize("default_margin").width 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 + + height: UM.Theme.getSize("setting_control").height + tooltip: Cura.MachineManager.activeMachineName + anchors.verticalCenter: parent.verticalCenter + style: ButtonStyle { + background: Rectangle { + color: UM.Theme.getColor("sidebar_header_bar") + + 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("setting_unit_margin").width + anchors.right: downArrow.left; + anchors.rightMargin: control.rightMargin; + anchors.verticalCenter: parent.verticalCenter; + font: UM.Theme.getFont("large") + } + } + label: Label{} + } + + width: parent.width - (showSettings.width + showMonitor.width + 2 * UM.Theme.getSize("default_margin").width) + + menu: PrinterMenu { } + } + Button { id: showSettings - width: (parent.width - UM.Theme.getSize("default_margin").width) / 2 + width: height height: UM.Theme.getSize("sidebar_header").height onClicked: monitoringPrint = false iconSource: UM.Theme.getIcon("tab_settings"); @@ -100,10 +149,11 @@ Rectangle style: UM.Theme.styles.sidebar_header_tab } + Button { id: showMonitor - width: (parent.width - UM.Theme.getSize("default_margin").width) / 2 + width: height height: UM.Theme.getSize("sidebar_header").height onClicked: monitoringPrint = true iconSource: { @@ -151,7 +201,6 @@ Rectangle width: parent.width anchors.top: sidebarHeaderBar.bottom - anchors.topMargin: UM.Theme.getSize("default_margin").height onShowTooltip: base.showTooltip(item, location, text) onHideTooltip: base.hideTooltip() @@ -160,10 +209,11 @@ Rectangle Rectangle { id: headerSeparator width: parent.width - height: UM.Theme.getSize("sidebar_lining").height + visible: !monitoringPrint + height: visible ? UM.Theme.getSize("sidebar_lining").height : 0 color: UM.Theme.getColor("sidebar_lining") anchors.top: header.bottom - anchors.topMargin: UM.Theme.getSize("default_margin").height + anchors.topMargin: visible ? UM.Theme.getSize("default_margin").height : 0 } onCurrentModeIndexChanged: diff --git a/resources/qml/SidebarHeader.qml b/resources/qml/SidebarHeader.qml index 77d45cae26..3e8f09c807 100644 --- a/resources/qml/SidebarHeader.qml +++ b/resources/qml/SidebarHeader.qml @@ -21,46 +21,6 @@ Column signal showTooltip(Item item, point location, string text) signal hideTooltip() - Row - { - id: machineSelectionRow - height: UM.Theme.getSize("sidebar_setup").height - - anchors - { - left: parent.left - leftMargin: UM.Theme.getSize("default_margin").width - right: parent.right - rightMargin: UM.Theme.getSize("default_margin").width - } - - Label - { - id: machineSelectionLabel - text: catalog.i18nc("@label:listbox", "Printer:"); - anchors.verticalCenter: parent.verticalCenter - font: UM.Theme.getFont("default"); - color: UM.Theme.getColor("text"); - - width: parent.width * 0.45 - UM.Theme.getSize("default_margin").width - } - - ToolButton - { - id: machineSelection - text: Cura.MachineManager.activeMachineName; - - height: UM.Theme.getSize("setting_control").height - tooltip: Cura.MachineManager.activeMachineName - anchors.verticalCenter: parent.verticalCenter - style: UM.Theme.styles.sidebar_header_button - - width: parent.width * 0.55 + UM.Theme.getSize("default_margin").width - - menu: PrinterMenu { } - } - } - Row { id: extruderSelectionRow @@ -86,6 +46,7 @@ Column property var index: 0 height: UM.Theme.getSize("sidebar_header_mode_tabs").height + width: parent.width boundsBehavior: Flickable.StopAtBounds anchors @@ -141,6 +102,17 @@ Column control.hovered ? UM.Theme.getColor("tab_hovered") : UM.Theme.getColor("tab_unchecked") Behavior on color { ColorAnimation { duration: 50; } } + Rectangle + { + id: highlight + visible: control.checked + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + height: UM.Theme.getSize("sidebar_header_highlight").height + color: UM.Theme.getColor("sidebar_header_bar") + } + Rectangle { id: swatch @@ -179,6 +151,14 @@ Column } } + Item + { + id: variantRowSpacer + height: UM.Theme.getSize("default_margin").height / 4 + width: height + visible: !extruderSelectionRow.visible + } + Row { id: variantRow diff --git a/resources/qml/SidebarSimple.qml b/resources/qml/SidebarSimple.qml index c7da237648..499125a6f9 100644 --- a/resources/qml/SidebarSimple.qml +++ b/resources/qml/SidebarSimple.qml @@ -30,7 +30,7 @@ Item id: infillCellLeft anchors.top: parent.top anchors.left: parent.left - width: base.width / 100 * 35 - UM.Theme.getSize("default_margin").width + width: base.width * .45 - UM.Theme.getSize("default_margin").width height: childrenRect.height Label @@ -52,7 +52,7 @@ Item id: infillCellRight height: childrenRect.height; - width: base.width / 100 * 65 + width: base.width * .55 spacing: UM.Theme.getSize("default_margin").width anchors.left: infillCellLeft.right @@ -231,7 +231,7 @@ Item anchors.left: parent.left anchors.leftMargin: UM.Theme.getSize("default_margin").width anchors.verticalCenter: enableSupportCheckBox.verticalCenter - width: parent.width / 100 * 45 - 3 * UM.Theme.getSize("default_margin").width + width: parent.width * .45 - 3 * UM.Theme.getSize("default_margin").width text: catalog.i18nc("@label", "Enable Support"); font: UM.Theme.getFont("default"); color: UM.Theme.getColor("text"); @@ -279,7 +279,7 @@ Item anchors.left: parent.left anchors.leftMargin: UM.Theme.getSize("default_margin").width anchors.verticalCenter: supportExtruderCombobox.verticalCenter - width: parent.width / 100 * 45 - 3 * UM.Theme.getSize("default_margin").width + width: parent.width * .45 - 3 * UM.Theme.getSize("default_margin").width text: catalog.i18nc("@label", "Support Extruder"); font: UM.Theme.getFont("default"); color: UM.Theme.getColor("text"); @@ -319,7 +319,7 @@ Item } anchors.left: supportExtruderLabel.right anchors.leftMargin: UM.Theme.getSize("default_margin").width - width: parent.width / 100 * 55 + width: parent.width * .55 height: { if ((supportEnabled.properties.value == "True") && (machineExtruderCount.properties.value > 1)) @@ -332,6 +332,7 @@ Item return 0; } } + Behavior on height { NumberAnimation { duration: 100 } } style: UM.Theme.styles.combobox_color enabled: base.settingsEnabled @@ -377,7 +378,7 @@ Item anchors.left: parent.left anchors.leftMargin: UM.Theme.getSize("default_margin").width anchors.verticalCenter: adhesionCheckBox.verticalCenter - width: parent.width / 100 * 45 - 3 * UM.Theme.getSize("default_margin").width + width: parent.width * .45 - 3 * UM.Theme.getSize("default_margin").width text: catalog.i18nc("@label", "Build Plate Adhesion"); font: UM.Theme.getFont("default"); color: UM.Theme.getColor("text"); diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index f7aff957f3..c86236ea5d 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -205,7 +205,7 @@ "sidebar": [35.0, 10.0], "sidebar_header": [0.0, 4.0], - "sidebar_header_highlight": [0.5, 0.5], + "sidebar_header_highlight": [0.25, 0.25], "sidebar_header_mode_toggle": [0.0, 2.0], "sidebar_header_mode_tabs": [0.0, 3.0], "sidebar_lining": [0.5, 0.5], From 18fb379fbe23d8ff125c6ad60e066646b5bcde39 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Wed, 7 Dec 2016 19:40:33 +0100 Subject: [PATCH 2/5] Add tooltips for Setup/Monitor and Recommended/Custom tabs --- resources/qml/Sidebar.qml | 70 +++++++++++++++++++++++++++++++- resources/qml/SidebarTooltip.qml | 5 +++ 2 files changed, 73 insertions(+), 2 deletions(-) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index be08083a16..e314ab80c2 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -34,6 +34,18 @@ Rectangle color: UM.Theme.getColor("sidebar"); UM.I18nCatalog { id: catalog; name:"cura"} + Timer { + id: hoverTimer + interval: 500 + repeat: false + property var item + property string text + + onTriggered: + { + base.showTooltip(base, {x:1, y:item.y}, text); + } + } function showTooltip(item, position, text) { @@ -146,6 +158,21 @@ Rectangle 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) + { + hoverTimer.item = showSettings + hoverTimer.text = tooltipText + hoverTimer.start(); + } + else + { + hoverTimer.stop(); + base.hideTooltip(); + } + } style: UM.Theme.styles.sidebar_header_tab } @@ -189,6 +216,21 @@ Rectangle 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) + { + hoverTimer.item = showMonitor + hoverTimer.text = tooltipText + hoverTimer.start(); + } + else + { + hoverTimer.stop(); + base.hideTooltip(); + } + } style: UM.Theme.styles.sidebar_header_tab } @@ -262,6 +304,20 @@ Rectangle checked: base.currentModeIndex == index onClicked: base.currentModeIndex = index + onHoveredChanged: { + if (hovered) + { + hoverTimer.item = settingsModeSelection + hoverTimer.text = model.tooltipText + hoverTimer.start(); + } + else + { + hoverTimer.stop(); + base.hideTooltip(); + } + } + style: ButtonStyle { background: Rectangle { border.width: UM.Theme.getSize("default_lining").width @@ -458,8 +514,18 @@ Rectangle Component.onCompleted: { - modesListModel.append({ text: catalog.i18nc("@title:tab", "Recommended"), item: sidebarSimple, showFilterButton: false }) - modesListModel.append({ text: catalog.i18nc("@title:tab", "Custom"), item: sidebarAdvanced, showFilterButton: true }) + modesListModel.append({ + text: catalog.i18nc("@title:tab", "Recommended"), + tooltipText: catalog.i18nc("@tooltip", "Recommended Print Setup

Print with the recommended settings for the selected printer, material and quality."), + item: sidebarSimple, + showFilterButton: false + }) + modesListModel.append({ + text: catalog.i18nc("@title:tab", "Custom"), + tooltipText: catalog.i18nc("@tooltip", "Custom Print Setup

Print with finegrained control over every last bit of the slicing process."), + item: sidebarAdvanced, + showFilterButton: true + }) sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "immediate": true }); var index = parseInt(UM.Preferences.getValue("cura/active_mode")) diff --git a/resources/qml/SidebarTooltip.qml b/resources/qml/SidebarTooltip.qml index 5cb7ff1f0b..7344834c7e 100644 --- a/resources/qml/SidebarTooltip.qml +++ b/resources/qml/SidebarTooltip.qml @@ -29,6 +29,11 @@ UM.PointingRectangle { } else { x = position.x - base.width; y = position.y - UM.Theme.getSize("tooltip_arrow_margins").height; + if(y < 0) + { + position.y += -y; + y = 0; + } } base.opacity = 1; target = Qt.point(40 , position.y + UM.Theme.getSize("tooltip_arrow_margins").height / 2) From bd4cac53b42fb705d4ac7c6fa9d8f510b409bede Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Wed, 7 Dec 2016 22:10:22 +0100 Subject: [PATCH 3/5] Fix colors to adhere to hig --- 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 c86236ea5d..d5a95a7104 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -98,7 +98,7 @@ "tab_checked_text": [24, 41, 77, 255], "tab_unchecked": [245, 245, 245, 255], "tab_unchecked_border": [245, 245, 245, 255], - "tab_unchecked_text": [152, 152, 152, 255], + "tab_unchecked_text": [127, 127, 127, 255], "tab_hovered": [245, 245, 245, 255], "tab_hovered_border": [245, 245, 245, 255], "tab_hovered_text": [32, 166, 219, 255], From d67395b42bd58ad6d055a1d2c475615bdb844d1b Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Wed, 7 Dec 2016 22:23:06 +0100 Subject: [PATCH 4/5] Codestyle & documentation update --- resources/qml/Sidebar.qml | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index e314ab80c2..7144c35fd6 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -31,11 +31,11 @@ Rectangle property bool printerConnected: Cura.MachineManager.printerOutputDevices.length != 0 property bool printerAcceptsCommands: printerConnected && Cura.MachineManager.printerOutputDevices[0].acceptsCommands - color: UM.Theme.getColor("sidebar"); + color: UM.Theme.getColor("sidebar") UM.I18nCatalog { id: catalog; name:"cura"} Timer { - id: hoverTimer + id: tooltipDelayTimer interval: 500 repeat: false property var item @@ -86,7 +86,7 @@ Rectangle } } - // Mode selection buttons for changing between Setting & Monitor print mode + // Printer selection and mode selection buttons for changing between Setting & Monitor print mode Rectangle { id: sidebarHeaderBar @@ -163,13 +163,13 @@ Rectangle onHoveredChanged: { if (hovered) { - hoverTimer.item = showSettings - hoverTimer.text = tooltipText - hoverTimer.start(); + tooltipDelayTimer.item = showSettings + tooltipDelayTimer.text = tooltipText + tooltipDelayTimer.start(); } else { - hoverTimer.stop(); + tooltipDelayTimer.stop(); base.hideTooltip(); } } @@ -221,13 +221,13 @@ Rectangle onHoveredChanged: { if (hovered) { - hoverTimer.item = showMonitor - hoverTimer.text = tooltipText - hoverTimer.start(); + tooltipDelayTimer.item = showMonitor + tooltipDelayTimer.text = tooltipText + tooltipDelayTimer.start(); } else { - hoverTimer.stop(); + tooltipDelayTimer.stop(); base.hideTooltip(); } } @@ -307,13 +307,13 @@ Rectangle onHoveredChanged: { if (hovered) { - hoverTimer.item = settingsModeSelection - hoverTimer.text = model.tooltipText - hoverTimer.start(); + tooltipDelayTimer.item = settingsModeSelection + tooltipDelayTimer.text = model.tooltipText + tooltipDelayTimer.start(); } else { - hoverTimer.stop(); + tooltipDelayTimer.stop(); base.hideTooltip(); } } From ace4bfba1058276d4269176d8757daa83611e0d2 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Wed, 7 Dec 2016 22:30:31 +0100 Subject: [PATCH 5/5] Fix QML error about use of anchors in a row --- resources/qml/SidebarHeader.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/qml/SidebarHeader.qml b/resources/qml/SidebarHeader.qml index 3e8f09c807..d997f6a3f8 100644 --- a/resources/qml/SidebarHeader.qml +++ b/resources/qml/SidebarHeader.qml @@ -21,7 +21,7 @@ Column signal showTooltip(Item item, point location, string text) signal hideTooltip() - Row + Item { id: extruderSelectionRow width: parent.width