feat(Popup): use style file

tests/ui/modules/Linphone/Popup/DropDownMenu.qml

-import QtGraphicalEffects 1.0
 import QtQuick 2.7
-import QtQuick.Controls 2.0
 
-import Linphone 1.0
 import Linphone.Styles 1.0
 
-Rectangle {
-    readonly property int entryHeight: 50
-
-    property int maxMenuHeight
-
-    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
-
-        ScrollableListView {
-            anchors.fill: parent
-            id: list
-            height: console.log(model.count) || count
+// ===================================================================
+// Low component to display a list/menu in a popup.
+// ===================================================================
 
-            // 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')
-                    }
-                ]
-            }
-        }
-    }
-
-    PopupShadow {
-        anchors.fill: listContainer
-        source: listContainer
-        visible: true
-    }
+Rectangle {
+  default property alias content: content.data
+  property int entryHeight
+  property int maxMenuHeight
+
+  // Ugly. Just ugly.
+  // `model` is a reference on a unknown component!
+  // See usage with SearchBox.
+  implicitHeight: {
+    var height = model.count * entryHeight
+    return height > maxMenuHeight ? maxMenuHeight : height
+  }
+  visible: false
+
+  function show () {
+    visible = true
+  }
+
+  function hide () {
+    visible = false
+  }
+
+  Rectangle {
+    id: content
+
+    anchors.fill: parent
+    color: PopupStyle.backgroundColor
+    layer.enabled: true
+    layer.effect: PopupShadow { }
+  }
 }

tests/ui/modules/Linphone/Popup/PopupShadow.qml

@@ -5,9 +5,9 @@ import Linphone.Styles 1.0
 // ===================================================================
 
 DropShadow {
-    color: PopupStyle.shadow.color
-    horizontalOffset: PopupStyle.shadow.horizontalOffset
-    radius: PopupStyle.shadow.radius
-    samples: PopupStyle.shadow.samples
-    verticalOffset: PopupStyle.shadow.verticalOffset
+  color: PopupStyle.shadow.color
+  horizontalOffset: PopupStyle.shadow.horizontalOffset
+  radius: PopupStyle.shadow.radius
+  samples: PopupStyle.shadow.samples
+  verticalOffset: PopupStyle.shadow.verticalOffset
 }

tests/ui/modules/Linphone/SearchBox.qml

@@ -7,71 +7,82 @@ import Linphone.Styles 1.0
 // ===================================================================
 
 Item {
-    property alias placeholderText: searchField.placeholderText
-    property alias maxMenuHeight: menu.maxMenuHeight
+  id: item
 
-    signal menuClosed ()
-    signal menuOpened ()
-    signal searchTextChanged (string text)
+  property alias delegate: list.delegate
+  property alias entryHeight: menu.entryHeight
+  property alias maxMenuHeight: menu.maxMenuHeight
+  property alias model: list.model
+  property alias placeholderText: searchField.placeholderText
 
-    function _hideMenu () {
-        menu.hide()
-        shadow.visible = false
-        searchField.focus = false
+  signal menuClosed ()
+  signal menuOpened ()
+  signal searchTextChanged (string text)
 
-        menuClosed()
-    }
+  function _hideMenu () {
+    menu.hide()
+    shadow.visible = false
+    searchField.focus = false
 
-    function _showMenu () {
-        menu.show()
-        shadow.visible = true
+    menuClosed()
+  }
 
-        menuOpened()
-    }
+  function _showMenu () {
+    menu.show()
+    shadow.visible = true
+
+    menuOpened()
+  }
+
+  implicitHeight: searchField.height
 
-    implicitHeight: searchField.height
+  Item {
+    implicitHeight: searchField.height + menu.height
+    width: parent.width
 
-    Item {
-        implicitHeight: searchField.height + menu.height
-        width: parent.width
+    TextField {
+      id: searchField
 
-        TextField {
-            id: searchField
+      background: SearchBoxStyle.searchFieldBackground
+      width: parent.width
 
-            background: SearchBoxStyle.searchFieldBackground
-            width: parent.width
+      Keys.onEscapePressed: _hideMenu()
 
-            Keys.onEscapePressed: _hideMenu()
+      onActiveFocusChanged: activeFocus && _showMenu()
+      onTextChanged: searchTextChanged(text)
+    }
+
+    DropDownMenu {
+      id: menu
 
-            onActiveFocusChanged: activeFocus && _showMenu()
-            onTextChanged: searchTextChanged(text)
-        }
+      anchors.top: searchField.bottom
+      width: searchField.width
+      z: Constants.zPopup
 
-        DropDownMenu {
-            id: menu
+      Keys.onEscapePressed: _hideMenu()
 
-            anchors.top: searchField.bottom
-            width: searchField.width
-            z: Constants.zPopup
+      ScrollableListView {
+        id: list
 
-            Keys.onEscapePressed: _hideMenu()
-        }
+        anchors.fill: parent
+      }
+    }
 
-        InvertedMouseArea {
-            enabled: menu.visible
-            height: parent.height
-            parent: parent
-            width: parent.width
+    InvertedMouseArea {
+      enabled: menu.visible
+      height: parent.height
+      parent: parent
+      width: parent.width
 
-            onPressed: _hideMenu()
-        }
+      onPressed: _hideMenu()
+    }
 
-        PopupShadow {
-            id: shadow
+    PopupShadow {
+      id: shadow
 
-            anchors.fill: searchField
-            source: searchField
-            visible: false
-        }
+      anchors.fill: searchField
+      source: searchField
+      visible: false
     }
+  }
 }

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

@@ -4,13 +4,15 @@ import QtQuick 2.7
 import Linphone 1.0
 
 QtObject {
-    property QtObject shadow: QtObject {
-        property double radius: 8.0
+  property string backgroundColor: Colors.k
 
-        property int horizontalOffset: 0
-        property int samples: 15
-        property int verticalOffset: 2
+  property QtObject shadow: QtObject {
+    property double radius: 8.0
 
-        property string color: Colors.f
-    }
+    property int horizontalOffset: 0
+    property int samples: 15
+    property int verticalOffset: 2
+
+    property string color: Colors.f
+  }
 }