Use the new QfSearchBar item in more places

src/qml/QFieldCloudScreen.qml

@@ -183,6 +183,7 @@ Page {
         id: searchBar
         Layout.fillWidth: true
         Layout.preferredHeight: 41
+        placeHolderText: qsTr("Search for project")
       }
 
       Rectangle {

src/qml/RelationCombobox.qml

@@ -69,15 +69,15 @@ Item {
 
     onOpened: {
       if (searchableText.typedFilter != '') {
-        searchField.text = searchableText.typedFilter;
+        searchBar.searchTerm = searchableText.typedFilter;
       }
       if (resultsList.contentHeight > resultsList.height) {
-        searchField.forceActiveFocus();
+        searchBar.focusOnTextField();
       }
     }
 
     onClosed: {
-      searchField.text = '';
+      searchBar.clear();
     }
 
     Page {
@@ -91,70 +91,33 @@ Item {
         onCancel: searchFeaturePopup.close()
       }
 
-      TextField {
-        id: searchField
+      QfSearchBar {
+        id: searchBar
         z: 1
         anchors.left: parent.left
         anchors.right: parent.right
+        height: childrenRect.height
 
-        placeholderText: !focus && displayText === '' ? qsTr("Search…") : ''
-        placeholderTextColor: Theme.mainColor
-
-        height: fontMetrics.height * 2.5
-        padding: 24
-        bottomPadding: 9
-        font: Theme.defaultFont
-        selectByMouse: true
-        verticalAlignment: TextInput.AlignVCenter
-
-        inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhNoAutoUppercase | Qt.ImhSensitiveData
-
-        onDisplayTextChanged: {
-          featureListModel.searchTerm = searchField.displayText;
+        onSearchTermChanged: {
+          featureListModel.searchTerm = searchTerm;
         }
 
-        Keys.onPressed: event => {
-          if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
-            if (featureListModel.rowCount() === 1) {
-              resultsList.itemAtIndex(0).performClick();
-              searchFeaturePopup.close();
-            }
+        onReturnPressed: {
+          if (featureListModel.rowCount() === 1) {
+            resultsList.itemAtIndex(0).performClick();
+            searchFeaturePopup.close();
           }
         }
       }
 
-      QfToolButton {
-        id: clearButton
-        z: 1
-        width: fontMetrics.height
-        height: fontMetrics.height
-        anchors {
-          top: searchField.top
-          right: searchField.right
-          topMargin: height - 7
-          rightMargin: height - 7
-        }
-
-        padding: 0
-        iconSource: Theme.getThemeIcon("ic_clear_black_18dp")
-        iconColor: Theme.mainTextColor
-        bgcolor: "transparent"
-
-        opacity: searchField.displayText.length > 0 ? 1 : 0.25
-
-        onClicked: {
-          searchField.text = '';
-        }
-      }
-
       ListView {
         id: resultsList
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.top: searchField.bottom
+        anchors.top: searchBar.bottom
         model: featureListModel
         width: parent.width
-        height: searchFeaturePopup.height - searchField.height - 50
+        height: searchFeaturePopup.height - searchBar.height - 50
         clip: true
         ScrollBar.vertical: QfScrollBar {
         }

src/qml/editorwidgets/ValueMap.qml

@@ -256,12 +256,12 @@ EditorWidgetBase {
 
       onOpened: {
         if (resultsList.contentHeight > resultsList.height) {
-          searchField.forceActiveFocus();
+          searchBar.focusOnTextField();
         }
       }
 
       onClosed: {
-        searchField.text = '';
+        searchBar.clear();
       }
 
       Page {
@@ -279,68 +279,33 @@ EditorWidgetBase {
           }
         }
 
-        TextField {
-          id: searchField
+        QfSearchBar {
+          id: searchBar
           z: 1
           anchors.left: parent.left
           anchors.right: parent.right
+          height: childrenRect.height
 
-          placeholderText: !focus && displayText === '' ? qsTr("Search…") : ''
-          placeholderTextColor: Theme.mainColor
-
-          height: fontMetrics.height * 2.5
-          padding: 24
-          bottomPadding: 9
-          font: Theme.defaultFont
-          selectByMouse: true
-          verticalAlignment: TextInput.AlignVCenter
-
-          inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhNoAutoUppercase | Qt.ImhSensitiveData
-
-          onDisplayTextChanged: listModel.setFilterFixedString(displayText)
-
-          Keys.onPressed: event => {
-            if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
-              if (listModel.rowCount() === 1) {
-                resultsList.itemAtIndex(0).performClick();
-                searchFeaturePopup.close();
-              }
-            }
-          }
-        }
-
-        QfToolButton {
-          id: clearButton
-          z: 1
-          width: fontMetrics.height
-          height: fontMetrics.height
-          anchors {
-            top: searchField.top
-            right: searchField.right
-            topMargin: height - 7
-            rightMargin: height - 7
+          onSearchTermChanged: {
+            listModel.setFilterFixedString(searchTerm);
           }
 
-          padding: 0
-          iconSource: Theme.getThemeIcon("ic_clear_black_18dp")
-          iconColor: Theme.mainTextColor
-          bgcolor: "transparent"
-
-          opacity: searchField.displayText.length > 0 ? 1 : 0.25
-
-          onClicked: {
-            searchField.text = '';
+          onReturnPressed: {
+            if (listModel.rowCount() === 1) {
+              resultsList.itemAtIndex(0).performClick();
+              searchFeaturePopup.close();
+            }
           }
         }
 
         ListView {
           id: resultsList
           anchors.left: parent.left
           anchors.right: parent.right
-          anchors.top: searchField.bottom
+          anchors.top: searchBar.bottom
           model: listModel
           width: parent.width
-          height: searchFeaturePopup.height - searchField.height - 50
+          height: searchFeaturePopup.height - searchBar.height - 50
           clip: true
           ScrollBar.vertical: QfScrollBar {
           }
@@ -370,7 +335,7 @@ EditorWidgetBase {
               indicator: Rectangle {
               }
 
-              text: StringUtils.highlightText(itemText, searchField.displayText, Theme.mainTextColor)
+              text: StringUtils.highlightText(itemText, searchBar.searchTerm, Theme.mainTextColor)
 
               contentItem: Text {
                 text: parent.text
@@ -379,7 +344,7 @@ EditorWidgetBase {
                 verticalAlignment: Text.AlignVCenter
                 leftPadding: parent.indicator.width + parent.spacing
                 elide: Text.ElideRight
-                color: searchField.displayText !== '' ? Theme.secondaryTextColor : Theme.mainTextColor
+                color: searchBar.searchTerm !== '' ? Theme.secondaryTextColor : Theme.mainTextColor
                 textFormat: Text.RichText
               }
             }

src/qml/imports/Theme/QfSearchBar.qml

@@ -4,15 +4,20 @@ import org.qfield
 import Theme
 
 Item {
-  property alias searchTerm: searchBar.text
+  id: searchBar
+
+  property alias searchTerm: searchField.text
+  property string placeHolderText: qsTr("Search")
+
+  signal returnPressed
 
   Rectangle {
     width: parent.width
     height: 40
     radius: 6
     border.width: 1
     color: Theme.mainBackgroundColor
-    border.color: searchBar.activeFocus ? Theme.mainColor : "transparent"
+    border.color: searchField.activeFocus ? Theme.mainColor : "transparent"
 
     QfToolButton {
       id: clearButton
@@ -22,9 +27,9 @@ Item {
       iconSource: Theme.getThemeIcon('ic_close_black_24dp')
       iconColor: Theme.mainTextColor
       bgcolor: "transparent"
-      visible: searchBar.text !== ""
+      visible: searchField.text !== ""
       onClicked: {
-        searchBar.text = '';
+        clear();
       }
     }
 
@@ -37,22 +42,36 @@ Item {
       iconSource: Theme.getThemeIcon("ic_baseline_search_black")
       iconColor: Theme.mainTextColor
       onClicked: {
-        searchBar.focus = true;
+        searchField.focus = true;
       }
     }
 
     TextField {
-      id: searchBar
+      id: searchField
       rightPadding: 7
       anchors.left: searchButton.right
       anchors.right: clearButton.left
       anchors.leftMargin: -16
       anchors.rightMargin: 4
       height: 40
       selectByMouse: true
-      placeholderText: (!searchBar.activeFocus && text === "" && displayText === "") ? qsTr("Search for project") : ""
+      placeholderText: (!searchField.activeFocus && text === "" && displayText === "") ? searchBar.placeHolderText : ""
       background: Item {
       }
+
+      Keys.onPressed: event => {
+        if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+          searchBar.returnPressed();
+        }
+      }
     }
   }
+
+  function focusOnTextField() {
+    searchField.forceActiveFocus();
+  }
+
+  function clear() {
+    searchField.text = '';
+  }
 }