diff --git a/resources/qml/MachineSettings/ComboBoxWithOptions.qml b/resources/qml/MachineSettings/ComboBoxWithOptions.qml index 289e4398fe..de69ba3478 100644 --- a/resources/qml/MachineSettings/ComboBoxWithOptions.qml +++ b/resources/qml/MachineSettings/ComboBoxWithOptions.qml @@ -8,6 +8,8 @@ import QtQuick.Layouts 1.3 import UM 1.3 as UM import Cura 1.1 as Cura +import "../Widgets" + // // ComboBox with dropdown options in the Machine Settings dialog. @@ -54,7 +56,6 @@ UM.TooltipArea anchors.verticalCenter: comboBox.verticalCenter visible: text != "" elide: Text.ElideRight - //width: Math.max(0, settingsTabs.labelColumnWidth) } ListModel @@ -76,11 +77,12 @@ UM.TooltipArea } } - ComboBox + CuraComboBox { id: comboBox + width: 100 + height: UM.Theme.getSize("action_button").height model: optionsModel - textRole: "text" currentIndex: @@ -97,6 +99,7 @@ UM.TooltipArea } return index } + onActivated: { if(propertyProvider.properties.value != model.get(index).value) diff --git a/resources/qml/Settings/SettingComboBox.qml b/resources/qml/Settings/SettingComboBox.qml index 768872d2f7..d9ea47ac4d 100644 --- a/resources/qml/Settings/SettingComboBox.qml +++ b/resources/qml/Settings/SettingComboBox.qml @@ -1,17 +1,20 @@ // Copyright (c) 2019 Ultimaker B.V. // Cura is released under the terms of the LGPLv3 or higher. -import QtQuick 2.7 -import QtQuick.Controls 2.0 +import QtQuick 2.10 +import QtQuick.Controls 2.3 + +import UM 1.3 as UM + +import "../Widgets" as Widgets -import UM 1.1 as UM SettingItem { id: base property var focusItem: control - contents: ComboBox + contents: Widgets.CuraComboBox { id: control @@ -20,125 +23,6 @@ SettingItem anchors.fill: parent - background: Rectangle - { - color: - { - 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") - } - - radius: UM.Theme.getSize("setting_control_radius").width - border.width: UM.Theme.getSize("default_lining").width - border.color: - { - 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") - } - } - - indicator: UM.RecolorImage - { - id: downArrow - x: control.width - width - control.rightPadding - y: control.topPadding + Math.round((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_button") - } - - contentItem: Label - { - anchors.left: parent.left - anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width - anchors.verticalCenter: parent.verticalCenter - anchors.right: downArrow.left - - text: control.currentText - textFormat: Text.PlainText - renderType: Text.NativeRendering - 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 - } - - popup: Popup - { - y: control.height - UM.Theme.getSize("default_lining").height - width: control.width - implicitHeight: contentItem.implicitHeight + 2 * UM.Theme.getSize("default_lining").width - padding: UM.Theme.getSize("default_lining").width - - contentItem: ListView - { - clip: true - implicitHeight: contentHeight - model: control.popup.visible ? control.delegateModel : null - currentIndex: control.highlightedIndex - - ScrollIndicator.vertical: ScrollIndicator { } - } - - background: Rectangle - { - color: UM.Theme.getColor("setting_control") - border.color: UM.Theme.getColor("setting_control_border") - } - } - - delegate: ItemDelegate - { - width: control.width - 2 * UM.Theme.getSize("default_lining").width - height: control.height - highlighted: control.highlightedIndex == index - - contentItem: Label - { - // FIXME: Somehow the top/bottom anchoring is not correct on Linux and it results in invisible texts. - anchors.fill: parent - anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width - anchors.rightMargin: UM.Theme.getSize("setting_unit_margin").width - - text: modelData.value - textFormat: Text.PlainText - renderType: Text.NativeRendering - color: control.contentItem.color - font: UM.Theme.getFont("default") - elide: Text.ElideRight - verticalAlignment: Text.AlignVCenter - } - - background: Rectangle - { - color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent" - border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent" - } - } - onActivated: { forceActiveFocus() @@ -170,29 +54,29 @@ SettingItem value: { // FIXME this needs to go away once 'resolve' is combined with 'value' in our data model. - var value = undefined; + var value = undefined 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; + value = base.resolve } if (value == undefined) { - value = propertyProvider.properties.value; + value = propertyProvider.properties.value } - for(var i = 0; i < control.model.length; ++i) + for (var i = 0; i < control.model.length; i++) { - if(control.model[i].key == value) + if (control.model[i].key == value) { - return i; + return i } } - return -1; + return -1 } } } diff --git a/resources/qml/WelcomePages/TestContent.qml b/resources/qml/WelcomePages/TestContent.qml index 31506b8285..b7a3da3d71 100644 --- a/resources/qml/WelcomePages/TestContent.qml +++ b/resources/qml/WelcomePages/TestContent.qml @@ -122,5 +122,8 @@ Row text: catalog.i18nc("@title:label", "Printhead Settings") font: UM.Theme.getFont("medium_bold") } + + + } } diff --git a/resources/qml/Widgets/CuraComboBox.qml b/resources/qml/Widgets/CuraComboBox.qml new file mode 100644 index 0000000000..6ce7c6da45 --- /dev/null +++ b/resources/qml/Widgets/CuraComboBox.qml @@ -0,0 +1,152 @@ +// Copyright (c) 2019 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.10 +import QtQuick.Controls 2.3 + +import UM 1.3 as UM +import Cura 1.1 as Cura + + +// +// ComboBox with Cura styling. +// +ComboBox +{ + id: control + + background: Rectangle + { + color: + { + 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") + } + + radius: UM.Theme.getSize("setting_control_radius").width + border.width: UM.Theme.getSize("default_lining").width + border.color: + { + 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") + } + } + + indicator: UM.RecolorImage + { + id: downArrow + x: control.width - width - control.rightPadding + y: control.topPadding + Math.round((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_button") + } + + contentItem: Label + { + anchors.left: parent.left + anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width + anchors.verticalCenter: parent.verticalCenter + anchors.right: downArrow.left + + text: control.currentText + textFormat: Text.PlainText + renderType: Text.NativeRendering + 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 + } + + popup: Popup + { + y: control.height - UM.Theme.getSize("default_lining").height + width: control.width + implicitHeight: contentItem.implicitHeight + 2 * UM.Theme.getSize("default_lining").width + padding: UM.Theme.getSize("default_lining").width + + contentItem: ListView + { + clip: true + implicitHeight: contentHeight + model: control.popup.visible ? control.delegateModel : null + currentIndex: control.highlightedIndex + + ScrollIndicator.vertical: ScrollIndicator { } + } + + background: Rectangle + { + color: UM.Theme.getColor("setting_control") + border.color: UM.Theme.getColor("setting_control_border") + } + } + + delegate: ItemDelegate + { + id: delegateItem + width: control.width - 2 * UM.Theme.getSize("default_lining").width + height: control.height + highlighted: control.highlightedIndex == index + text: + // FIXME: Maybe there is a better way to do this. Check model and modelData doc page: + // https://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html + { + var _val = undefined + if (typeof _val === 'undefined') // try to get textRole from "model". + { + _val = model[textRole] + } + if (typeof _val === 'undefined') // try to get textRole from "modelData" if it's still undefined. + { + _val = modelData[textRole] + } + return (typeof _val !== 'undefined') ? _val : "" + } + + contentItem: Label + { + // FIXME: Somehow the top/bottom anchoring is not correct on Linux and it results in invisible texts. + anchors.fill: parent + anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width + anchors.rightMargin: UM.Theme.getSize("setting_unit_margin").width + + text: delegateItem.text + textFormat: Text.PlainText + renderType: Text.NativeRendering + color: control.contentItem.color + font: UM.Theme.getFont("default") + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + + background: Rectangle + { + color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent" + border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent" + } + } +}