From 799d1a5b0cf0634cfa1bdccb3fcd830cec737c58 Mon Sep 17 00:00:00 2001 From: Jaime van Kessel Date: Wed, 11 Oct 2017 21:02:27 +0200 Subject: [PATCH 1/9] Updated setting items & sidebar to qtQuick controls 2.0 --- resources/qml/Settings/SettingCategory.qml | 169 +++++++++++++++++- resources/qml/Settings/SettingCheckBox.qml | 3 +- resources/qml/Settings/SettingComboBox.qml | 93 ++++------ resources/qml/Settings/SettingExtruder.qml | 124 ++++++------- resources/qml/Settings/SettingItem.qml | 3 +- .../qml/Settings/SettingOptionalExtruder.qml | 126 +++++++------ resources/qml/Settings/SettingTextField.qml | 2 +- resources/qml/Settings/SettingUnknown.qml | 2 +- resources/qml/Sidebar.qml | 74 ++------ 9 files changed, 342 insertions(+), 254 deletions(-) diff --git a/resources/qml/Settings/SettingCategory.qml b/resources/qml/Settings/SettingCategory.qml index 53f8f89e15..650ffdc4c6 100644 --- a/resources/qml/Settings/SettingCategory.qml +++ b/resources/qml/Settings/SettingCategory.qml @@ -2,17 +2,57 @@ // Uranium is released under the terms of the LGPLv3 or higher. import QtQuick 2.2 -import QtQuick.Controls 1.1 -import QtQuick.Controls.Styles 1.1 -import QtQuick.Layouts 1.1 +import QtQuick.Controls 2.0 import UM 1.1 as UM import Cura 1.0 as Cura -Button { +Button +{ id: base; - - style: UM.Theme.styles.sidebar_category; + anchors.left: parent.left + anchors.right: parent.right + anchors.leftMargin: UM.Theme.getSize("sidebar_margin").width + anchors.rightMargin: UM.Theme.getSize("sidebar_margin").width + background: Rectangle + { + implicitHeight: UM.Theme.getSize("section").height; + color: { + if(base.color) { + return base.color; + } else if(!base.enabled) { + return UM.Theme.getColor("setting_category_disabled"); + } else if(base.hovered && base.checkable && base.checked) { + return UM.Theme.getColor("setting_category_active_hover"); + } else if(base.pressed || (base.checkable && base.checked)) { + return UM.Theme.getColor("setting_category_active"); + } else if(base.hovered) { + return UM.Theme.getColor("setting_category_hover"); + } else { + return UM.Theme.getColor("setting_category"); + } + } + Behavior on color { ColorAnimation { duration: 50; } } + Rectangle + { + height: UM.Theme.getSize("default_lining").height + width: parent.width + anchors.bottom: parent.bottom + color: { + if(!base.enabled) { + return UM.Theme.getColor("setting_category_disabled_border"); + } else if((base.hovered || base.activeFocus) && base.checkable && base.checked) { + return UM.Theme.getColor("setting_category_active_hover_border"); + } else if(base.pressed || (base.checkable && base.checked)) { + return UM.Theme.getColor("setting_category_active_border"); + } else if(base.hovered || base.activeFocus) { + return UM.Theme.getColor("setting_category_hover_border"); + } else { + return UM.Theme.getColor("setting_category_border"); + } + } + } + } signal showTooltip(string text) signal hideTooltip() @@ -23,8 +63,121 @@ Button { property var focusItem: base - text: definition.label - iconSource: UM.Theme.getIcon(definition.icon) + //text: definition.label + + contentItem: Item { + anchors.fill: parent; + anchors.left: parent.left + + Label { + anchors + { + left: parent.left + leftMargin: 2 * UM.Theme.getSize("default_margin").width + UM.Theme.getSize("section_icon").width + right: parent.right; + verticalCenter: parent.verticalCenter; + } + text: definition.label + font: UM.Theme.getFont("setting_category"); + color: + { + if(!base.enabled) + { + return UM.Theme.getColor("setting_category_disabled_text"); + } + else if((base.hovered || base.activeFocus) && base.checkable && base.checked) + { + return UM.Theme.getColor("setting_category_active_hover_text"); + } + else if(base.pressed || (base.checkable && base.checked)) + { + return UM.Theme.getColor("setting_category_active_text"); + } + else if(base.hovered || base.activeFocus) + { + return UM.Theme.getColor("setting_category_hover_text"); + } + else + { + return UM.Theme.getColor("setting_category_text"); + } + } + fontSizeMode: Text.HorizontalFit; + minimumPointSize: 8 + } + UM.RecolorImage + { + id: category_arrow + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: UM.Theme.getSize("default_margin").width * 3 - width / 2 + width: UM.Theme.getSize("standard_arrow").width + height: UM.Theme.getSize("standard_arrow").height + sourceSize.width: width + sourceSize.height: width + color: + { + if(!base.enabled) + { + return UM.Theme.getColor("setting_category_disabled_text"); + } + else if((base.hovered || base.activeFocus) && base.checkable && base.checked) + { + return UM.Theme.getColor("setting_category_active_hover_text"); + } + else if(base.pressed || (base.checkable && base.checked)) + { + return UM.Theme.getColor("setting_category_active_text"); + } + else if(base.hovered || base.activeFocus) + { + return UM.Theme.getColor("setting_category_hover_text"); + } + else + { + return UM.Theme.getColor("setting_category_text"); + } + } + source: base.checked ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left") + } + } + + UM.RecolorImage + { + id: icon + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: UM.Theme.getSize("default_margin").width + color: + { + if(!base.enabled) + { + return UM.Theme.getColor("setting_category_disabled_text"); + } + else if((base.hovered || base.activeFocus) && base.checkable && base.checked) + { + return UM.Theme.getColor("setting_category_active_hover_text"); + } + else if(base.pressed || (base.checkable && base.checked)) + { + return UM.Theme.getColor("setting_category_active_text"); + } + else if(base.hovered || base.activeFocus) + { + return UM.Theme.getColor("setting_category_hover_text"); + } + else + { + return UM.Theme.getColor("setting_category_text"); + } + } + source: UM.Theme.getIcon(definition.icon) + width: UM.Theme.getSize("section_icon").width; + height: UM.Theme.getSize("section_icon").height; + sourceSize.width: width + 15 * screenScaleFactor + sourceSize.height: width + 15 * screenScaleFactor + } + checkable: true checked: definition.expanded diff --git a/resources/qml/Settings/SettingCheckBox.qml b/resources/qml/Settings/SettingCheckBox.qml index 9029249249..651ee91366 100644 --- a/resources/qml/Settings/SettingCheckBox.qml +++ b/resources/qml/Settings/SettingCheckBox.qml @@ -3,8 +3,7 @@ import QtQuick 2.1 import QtQuick.Layouts 1.1 -import QtQuick.Controls 1.1 -import QtQuick.Controls.Styles 1.1 +import QtQuick.Controls 2.0 import UM 1.2 as UM diff --git a/resources/qml/Settings/SettingComboBox.qml b/resources/qml/Settings/SettingComboBox.qml index f2ec5fda65..eaa22e1a9f 100644 --- a/resources/qml/Settings/SettingComboBox.qml +++ b/resources/qml/Settings/SettingComboBox.qml @@ -2,8 +2,7 @@ // Uranium is released under the terms of the LGPLv3 or higher. import QtQuick 2.1 -import QtQuick.Controls 1.1 -import QtQuick.Controls.Styles 1.1 +import QtQuick.Controls 2.0 import UM 1.1 as UM @@ -28,73 +27,59 @@ SettingItem onWheel: wheel.accepted = true; } - style: ComboBoxStyle + background: Rectangle { - background: Rectangle + color: { - color: + if(!enabled) { - if(!enabled) - { - return UM.Theme.getColor("setting_control_disabled") - } - if(control.hovered || control.activeFocus) - { - return UM.Theme.getColor("setting_control_highlight") - } - return UM.Theme.getColor("setting_control") + return UM.Theme.getColor("setting_control_disabled") } - border.width: UM.Theme.getSize("default_lining").width - border.color: + if(control.hovered || control.activeFocus) { - if(!enabled) - { - return UM.Theme.getColor("setting_control_disabled_border") - } - if(control.hovered || control.activeFocus) - { - return UM.Theme.getColor("setting_control_border_highlight") - } - return UM.Theme.getColor("setting_control_border") + return UM.Theme.getColor("setting_control_highlight") } + return UM.Theme.getColor("setting_control") } - label: Item + border.width: UM.Theme.getSize("default_lining").width + border.color: { - Label + if(!enabled) { - anchors.left: parent.left; - anchors.leftMargin: UM.Theme.getSize("default_lining").width - anchors.right: downArrow.left; - anchors.rightMargin: UM.Theme.getSize("default_lining").width; - anchors.verticalCenter: parent.verticalCenter; - - text: control.currentText; - font: UM.Theme.getFont("default"); - color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text"); - - elide: Text.ElideRight; - verticalAlignment: Text.AlignVCenter; + return UM.Theme.getColor("setting_control_disabled_border") } - - UM.RecolorImage + if(control.hovered || control.activeFocus) { - id: downArrow - anchors.right: parent.right; - anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2; - anchors.verticalCenter: parent.verticalCenter; - - source: UM.Theme.getIcon("arrow_bottom") - width: UM.Theme.getSize("standard_arrow").width - height: UM.Theme.getSize("standard_arrow").height - sourceSize.width: width + 5 * screenScaleFactor - sourceSize.height: width + 5 * screenScaleFactor - - color: UM.Theme.getColor("setting_control_text"); - + return UM.Theme.getColor("setting_control_border_highlight") } + return UM.Theme.getColor("setting_control_border") } } + indicator: UM.RecolorImage + { + id: downArrow + x: control.width - width - control.rightPadding + y: control.topPadding + (control.availableHeight - height) / 2 + + source: UM.Theme.getIcon("arrow_bottom") + width: UM.Theme.getSize("standard_arrow").width + height: UM.Theme.getSize("standard_arrow").height + sourceSize.width: width + 5 * screenScaleFactor + sourceSize.height: width + 5 * screenScaleFactor + + color: UM.Theme.getColor("setting_control_text"); + } + + contentItem: Label + { + text: control.currentText; + font: UM.Theme.getFont("default"); + color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text"); + elide: Text.ElideRight; + verticalAlignment: Text.AlignVCenter; + } + onActivated: { forceActiveFocus(); diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml index ca99640f6d..0568343b8c 100644 --- a/resources/qml/Settings/SettingExtruder.qml +++ b/resources/qml/Settings/SettingExtruder.qml @@ -2,8 +2,7 @@ // Uranium is released under the terms of the LGPLv3 or higher. import QtQuick 2.1 -import QtQuick.Controls 1.1 -import QtQuick.Controls.Styles 1.1 +import QtQuick.Controls 2.0 import UM 1.1 as UM import Cura 1.0 as Cura @@ -65,83 +64,78 @@ SettingItem value: control.currentText != "" ? control.model.getItem(control.currentIndex).color : "" } - style: ComboBoxStyle + indicator: UM.RecolorImage { - background: Rectangle + id: downArrow + x: control.width - width - control.rightPadding + y: control.topPadding + (control.availableHeight - height) / 2 + + source: UM.Theme.getIcon("arrow_bottom") + width: UM.Theme.getSize("standard_arrow").width + height: UM.Theme.getSize("standard_arrow").height + sourceSize.width: width + 5 * screenScaleFactor + sourceSize.height: width + 5 * screenScaleFactor + + color: UM.Theme.getColor("setting_control_text"); + } + + background: Rectangle + { + color: { - color: + if(!enabled) { - if(!enabled) - { - return UM.Theme.getColor("setting_control_disabled"); - } - if(control.hovered || base.activeFocus) - { - return UM.Theme.getColor("setting_control_highlight"); - } - return UM.Theme.getColor("setting_control"); + return UM.Theme.getColor("setting_control_disabled"); } - border.width: UM.Theme.getSize("default_lining").width - border.color: + if(control.hovered || base.activeFocus) { - if(!enabled) - { - return UM.Theme.getColor("setting_control_disabled_border") - } - if(control.hovered || control.activeFocus) - { - return UM.Theme.getColor("setting_control_border_highlight") - } - return UM.Theme.getColor("setting_control_border") + return UM.Theme.getColor("setting_control_highlight"); } + return UM.Theme.getColor("setting_control"); } - label: Item + border.width: UM.Theme.getSize("default_lining").width + border.color: { - Label + if(!enabled) { - id: extruderText - anchors.verticalCenter: parent.verticalCenter - - text: control.currentText - font: UM.Theme.getFont("default") - color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text") - - elide: Text.ElideLeft - verticalAlignment: Text.AlignVCenter + return UM.Theme.getColor("setting_control_disabled_border") } - Rectangle + if(control.hovered || control.activeFocus) { - id: swatch - height: UM.Theme.getSize("setting_control").height / 2 - width: height - - anchors - { - right: arrow.left - verticalCenter: parent.verticalCenter - margins: UM.Theme.getSize("default_margin").width / 4 - } - - border.width: UM.Theme.getSize("default_lining").width * 2 - border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border") - radius: width / 2 - - color: control.color + return UM.Theme.getColor("setting_control_border_highlight") } - UM.RecolorImage - { - id: arrow - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter + return UM.Theme.getColor("setting_control_border") + } + } + contentItem: Item + { + Label + { + id: extruderText + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.right: swatch.left + text: control.currentText + font: UM.Theme.getFont("default") + color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text") - source: UM.Theme.getIcon("arrow_bottom") - width: UM.Theme.getSize("standard_arrow").width - height: UM.Theme.getSize("standard_arrow").height - sourceSize.width: width + 5 * screenScaleFactor - sourceSize.height: width + 5 * screenScaleFactor + elide: Text.ElideLeft + verticalAlignment: Text.AlignVCenter + } + Rectangle + { + id: swatch + height: UM.Theme.getSize("setting_control").height / 2 + width: height - color: UM.Theme.getColor("setting_control_text") - } + anchors.right: parent.right + anchors.rightMargin: control.indicator.width + control.spacing + + border.width: UM.Theme.getSize("default_lining").width * 2 + border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border") + radius: width / 2 + + color: control.color } } } diff --git a/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index 2bf2c17273..ff978e0d6f 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -3,8 +3,7 @@ import QtQuick 2.1 import QtQuick.Layouts 1.1 -import QtQuick.Controls 1.1 -import QtQuick.Controls.Styles 1.1 +import QtQuick.Controls 2.0 import UM 1.1 as UM import Cura 1.0 as Cura diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml index 1c286fcd2d..43588edfce 100644 --- a/resources/qml/Settings/SettingOptionalExtruder.qml +++ b/resources/qml/Settings/SettingOptionalExtruder.qml @@ -2,8 +2,7 @@ // Uranium is released under the terms of the LGPLv3 or higher. import QtQuick 2.1 -import QtQuick.Controls 1.1 -import QtQuick.Controls.Styles 1.1 +import QtQuick.Controls 2.0 import UM 1.1 as UM import Cura 1.0 as Cura @@ -84,83 +83,80 @@ SettingItem value: control.currentText != "" ? control.model.getItem(control.currentIndex).color : "" } - style: ComboBoxStyle + indicator: UM.RecolorImage { - background: Rectangle + id: downArrow + x: control.width - width - control.rightPadding + y: control.topPadding + (control.availableHeight - height) / 2 + + source: UM.Theme.getIcon("arrow_bottom") + width: UM.Theme.getSize("standard_arrow").width + height: UM.Theme.getSize("standard_arrow").height + sourceSize.width: width + 5 * screenScaleFactor + sourceSize.height: width + 5 * screenScaleFactor + + color: UM.Theme.getColor("setting_control_text"); + } + + background: Rectangle + { + color: { - color: + if(!enabled) { - if(!enabled) - { - return UM.Theme.getColor("setting_control_disabled"); - } - if(control.hovered || control.activeFocus) - { - return UM.Theme.getColor("setting_control_highlight"); - } - return UM.Theme.getColor("setting_control"); + return UM.Theme.getColor("setting_control_disabled"); } - border.width: UM.Theme.getSize("default_lining").width - border.color: + if(control.hovered || control.activeFocus) { - if(!enabled) - { - return UM.Theme.getColor("setting_control_disabled_border") - } - if(control.hovered || control.activeFocus) - { - return UM.Theme.getColor("setting_control_border_highlight") - } - return UM.Theme.getColor("setting_control_border") + return UM.Theme.getColor("setting_control_highlight"); } + return UM.Theme.getColor("setting_control"); } - label: Item + border.width: UM.Theme.getSize("default_lining").width + border.color: { - Label + if(!enabled) { - anchors.verticalCenter: parent.verticalCenter - width: parent.width - swatch.width - arrow.width; - - text: control.currentText - font: UM.Theme.getFont("default") - color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text") - - elide: Text.ElideRight - verticalAlignment: Text.AlignVCenter + return UM.Theme.getColor("setting_control_disabled_border") } - Rectangle + if(control.hovered || control.activeFocus) { - id: swatch - height: UM.Theme.getSize("setting_control").height / 2 - width: height - - anchors - { - right: arrow.left; - verticalCenter: parent.verticalCenter - margins: UM.Theme.getSize("default_margin").width / 4 - } - - border.width: UM.Theme.getSize("default_lining").width * 2 - border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border") - radius: width / 2 - - color: control.color + return UM.Theme.getColor("setting_control_border_highlight") } - UM.RecolorImage - { - id: arrow - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter + return UM.Theme.getColor("setting_control_border") + } + } - source: UM.Theme.getIcon("arrow_bottom") - width: UM.Theme.getSize("standard_arrow").width - height: UM.Theme.getSize("standard_arrow").height - sourceSize.width: width + 5 * screenScaleFactor - sourceSize.height: width + 5 * screenScaleFactor + contentItem: Item + { + Label + { + id: extruderText + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.right: swatch.left - color: UM.Theme.getColor("setting_control_text") - } + text: control.currentText + font: UM.Theme.getFont("default") + color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text") + + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + Rectangle + { + id: swatch + height: UM.Theme.getSize("setting_control").height / 2 + width: height + + anchors.right: parent.right + anchors.rightMargin: control.indicator.width + control.spacing + + border.width: UM.Theme.getSize("default_lining").width * 2 + border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border") + radius: width / 2 + + color: control.color } } } diff --git a/resources/qml/Settings/SettingTextField.qml b/resources/qml/Settings/SettingTextField.qml index ffc169af1a..5259df5876 100644 --- a/resources/qml/Settings/SettingTextField.qml +++ b/resources/qml/Settings/SettingTextField.qml @@ -2,7 +2,7 @@ // Uranium is released under the terms of the LGPLv3 or higher. import QtQuick 2.2 -import QtQuick.Controls 1.2 +import QtQuick.Controls 2.0 import UM 1.1 as UM diff --git a/resources/qml/Settings/SettingUnknown.qml b/resources/qml/Settings/SettingUnknown.qml index f4dadf8d75..bca786dc0d 100644 --- a/resources/qml/Settings/SettingUnknown.qml +++ b/resources/qml/Settings/SettingUnknown.qml @@ -2,7 +2,7 @@ // Uranium is released under the terms of the LGPLv3 or higher. import QtQuick 2.1 -import QtQuick.Controls 1.1 +import QtQuick.Controls 2.0 import UM 1.2 as UM diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index a82651defe..bc8c1834d8 100755 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -2,8 +2,7 @@ // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.2 -import QtQuick.Controls 1.1 -import QtQuick.Controls.Styles 1.1 +import QtQuick.Controls 2.0 import QtQuick.Layouts 1.1 import UM 1.2 as UM @@ -110,7 +109,7 @@ Rectangle UM.Preferences.setValue("cura/active_mode", currentModeIndex); if(modesListModel.count > base.currentModeIndex) { - sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "replace": true }); + sidebarContents.push(modesListModel.get(base.currentModeIndex).item, {"replace": true }); } } @@ -156,7 +155,7 @@ Rectangle anchors.verticalCenter: parent.verticalCenter width: Math.floor(0.5 * parent.width) text: model.text - exclusiveGroup: modeMenuGroup; + ButtonGroup.group: modeMenuGroup; checkable: true; checked: base.currentModeIndex == index onClicked: base.currentModeIndex = index @@ -175,36 +174,9 @@ Rectangle } } - style: ButtonStyle { - background: Rectangle { - border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width - border.color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_border") : - control.hovered ? UM.Theme.getColor("action_button_hovered_border") : - UM.Theme.getColor("action_button_border") - color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active") : - control.hovered ? UM.Theme.getColor("action_button_hovered") : - UM.Theme.getColor("action_button") - Behavior on color { ColorAnimation { duration: 50; } } - Label { - anchors.left: parent.left - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: UM.Theme.getSize("default_lining").width * 2 - anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2 - color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_text") : - control.hovered ? UM.Theme.getColor("action_button_hovered_text") : - UM.Theme.getColor("action_button_text") - font: UM.Theme.getFont("default") - text: control.text - horizontalAlignment: Text.AlignHCenter - elide: Text.ElideMiddle - } - } - label: Item { } - } } } - ExclusiveGroup { id: modeMenuGroup; } + ButtonGroup { id: modeMenuGroup; } ListView { @@ -229,31 +201,21 @@ Rectangle anchors.right: base.right visible: !monitoringPrint && !hideSettings - delegate: StackViewDelegate - { - function transitionFinished(properties) - { - properties.exitItem.opacity = 1 + pushEnter:Transition { + PropertyAnimation { + property: "opacity" + from: 0 + to:1 + duration: 100 } + } - pushTransition: StackViewTransition - { - PropertyAnimation - { - target: enterItem - property: "opacity" - from: 0 - to: 1 - duration: 100 - } - PropertyAnimation - { - target: exitItem - property: "opacity" - from: 1 - to: 0 - duration: 100 - } + pushExit: Transition { + PropertyAnimation { + property: "opacity" + from: 1 + to:0 + duration: 100 } } } @@ -488,7 +450,7 @@ Rectangle tooltipText: catalog.i18nc("@tooltip", "Custom Print Setup

Print with finegrained control over every last bit of the slicing process."), item: sidebarAdvanced }) - sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "immediate": true }); + sidebarContents.push( modesListModel.get(base.currentModeIndex).item, {"immediate": true }); var index = Math.floor(UM.Preferences.getValue("cura/active_mode")) if(index) From 77c8ac3950c2cc50131c0011b9d4078c9f60b787 Mon Sep 17 00:00:00 2001 From: ChrisTerBeke Date: Wed, 3 Jan 2018 11:46:20 +0100 Subject: [PATCH 2/9] Layout fixes for controls 2.0 --- resources/qml/Settings/SettingComboBox.qml | 49 +++++++++++-------- resources/qml/Settings/SettingExtruder.qml | 11 ++++- .../qml/Settings/SettingOptionalExtruder.qml | 9 +++- 3 files changed, 44 insertions(+), 25 deletions(-) diff --git a/resources/qml/Settings/SettingComboBox.qml b/resources/qml/Settings/SettingComboBox.qml index eaa22e1a9f..63ed5d2030 100644 --- a/resources/qml/Settings/SettingComboBox.qml +++ b/resources/qml/Settings/SettingComboBox.qml @@ -16,42 +16,43 @@ SettingItem id: control model: definition.options - textRole: "value"; + textRole: "value" anchors.fill: parent MouseArea { - anchors.fill: parent; - acceptedButtons: Qt.NoButton; - onWheel: wheel.accepted = true; + anchors.fill: parent + acceptedButtons: Qt.NoButton + onWheel: wheel.accepted = true } background: Rectangle { color: { - if(!enabled) - { + if (!enabled) { return UM.Theme.getColor("setting_control_disabled") } - if(control.hovered || control.activeFocus) - { + + if (control.hovered || control.activeFocus) { return UM.Theme.getColor("setting_control_highlight") } + return UM.Theme.getColor("setting_control") } + border.width: UM.Theme.getSize("default_lining").width border.color: { - if(!enabled) - { + if (!enabled) { return UM.Theme.getColor("setting_control_disabled_border") } - if(control.hovered || control.activeFocus) - { + + if (control.hovered || control.activeFocus) { return UM.Theme.getColor("setting_control_border_highlight") } + return UM.Theme.getColor("setting_control_border") } } @@ -68,29 +69,34 @@ SettingItem sourceSize.width: width + 5 * screenScaleFactor sourceSize.height: width + 5 * screenScaleFactor - color: UM.Theme.getColor("setting_control_text"); + color: UM.Theme.getColor("setting_control_text") } contentItem: Label { - text: control.currentText; - font: UM.Theme.getFont("default"); - color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text"); - elide: Text.ElideRight; - verticalAlignment: Text.AlignVCenter; + anchors.left: parent.left + anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.left + + text: control.currentText + font: UM.Theme.getFont("default") + color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text") + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter } onActivated: { - forceActiveFocus(); - propertyProvider.setPropertyValue("value", definition.options[index].key); + forceActiveFocus() + propertyProvider.setPropertyValue("value", definition.options[index].key) } onActiveFocusChanged: { if(activeFocus) { - base.focusReceived(); + base.focusReceived() } } @@ -98,6 +104,7 @@ SettingItem { base.setActiveFocusToNextSetting(true) } + Keys.onBacktabPressed: { base.setActiveFocusToNextSetting(false) diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml index 0568343b8c..94e565551a 100644 --- a/resources/qml/Settings/SettingExtruder.qml +++ b/resources/qml/Settings/SettingExtruder.qml @@ -107,14 +107,18 @@ SettingItem return UM.Theme.getColor("setting_control_border") } } + contentItem: Item { Label { id: extruderText + anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left + anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width anchors.right: swatch.left + text: control.currentText font: UM.Theme.getFont("default") color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text") @@ -122,6 +126,7 @@ SettingItem elide: Text.ElideLeft verticalAlignment: Text.AlignVCenter } + Rectangle { id: swatch @@ -129,9 +134,11 @@ SettingItem width: height anchors.right: parent.right - anchors.rightMargin: control.indicator.width + control.spacing + anchors.rightMargin: control.indicator.width + UM.Theme.getSize("setting_unit_margin").width + anchors.verticalCenter: parent.verticalCenter + anchors.margins: UM.Theme.getSize("default_margin").width / 4 - border.width: UM.Theme.getSize("default_lining").width * 2 + border.width: UM.Theme.getSize("default_lining").width border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border") radius: width / 2 diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml index 43588edfce..e336ad4101 100644 --- a/resources/qml/Settings/SettingOptionalExtruder.qml +++ b/resources/qml/Settings/SettingOptionalExtruder.qml @@ -132,8 +132,10 @@ SettingItem Label { id: extruderText + anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left + anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width anchors.right: swatch.left text: control.currentText @@ -143,6 +145,7 @@ SettingItem elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } + Rectangle { id: swatch @@ -150,9 +153,11 @@ SettingItem width: height anchors.right: parent.right - anchors.rightMargin: control.indicator.width + control.spacing + anchors.rightMargin: control.indicator.width + UM.Theme.getSize("setting_unit_margin").width + anchors.verticalCenter: parent.verticalCenter + anchors.margins: UM.Theme.getSize("default_margin").width / 4 - border.width: UM.Theme.getSize("default_lining").width * 2 + border.width: UM.Theme.getSize("default_lining").width border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border") radius: width / 2 From 1fe653b231cd00d72bcbc92521e4434824e83912 Mon Sep 17 00:00:00 2001 From: ChrisTerBeke Date: Wed, 3 Jan 2018 12:47:08 +0100 Subject: [PATCH 3/9] Fix combobox dropdown item height --- resources/qml/Settings/SettingComboBox.qml | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/resources/qml/Settings/SettingComboBox.qml b/resources/qml/Settings/SettingComboBox.qml index 63ed5d2030..52d0976e76 100644 --- a/resources/qml/Settings/SettingComboBox.qml +++ b/resources/qml/Settings/SettingComboBox.qml @@ -86,6 +86,22 @@ SettingItem verticalAlignment: Text.AlignVCenter } + delegate: ItemDelegate + { + width: control.width + height: control.height + highlighted: control.highlightedIndex == index + + contentItem: Text + { + text: modelData.value + color: control.contentItem.color + font: control.font + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + } + onActivated: { forceActiveFocus() @@ -118,16 +134,14 @@ SettingItem { // FIXME this needs to go away once 'resolve' is combined with 'value' in our data model. var value = undefined; - if ((base.resolve != "None") && (base.stackLevel != 0) && (base.stackLevel != 1)) - { + if ((base.resolve != "None") && (base.stackLevel != 0) && (base.stackLevel != 1)) { // We have a resolve function. Indicates that the setting is not settable per extruder and that // we have to choose between the resolved value (default) and the global value // (if user has explicitly set this). value = base.resolve; } - if (value == undefined) - { + if (value == undefined) { value = propertyProvider.properties.value; } From 3a2b2d33338d37bad61fdf17d3a046e9614d5f8c Mon Sep 17 00:00:00 2001 From: ChrisTerBeke Date: Wed, 3 Jan 2018 12:48:33 +0100 Subject: [PATCH 4/9] Also fix combobox list item heights for extruder dropdowns --- resources/qml/Settings/SettingExtruder.qml | 16 ++++++++++++++++ .../qml/Settings/SettingOptionalExtruder.qml | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml index 94e565551a..dae6171bbf 100644 --- a/resources/qml/Settings/SettingExtruder.qml +++ b/resources/qml/Settings/SettingExtruder.qml @@ -145,5 +145,21 @@ SettingItem color: control.color } } + + delegate: ItemDelegate + { + width: control.width + height: control.height + highlighted: control.highlightedIndex == index + + contentItem: Text + { + text: modelData.value + color: control.contentItem.color + font: control.font + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + } } } diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml index e336ad4101..02ecfb8a2b 100644 --- a/resources/qml/Settings/SettingOptionalExtruder.qml +++ b/resources/qml/Settings/SettingOptionalExtruder.qml @@ -164,5 +164,21 @@ SettingItem color: control.color } } + + delegate: ItemDelegate + { + width: control.width + height: control.height + highlighted: control.highlightedIndex == index + + contentItem: Text + { + text: modelData.value + color: control.contentItem.color + font: control.font + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + } } } From 1fa303148605cea938d03ffdbb9820ce53222d0f Mon Sep 17 00:00:00 2001 From: ChrisTerBeke Date: Wed, 3 Jan 2018 12:52:40 +0100 Subject: [PATCH 5/9] Fix text color for extruder comboboxes --- resources/qml/Settings/SettingExtruder.qml | 2 +- resources/qml/Settings/SettingOptionalExtruder.qml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml index dae6171bbf..8047231c12 100644 --- a/resources/qml/Settings/SettingExtruder.qml +++ b/resources/qml/Settings/SettingExtruder.qml @@ -155,7 +155,7 @@ SettingItem contentItem: Text { text: modelData.value - color: control.contentItem.color + color: extruderText.color font: control.font elide: Text.ElideRight verticalAlignment: Text.AlignVCenter diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml index 02ecfb8a2b..85e8c2fac7 100644 --- a/resources/qml/Settings/SettingOptionalExtruder.qml +++ b/resources/qml/Settings/SettingOptionalExtruder.qml @@ -174,7 +174,7 @@ SettingItem contentItem: Text { text: modelData.value - color: control.contentItem.color + color: extruderText.color font: control.font elide: Text.ElideRight verticalAlignment: Text.AlignVCenter From b7aadbe3c363deed0340e5f20cc762be7efd20e1 Mon Sep 17 00:00:00 2001 From: ChrisTerBeke Date: Wed, 3 Jan 2018 13:08:20 +0100 Subject: [PATCH 6/9] Fix extruder dropdown text model --- resources/qml/Settings/SettingComboBox.qml | 2 +- resources/qml/Settings/SettingExtruder.qml | 4 ++-- resources/qml/Settings/SettingOptionalExtruder.qml | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/resources/qml/Settings/SettingComboBox.qml b/resources/qml/Settings/SettingComboBox.qml index 52d0976e76..2f3a13206c 100644 --- a/resources/qml/Settings/SettingComboBox.qml +++ b/resources/qml/Settings/SettingComboBox.qml @@ -77,7 +77,7 @@ SettingItem anchors.left: parent.left anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.left + anchors.right: indicator.left text: control.currentText font: UM.Theme.getFont("default") diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml index 8047231c12..f7b0be69f6 100644 --- a/resources/qml/Settings/SettingExtruder.qml +++ b/resources/qml/Settings/SettingExtruder.qml @@ -154,8 +154,8 @@ SettingItem contentItem: Text { - text: modelData.value - color: extruderText.color + text: model.name + color: UM.Theme.getColor("setting_control_text") font: control.font elide: Text.ElideRight verticalAlignment: Text.AlignVCenter diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml index 85e8c2fac7..b1b11f3b20 100644 --- a/resources/qml/Settings/SettingOptionalExtruder.qml +++ b/resources/qml/Settings/SettingOptionalExtruder.qml @@ -173,8 +173,8 @@ SettingItem contentItem: Text { - text: modelData.value - color: extruderText.color + text: model.name + color: UM.Theme.getColor("setting_control_text") font: control.font elide: Text.ElideRight verticalAlignment: Text.AlignVCenter From 1476e95adcc890add7a06700b5830449961f9c18 Mon Sep 17 00:00:00 2001 From: ChrisTerBeke Date: Wed, 3 Jan 2018 13:45:18 +0100 Subject: [PATCH 7/9] Fix mode switching buttons functionality --- resources/qml/Sidebar.qml | 69 +++++++++++++++++++++++++++++---------- 1 file changed, 52 insertions(+), 17 deletions(-) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index 62b7e3bfe1..03f5c5858e 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -118,11 +118,12 @@ Rectangle UM.Preferences.setValue("cura/active_mode", currentModeIndex); if(modesListModel.count > base.currentModeIndex) { - sidebarContents.push(modesListModel.get(base.currentModeIndex).item, {"replace": true }); + sidebarContents.replace(modesListModel.get(base.currentModeIndex).item, { "replace": true }) } } - Label { + Label + { id: settingsModeLabel text: !hideSettings ? catalog.i18nc("@label:listbox", "Print Setup") : catalog.i18nc("@label:listbox","Print Setup disabled\nG-code files cannot be modified"); anchors.left: parent.left @@ -135,13 +136,18 @@ Rectangle visible: !monitoringPrint && !hideView } - Rectangle { + // Settings mode selection toggle + Rectangle + { id: settingsModeSelection color: "transparent" + width: Math.floor(parent.width * 0.55) height: UM.Theme.getSize("sidebar_header_mode_toggle").height + anchors.right: parent.right anchors.rightMargin: UM.Theme.getSize("sidebar_margin").width + anchors.topMargin: UM.Theme.getSize("sidebar_margin").height anchors.top: { if (settingsModeLabel.contentWidth >= parent.width - width - UM.Theme.getSize("sidebar_margin").width * 2) @@ -153,39 +159,68 @@ Rectangle return headerSeparator.bottom; } } - anchors.topMargin: UM.Theme.getSize("sidebar_margin").height + visible: !monitoringPrint && !hideSettings && !hideView - Component{ + + Component + { id: wizardDelegate - Button { + + Button + { height: settingsModeSelection.height + width: Math.floor(0.5 * parent.width) + anchors.left: parent.left anchors.leftMargin: model.index * Math.floor(settingsModeSelection.width / 2) anchors.verticalCenter: parent.verticalCenter - width: Math.floor(0.5 * parent.width) + text: model.text - ButtonGroup.group: modeMenuGroup; - checkable: true; + + ButtonGroup.group: modeMenuGroup + + checkable: true checked: base.currentModeIndex == index + onClicked: base.currentModeIndex = index - onHoveredChanged: { + onHoveredChanged: + { if (hovered) { tooltipDelayTimer.item = settingsModeSelection tooltipDelayTimer.text = model.tooltipText - tooltipDelayTimer.start(); + tooltipDelayTimer.start() } else { - tooltipDelayTimer.stop(); - base.hideTooltip(); + tooltipDelayTimer.stop() + base.hideTooltip() } } + contentItem: Text + { + text: control.text + color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active") : control.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button") + font: control.font + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle + { + border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width + border.color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_border") : control.hovered ? UM.Theme.getColor("action_button_hovered_border"): UM.Theme.getColor("action_button_border") + } } } - ButtonGroup { id: modeMenuGroup; } + + ButtonGroup + { + id: modeMenuGroup + } ListView { @@ -210,7 +245,7 @@ Rectangle anchors.right: base.right visible: !monitoringPrint && !hideSettings - pushEnter:Transition { + replaceEnter: Transition { PropertyAnimation { property: "opacity" from: 0 @@ -219,7 +254,7 @@ Rectangle } } - pushExit: Transition { + replaceExit: Transition { PropertyAnimation { property: "opacity" from: 1 @@ -560,7 +595,7 @@ Rectangle tooltipText: catalog.i18nc("@tooltip", "Custom Print Setup

Print with finegrained control over every last bit of the slicing process."), item: sidebarAdvanced }) - sidebarContents.push( modesListModel.get(base.currentModeIndex).item, {"immediate": true }); + sidebarContents.replace( modesListModel.get(base.currentModeIndex).item, { "immediate": true }) var index = Math.floor(UM.Preferences.getValue("cura/active_mode")) if(index) From 4f77b2ea6d4c6e4221abe0758ee70e19040f7d6c Mon Sep 17 00:00:00 2001 From: ChrisTerBeke Date: Wed, 3 Jan 2018 13:50:06 +0100 Subject: [PATCH 8/9] More layout and font fixes --- resources/qml/Settings/SettingComboBox.qml | 2 +- resources/qml/Settings/SettingExtruder.qml | 2 +- resources/qml/Settings/SettingOptionalExtruder.qml | 2 +- resources/qml/Sidebar.qml | 5 +---- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/resources/qml/Settings/SettingComboBox.qml b/resources/qml/Settings/SettingComboBox.qml index 2f3a13206c..6168668157 100644 --- a/resources/qml/Settings/SettingComboBox.qml +++ b/resources/qml/Settings/SettingComboBox.qml @@ -96,7 +96,7 @@ SettingItem { text: modelData.value color: control.contentItem.color - font: control.font + font: UM.Theme.getFont("default") elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml index f7b0be69f6..3f7f20b2b5 100644 --- a/resources/qml/Settings/SettingExtruder.qml +++ b/resources/qml/Settings/SettingExtruder.qml @@ -156,7 +156,7 @@ SettingItem { text: model.name color: UM.Theme.getColor("setting_control_text") - font: control.font + font: UM.Theme.getFont("default") elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml index b1b11f3b20..4fa7ac9c6c 100644 --- a/resources/qml/Settings/SettingOptionalExtruder.qml +++ b/resources/qml/Settings/SettingOptionalExtruder.qml @@ -175,7 +175,7 @@ SettingItem { text: model.name color: UM.Theme.getColor("setting_control_text") - font: control.font + font: UM.Theme.getFont("default") elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index 03f5c5858e..60469e6238 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -175,13 +175,10 @@ Rectangle anchors.leftMargin: model.index * Math.floor(settingsModeSelection.width / 2) anchors.verticalCenter: parent.verticalCenter - text: model.text - ButtonGroup.group: modeMenuGroup checkable: true checked: base.currentModeIndex == index - onClicked: base.currentModeIndex = index onHoveredChanged: @@ -201,7 +198,7 @@ Rectangle contentItem: Text { - text: control.text + text: model.text color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active") : control.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button") font: control.font horizontalAlignment: Text.AlignHCenter From 1686f951c9ea64dcaf6cc0927fa052ee88e62754 Mon Sep 17 00:00:00 2001 From: ChrisTerBeke Date: Wed, 3 Jan 2018 14:02:35 +0100 Subject: [PATCH 9/9] Finish styling mode switch buttons --- resources/qml/Sidebar.qml | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index 60469e6238..59d59798bb 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -168,6 +168,8 @@ Rectangle Button { + id: control + height: settingsModeSelection.height width: Math.floor(0.5 * parent.width) @@ -196,20 +198,22 @@ Rectangle } } - contentItem: Text - { - text: model.text - color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active") : control.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button") - font: control.font - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - elide: Text.ElideRight - } - background: Rectangle { border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width border.color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_border") : control.hovered ? UM.Theme.getColor("action_button_hovered_border"): UM.Theme.getColor("action_button_border") + + // for some reason, QtQuick decided to use the color of the background property as text color for the contentItem, so here it is + color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active") : control.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button") + } + + contentItem: Text + { + text: model.text + font: UM.Theme.getFont("default") + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight } } }