From bec83920e46d3f5f82ded82a8c26b4a4fb5b3a4d Mon Sep 17 00:00:00 2001
From: Ghostkeeper <rubend@tutanota.com>
Date: Tue, 13 Jul 2021 15:47:21 +0200
Subject: [PATCH] Keep showing search icon while typing search query

This adds an option to the TextField element to show an icon on the left side in the text field. The icon remains visible when the user types in something (it's not part of the placeholder string).
Then we use that optional icon for the search bar in the Digital Library.

Contributes to issue CURA-8009.
---
 .../resources/qml/SelectProjectPage.qml       |  9 +++-----
 resources/qml/Widgets/TextField.qml           | 21 +++++++++++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/plugins/DigitalLibrary/resources/qml/SelectProjectPage.qml b/plugins/DigitalLibrary/resources/qml/SelectProjectPage.qml
index 3f1799b9ae..36e3de3da7 100644
--- a/plugins/DigitalLibrary/resources/qml/SelectProjectPage.qml
+++ b/plugins/DigitalLibrary/resources/qml/SelectProjectPage.qml
@@ -51,12 +51,8 @@ Item
 
             onTextEdited: manager.projectFilter = text //Update the search filter when editing this text field.
 
-            placeholderText:
-            {
-                var image_size = "width=\"" + UM.Theme.getSize("small_button_icon").width + "\" height=\"" + UM.Theme.getSize("small_button_icon").height + "\" ";
-                var image_source = "src=\"" + UM.Theme.getIcon("Magnifier") + "\"";
-                return "<img align=\"middle\" " + image_size + image_source + "> &nbsp; Search";
-            }
+            leftIcon: UM.Theme.getIcon("Magnifier")
+            placeholderText: "Search"
         }
 
         Cura.SecondaryButton
@@ -106,6 +102,7 @@ Item
                 anchors.horizontalCenter: parent.horizontalCenter
                 text: searchBar.text === "" ? "It appears that you don't have any projects in the Library yet." : "No projects found that match the search query."
                 font: UM.Theme.getFont("medium")
+                color: UM.Theme.getColor("text")
             }
 
             Cura.TertiaryButton
diff --git a/resources/qml/Widgets/TextField.qml b/resources/qml/Widgets/TextField.qml
index 28074d4415..2643609eaf 100644
--- a/resources/qml/Widgets/TextField.qml
+++ b/resources/qml/Widgets/TextField.qml
@@ -15,6 +15,8 @@ TextField
 {
     id: textField
 
+    property alias leftIcon: iconLeft.source
+
     UM.I18nCatalog { id: catalog; name: "cura" }
 
     hoverEnabled: true
@@ -22,6 +24,7 @@ TextField
     font: UM.Theme.getFont("default")
     color: UM.Theme.getColor("text")
     renderType: Text.NativeRendering
+    leftPadding: iconLeft.visible ? iconLeft.width + UM.Theme.getSize("default_margin").width * 2 : UM.Theme.getSize("thin_margin")
 
     states: [
         State
@@ -67,5 +70,23 @@ TextField
             }
             return UM.Theme.getColor("setting_control_border")
         }
+
+        //Optional icon added on the left hand side.
+        UM.RecolorImage
+        {
+            id: iconLeft
+
+            anchors
+            {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                leftMargin: UM.Theme.getSize("default_margin").width
+            }
+
+            visible: source != ""
+            height: UM.Theme.getSize("small_button_icon").height
+            width: visible ? height : 0
+            color: textField.color
+        }
     }
 }