From 7a59aa64ffb9de42f74f0de5393fbdad7d4aef80 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Tue, 18 Oct 2016 15:54:26 +0200 Subject: [PATCH] fix(Chat/IncomingMessage): fix binding loop on `width`/`height` --- tests/ui/modules/Linphone/Chat/Chat.qml | 13 ++++++---- .../modules/Linphone/Chat/IncomingMessage.qml | 25 ++++++++----------- tests/ui/modules/Linphone/Chat/Message.qml | 11 +++++--- 3 files changed, 26 insertions(+), 23 deletions(-) diff --git a/tests/ui/modules/Linphone/Chat/Chat.qml b/tests/ui/modules/Linphone/Chat/Chat.qml index 25d5b2d3d..4fc23d21a 100644 --- a/tests/ui/modules/Linphone/Chat/Chat.qml +++ b/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/' + diff --git a/tests/ui/modules/Linphone/Chat/IncomingMessage.qml b/tests/ui/modules/Linphone/Chat/IncomingMessage.qml index c55507afb..3237e5777 100644 --- a/tests/ui/modules/Linphone/Chat/IncomingMessage.qml +++ b/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' } } diff --git a/tests/ui/modules/Linphone/Chat/Message.qml b/tests/ui/modules/Linphone/Chat/Message.qml index b35395a5a..472dbacbf 100644 --- a/tests/ui/modules/Linphone/Chat/Message.qml +++ b/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 } }