1 files changed, 117 insertions, 33 deletions
diff --git a/examples/declarative/modelviews/visualdatamodel/ComposerBubble.qml b/examples/declarative/modelviews/visualdatamodel/ComposerBubble.qml
index ed77d5d53c..ee988e8531 100644
--- a/examples/declarative/modelviews/visualdatamodel/ComposerBubble.qml
+++ b/examples/declarative/modelviews/visualdatamodel/ComposerBubble.qml
@@ -1,54 +1,138 @@
 import QtQuick 2.0
 
-Bubble {
-    id: composerBubble
+Rectangle {
+    id: composer
 
     property bool sending: false
-    property int messageId
-    property bool composing: true
+    property bool sent: false
+    property int margin: senderText.height + 1
+    property int messageId;
+    property string sender
+    property url avatar
 
-    signal sent;
+    function send() {
+        timeText.text = Qt.formatTime(Date.now())
+        sending = true
+        sendText.visible = false
+        sendArea.enabled = false
+        messageText.focus = false
+        messageText.activeFocusOnPress = false
 
-    outbound: true
-    message: messageInput.text
+        root.send()
+    }
 
-    gradient: Gradient {
-        GradientStop { position: 0.0; color: "#C1CDCD" }
-        GradientStop {
-            position: 1.0
-            SequentialAnimation on position {
-                running: sending
-                alwaysRunToEnd: true
-                loops: Animation.Infinite
-                NumberAnimation { duration: 1000; from: 1.0; to: 0.1 }
-                NumberAnimation { duration: 1000; from: 0.1; to: 1.0 }
-            }
-            color: "#F8F8FF"
-        }
-        GradientStop { position: 1.0; color: "#F8F8FF" }
+    border.width: 1
+    border.color:  "#404040"
+    color: "#202020"
+
+    x: 1
+    width:  477
+    height: Math.max(messageText.implicitHeight, 48) + senderText.implicitHeight + 6
+
+    Behavior on height {
+        NumberAnimation { duration: 500 }
     }
 
     Timer {
         interval: Math.random() * 20000
-        running: composerBubble.sending
+        running: composer.sending
         onTriggered: {
-            composerBubble.sending = false
-            composerBubble.sent()
+            composer.sending = false
+            composer.sent = true
+            messageModel.append({
+                "messageId": messageId,
+                "sender": sender,
+                "message": messageText.text,
+                "time": timeText.text,
+                "outbound": true,
+                "avatar": avatar
+            })
+        }
+    }
+
+    Item {
+        id: avatarItem
+
+        width: 48; height: 48
+        anchors { right: parent.right; top: parent.top; topMargin: 3; rightMargin: 2 }
+        Image {
+            id: avatarImage
+            height: 48
+            anchors.centerIn: parent
+            sourceSize.width: 48
+
+            source: avatar != "" ? avatar : "images/face-smile.png"
+
+            SequentialAnimation on opacity {
+                loops: Animation.Infinite
+                running:  composer.sending
+                alwaysRunToEnd: true
+                NumberAnimation {
+                    from: 1.0; to: 0.0
+                    duration: 5000
+                }
+                NumberAnimation {
+                    from: 0.0; to: 1.0
+                    duration: 5000
+                }
+            }
+
+        }
+        Rectangle {
+            anchors { fill: parent; rightMargin: 1; bottomMargin: 1 }
+
+            color:  "#000000"
+
+            opacity: sendArea.pressed ? 0.5 : (composer.sending || composer.sent ? 0.0 : 1.0)
+
+            Behavior on opacity { NumberAnimation { duration: 150 } }
+
+            Text {
+                id: sendText
+                anchors.fill: parent
+                text: "Send"
+
+                color: "#FFFFFF"
+                font.pixelSize: 16
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+
+            MouseArea {
+                id: sendArea
+
+                anchors.fill: parent
+
+                onClicked:  composer.send()
+            }
         }
     }
 
-    TextInput {
-        id: messageInput
+    TextEdit {
+        id: messageText
 
-        anchors.fill: parent
+        anchors { left: parent.left; top: parent.top; right: avatarItem.left; margins: 2 }
+        color: "#FFFFFF"
+        font.pixelSize: 18
+        wrapMode: Text.WordWrap
+        focus: true
 
-        focus: composing
-        activeFocusOnPress: composing
-        opacity: 0.0
-        selectByMouse: false
+        Keys.onReturnPressed: composer.send()
+        Keys.onEnterPressed: composer.send()
+    }
 
-        onAccepted: root.send()
+    Text {
+        id: senderText
+        anchors { left: parent.left; bottom: parent.bottom; margins: 2 }
+        color: "#DDDDDD"
+        font.pixelSize: 12
+        text: root.sender
     }
 
-    onSent: messageModel.append({ "messageId": messageId, "outbound": outbound, "sender": sender, "message": message })
+    Text {
+        id: timeText
+        anchors { right: parent.right; bottom: parent.bottom; margins: 2 }
+        color: "#DDDDDD"
+        font.pixelSize:  12
+    }
 }