feat(ui/modules/Common/Form/SearchBox): add a specific component for GNU/Linux

linphone-desktop/resources.qrc

@@ -185,6 +185,7 @@
     <file>ui/modules/Common/Form/Fields/NumericField.qml</file>
     <file>ui/modules/Common/Form/Fields/TextAreaField.qml</file>
     <file>ui/modules/Common/Form/Fields/TextField.qml</file>
+    <file>ui/modules/Common/Form/+linux/SearchBox.qml</file>
     <file>ui/modules/Common/Form/ListForm.qml</file>
     <file>ui/modules/Common/Form/Placements/FormEmptyLine.qml</file>
     <file>ui/modules/Common/Form/Placements/FormEntry.qml</file>

linphone-desktop/ui/modules/Common/Form/+linux/SearchBox.qml

@@ -0,0 +1,140 @@
+import QtQuick 2.7
+
+import Common 1.0
+import Utils 1.0
+
+// =============================================================================
+// Specific GNU/Linux version of `SearchBox` component.
+// =============================================================================
+
+Item {
+  id: searchBox
+
+  // ---------------------------------------------------------------------------
+
+  readonly property alias filter: searchField.text
+
+  property alias delegate: list.delegate
+  property alias header: list.header
+  property alias entryHeight: menu.entryHeight
+  property alias maxMenuHeight: menu.maxMenuHeight
+
+  property alias model: list.model
+  property alias placeholderText: searchField.placeholderText
+
+  property bool _isOpen: false
+
+  // ---------------------------------------------------------------------------
+
+  signal menuClosed
+  signal menuOpened
+  signal enterPressed
+
+  // ---------------------------------------------------------------------------
+
+  function hideMenu () {
+    if (!_isOpen) {
+      return
+    }
+
+    _isOpen = false
+  }
+
+  function showMenu () {
+    if (_isOpen) {
+      return
+    }
+
+    _isOpen = true
+  }
+
+  function _filter (text) {
+    Utils.assert(model.setFilter != null, '`model.setFilter` must be defined.')
+    model.setFilter(text)
+  }
+
+  // ---------------------------------------------------------------------------
+
+  implicitHeight: searchField.height
+
+  Item {
+    implicitHeight: searchField.height + menu.height
+    width: parent.width
+
+    TextField {
+      id: searchField
+
+      icon: 'search'
+      width: parent.width
+
+      Keys.onEscapePressed: searchBox.hideMenu()
+      Keys.onReturnPressed: {
+        searchBox.hideMenu()
+        searchBox.enterPressed()
+      }
+
+      onActiveFocusChanged: activeFocus && searchBox.showMenu()
+      onTextChanged: _filter(text)
+    }
+
+    // -------------------------------------------------------------------------
+
+    DropDownDynamicMenu {
+      id: menu
+
+      launcher: searchField
+      relativeTo: searchField
+      relativeY: searchField.height
+      width: searchField.width
+
+      // If the menu is focused, the main window loses the active status.
+      // So It's necessary to map the keys events.
+      Keys.forwardTo: searchField
+
+      onMenuClosed: searchBox.hideMenu()
+
+      ScrollableListView {
+        id: list
+
+        anchors.fill: parent
+        headerPositioning: header ? ListView.OverlayHeader : ListView.InlineFooter
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+
+  states: State {
+    name: 'opened'
+    when: _isOpen
+  }
+
+  transitions: [
+    Transition {
+      from: ''
+      to: 'opened'
+
+      ScriptAction {
+        script: {
+          menu.showMenu()
+
+          menuOpened()
+        }
+      }
+    },
+
+    Transition {
+      from: 'opened'
+      to: ''
+
+      ScriptAction {
+        script: {
+          menu.hideMenu()
+          searchField.focus = false
+
+          menuClosed()
+        }
+      }
+    }
+  ]
+}

linphone-desktop/ui/modules/Common/Form/SearchBox.qml

@@ -2,7 +2,6 @@ import QtQuick 2.7
 import QtQuick.Window 2.2
 
 import Common 1.0
-import Common.Styles 1.0
 import Utils 1.0
 
 // =============================================================================