feat(app): add many links between components

tests/languages/en.ts

@@ -119,7 +119,7 @@
     </message>
     <message>
         <source>addContact</source>
-        <translation></translation>
+        <translation>ADD CONTACTS</translation>
     </message>
     <message>
         <source>displayTooltip</source>

tests/languages/fr.ts

@@ -119,7 +119,7 @@
     </message>
     <message>
         <source>addContact</source>
-        <translation></translation>
+        <translation>AJOUTER CONTACTS</translation>
     </message>
     <message>
         <source>displayTooltip</source>

tests/ui/modules/Linphone/Chat/Chat.qml

@@ -118,10 +118,10 @@ ScrollableListView {
                 id: loader
                 source: $type === 'message'
                     ? (
-                        'qrc:/ui/Linphone/Chat/' +
+                        'qrc:/ui/modules/Linphone/Chat/' +
                             ($outgoing ? 'Outgoing' : 'Incoming') +
                             'Message.qml'
-                    ) : 'qrc:/ui/Linphone/Chat/Event.qml'
+                    ) : 'qrc:/ui/modules/Linphone/Chat/Event.qml'
             }
         }
 

tests/ui/modules/Linphone/Menu.qml

@@ -24,10 +24,10 @@ ColumnLayout {
     model: entries
 
     Rectangle {
-      color: _selectedEntry === index
-        ? MenuStyle.entry.color.selected
-        : (mouseArea.pressed
-           ? MenuStyle.entry.color.pressed
+      color: mouseArea.pressed
+        ? MenuStyle.entry.color.pressed
+        : (_selectedEntry === index
+           ? MenuStyle.entry.color.selected
            : (mouseArea.containsMouse
               ? MenuStyle.entry.color.hovered
               : MenuStyle.entry.color.normal
@@ -76,10 +76,8 @@ ColumnLayout {
         hoverEnabled: true
 
         onClicked: {
-          if (_selectedEntry !== index) {
-            _selectedEntry = index
-            entrySelected(index)
-          }
+          _selectedEntry = index
+          entrySelected(index)
         }
       }
     }

tests/ui/views/MainWindow/Contact.qml

@@ -5,86 +5,86 @@ import QtQuick.Layouts 1.3
 import Linphone 1.0
 
 ColumnLayout  {
-    spacing: 0
+  spacing: 0
 
-    Rectangle {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 102
-        color: '#D1D1D1'
+  Rectangle {
+    Layout.fillWidth: true
+    Layout.preferredHeight: 102
+    color: '#D1D1D1'
 
-        RowLayout {
-            anchors.left: parent.left
-            anchors.leftMargin: 40
-            anchors.right: parent.right
-            anchors.rightMargin: 10
-            anchors.verticalCenter: parent.verticalCenter
-            height: 80
-            spacing: 0
-            width: parent.width
+    RowLayout {
+      anchors.left: parent.left
+      anchors.leftMargin: 40
+      anchors.right: parent.right
+      anchors.rightMargin: 10
+      anchors.verticalCenter: parent.verticalCenter
+      height: 80
+      spacing: 0
+      width: parent.width
 
-            Avatar {
-                Layout.fillHeight: true
-                Layout.preferredWidth: 80
-                Layout.rightMargin: 30
-                presence: 'connected' // TODO: Use C++.
-                username: 'Cameron Andrews' // TODO: Use C++.
-            }
+      Avatar {
+        Layout.fillHeight: true
+        Layout.preferredWidth: 80
+        Layout.rightMargin: 30
+        presence: 'connected' // TODO: Use C++.
+        username: 'Cameron Andrews' // TODO: Use C++.
+      }
 
-            // TODO: Replace by text edit.
-            // Component: EditableContactDescription.
-            ContactDescription {
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-                username: 'Cameron Andrews' // TODO: Use C++.
-            }
-
-            ActionBar {
-                iconSize: 32
-                Layout.alignment: Qt.AlignBottom | Qt.AlignRight
-
-                ActionButton {
-                    icon: 'delete'
-                    onClicked: console.log('clicked!!!')
-                }
-
-                ActionButton {
-                    icon: 'contact'
-                    onClicked: console.log('clicked!!!')
-                }
-            }
-        }
-    }
-
-    Flickable {
+      // TODO: Replace by text edit.
+      // Component: EditableContactDescription.
+      ContactDescription {
         Layout.fillHeight: true
         Layout.fillWidth: true
-        ScrollBar.vertical: ForceScrollBar { }
-        boundsBehavior: Flickable.StopAtBounds
-        clip: true
-        contentHeight: content.height
-        flickableDirection: Flickable.VerticalFlick
+        username: 'Cameron Andrews' // TODO: Use C++.
+      }
 
-        ColumnLayout {
-            anchors.left: parent.left
-            anchors.margins: 20
-            anchors.right: parent.right
-            id: content
+      ActionBar {
+        iconSize: 32
+        Layout.alignment: Qt.AlignBottom | Qt.AlignRight
 
-            ListForm {
-                title: qsTr('sipAccounts')
-            }
-
-            ListForm {
-                title: qsTr('address')
-            }
-
-            ListForm {
-                title: qsTr('emails')
-            }
-
-            ListForm {
-                title: qsTr('webSites')
-            }
+        ActionButton {
+          icon: 'history'
+          onClicked: window.setView('Conversation')
         }
+
+        ActionButton {
+          icon: 'delete'
+          onClicked: console.log('clicked!!!')
+        }
+      }
     }
+  }
+
+  Flickable {
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    ScrollBar.vertical: ForceScrollBar { }
+    boundsBehavior: Flickable.StopAtBounds
+    clip: true
+    contentHeight: content.height
+    flickableDirection: Flickable.VerticalFlick
+
+    ColumnLayout {
+      anchors.left: parent.left
+      anchors.margins: 20
+      anchors.right: parent.right
+      id: content
+
+      ListForm {
+        title: qsTr('sipAccounts')
+      }
+
+      ListForm {
+        title: qsTr('address')
+      }
+
+      ListForm {
+        title: qsTr('emails')
+      }
+
+      ListForm {
+        title: qsTr('webSites')
+      }
+    }
+  }
 }

tests/ui/views/MainWindow/Contacts.qml

@@ -7,247 +7,252 @@ import Linphone 1.0
 import 'qrc:/ui/scripts/utils.js' as Utils
 
 ColumnLayout {
-    spacing: 2
+  spacing: 2
 
-    // Search bar.
-    Item {
+  // Search bar.
+  Item {
+    Layout.fillWidth: true
+    Layout.preferredHeight: 50
+    anchors.left: parent.left
+    anchors.leftMargin: 18
+    anchors.right: parent.right
+    anchors.rightMargin: 18
+
+    RowLayout {
+      anchors.verticalCenter: parent.verticalCenter
+      height: 30
+      spacing: 20
+      width: parent.width
+
+      // TODO: Replace by top-level component.
+      TextField {
         Layout.fillWidth: true
-        Layout.preferredHeight: 50
-        anchors.left: parent.left
-        anchors.leftMargin: 18
-        anchors.right: parent.right
-        anchors.rightMargin: 18
-
-        RowLayout {
-            anchors.verticalCenter: parent.verticalCenter
-            height: 30
-            spacing: 20
-            width: parent.width
-
-            // TODO: Replace by top-level component.
-            TextField {
-                Layout.fillWidth: true
-                background: Rectangle {
-                    color: '#EAEAEA'
-                    implicitHeight: 30
-                }
-                placeholderText: qsTr('searchContactPlaceholder')
-            }
-
-            ExclusiveButtons {
-                texts: [
-                    qsTr('selectAllContacts'),
-                    qsTr('selectConnectedContacts')
-                ]
-            }
-
-            TextButtonB {
-                text: qsTr('addContact')
-            }
+        background: Rectangle {
+          color: '#EAEAEA'
+          implicitHeight: 30
         }
+        placeholderText: qsTr('searchContactPlaceholder')
+      }
+
+      ExclusiveButtons {
+        texts: [
+          qsTr('selectAllContacts'),
+          qsTr('selectConnectedContacts')
+        ]
+      }
+
+      TextButtonB {
+        text: qsTr('addContact')
+
+        onClicked: window.setView('Contact')
+      }
     }
+  }
 
-    // Contacts list.
-    Rectangle {
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-        color: '#F5F5F5'
+  // Contacts list.
+  Rectangle {
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+    color: '#F5F5F5'
 
-        ScrollableListView {
+    ScrollableListView {
+      anchors.fill: parent
+      spacing: 2
+
+      // TODO: Remove, use C++ model instead.
+      model: ListModel {
+        ListElement {
+          $image: ''
+          $presence: 'connected'
+          $username: 'Isabella Ahornton'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'connected'
+          $username: 'Mary Boreno'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'disconnected'
+          $username: 'Cecelia Cyler'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'absent'
+          $username: 'Daniel Elliott'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'do_not_disturb'
+          $username: 'Effie Forton'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'do_not_disturb'
+          $username: 'Agnes Hurner'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'disconnected'
+          $username: 'Luke Leming'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'connected'
+          $username: 'Olga Manning'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'connected'
+          $username: 'Isabella Ahornton'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'connected'
+          $username: 'Mary Boreno'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'disconnected'
+          $username: 'Cecelia Cyler'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'disconnected'
+          $username: 'Toto'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'absent'
+          $username: 'Daniel Elliott'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'do_not_disturb'
+          $username: 'Effie Forton'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'do_not_disturb'
+          $username: 'Agnes Hurner'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'disconnected'
+          $username: 'Luke Leming'
+        }
+        ListElement {
+          $image: ''
+          $presence: 'connected'
+          $username: 'Olga Manning'
+        }
+      }
+      delegate: Rectangle {
+        color: '#FFFFFF'
+        height: 50
+        id: contact
+        width: parent.width
+
+        MouseArea {
+          anchors.fill: parent
+          hoverEnabled: true
+          onEntered: contact.state = 'hover'
+          onExited: contact.state = ''
+        }
+
+        Item {
+          anchors.verticalCenter: parent.verticalCenter
+          height: 30
+          width: parent.width
+
+          RowLayout {
             anchors.fill: parent
-            spacing: 2
+            anchors.leftMargin: 15
+            anchors.rightMargin: 25
+            spacing: 15
 
-            // TODO: Remove, use C++ model instead.
-            model: ListModel {
-                ListElement {
-                    $image: ''
-                    $presence: 'connected'
-                    $username: 'Isabella Ahornton'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'connected'
-                    $username: 'Mary Boreno'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'disconnected'
-                    $username: 'Cecelia Cyler'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'absent'
-                    $username: 'Daniel Elliott'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'do_not_disturb'
-                    $username: 'Effie Forton'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'do_not_disturb'
-                    $username: 'Agnes Hurner'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'disconnected'
-                    $username: 'Luke Leming'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'connected'
-                    $username: 'Olga Manning'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'connected'
-                    $username: 'Isabella Ahornton'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'connected'
-                    $username: 'Mary Boreno'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'disconnected'
-                    $username: 'Cecelia Cyler'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'disconnected'
-                    $username: 'Toto'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'absent'
-                    $username: 'Daniel Elliott'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'do_not_disturb'
-                    $username: 'Effie Forton'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'do_not_disturb'
-                    $username: 'Agnes Hurner'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'disconnected'
-                    $username: 'Luke Leming'
-                }
-                ListElement {
-                    $image: ''
-                    $presence: 'connected'
-                    $username: 'Olga Manning'
-                }
+            // Avatar.
+            Avatar {
+              Layout.fillHeight: parent.height
+              Layout.preferredWidth: 30
+              image: $image
+              username: $username
             }
-            delegate: Rectangle {
-                color: '#FFFFFF'
-                height: 50
-                id: contact
-                width: parent.width
 
-                MouseArea {
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    onEntered: contact.state = 'hover'
-                    onExited: contact.state = ''
-                }
+            // Presence.
+            Item {
+              Layout.fillHeight: parent.height
+              Layout.preferredWidth: 20
 
-                Item {
-                    anchors.verticalCenter: parent.verticalCenter
-                    height: 30
-                    width: parent.width
-
-                    RowLayout {
-                        anchors.fill: parent
-                        anchors.leftMargin: 15
-                        anchors.rightMargin: 25
-                        spacing: 15
-
-                        // Avatar.
-                        Avatar {
-                            Layout.fillHeight: parent.height
-                            Layout.preferredWidth: 30
-                            image: $image
-                            username: $username
-                        }
-
-                        // Presence.
-                        Item {
-                            Layout.fillHeight: parent.height
-                            Layout.preferredWidth: 20
-
-                            Image {
-                                anchors.fill: parent
-                                fillMode: Image.PreserveAspectFit
-                                source: 'qrc:/imgs/led_' + $presence + '.svg'
-                            }
-                        }
-
-                        // Username.
-                        Item {
-                            Layout.fillHeight: parent.height
-                            Layout.fillWidth: true
-
-                            Text {
-                                anchors.fill: parent
-                                clip: true
-                                color: '#5A585B'
-                                font.bold: true
-                                text: $username
-                                verticalAlignment: Text.AlignVCenter
-                            }
-                        }
-
-                        // Actions.
-                        Row {
-                            Layout.fillHeight: true
-                            id: actions
-                            spacing: 50
-                            visible: false
-
-                            ActionBar {
-                                iconSize: parent.height
-
-                                ActionButton {
-                                    icon: 'cam'
-                                }
-
-                                ActionButton {
-                                    icon: 'call'
-                                }
-
-                                ActionButton {
-                                    icon: 'chat'
-                                }
-                            }
-
-                            ActionButton {
-                                iconSize: parent.height
-                                icon: 'delete'
-                                onClicked: Utils.openConfirmDialog(contact, {
-                                    descriptionText: qsTr('removeContactDescription'),
-                                    exitHandler: function (status) {
-                                        console.log('remove contact', status)
-                                    },
-                                    title: qsTr('removeContactTitle')
-                                })
-                            }
-                        }
-                    }
-                }
-
-                states: State {
-                    name: 'hover'
-                    PropertyChanges { target: contact; color: '#D1D1D1' }
-                    PropertyChanges { target: actions; visible: true }
-                }
+              Image {
+                anchors.fill: parent
+                fillMode: Image.PreserveAspectFit
+                source: 'qrc:/imgs/led_' + $presence + '.svg'
+              }
             }
+
+            // Username.
+            Item {
+              Layout.fillHeight: parent.height
+              Layout.fillWidth: true
+
+              Text {
+                anchors.fill: parent
+                clip: true
+                color: '#5A585B'
+                font.bold: true
+                text: $username
+                verticalAlignment: Text.AlignVCenter
+              }
+            }
+
+            // Actions.
+            Row {
+              Layout.fillHeight: true
+              id: actions
+              spacing: 50
+              visible: false
+
+              ActionBar {
+                iconSize: parent.height
+
+                ActionButton {
+                  icon: 'cam'
+                }
+
+                ActionButton {
+                  icon: 'call'
+                }
+
+                ActionButton {
+                  icon: 'chat'
+
+                  onClicked: window.setView('Conversation')
+                }
+              }
+
+              ActionButton {
+                iconSize: parent.height
+                icon: 'delete'
+
+                onClicked: Utils.openConfirmDialog(contact, {
+                  descriptionText: qsTr('removeContactDescription'),
+                  exitHandler: function (status) {
+                    console.log('remove contact', status)
+                  },
+                  title: qsTr('removeContactTitle')
+                })
+              }
+            }
+          }
         }
+
+        states: State {
+          name: 'hover'
+          PropertyChanges { target: contact; color: '#D1D1D1' }
+          PropertyChanges { target: actions; visible: true }
+        }
+      }
     }
+  }
 }

tests/ui/views/MainWindow/Conversation.qml

@@ -5,147 +5,147 @@ import QtQuick.Layouts 1.3
 import Linphone 1.0
 
 ColumnLayout  {
-    spacing: 0
+  spacing: 0
 
-    // Contact bar.
-    Rectangle {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 102
-        color: '#D1D1D1'
+  // Contact bar.
+  Rectangle {
+    Layout.fillWidth: true
+    Layout.preferredHeight: 102
+    color: '#D1D1D1'
 
-        RowLayout {
-            anchors.left: parent.left
-            anchors.leftMargin: 40
-            anchors.right: parent.right
-            anchors.rightMargin: 40
-            anchors.verticalCenter: parent.verticalCenter
-            height: 80
-            spacing: 50
-            width: parent.width
+    RowLayout {
+      anchors.left: parent.left
+      anchors.leftMargin: 40
+      anchors.right: parent.right
+      anchors.rightMargin: 40
+      anchors.verticalCenter: parent.verticalCenter
+      height: 80
+      spacing: 50
+      width: parent.width
 
-            Avatar {
-                Layout.fillHeight: true
-                Layout.preferredWidth: 80
-                presence: 'connected' // TODO: Use C++.
-                username: 'Cameron Andrews' // TODO: Use C++.
-            }
+      Avatar {
+        Layout.fillHeight: true
+        Layout.preferredWidth: 80
+        presence: 'connected' // TODO: Use C++.
+        username: 'Cameron Andrews' // TODO: Use C++.
+      }
 
-            Column {
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-
-                // Contact description.
-                ContactDescription {
-                    height: parent.height * 0.60
-                    sipAddress: 'cam.andrews@sip.linphone.org' // TODO: Use C++.
-                    username: 'Cameron Andrews' // TODO: Use C++.
-                    width: parent.width
-                }
-
-                // Contact actions.
-                Row {
-                    height: parent.height * 0.40
-                    width: parent.width
-
-                    ActionBar {
-                        iconSize: 32
-                        width: parent.width / 2
-
-                        ActionButton {
-                            icon: 'cam'
-                            onClicked: console.log('clicked!!!')
-                        }
-
-                        ActionButton {
-                            icon: 'call'
-                            onClicked: console.log('clicked!!!')
-                        }
-                    }
-
-                    ActionBar {
-                        iconSize: 32
-                        layoutDirection: Qt.RightToLeft
-                        width: parent.width / 2
-
-                        ActionButton {
-                            icon: 'delete'
-                            onClicked: console.log('clicked!!!')
-                        }
-
-                        ActionButton {
-                            icon: 'contact'
-                            onClicked: console.log('clicked!!!')
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    // Messages/Calls filter.
-    Rectangle {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 40
-        color: '#C7C7C7'
-
-        Rectangle {
-            anchors.fill: parent
-            anchors.leftMargin: 1
-
-            ExclusiveButtons {
-                anchors.left: parent.left
-                anchors.leftMargin: 40
-                anchors.verticalCenter: parent.verticalCenter
-                texts: [
-                    qsTr('displayCallsAndMessages'),
-                    qsTr('displayCalls'),
-                    qsTr('displayMessages')
-                ]
-            }
-        }
-    }
-
-    Rectangle {
+      Column {
         Layout.fillHeight: true
         Layout.fillWidth: true
-        border.color: '#C7C7C7'
-        border.width: 1
-        id: messagesArea
 
-        Chat {
-            ScrollBar.vertical: ForceScrollBar { }
-            anchors.bottomMargin: messagesArea.border.width
-            anchors.fill: parent
-            anchors.topMargin: messagesArea.border.width
+        // Contact description.
+        ContactDescription {
+          height: parent.height * 0.60
+          sipAddress: 'cam.andrews@sip.linphone.org' // TODO: Use C++.
+          username: 'Cameron Andrews' // TODO: Use C++.
+          width: parent.width
         }
-    }
 
-    // Send area.
+        // Contact actions.
+        Row {
+          height: parent.height * 0.40
+          width: parent.width
+
+          ActionBar {
+            iconSize: 32
+            width: parent.width / 2
+
+            ActionButton {
+              icon: 'cam'
+              onClicked: console.log('clicked!!!')
+            }
+
+            ActionButton {
+              icon: 'call'
+              onClicked: console.log('clicked!!!')
+            }
+          }
+
+          ActionBar {
+            iconSize: 32
+            layoutDirection: Qt.RightToLeft
+            width: parent.width / 2
+
+            ActionButton {
+              icon: 'delete'
+              onClicked: console.log('clicked!!!')
+            }
+
+            ActionButton {
+              icon: 'contact'
+              onClicked: window.setView('Contact')
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Messages/Calls filter.
+  Rectangle {
+    Layout.fillWidth: true
+    Layout.preferredHeight: 40
+    color: '#C7C7C7'
+
     Rectangle {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 70
-        border.color: textArea.activeFocus ? '#8E8E8E' : '#C7C7C7'
-        border.width: 1
-        id: newMessageArea
+      anchors.fill: parent
+      anchors.leftMargin: 1
 
-        RowLayout {
-            anchors.fill: parent
-
-            Flickable {
-                Layout.preferredHeight: parent.height
-                Layout.fillWidth: true
-                ScrollBar.vertical: ScrollBar { }
-                TextArea.flickable: TextArea {
-                    id: textArea
-                    placeholderText: qsTr('newMessagePlaceholder')
-                    wrapMode: TextArea.Wrap
-                }
-            }
-
-            DropZone {
-                Layout.preferredHeight: parent.height - newMessageArea.border.width * 2
-                Layout.preferredWidth: 40
-            }
-        }
+      ExclusiveButtons {
+        anchors.left: parent.left
+        anchors.leftMargin: 40
+        anchors.verticalCenter: parent.verticalCenter
+        texts: [
+          qsTr('displayCallsAndMessages'),
+          qsTr('displayCalls'),
+          qsTr('displayMessages')
+        ]
+      }
     }
+  }
+
+  Rectangle {
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    border.color: '#C7C7C7'
+    border.width: 1
+    id: messagesArea
+
+    Chat {
+      ScrollBar.vertical: ForceScrollBar { }
+      anchors.bottomMargin: messagesArea.border.width
+      anchors.fill: parent
+      anchors.topMargin: messagesArea.border.width
+    }
+  }
+
+  // Send area.
+  Rectangle {
+    Layout.fillWidth: true
+    Layout.preferredHeight: 70
+    border.color: textArea.activeFocus ? '#8E8E8E' : '#C7C7C7'
+    border.width: 1
+    id: newMessageArea
+
+    RowLayout {
+      anchors.fill: parent
+
+      Flickable {
+        Layout.preferredHeight: parent.height
+        Layout.fillWidth: true
+        ScrollBar.vertical: ScrollBar { }
+        TextArea.flickable: TextArea {
+          id: textArea
+          placeholderText: qsTr('newMessagePlaceholder')
+          wrapMode: TextArea.Wrap
+        }
+      }
+
+      DropZone {
+        Layout.preferredHeight: parent.height - newMessageArea.border.width * 2
+        Layout.preferredWidth: 40
+      }
+    }
+  }
 }

tests/ui/views/MainWindow/Home.qml

@@ -6,56 +6,56 @@ import Linphone 1.0
 // ===================================================================
 
 ColumnLayout {
-    spacing: 0
+  spacing: 0
 
-    ColumnLayout {
-        Layout.alignment: Qt.AlignTop
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-        Layout.leftMargin: 50
-        Layout.topMargin: 50
-        spacing: 30
+  ColumnLayout {
+    Layout.alignment: Qt.AlignTop
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    Layout.leftMargin: 50
+    Layout.topMargin: 50
+    spacing: 30
 
-        // Invit friends.
-        Column {
-            spacing: 8
+    // Invit friends.
+    Column {
+      spacing: 8
 
-            Text {
-                color: '#5A585B'
-                font.bold: true
-                font.pointSize: 11
-                text: qsTr('invitContactQuestion')
-            }
+      Text {
+        color: '#5A585B'
+        font.bold: true
+        font.pointSize: 11
+        text: qsTr('invitContactQuestion')
+      }
 
-            TextButtonB {
-                text: qsTr('invitContact')
-            }
-        }
-
-        // Add contacts.
-        Column {
-            spacing: 8
-
-            Text {
-                color: '#5A585B'
-                font.bold: true
-                font.pointSize: 11
-                text: qsTr('addContactQuestion')
-            }
-
-            TextButtonB {
-                text: qsTr('addContact')
-            }
-        }
+      TextButtonB {
+        text: qsTr('invitContact')
+      }
     }
 
-    // Tooltip checkbox area.
-    CheckBoxText {
-        Layout.alignment: Qt.AlignBottom
-        Layout.fillWidth: true
-        Layout.leftMargin: 50
-        Layout.preferredHeight: 70
+    // Add contacts.
+    Column {
+      spacing: 8
 
-        text: qsTr('displayTooltip')
+      Text {
+        color: '#5A585B'
+        font.bold: true
+        font.pointSize: 11
+        text: qsTr('addContactQuestion')
+      }
+
+      TextButtonB {
+        text: qsTr('addContact')
+      }
     }
+  }
+
+  // Tooltip checkbox area.
+  CheckBoxText {
+    Layout.alignment: Qt.AlignBottom
+    Layout.fillWidth: true
+    Layout.leftMargin: 50
+    Layout.preferredHeight: 70
+
+    text: qsTr('displayTooltip')
+  }
 }

tests/ui/views/MainWindow/MainWindow.qml

@@ -7,7 +7,12 @@ import Linphone 1.0
 import 'qrc:/ui/scripts/utils.js' as Utils
 
 ApplicationWindow {
-  id: mainWindow
+  id: window
+
+  function setView (view) {
+    loaderContent.source = 'qrc:/ui/views/MainWindow/' + view + '.qml'
+  }
+
   maximumHeight: 70
   minimumHeight: 70
   minimumWidth: 780
@@ -32,7 +37,7 @@ ApplicationWindow {
         Layout.fillHeight: parent.height
         id: collapse
 
-        onCollapsed: mainWindowStates.state = isCollapsed()
+        onCollapsed: windowStates.state = isCollapsed()
           ? 'collapsed'
           : ''
       }
@@ -48,12 +53,12 @@ ApplicationWindow {
       // User actions.
       ActionButton {
         Layout.preferredWidth: 16
-        onClicked: Utils.openWindow('ManageAccounts', mainWindow)
+        onClicked: Utils.openWindow('ManageAccounts', window)
       }
 
       ActionButton {
         Layout.preferredWidth: 16
-        onClicked: Utils.openWindow('NewCall', mainWindow)
+        onClicked: Utils.openWindow('NewCall', window)
       }
 
       // Search.
@@ -212,6 +217,12 @@ ApplicationWindow {
 
         onEntrySelected: {
           console.log('entry', entry)
+
+          if (entry === 0) {
+            setView('Home')
+          } else if (entry === 1) {
+            setView('Contacts')
+          }
         }
       }
 
@@ -273,6 +284,8 @@ ApplicationWindow {
 
     // Main content.
     Loader {
+      id: loaderContent
+
       Layout.fillHeight: true
       Layout.fillWidth: true
       source: 'qrc:/ui/views/MainWindow/Home.qml'
@@ -280,7 +293,7 @@ ApplicationWindow {
   }
 
   StateGroup {
-    id: mainWindowStates
+    id: windowStates
 
     states: State {
       name: 'collapsed'
@@ -290,7 +303,7 @@ ApplicationWindow {
         maximumHeight: 99999
         maximumWidth: 99999
         minimumHeight: 480
-        target: mainWindow
+        target: window
       }
     }
   }