feat(ui/modules/Linphone/SmartSearchBar):

  - it uses a style file
  - provide signals handlers

tests/assets/languages/en.ts

@@ -486,6 +486,13 @@
         <translation>Search contact or enter SIP address</translation>
     </message>
 </context>
+<context>
+    <name>SmartSearchBar</name>
+    <message>
+        <source>addContact</source>
+        <translation>ADD CONTACT</translation>
+    </message>
+</context>
 <context>
     <name>Timeline</name>
     <message>

tests/assets/languages/fr.ts

@@ -474,6 +474,13 @@
         <translation>Rechercher un contact ou entrer une adresse SIP</translation>
     </message>
 </context>
+<context>
+    <name>SmartSearchBar</name>
+    <message>
+        <source>addContact</source>
+        <translation>AJOUTER CONTACT</translation>
+    </message>
+</context>
 <context>
     <name>Timeline</name>
     <message>

tests/resources.qrc

@@ -43,6 +43,7 @@
     <file>assets/images/contact_add_hovered.svg</file>
     <file>assets/images/contact_add_normal.svg</file>
     <file>assets/images/contact_add_pressed.svg</file>
+    <file>assets/images/contact_add.svg</file>
     <file>assets/images/contact_card_photo_disabled.svg</file>
     <file>assets/images/contact_card_photo_hovered.svg</file>
     <file>assets/images/contact_card_photo_normal.svg</file>
@@ -222,6 +223,7 @@
     <file>ui/modules/Linphone/Styles/NotificationStyle.qml</file>
     <file>ui/modules/Linphone/Styles/Presence/PresenceStringStyle.qml</file>
     <file>ui/modules/Linphone/Styles/qmldir</file>
+    <file>ui/modules/Linphone/Styles/SmartSearchBarStyle.qml</file>
     <file>ui/modules/Linphone/Styles/TimelineStyle.qml</file>
     <file>ui/modules/Linphone/Timeline.qml</file>
     <file>ui/scripts/LinphoneUtils/linphone-utils.js</file>

tests/ui/modules/Common/Popup/DropDownDynamicMenu.qml

 import QtQuick 2.7
 
+import Common 1.0
 import Utils 1.0
 
 // =============================================================================
@@ -7,8 +8,7 @@ import Utils 1.0
 // =============================================================================
 
 AbstractDropDownMenu {
-  // Can be computed, but for performance usage, it must be given
-  // in attribute.
+  // Can be computed, but for performance usage, it must be given in attribute.
   property int entryHeight
   property int maxMenuHeight
 
@@ -22,6 +22,9 @@ AbstractDropDownMenu {
     var height = list.count * entryHeight
 
     if (list.headerPositioning === ListView.OverlayHeader) {
+      // Workaround to force header layout.
+      list.headerItem.z = Constants.zMax
+
       height += list.headerItem.height
     }
 

tests/ui/modules/Common/SearchBox.qml

@@ -12,9 +12,10 @@ import Utils 1.0
 Item {
   id: searchBox
 
-  property alias header: list.header
+  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
 

tests/ui/modules/Linphone/SmartSearchBar.qml

@@ -3,26 +3,75 @@ import QtQuick.Layouts 1.3
 
 import Common 1.0
 import Linphone 1.0
+import Linphone.Styles 1.0
 
 // =============================================================================
 
 SearchBox {
   id: searchBox
 
-  header: Rectangle {
-    color: '#4B5964'
-    height: 40
+  // ---------------------------------------------------------------------------
+
+  signal addContact (string sipAddress)
+  signal launchChat (string sipAddress)
+  signal launchCall (string sipAddress)
+  signal launchVideoCall (string sipAddress)
+
+  // ---------------------------------------------------------------------------
+
+  header: MouseArea {
+    id: headerContent
+
+    height: SmartSearchBarStyle.header.height
     width: parent.width
 
-    MouseArea {
+    onClicked: {
+      searchBox.hideMenu()
+      searchBox.addContact(searchBox.filter)
+    }
+
+    Rectangle {
       anchors.fill: parent
-      hoverEnabled: true
+      color: parent.pressed
+        ? SmartSearchBarStyle.header.color.pressed
+        : SmartSearchBarStyle.header.color.normal
+
+      Text {
+        anchors {
+          left: parent.left
+          leftMargin: SmartSearchBarStyle.header.leftMargin
+          verticalCenter: parent.verticalCenter
+        }
+        font {
+          bold: true
+          pointSize: SmartSearchBarStyle.header.text.fontSize
+        }
+        color: headerContent.pressed
+          ? SmartSearchBarStyle.header.text.color.pressed
+          : SmartSearchBarStyle.header.text.color.normal
+        text: qsTr('addContact')
+      }
+
+      Icon {
+        anchors {
+          right: parent.right
+          rightMargin: SmartSearchBarStyle.header.rightMargin
+          verticalCenter: parent.verticalCenter
+        }
+        icon: 'contact_add'
+        iconSize: SmartSearchBarStyle.header.iconSize
+      }
     }
   }
 
+  // ---------------------------------------------------------------------------
+  // Entries.
+  // ---------------------------------------------------------------------------
+
   delegate: Rectangle {
     id: searchBoxEntry
 
+    color: SmartSearchBarStyle.entry.color.normal
     height: searchBox.entryHeight
     width: parent ? parent.width : 0
 
@@ -32,7 +81,7 @@ SearchBox {
       anchors.left: parent.left
       color: 'transparent'
       height: parent.height
-      width: 5
+      width: SmartSearchBarStyle.entry.indicator.width
     }
 
     MouseArea {
@@ -44,12 +93,12 @@ SearchBox {
       RowLayout {
         anchors {
           fill: parent
-          rightMargin: 10
+          rightMargin: SmartSearchBarStyle.entry.rightMargin
         }
         spacing: 0
 
         // ---------------------------------------------------------------------
-        // Contact or address info
+        // Contact or address info.
         // ---------------------------------------------------------------------
 
         Contact {
@@ -63,35 +112,39 @@ SearchBox {
         // ---------------------------------------------------------------------
 
         ActionBar {
-          iconSize: 36
+          iconSize: SmartSearchBarStyle.entry.iconSize
 
           ActionButton {
             icon: 'video_call'
-            onClicked: CallsWindow.show()
+            onClicked: {
+              searchBox.hideMenu()
+              searchBox.launchVideoCall($entry.sipAddress)
+            }
           }
 
           ActionButton {
             icon: 'call'
-            onClicked: CallsWindow.show()
+            onClicked: {
+              searchBox.hideMenu()
+              searchBox.launchCall($entry.sipAddress)
+            }
           }
 
           ActionButton {
             icon: 'chat'
             onClicked: {
               searchBox.hideMenu()
-              window.ensureCollapsed()
-              window.setView('Conversation', {
-                sipAddress: $entry.sipAddress
-              })
+              searchBox.launchChat($entry.sipAddress)
             }
           }
         }
       }
     }
 
+    // Separator.
     Rectangle {
-      color: '#CBCBCB'
-      height: 1
+      color: SmartSearchBarStyle.entry.separator.color
+      height: SmartSearchBarStyle.entry.separator.height
       width: parent.width
     }
 
@@ -101,12 +154,12 @@ SearchBox {
       when: mouseArea.containsMouse
 
       PropertyChanges {
-        color: '#D0D8DE'
+        color: SmartSearchBarStyle.entry.color.hovered
         target: searchBoxEntry
       }
 
       PropertyChanges {
-        color: '#FF5E00'
+        color: SmartSearchBarStyle.entry.indicator.color
         target: indicator
       }
     }

tests/ui/modules/Linphone/Styles/SmartSearchBarStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// =============================================================================
+
+QtObject {
+  property QtObject entry: QtObject {
+    property int rightMargin: 10
+    property int iconSize: 36
+
+    property QtObject color: QtObject {
+      property color normal: Colors.k
+      property color hovered: Colors.y
+    }
+
+    property QtObject indicator: QtObject {
+      property color color: Colors.i
+      property int width: 5
+    }
+
+    property QtObject separator: QtObject {
+      property color color: Colors.c
+      property int height: 1
+    }
+  }
+
+  property QtObject header: QtObject {
+    property int height: 40
+    property int iconSize: 22
+    property int leftMargin: 20
+    property int rightMargin: 10
+
+    property QtObject color: QtObject {
+      property color normal: Colors.j
+      property color pressed: Colors.i
+    }
+
+    property QtObject text: QtObject {
+      property int fontSize: 9
+
+      property QtObject color: QtObject {
+        property color normal: Colors.k
+        property color pressed: Colors.k
+      }
+    }
+  }
+}

tests/ui/modules/Linphone/Styles/qmldir

@@ -2,7 +2,7 @@
 
 module Linphone.Style
 
-# Components styles --------------------------------------------------
+# Components styles ------------------------------------------------------------
 
 singleton AccountStatusStyle      1.0 Account/AccountStatusStyle.qml
 
@@ -16,4 +16,6 @@ singleton NotificationStyle       1.0 NotificationStyle.qml
 
 singleton PresenceStringStyle     1.0 Presence/PresenceStringStyle.qml
 
+singleton SmartSearchBarStyle     1.0 SmartSearchBarStyle.qml
+
 singleton TimelineStyle           1.0 TimelineStyle.qml

tests/ui/views/App/MainWindow/MainWindow.qml

@@ -146,6 +146,21 @@ ApplicationWindow {
         placeholderText: qsTr('mainSearchBarPlaceholder')
 
         model: SmartSearchBarModel {}
+
+        onAddContact: {
+          window.ensureCollapsed()
+          window.setView('ContactEdit', {
+            sipAddress: sipAddress
+          })
+        }
+        onLaunchCall: CallsWindow.show()
+        onLaunchChat: {
+          window.ensureCollapsed()
+          window.setView('Conversation', {
+            sipAddress: sipAddress
+          })
+        }
+        onLaunchVideoCall: CallsWindow.show()
       }
     }
   }

tests/ui/views/App/Styles/MainWindow/MainWindowStyle.qml

@@ -2,6 +2,7 @@ pragma Singleton
 import QtQuick 2.7
 
 import Common 1.0
+import Linphone.Styles 1.0
 
 // =============================================================================
 
@@ -30,7 +31,7 @@ QtObject {
   }
 
   property QtObject searchBox: QtObject {
-    property int entryHeight: 51
+    property int entryHeight: 50 + SmartSearchBarStyle.entry.separator.height
     property int maxHeight: 300 // See Hick's law for good choice.
   }