import QtQuick 1.1 Component { Rectangle { id: rectangle property real bodyOpacity : 0 radius: 10 x: level * 15 height: column.height + 10 width: messagesRectangle.width - x Column { id: column x: 5 anchors.verticalCenter: parent.verticalCenter state: "Body" Text { text: "From: " + "" + from + "" textFormat: Text.RichText width: rectangle.width wrapMode: Text.WordWrap } Text { text: "To: " + to width: rectangle.width wrapMode: Text.WordWrap } Text { text: "Subject: " + subject width: rectangle.width wrapMode: Text.WordWrap } Text { text: "Date: " + date width: rectangle.width } Text { text: "Tags: " + "" + tags + "" textFormat: Text.StyledText width: rectangle.width wrapMode: Text.WordWrap } Rule { width: rectangle.width - 10 height: 15 thickness: 1 opacity: rectangle.bodyOpacity } Text { text: body opacity: rectangle.bodyOpacity width: rectangle.width wrapMode: Text.WordWrap } states: State { name: "Body" PropertyChanges { target: rectangle; bodyOpacity: 1 } } transitions: Transition { NumberAnimation { duration: 100; properties: "bodyOpacity,height" } } } MouseArea { anchors.fill: parent onClicked: column.state = "Body" } TextButton { y: 10 anchors { right: rectangle.right; rightMargin: 10 } opacity: rectangle.bodyOpacity text: "Close" onClicked: column.state = '' } } }