searchbar: made one unique searchbar for contact and message

GitLab: #1083
Change-Id: I210c6c728485a7678817754a0728a07eeb3c3796

src/app/mainview/components/AddMemberPanel.qml

@@ -34,7 +34,7 @@ Rectangle {
 
         anchors.fill: parent
 
-        ContactSearchBar {
+        Searchbar {
             id: contactPickerContactSearchBar
 
             Layout.alignment: Qt.AlignCenter
@@ -44,7 +44,7 @@ Rectangle {
 
             placeHolderText: JamiStrings.addParticipant
 
-            onContactSearchBarTextChanged: {
+            onSearchBarTextChanged: function(text){
                 ContactAdapter.setSearchFilter(text);
             }
         }

src/app/mainview/components/ChatViewHeader.qml

@@ -151,12 +151,29 @@ Rectangle {
         Searchbar {
             id: rowSearchBar
 
+            reductionEnabled: true
+
             Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
             Layout.preferredHeight: 30
-            Layout.preferredWidth: 30 + (isOpen? JamiTheme.searchbarSize : 0)
+            Layout.preferredWidth: 40 + (isOpen? JamiTheme.searchbarSize : 0)
+            colorSearchBar: JamiTheme.backgroundColor
+
+            Behavior on Layout.preferredWidth {
+                NumberAnimation {
+                    duration: 150
+                }
+            }
 
             visible: root.swarmDetailsVisibility
 
+            onSearchBarTextChanged: function(text){
+                MessagesAdapter.searchbarPrompt = text;
+            }
+
+            onSearchClicked: {
+                root.searchClicked();
+            }
+
             Shortcut {
                 sequence: "Ctrl+Shift+F"
                 context: Qt.ApplicationShortcut

src/app/mainview/components/ContactPicker.qml

@@ -89,7 +89,7 @@ Popup {
                 }
             }
 
-            ContactSearchBar {
+            Searchbar {
                 id: contactPickerContactSearchBar
 
                 Layout.alignment: Qt.AlignCenter
@@ -99,7 +99,7 @@ Popup {
 
                 placeHolderText: type === ContactList.TRANSFER ? JamiStrings.transferTo : JamiStrings.addParticipant
 
-                onContactSearchBarTextChanged: {
+                onSearchBarTextChanged: function(text){
                     ContactAdapter.setSearchFilter(text);
                 }
             }

src/app/mainview/components/Searchbar.qml

@@ -1,6 +1,5 @@
 /*
- * Copyright (C) 2023 Savoir-faire Linux Inc.
+ * Copyright (C) 2020-2023 Savoir-faire Linux Inc.
- * Author: Nicolas Vengeon <nicolas.vengeon@savoirfairelinux.com>
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -16,45 +15,79 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 import QtQuick
-import QtQuick.Layouts
 import QtQuick.Controls
+import net.jami.Models 1.1
 import net.jami.Adapters 1.1
 import net.jami.Constants 1.1
 import "../../commoncomponents"
 
-RowLayout {
+Rectangle {
     id: root
 
+
+    signal searchBarTextChanged(string text)
+    signal returnPressedWhileSearching
+    signal searchClicked
+
+    property bool reductionEnabled: false
+    property alias textContent: textArea.text
+    property alias placeHolderText: textArea.placeholderText
+
+    property var colorSearchBar: JamiTheme.secondaryBackgroundColor
+
     property string currentConversationId: CurrentConversation.id
 
-    property bool isOpen: extrasPanel.isOpen(ChatView.MessagesResearchPanel)
+    property bool isOpen: reductionEnabled ? extrasPanel.isOpen(ChatView.MessagesResearchPanel) : true
     onIsOpenChanged: {
         if (isOpen)
             textArea.forceActiveFocus()
     }
 
-    PushButton {
+    function clearText() {
-        id: startSearchMessages
+        textArea.clear();
-        Layout.preferredHeight: 30
+        textArea.forceActiveFocus();
-        Layout.preferredWidth: 30
+    }
 
-        source: JamiResources.search_svg
+    radius: JamiTheme.primaryRadius
-        normalColor: JamiTheme.chatviewBgColor
+    color: isOpen ? colorSearchBar : "transparent"
+
+    onFocusChanged: {
+        if (focus) {
+            textArea.forceActiveFocus();
+        }
+    }
+
+    LineEditContextMenu {
+        id: lineEditContextMenu
+
+        lineEditObj: textArea
+    }
+
+    PushButton {
+        id: startSearch
+
+        anchors.verticalCenter: root.verticalCenter
+        anchors.left: root.left
+        anchors.leftMargin: 10
+        hoverEnabled: reductionEnabled
+        enabled: reductionEnabled
+
+
+        source: JamiResources.ic_baseline_search_24dp_svg
+        normalColor: "transparent"
         imageColor: JamiTheme.chatviewButtonColor
 
-        onClicked: chatViewHeader.searchClicked()
+        onClicked: root.searchClicked()
     }
 
     Rectangle {
         id: rectTextArea
 
-        Layout.preferredHeight: startSearchMessages.height
+        height: root.height-5
-        Layout.alignment: Qt.AlignVCenter
+        anchors.left: startSearch.right
-
+        anchors.right: root.right
+        anchors.verticalCenter: root.verticalCenter
         color: "transparent"
-        border.color: JamiTheme.chatviewTextColor
-        radius: 10
-        border.width: 2
 
         opacity: isOpen
         visible: opacity
@@ -65,7 +98,7 @@ RowLayout {
         }
 
         width: isOpen ? JamiTheme.searchbarSize : 0
-        Behavior on Layout.preferredWidth  {
+        Behavior on width {
             NumberAnimation {
                 duration: 150
             }
@@ -73,45 +106,54 @@ RowLayout {
 
         TextField {
             id: textArea
+
             property bool dontShowFocusState: true
 
             background.visible: false
-            anchors.right: clearTextButton.left
+
-            anchors.left: rectTextArea.left
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.right: textArea.text.length ? clearTextButton.left : parent.right
+
             color: JamiTheme.chatviewTextColor
+
             placeholderText: JamiStrings.search
             placeholderTextColor: JamiTheme.chatviewTextColor
 
-            onTextChanged: {
+            height: root.height - 5
-                MessagesAdapter.searchbarPrompt = text;
+
+            font.pointSize: JamiTheme.textFontSize
+            font.kerning: true
+
+            onTextChanged: root.searchBarTextChanged(textArea.text)
+            onReleased: function (event) {
+                if (event.button === Qt.RightButton)
+                    lineEditContextMenu.openMenuAt(event);
             }
         }
 
         PushButton {
             id: clearTextButton
 
-            anchors.verticalCenter: rectTextArea.verticalCenter
-            anchors.right: rectTextArea.right
-            anchors.margins: 5
-            preferredSize: 21
 
-            radius: rectTextArea.radius
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 15
+
+            preferredSize: 15
+            radius: JamiTheme.primaryRadius
+
             visible: textArea.text.length
             opacity: visible ? 1 : 0
-            normalColor: "transparent"
+
-            imageColor: JamiTheme.chatviewButtonColor
+            normalColor: root.color
+            imageColor: JamiTheme.primaryForegroundColor
+
             source: JamiResources.ic_clear_24dp_svg
             toolTipText: JamiStrings.clearText
 
-            property string convId: CurrentConversation.id
+            onClicked: textArea.clear()
-            onConvIdChanged: {
-                textArea.clear();
-            }
-
-            onClicked: {
-                textArea.clear();
-                textArea.forceActiveFocus();
-            }
 
             Behavior on opacity  {
                 NumberAnimation {
@@ -121,4 +163,13 @@ RowLayout {
             }
         }
     }
+
+    Keys.onPressed: function (keyEvent) {
+        if (keyEvent.key === Qt.Key_Enter || keyEvent.key === Qt.Key_Return) {
+            if (textArea.text !== "") {
+                returnPressedWhileSearching();
+                keyEvent.accepted = true;
+            }
+        }
+    }
 }

src/app/mainview/components/SidePanel.qml

@@ -244,13 +244,13 @@ SidePanelBase {
                     }
                 }
 
-                ContactSearchBar {
+                Searchbar {
                     id: contactSearchBar
 
                     Layout.fillHeight: true
                     Layout.fillWidth: true
 
-                    onContactSearchBarTextChanged: function (text) {
+                    onSearchBarTextChanged: function(text){
                         // not calling positionViewAtBeginning will cause
                         // sort animation visual bugs
                         conversationListView.positionViewAtBeginning()