feat(mainWindow): use new search bar (unstable)

tests/resources.qrc

@@ -3,6 +3,7 @@
     <file>languages/fr.qm</file>
     <file>languages/en.qm</file>
     <file>ui/components/scrollBar/ForceScrollBar.qml</file>
+    <file>ui/components/searchBox/SearchBox.qml</file>
     <file>ui/components/misc/MenuEntry.qml</file>
     <file>ui/components/timeline/Timeline.qml</file>
     <file>ui/components/image/Icon.qml</file>
@@ -16,6 +17,7 @@
     <file>ui/components/contact/Contact.qml</file>
     <file>ui/components/contact/ContactDescription.qml</file>
     <file>ui/components/contact/Avatar.qml</file>
+    <file>ui/components/popup/DropDownMenu.qml</file>
     <file>ui/components/dialog/ConfirmDialog.qml</file>
     <file>ui/components/dialog/DialogDescription.qml</file>
     <file>ui/components/dialog/DialogPlus.qml</file>

tests/ui/components/contact/Avatar.qml

 import QtQuick 2.7
-import QtGraphicalEffects 1.0 // OpacityMask.
+import QtGraphicalEffects 1.0
 
 // ===================================================================
 

tests/ui/components/popup/DropDownMenu.qml

+import QtGraphicalEffects 1.0
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import 'qrc:/ui/components/contact'
+import 'qrc:/ui/components/form'
+import 'qrc:/ui/components/scrollBar'
+
+Rectangle {
+    readonly property int entryHeight: 50
+
+    property int maxMenuHeight
+
+    border {
+        color: '#CCCCCC'
+        width: 2
+    }
+    implicitHeight: {
+        var height = model.count * entryHeight
+        return height > maxMenuHeight ? maxMenuHeight : height
+    }
+    visible: false
+
+    function show () {
+        visible = true
+    }
+
+    function hide () {
+        visible = false
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        id: listContainer
+
+        ListView {
+            ScrollBar.vertical: ForceScrollBar { }
+            anchors.fill: parent
+            boundsBehavior: Flickable.StopAtBounds
+            clip: true
+            highlightRangeMode: ListView.ApplyRange
+            id: list
+            spacing: 0
+            height: console.log(model.count) || count
+
+            // TODO: Remove, use C++ model instead.
+            model: ListModel {
+                id: model
+
+                ListElement {
+                    $presence: 'connected'
+                    $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'connected'
+                    $sipAddress: 'toto.lala.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'disconnected'
+                    $sipAddress: 'machin.truc.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'absent'
+                    $sipAddress: 'hey.listen.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'do_not_disturb'
+                    $sipAddress: 'valentin.cognito.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'do_not_disturb'
+                    $sipAddress: 'charles.henri.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'disconnected'
+                    $sipAddress: 'yesyes.nono.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'connected'
+                    $sipAddress: 'nsa.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'connected'
+                    $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'connected'
+                    $sipAddress: 'toto.lala.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'disconnected'
+                    $sipAddress: 'machin.truc.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'absent'
+                    $sipAddress: 'hey.listen.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'do_not_disturb'
+                    $sipAddress: 'valentin.cognito.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'do_not_disturb'
+                    $sipAddress: 'charles.henri.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'disconnected'
+                    $sipAddress: 'yesyes.nono.sip.linphone.org'
+                    $username: 'Toto'
+                }
+                ListElement {
+                    $presence: 'connected'
+                    $sipAddress: 'nsa.sip.linphone.org'
+                    $username: 'Toto'
+                }
+            }
+
+            delegate: Contact {
+                presence: $presence
+                sipAddress: $sipAddress
+                username: $username
+                width: parent.width
+
+                actions: [
+                    ActionButton {
+                        icon: 'call'
+                        onClicked: console.log('clicked')
+                    },
+
+                    ActionButton {
+                        icon: 'cam'
+                        onClicked: console.log('cam clicked')
+                    }
+                ]
+            }
+        }
+    }
+
+    DropShadow {
+        anchors.fill: listContainer
+        color: "#80000000"
+        horizontalOffset: 2
+        radius: 8.0
+        samples: 15
+        source: listContainer
+        verticalOffset: 2
+        visible: true
+    }
+}

tests/ui/components/searchBox/SearchBox.qml

+import QtGraphicalEffects 1.0
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import 'qrc:/ui/components/popup'
+
+// ===================================================================
+
+Item {
+    property alias placeholderText: searchField.placeholderText
+    property alias maxMenuHeight: menu.maxMenuHeight
+
+    implicitHeight: searchField.height
+
+    function hideMenu () {
+        menu.hide()
+        shadow.visible = false
+    }
+
+    function showMenu () {
+        menu.show()
+        shadow.visible = true
+    }
+
+    TextField {
+        signal searchTextChanged (string text)
+
+        anchors.fill: parent
+        background: Rectangle {
+            implicitHeight: 30
+        }
+        id: searchField
+
+        Keys.onEscapePressed: focus = false
+
+        onActiveFocusChanged: {
+            // Menu is hidden if `TextField` AND `FocusScope` focus
+            // are lost.
+            if (activeFocus) {
+                showMenu()
+            } else if (!scope.activeFocus) {
+                hideMenu()
+            }
+        }
+        onTextChanged: searchTextChanged(text)
+    }
+
+    // Handle focus from content. (Buttons...)
+    FocusScope {
+        anchors.top: searchField.bottom
+        id: scope
+        z: 999 // Menu must be above any component.
+
+        Keys.onEscapePressed: focus = false
+
+        onActiveFocusChanged: !searchField.activeFocus &&
+            !activeFocus &&
+            hideMenu()
+
+        DropDownMenu {
+            id: menu
+            width: searchField.width
+        }
+    }
+
+    DropShadow {
+        anchors.fill: searchField
+        color: "#80000000"
+        horizontalOffset: 2
+        id: shadow
+        radius: 8.0
+        samples: 15
+        source: searchField
+        verticalOffset: 2
+        visible: false
+    }
+}

tests/ui/views/mainWindow/mainWindow.qml

@@ -6,6 +6,7 @@ import 'qrc:/ui/components/collapse'
 import 'qrc:/ui/components/contact'
 import 'qrc:/ui/components/form'
 import 'qrc:/ui/components/misc'
+import 'qrc:/ui/components/searchBox'
 import 'qrc:/ui/components/timeline'
 
 import 'qrc:/ui/scripts/utils.js' as Utils
@@ -51,24 +52,19 @@ ApplicationWindow {
 
             // User actions.
             ActionButton {
+                Layout.preferredWidth: 16
                 onClicked: Utils.openWindow('manageAccounts', mainWindow)
             }
 
             ActionButton {
+                Layout.preferredWidth: 16
                 onClicked: Utils.openWindow('newCall', mainWindow)
             }
 
             // Search.
-            TextField {
-                signal searchTextChanged (string text)
-
-                background: Rectangle {
-                    color: '#FFFFFF'
-                    implicitHeight: 30
-                }
-                id: searchText
+            SearchBox {
                 Layout.fillWidth: true
-                onTextChanged: searchTextChanged(text)
+                maxMenuHeight: mainWindow.height - 100
                 placeholderText: qsTr('mainSearchBarPlaceholder')
             }