feat(Popup): use style file

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

@@ -1,148 +1,39 @@
-import QtGraphicalEffects 1.0
 import QtQuick 2.7
-import QtQuick.Controls 2.0
 
-import Linphone 1.0
 import Linphone.Styles 1.0
 
+// ===================================================================
+// Low component to display a list/menu in a popup.
+// ===================================================================
+
 Rectangle {
-    readonly property int entryHeight: 50
+  default property alias content: content.data
+  property int entryHeight
+  property int maxMenuHeight
 
-    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
 
-    implicitHeight: {
-        var height = model.count * entryHeight
-        return height > maxMenuHeight ? maxMenuHeight : height
-    }
-    visible: false
+  function show () {
+    visible = true
+  }
 
-    function show () {
-        visible = true
-    }
+  function hide () {
+    visible = false
+  }
 
-    function hide () {
-        visible = false
-    }
+  Rectangle {
+    id: content
 
-    Rectangle {
-        anchors.fill: parent
-        id: listContainer
-
-        ScrollableListView {
-            anchors.fill: parent
-            id: list
-            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')
-                    }
-                ]
-            }
-        }
-    }
-
-    PopupShadow {
-        anchors.fill: listContainer
-        source: listContainer
-        visible: true
-    }
+    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
+
+    menuClosed()
+  }
+
+  function _showMenu () {
+    menu.show()
+    shadow.visible = true
+
+    menuOpened()
+  }
+
+  implicitHeight: searchField.height
+
+  Item {
+    implicitHeight: searchField.height + menu.height
+    width: parent.width
+
+    TextField {
+      id: searchField
+
+      background: SearchBoxStyle.searchFieldBackground
+      width: parent.width
+
+      Keys.onEscapePressed: _hideMenu()
+
+      onActiveFocusChanged: activeFocus && _showMenu()
+      onTextChanged: searchTextChanged(text)
     }
 
-    function _showMenu () {
-        menu.show()
-        shadow.visible = true
+    DropDownMenu {
+      id: menu
 
-        menuOpened()
+      anchors.top: searchField.bottom
+      width: searchField.width
+      z: Constants.zPopup
+
+      Keys.onEscapePressed: _hideMenu()
+
+      ScrollableListView {
+        id: list
+
+        anchors.fill: parent
+      }
     }
 
-    implicitHeight: searchField.height
+    InvertedMouseArea {
+      enabled: menu.visible
+      height: parent.height
+      parent: parent
+      width: parent.width
 
-    Item {
-        implicitHeight: searchField.height + menu.height
-        width: parent.width
-
-        TextField {
-            id: searchField
-
-            background: SearchBoxStyle.searchFieldBackground
-            width: parent.width
-
-            Keys.onEscapePressed: _hideMenu()
-
-            onActiveFocusChanged: activeFocus && _showMenu()
-            onTextChanged: searchTextChanged(text)
-        }
-
-        DropDownMenu {
-            id: menu
-
-            anchors.top: searchField.bottom
-            width: searchField.width
-            z: Constants.zPopup
-
-            Keys.onEscapePressed: _hideMenu()
-        }
-
-        InvertedMouseArea {
-            enabled: menu.visible
-            height: parent.height
-            parent: parent
-            width: parent.width
-
-            onPressed: _hideMenu()
-        }
-
-        PopupShadow {
-            id: shadow
-
-            anchors.fill: searchField
-            source: searchField
-            visible: false
-        }
+      onPressed: _hideMenu()
     }
+
+    PopupShadow {
+      id: shadow
+
+      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
+  }
 }

tests/ui/views/MainWindow/MainWindow.qml

@@ -7,186 +7,291 @@ import Linphone 1.0
 import 'qrc:/ui/scripts/utils.js' as Utils
 
 ApplicationWindow {
-    id: mainWindow
-    maximumHeight: 70
-    minimumHeight: 70
-    minimumWidth: 780
-    title: 'Linphone'
-    visible: true
+  id: mainWindow
+  maximumHeight: 70
+  minimumHeight: 70
+  minimumWidth: 780
+  title: 'Linphone'
+  visible: true
 
-    header: ToolBar {
-        background: Rectangle {
-            color: '#EAEAEA'
-        }
-        height: 70
-
-        RowLayout {
-            anchors.fill: parent
-            anchors.leftMargin: 20
-            anchors.rightMargin: 20
-            spacing: 20
-
-            // Collapse.
-            Collapse {
-                Layout.preferredWidth: 25
-                Layout.fillHeight: parent.height
-                id: collapse
-
-                onCollapsed: mainWindowStates.state = isCollapsed()
-                    ? 'collapsed'
-                    : ''
-            }
-
-            // User info.
-            ContactDescription {
-                Layout.fillHeight: parent.height
-                Layout.preferredWidth: 200
-                sipAddress: 'e.miller@sip-linphone.org'
-                username: 'Edward Miller'
-            }
-
-            // User actions.
-            ActionButton {
-                Layout.preferredWidth: 16
-                onClicked: Utils.openWindow('ManageAccounts', mainWindow)
-            }
-
-            ActionButton {
-                Layout.preferredWidth: 16
-                onClicked: Utils.openWindow('NewCall', mainWindow)
-            }
-
-            // Search.
-            SearchBox {
-                Layout.fillWidth: true
-                maxMenuHeight: 300 // See Hick's law for good choice.
-                placeholderText: qsTr('mainSearchBarPlaceholder')
-
-                onMenuClosed: content.enabled = true
-
-                onMenuOpened: {
-                    if (!collapse.isCollapsed()) {
-                        collapse.collapse()
-                    }
-                    content.enabled = false
-                }
-            }
-
-            // Start conference.
-            ActionButton {
-                Layout.preferredWidth: 32
-                Layout.preferredHeight: 32
-                icon: 'conference'
-            }
-        }
+  header: ToolBar {
+    background: Rectangle {
+      color: '#EAEAEA'
     }
+    height: 70
 
     RowLayout {
-        anchors.fill: parent
-        id: content
-        spacing: 0
+      anchors.fill: parent
+      anchors.leftMargin: 20
+      anchors.rightMargin: 20
+      spacing: 20
 
-        // Main menu.
-        ColumnLayout {
-            Layout.fillHeight: true
-            Layout.maximumWidth: 250
-            Layout.preferredWidth: 250
-            spacing: 0
+      // Collapse.
+      Collapse {
+        Layout.preferredWidth: 25
+        Layout.fillHeight: parent.height
+        id: collapse
 
-            Menu {
-                entryHeight: 50
-                entryWidth: parent.width
+        onCollapsed: mainWindowStates.state = isCollapsed()
+          ? 'collapsed'
+          : ''
+      }
 
-                entries: [{
-                    entryName: qsTr('homeEntry'),
-                    icon: 'home'
-                }, {
-                    entryName: qsTr('contactsEntry'),
-                    icon: 'contacts_list'
-                }]
+      // User info.
+      ContactDescription {
+        Layout.fillHeight: parent.height
+        Layout.preferredWidth: 200
+        sipAddress: 'e.miller@sip-linphone.org'
+        username: 'Edward Miller'
+      }
 
-                onEntrySelected: {
-                    console.log('entry', entry)
-                }
-            }
+      // User actions.
+      ActionButton {
+        Layout.preferredWidth: 16
+        onClicked: Utils.openWindow('ManageAccounts', mainWindow)
+      }
 
-            // History.
-            Timeline {
-                Layout.fillHeight: true
-                Layout.fillWidth: true
+      ActionButton {
+        Layout.preferredWidth: 16
+        onClicked: Utils.openWindow('NewCall', mainWindow)
+      }
 
-                model: ListModel {
-                    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'
-                    }
-                }
-            }
-            // Logo.
-            Rectangle {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 70
-                color: '#EAEAEA'
-            }
+      // Search.
+      SearchBox {
+        Layout.fillWidth: true
+        maxMenuHeight: 300 // See Hick's law for good choice.
+        placeholderText: qsTr('mainSearchBarPlaceholder')
+        entryHeight: 50
+
+        onMenuClosed: content.enabled = true
+
+        onMenuOpened: {
+          if (!collapse.isCollapsed()) {
+            collapse.collapse()
+          }
+          content.enabled = false
         }
 
-        // Main content.
-        Loader {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            source: 'qrc:/ui/views/MainWindow/Contacts.qml'
+        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')
+            }
+          ]
+        }
+      }
+
+      // Start conference.
+      ActionButton {
+        Layout.preferredWidth: 32
+        Layout.preferredHeight: 32
+        icon: 'conference'
+      }
+    }
+  }
+
+  RowLayout {
+    anchors.fill: parent
+    id: content
+    spacing: 0
+
+    // Main menu.
+    ColumnLayout {
+      Layout.fillHeight: true
+      Layout.maximumWidth: 250
+      Layout.preferredWidth: 250
+      spacing: 0
+
+      Menu {
+        entryHeight: 50
+        entryWidth: parent.width
+
+        entries: [{
+          entryName: qsTr('homeEntry'),
+          icon: 'home'
+        }, {
+          entryName: qsTr('contactsEntry'),
+          icon: 'contacts_list'
+        }]
+
+        onEntrySelected: {
+          console.log('entry', entry)
+        }
+      }
+
+      // History.
+      Timeline {
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+
+        model: ListModel {
+          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'
+          }
+        }
+      }
+      // Logo.
+      Rectangle {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 70
+        color: '#EAEAEA'
+      }
     }
 
-    StateGroup {
-        id: mainWindowStates
-
-        states: State {
-            name: 'collapsed'
-
-            PropertyChanges {
-                height: 480
-                maximumHeight: 99999
-                maximumWidth: 99999
-                minimumHeight: 480
-                target: mainWindow
-            }
-        }
+    // Main content.
+    Loader {
+      Layout.fillHeight: true
+      Layout.fillWidth: true
+      source: 'qrc:/ui/views/MainWindow/Contacts.qml'
     }
+  }
+
+  StateGroup {
+    id: mainWindowStates
+
+    states: State {
+      name: 'collapsed'
+
+      PropertyChanges {
+        height: 480
+        maximumHeight: 99999
+        maximumWidth: 99999
+        minimumHeight: 480
+        target: mainWindow
+      }
+    }
+  }
 }