WIP: Refactor and create reusable CuraComboBox

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)

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 2.10
-import QtQuick.Controls 2.0
+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
             }
         }
     }

resources/qml/WelcomePages/TestContent.qml

@@ -122,5 +122,8 @@ Row
             text: catalog.i18nc("@title:label", "Printhead Settings")
             font: UM.Theme.getFont("medium_bold")
         }
+
+
+
     }
 }

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"
+        }
+    }
+}