From a1378f9a06e20052b8b821c6c3df0a3676e7504e Mon Sep 17 00:00:00 2001
From: Jaime van Kessel <nallath@gmail.com>
Date: Mon, 30 Aug 2021 13:28:00 +0200
Subject: [PATCH 1/2] Replace the textfield with cura.Textfield

This way we don't have to use the html in the setting item and we
dont have to re-do the whole hover logic in the search text field.

THis also makes the search magnifier themed, so it looks a lot better
in the dark theme

CURA-8498
---
 resources/qml/Settings/SettingView.qml | 68 +++++++++-----------------
 1 file changed, 22 insertions(+), 46 deletions(-)

diff --git a/resources/qml/Settings/SettingView.qml b/resources/qml/Settings/SettingView.qml
index 26d88db911..3c67a9b97e 100644
--- a/resources/qml/Settings/SettingView.qml
+++ b/resources/qml/Settings/SettingView.qml
@@ -19,26 +19,9 @@ Item
     property Action configureSettings
     property bool findingSettings
 
-    Rectangle
+    Item
     {
         id: filterContainer
-        visible: true
-
-        radius: UM.Theme.getSize("setting_control_radius").width
-        border.width: UM.Theme.getSize("default_lining").width
-        border.color:
-        {
-            if (hoverMouseArea.containsMouse || clearFilterButton.containsMouse)
-            {
-                return UM.Theme.getColor("setting_control_border_highlight")
-            }
-            else
-            {
-                return UM.Theme.getColor("setting_control_border")
-            }
-        }
-
-        color: UM.Theme.getColor("setting_control")
 
         anchors
         {
@@ -48,6 +31,7 @@ Item
             rightMargin: UM.Theme.getSize("default_margin").width
         }
         height: UM.Theme.getSize("print_setup_big_item").height
+
         Timer
         {
             id: settingsSearchTimer
@@ -57,33 +41,34 @@ Item
             repeat: false
         }
 
-        TextField
+        Cura.TextField
         {
             id: filter
             height: parent.height
             anchors.left: parent.left
-            anchors.right: clearFilterButton.left
-            anchors.rightMargin: Math.round(UM.Theme.getSize("thick_margin").width)
-
-            placeholderText:
-            {
-                var imageSize = "width='" + UM.Theme.getSize("small_button_icon").width + "' height='" + UM.Theme.getSize("small_button_icon").height
-                var imageSource = "' src='"+ UM.Theme.getIcon("Magnifier")
-                var searchPlaceholder = catalog.i18nc("@label:textbox", "Search settings")
-                return "<img align='middle' " + imageSize + imageSource +"'>" +  "<div vertical-align=bottom>" + searchPlaceholder
-            }
-
-            style: TextFieldStyle
-            {
-                textColor: UM.Theme.getColor("setting_control_text")
-                placeholderTextColor: UM.Theme.getColor("setting_filter_field")
-                font: UM.Theme.getFont("default_italic")
-                background: Item {}
-            }
+            anchors.right: parent.right
+            leftPadding: searchIcon.width + UM.Theme.getSize("default_margin").width * 2
+            placeholderText:  catalog.i18nc("@label:textbox", "Search settings")
 
             property var expandedCategories
             property bool lastFindingSettings: false
 
+            UM.RecolorImage
+            {
+                id: searchIcon
+
+                anchors
+                {
+                    verticalCenter: parent.verticalCenter
+                    left: parent.left
+                    leftMargin: UM.Theme.getSize("default_margin").width
+                }
+                source: UM.Theme.getIcon("search")
+                height: UM.Theme.getSize("small_button_icon").height
+                width: height
+                color: UM.Theme.getColor("text")
+            }
+
             onTextChanged:
             {
                 settingsSearchTimer.restart()
@@ -127,15 +112,6 @@ Item
             }
         }
 
-        MouseArea
-        {
-            id: hoverMouseArea
-            anchors.fill: parent
-            hoverEnabled: true
-            acceptedButtons: Qt.NoButton
-            cursorShape: Qt.IBeamCursor
-        }
-
         UM.SimpleButton
         {
             id: clearFilterButton

From 5ba1e8eda8218ca81b7549832b478b9690023cdb Mon Sep 17 00:00:00 2001
From: jelle Spijker <j.spijker@ultimaker.com>
Date: Mon, 30 Aug 2021 14:20:09 +0200
Subject: [PATCH 2/2] Settings search field uses italic style

Restored italic font style for the search field.
To not break look and feel with the old TextField
behaviour
---
 resources/qml/Settings/SettingView.qml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/qml/Settings/SettingView.qml b/resources/qml/Settings/SettingView.qml
index 3c67a9b97e..d364fba039 100644
--- a/resources/qml/Settings/SettingView.qml
+++ b/resources/qml/Settings/SettingView.qml
@@ -49,6 +49,7 @@ Item
             anchors.right: parent.right
             leftPadding: searchIcon.width + UM.Theme.getSize("default_margin").width * 2
             placeholderText:  catalog.i18nc("@label:textbox", "Search settings")
+            font.italic: true
 
             property var expandedCategories
             property bool lastFindingSettings: false