feat(Calls/Calls): add `Chat` in right panel (Note: Binding loop detected on...

feat(Calls/Calls): add `Chat` in right panel (Note: Binding loop detected on `implicitHeight` of `IncomingMessage` line 8)

tests/languages/en.ts

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE TS>
 <TS version="2.1">
+<context>
+    <name>Chat</name>
+    <message>
+        <source>newMessagePlaceholder</source>
+        <translation type="unfinished">Enter your message</translation>
+    </message>
+</context>
 <context>
     <name>ConfirmDialog</name>
     <message>
@@ -98,7 +105,7 @@
     </message>
     <message>
         <source>newMessagePlaceholder</source>
-        <translation>Enter your message</translation>
+        <translation type="vanished">Enter your message</translation>
     </message>
 </context>
 <context>

tests/languages/fr.ts

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE TS>
 <TS version="2.1">
+<context>
+    <name>Chat</name>
+    <message>
+        <source>newMessagePlaceholder</source>
+        <translation type="unfinished">Entrer votre message.</translation>
+    </message>
+</context>
 <context>
     <name>ConfirmDialog</name>
     <message>
@@ -98,7 +105,7 @@
     </message>
     <message>
         <source>newMessagePlaceholder</source>
-        <translation>Entrer votre message.</translation>
+        <translation type="vanished">Entrer votre message.</translation>
     </message>
 </context>
 <context>

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

@@ -5,132 +5,150 @@ import QtQuick.Layouts 1.3
 import Common 1.0
 import Linphone 1.0
 
-ScrollableListView {
-  id: chat
-
-  model: ListModel {
-    ListElement { $dateSection: 1465389121000; $outgoing: true; $timestamp: 1465389121000; $type: 'message'; $content: 'This is it: fefe efzzzzzzzzzz aaaaaaaaa erfeezffeefzfzefzefzezfefez wfef efef  e efeffefe fee efefefeefef fefefefefe eff fefefe fefeffww.linphone.org' }
-    ListElement { $dateSection: 1465389121000; $timestamp: 1465389133000; $type: 'event'; $content: 'incoming_call' }
-    ListElement { $dateSection: 1465389121000; $timestamp: 1465389439000; $type: 'message'; $content: 'Perfect!' }
-    ListElement { $dateSection: 1465389121000; $timestamp: 1465389500000; $type: 'event'; $content: 'hangup' }
-    ListElement { $dateSection: 1465994221000; $outgoing: true; $timestamp: 1465924321000; $type: 'message'; $content: 'You\'ve heard the expression, "Just believe it and it will come." Well, technically, that is true, however, \'believing\' is not just thinking that you can have it...' }
-    ListElement { $dateSection: 1465994221000; $timestamp: 1465924391000; $type: 'event'; $content: 'lost_incoming_call' }
-  }
-
-  Component {
-    id: sectionHeading
+ColumnLayout {
+  spacing: 0
+
+  ScrollableListView {
+    id: chat
+
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    model: ListModel {
+      ListElement { $dateSection: 1465389121000; $outgoing: true; $timestamp: 1465389121000; $type: 'message'; $content: 'This is it: fefe efzzzzzzzzzz aaaaaaaaa erfeezffeefzfzefzefzezfefez wfef efef  e efeffefe fee efefefeefef fefefefefe eff fefefe fefeffww.linphone.org' }
+      ListElement { $dateSection: 1465389121000; $timestamp: 1465389133000; $type: 'event'; $content: 'incoming_call' }
+      ListElement { $dateSection: 1465389121000; $timestamp: 1465389439000; $type: 'message'; $content: 'Perfect!' }
+      ListElement { $dateSection: 1465389121000; $timestamp: 1465389500000; $type: 'event'; $content: 'hangup' }
+      ListElement { $dateSection: 1465994221000; $outgoing: true; $timestamp: 1465924321000; $type: 'message'; $content: 'You\'ve heard the expression, "Just believe it and it will come." Well, technically, that is true, however, \'believing\' is not just thinking that you can have it...' }
+      ListElement { $dateSection: 1465994221000; $timestamp: 1465924391000; $type: 'event'; $content: 'lost_incoming_call' }
+    }
 
-    Item {
-      implicitHeight: text.height +
-        container.anchors.topMargin +
-        container.anchors.bottomMargin
-      width: parent.width
+    Component {
+      id: sectionHeading
 
       Item {
-        anchors.bottomMargin: 10
-        anchors.fill: parent
-        anchors.leftMargin: 18
-        anchors.topMargin: 20
-        id: container
-
-        Text {
-          color: '#434343'
-          font.bold: true
-          id: text
-
-          // Cast section to integer because Qt convert the
-          // $dateSection in string!!!
-          text: new Date(+section).toLocaleDateString(
-            Qt.locale()
-          )
+        implicitHeight: text.height +
+          container.anchors.topMargin +
+          container.anchors.bottomMargin
+        width: parent.width
+
+        Item {
+          anchors.bottomMargin: 10
+          anchors.fill: parent
+          anchors.leftMargin: 18
+          anchors.topMargin: 20
+          id: container
+
+          Text {
+            color: '#434343'
+            font.bold: true
+            id: text
+
+            // Cast section to integer because Qt convert the
+            // $dateSection in string!!!
+            text: new Date(+section).toLocaleDateString(
+              Qt.locale()
+            )
+          }
         }
       }
     }
-  }
 
-  section.criteria: ViewSection.FullString
-  section.delegate: sectionHeading
-  section.property: '$dateSection'
+    section.criteria: ViewSection.FullString
+    section.delegate: sectionHeading
+    section.property: '$dateSection'
 
-  delegate: Rectangle {
-    anchors.left: parent.left
-    anchors.leftMargin: 18
-    anchors.right: parent.right
-    anchors.rightMargin: 18
+    delegate: Rectangle {
+      anchors.left: parent.left
+      anchors.leftMargin: 18
+      anchors.right: parent.right
+      anchors.rightMargin: 18
 
-    // Unable to use `height` property.
-    // The height is given by message height.
-    implicitHeight: layout.height + 10
-    width: parent.width
+      // Unable to use `height` property.
+      // The height is given by message height.
+      implicitHeight: layout.height + 10
+      width: parent.width
 
-    MouseArea {
-      anchors.fill: parent
-      hoverEnabled: true
-      onEntered: parent.state = 'hover'
-      onExited: parent.state = ''
-    }
+      MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: parent.state = 'hover'
+        onExited: parent.state = ''
+      }
 
-    RowLayout {
-      id: layout
-      spacing: 0
+      RowLayout {
+        id: layout
+        spacing: 0
 
-      // The height is computed with the message height.
-      // Unable to use `height` and `implicitHeight` property.
-      width: parent.width
+        // The height is computed with the message height.
+        // Unable to use `height` and `implicitHeight` property.
+        width: parent.width
 
-      // Display time.
-      Text {
-        Layout.alignment: Qt.AlignTop
-        Layout.preferredHeight: 30
-        Layout.preferredWidth: 50
-        color: '#898989'
-        font.bold: $type === 'event'
-        text: new Date($timestamp).toLocaleString(
-          Qt.locale(),
-          'hh:mm'
-        )
-        verticalAlignment: Text.AlignVCenter
-      }
+        // Display time.
+        Text {
+          Layout.alignment: Qt.AlignTop
+          Layout.preferredHeight: 30
+          Layout.preferredWidth: 50
+          color: '#898989'
+          font.bold: $type === 'event'
+          text: new Date($timestamp).toLocaleString(
+            Qt.locale(),
+            'hh:mm'
+          )
+          verticalAlignment: Text.AlignVCenter
+        }
 
-      // Icons area.
-      Row {
-        Layout.alignment: Qt.AlignTop
-        Layout.preferredHeight: 30
-        Layout.preferredWidth: 54
-        spacing: 10
-
-        Icon {
-          anchors.verticalCenter: parent.verticalCenter
-          icon: ($type === 'event' && $content) || ''
-          iconSize: 16
+        // Icons area.
+        Row {
+          Layout.alignment: Qt.AlignTop
+          Layout.preferredHeight: 30
+          Layout.preferredWidth: 54
+          spacing: 10
+
+          Icon {
+            anchors.verticalCenter: parent.verticalCenter
+            icon: ($type === 'event' && $content) || ''
+            iconSize: 16
+          }
+
+          ActionButton {
+            anchors.verticalCenter: parent.verticalCenter
+            icon: 'delete'
+            iconSize: 16
+            id: removeAction
+            onClicked: chat.model.remove(index)
+            visible: false
+          }
         }
 
-        ActionButton {
-          anchors.verticalCenter: parent.verticalCenter
-          icon: 'delete'
-          iconSize: 16
-          id: removeAction
-          onClicked: chat.model.remove(index)
-          visible: false
+        // Display content.
+        Loader {
+          Layout.fillWidth: true
+          id: loader
+          source: $type === 'message'
+            ? (
+              'qrc:/ui/modules/Linphone/Chat/' +
+                ($outgoing ? 'Outgoing' : 'Incoming') +
+                'Message.qml'
+            ) : 'qrc:/ui/modules/Linphone/Chat/Event.qml'
         }
       }
 
-      // Display content.
-      Loader {
-        Layout.fillWidth: true
-        id: loader
-        source: $type === 'message'
-          ? (
-            'qrc:/ui/modules/Linphone/Chat/' +
-              ($outgoing ? 'Outgoing' : 'Incoming') +
-              'Message.qml'
-          ) : 'qrc:/ui/modules/Linphone/Chat/Event.qml'
+      states: State {
+        name: 'hover'
+        PropertyChanges { target: removeAction; visible: true }
       }
     }
+  }
 
-    states: State {
-      name: 'hover'
-      PropertyChanges { target: removeAction; visible: true }
+  Rectangle {
+    Layout.fillWidth: true
+    Layout.preferredHeight: 80
+    color: '#E2E9EF'
+
+    DroppableTextArea {
+      anchors.fill: parent
+      anchors.margins: 10
+      placeholderText: qsTr('newMessagePlaceholder')
     }
   }
 }

tests/ui/views/Calls/Calls.qml

@@ -44,13 +44,8 @@ Window {
       }
 
       // Chat.
-      childB: Rectangle {
+      childB: Chat {
         anchors.fill: parent
-        color: 'green'
-
-        Text {
-          text: 'hello2'
-        }
       }
     }
   }

tests/ui/views/MainWindow/Conversation.qml

@@ -110,25 +110,11 @@ ColumnLayout  {
     Layout.fillHeight: true
     Layout.fillWidth: true
     borderColor: '#C7C7C7'
-    bottomWidth: 1
     leftWidth: 1
     topWidth: 1
 
     Chat {
-      ScrollBar.vertical: ForceScrollBar { }
       anchors.fill: parent
     }
   }
-
-  Rectangle {
-    Layout.fillWidth: true
-    Layout.preferredHeight: 80
-    color: '#E2E9EF'
-
-    DroppableTextArea {
-      anchors.fill: parent
-      anchors.margins: 10
-      placeholderText: qsTr('newMessagePlaceholder')
-    }
-  }
 }