Source

wazapp / UI / SpeechBubble.qml

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.meego 1.0

Rectangle {

    id: bubble

    property string picture;
    property string message;
    property bool from_me;
    property string date;
    property string name;
    property int msg_id;
    property string state_status;

    state: state_status;



    width: parent.width
    height:msg_text.height+10+msg_date.height+sender_name.height+margin1.height+margin2.height;
    color:"transparent"

    states: [
        State {
            name: "sending"
            PropertyChanges {
                target: status
                source: "pics/indicators/sending_msg.png"
            }
        },
        State {
            name: "pending"
            PropertyChanges {
                target: status
                source: "pics/indicators/pending_msg.png"
            }
        },
        State {
            name: "delivered"
            PropertyChanges {
                target: status
                source: "pics/indicators/delivered_msg.png"
            }
        }
    ]

    /*Column{
        visible: !from_me
        width:80;
        height:80;
        anchors.right: realBubble.left
        anchors.top: realBubble.top
        anchors.rightMargin: 15

        Rectangle{

            height:parent.width
            width:parent.width
            color:"transparent"
            Image{
                id:sender_picture
                width:parent.width
                height:parent.height
                fillMode: Image.PreserveAspectFit
                opacity:appWindow.stealth?0.2:1
                Component.onCompleted: {
                    if(!from_me)
                        sender_picture.source=picture
                }
            }
        }
    }*/


    Rectangle
    {
        id:realBubble
        radius: 5
        width:  sizefy(msg_text.text.length) //parent.width-60
	height: parent.height
        color: "transparent" //appWindow.stealth?"transparent":(from_me?"#cfd2d4":"#42b6f2");
        //opacity:theme.inverted?0.7:1

	function sizefy (len) {
		var result = 0;

		var biggestText = Math.max(sender_name.text.length,msg_date.text.length);

		var maxText = Math.max(len,biggestText)

		
		if (len > 20) {
			result = bubble.width-60
		} else {
			result = msg_text.paintedWidth*maxText
			
		}
		if (msg_date.text.length > msg_text.text.length)
			result = msg_date.paintedWidth*maxText; 
		
		return result;	
	}

        anchors.right: from_me?this.right:parent.right
        anchors.left: !from_me?this.left:parent.left
        anchors.rightMargin: 5
        anchors.leftMargin: 5

        Image { id: img1; anchors.top:parent.top; anchors.left:parent.left; source: "pics/"+(from_me?"white":(theme.inverted?"green":"blue"))+"-1.png"; }
        Image { id: img2; anchors.top:parent.top; anchors.left:img1.right; source: "pics/"+(from_me?"white":(theme.inverted?"green":"blue"))+"-2.png";
                        width:parent.width-img1.width-img3.width; height:img1.height; smooth: true }
        Image { id: img3; anchors.top:parent.top; anchors.right:parent.right; source: "pics/"+(from_me?"white":(theme.inverted?"green":"blue"))+"-3.png"; }
        Image { id: img4; anchors.top:img1.bottom; anchors.left:parent.left; source: "pics/"+(from_me?"white":(theme.inverted?"green":"blue"))+"-4.png";
                        height:parent.height-img1.height-img6.height }
        Image { id: img5; anchors.top:img3.bottom; anchors.right:parent.right; source: "pics/"+(from_me?"white":(theme.inverted?"green":"blue"))+"-5.png";
                        height:img4.height}
        Image { id: img6; anchors.bottom:parent.bottom; anchors.left:parent.left; source: "pics/"+(from_me?"white":(theme.inverted?"green":"blue"))+"-6.png"; }
        Image { id: img7; anchors.bottom:parent.bottom; anchors.left:img6.right; source: "pics/"+(from_me?"white":(theme.inverted?"green":"blue"))+"-7.png";
                        width:img2.width; height:img6.height; smooth: true }
        Image { id: img8; anchors.bottom:parent.bottom; anchors.right:parent.right; source: "pics/"+(from_me?"white":(theme.inverted?"green":"blue"))+"-8.png"; }
        Image { id: imgC; anchors.top:img1.bottom; anchors.topMargin:0; anchors.left:img1.right; source: "pics/"+(from_me?"white":(theme.inverted?"green":"blue"))+"-c.png";
                        width:img2.width; height:img4.height; smooth: true}




        Image {
            id: status
            visible: from_me
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.top:parent.top
            anchors.topMargin: 12

        }
        Column{
            id:content
            //anchors.fill: parent;
            height:parent.height
            width:parent.width

            Rectangle {
                id: margin1; height: from_me? 4 : 14
                width: parent.width; color: "transparent"
            }

            Label{
                id:sender_name
                width:parent.width -20
                color:appWindow.stealth?colorPicker.color:(from_me?"black":"white")
                text:from_me?"You":name
                font.pixelSize: 20
                font.bold: true
                anchors.left: parent.left
                anchors.leftMargin: 10
				horizontalAlignment: from_me? Text.AlignLeft : Text.AlignRight
            }
            Label{
                id:msg_text
                text: linkify(message);
                color:appWindow.stealth?colorPicker.color:(from_me?"black":"white")
                width:parent.width - 20
                wrapMode: "WrapAtWordBoundaryOrAnywhere"
                anchors.left: parent.left
                anchors.leftMargin: 10
		horizontalAlignment: from_me? Text.AlignLeft : Text.AlignRight
		

		function linkify(inputText) {
    			var replacedText, replacePattern1, replacePattern2, replacePattern3;

    			//URLs starting with http://, https://, or ftp://
    			replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    			replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    			//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    			replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    			replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    			//Change email addresses to mailto:: links.
    			replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
    			replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    			return replacedText
		}
		onLinkActivated: Qt.openUrlExternally(link)
            }

            /*Separator{
                top_margin: 5;
                bottom_margin: 2;
                visible:!appWindow.stealth
            }*/

            Label{
                id:colorPicker
                visible:false
            }

            Label{
                id:msg_date
                color:appWindow.stealth?colorPicker.color:(from_me?"black":"white")
                text: date
                width:parent.width - 20
                anchors.left: parent.left
                anchors.leftMargin: 10
                font.pixelSize: 15
                horizontalAlignment: from_me? Text.AlignLeft : Text.AlignRight
                opacity: 0.7
            }

            Rectangle {
                id: margin2; height: from_me? 8 : 0
                width: parent.width; color: "transparent"
            }


        }

    }


}