fix(Chat/IncomingMessage): fix binding loop on width/height

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

@@ -16,7 +16,7 @@ ColumnLayout {
     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: 1465389439000; $type: 'message'; $content: 'Perfect! bg  g vg gv v g v hgv gv gv   jhb jh b  jb jh hg vg    cfcy f  v u  uyg   f tf tf  ft f tf t  t  fy ft f tu  ty f  rd rd  d d   uu gu y  gg y f  r dr   ' }
       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' }
@@ -58,15 +58,15 @@ ColumnLayout {
     section.property: '$dateSection'
 
     delegate: Rectangle {
-      anchors.left: parent.left
+      anchors.left: parent ? parent.left : undefined
       anchors.leftMargin: 18
-      anchors.right: parent.right
+      anchors.right: parent ? parent.right : undefined
       anchors.rightMargin: 18
 
       // Unable to use `height` property.
       // The height is given by message height.
       implicitHeight: layout.height + 10
-      width: parent.width
+      width: parent ? parent.width : 0
 
       MouseArea {
         anchors.fill: parent
@@ -77,6 +77,7 @@ ColumnLayout {
 
       RowLayout {
         id: layout
+
         spacing: 0
 
         // The height is computed with the message height.
@@ -122,8 +123,10 @@ ColumnLayout {
 
         // Display content.
         Loader {
-          Layout.fillWidth: true
           id: loader
+
+          Layout.fillWidth: true
+
           source: $type === 'message'
             ? (
               'qrc:/ui/modules/Linphone/Chat/' +

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

@@ -5,23 +5,20 @@ import Linphone 1.0
 
 // ===================================================================
 
-Item {
+RowLayout {
   implicitHeight: message.height
+  spacing: 10
 
-  RowLayout {
-    anchors.fill: parent
-    spacing: 10
+  Avatar {
+    Layout.alignment: Qt.AlignTop
+    Layout.preferredHeight: 30
+    Layout.preferredWidth: 30
+  }
 
-    Avatar {
-      Layout.alignment: Qt.AlignTop
-      Layout.preferredHeight: 30
-      Layout.preferredWidth: 30
-    }
+  Message {
+    id: message
 
-    Message {
-      Layout.fillWidth: true
-      backgroundColor: '#BFBFBF'
-      id: message
-    }
+    Layout.fillWidth: true
+    backgroundColor: '#BFBFBF'
   }
 }

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

@@ -3,15 +3,16 @@ import QtQuick 2.7
 // ===================================================================
 
 Item {
+  id: container
+
   default property alias content: content.data
   property alias backgroundColor: rectangle.color
 
-  id: container
   implicitHeight: text.contentHeight + text.padding * 2
-  width: parent.width - text.padding * 2
 
   Rectangle {
     id: rectangle
+
     height: parent.height
     radius: 4
     width: (
@@ -22,9 +23,10 @@ Item {
   }
 
   Text {
+    id: text
+
     anchors.left: container.left
     anchors.right: container.right
-    id: text
     padding: 8
     text: $content
     wrapMode: Text.Wrap
@@ -34,7 +36,8 @@ Item {
   }
 
   Item {
-    anchors.left: rectangle.right
     id: content
+
+    anchors.left: rectangle.right
   }
 }