Steal search-bar from DigitalFactory.

Make 'SearchBar' into a reusable component, so it can be used in the (new) Marketplace search. Also now at least the word 'Search' can be translated ;-)

part of CURA-8559

plugins/DigitalLibrary/resources/qml/SelectProjectPage.qml

@@ -9,7 +9,7 @@ import QtQuick.Controls.Styles 1.4
 import QtQuick.Layouts 1.1
 
 import UM 1.2 as UM
-import Cura 1.6 as Cura
+import Cura 1.7 as Cura
 
 import DigitalFactory 1.0 as DF
 
@@ -44,32 +44,10 @@ Item
         height: childrenRect.height
         spacing: UM.Theme.getSize("default_margin").width
 
-        Cura.TextField
+        Cura.SearchBar
         {
             id: searchBar
-            Layout.fillWidth: true
-            implicitHeight: createNewProjectButton.height
-            leftPadding: searchIcon.width + UM.Theme.getSize("default_margin").width * 2
-
             onTextEdited: manager.projectFilter = text //Update the search filter when editing this text field.
-
-            placeholderText: "Search"
-
-            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")
-            }
         }
 
         Cura.SecondaryButton

resources/qml/SearchBar.qml

@@ -0,0 +1,36 @@
+// Copyright (C) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.1
+
+import UM 1.6 as UM
+import Cura 1.7 as Cura
+
+Cura.TextField
+{
+    UM.I18nCatalog { id: catalog; name: "cura" }
+
+    Layout.fillWidth: true
+    implicitHeight: createNewProjectButton.height
+    leftPadding: searchIcon.width + UM.Theme.getSize("default_margin").width * 2
+
+    placeholderText: catalog.i18nc("@placeholder", "Search")
+
+    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")
+    }
+}