Santiago Payà Miralta avatar Santiago Payà Miralta committed 41d02ed

Comments (0)

Files changed (51)

+import QtQuick 1.0
+
+Rectangle {
+
+    Component.onCompleted: state="opened"
+    id: bubble
+    property string message
+    property bool from_me
+    property string date
+    radius: 5
+
+    width: 300
+
+    states: State {
+        name: "opened"
+        PropertyChanges {
+            target: bubble
+            opacity:1
+
+        }
+
+        PropertyChanges {
+            target: content
+            opacity:1
+
+        }
+    }
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "opened"
+
+            SequentialAnimation{
+
+                NumberAnimation { target: bubble; property: "opacity";  duration: 150; easing.type: Easing.InOutQuad  }
+                NumberAnimation{target:content; property:"opacity"; duration:150}
+
+            }
+
+        }
+    ]
+
+    //height: msg_text.height+10+msg_date.height
+    height: msg_text.height+10+msg_date.height
+    opacity:0
+    color: from_me?"#cfd2d4":"#42b6f2";
+
+    anchors.right: from_me?this.right:parent.right
+    anchors.left: !from_me?this.left:parent.left
+    anchors.rightMargin: 5
+    anchors.leftMargin: 5
+
+    Column{
+        id:content
+        //anchors.fill: parent
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        width:parent.width
+        //anchors.right: parent.right
+        anchors.margins: 5
+        opacity: 0
+
+        Text{
+                id:msg_text
+                text:message;
+                color:from_me?"black":"white"
+                width:parent.width
+                wrapMode: "WrapAtWordBoundaryOrAnywhere"
+                anchors.left: parent.left
+                anchors.leftMargin: 5
+        }
+
+        Text{
+                id:msg_date
+
+                color:from_me?"black":"white"
+                text: Qt.formatDateTime(new Date(), "hh:mm")
+                anchors.right: parent.right
+                anchors.rightMargin: 5
+                font.pointSize: 7
+        }
+
+    }
+
+
+
+
+}
+import QtQuick 1.0
+
+Rectangle {
+
+    Component.onCompleted: state="opened"
+    id: bubble
+    property string message
+    property bool from_me
+    property string date
+    radius: 5
+
+    width: 300
+
+    states: State {
+        name: "opened"
+        PropertyChanges {
+            target: bubble
+            opacity:1
+
+        }
+
+        PropertyChanges {
+            target: content
+            opacity:1
+
+        }
+    }
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "opened"
+
+            SequentialAnimation{
+
+                NumberAnimation { target: bubble; property: "opacity";  duration: 150; easing.type: Easing.InOutQuad  }
+                NumberAnimation{target:content; property:"opacity"; duration:150}
+
+            }
+
+        }
+    ]
+
+    //height: msg_text.height+10+msg_date.height
+    height: msg_text.height+10+msg_date.height
+    opacity:0
+    color: from_me?"#cfd2d4":"#42b6f2";
+
+    anchors.right: from_me?this.right:parent.right
+    anchors.left: !from_me?this.left:parent.left
+    anchors.rightMargin: 5
+    anchors.leftMargin: 5
+
+    Column{
+        id:content
+        //anchors.fill: parent
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        width:parent.width
+        //anchors.right: parent.right
+        anchors.margins: 5
+        opacity: 0
+
+        Text{
+                id:msg_text
+                text:message;
+                color:from_me?"black":"white"
+                width:parent.width
+                wrapMode: "WrapAtWordBoundaryOrAnywhere"
+                anchors.left: parent.left
+                anchors.leftMargin: 5
+        }
+
+        Text{
+                id:msg_date
+
+                color:from_me?"black":"white"
+                text: Qt.formatDateTime(new Date(), "hh:mm")
+                anchors.right: parent.right
+                anchors.rightMargin: 5
+                font.pointSize: 7
+        }
+
+    }
+
+
+
+
+}
+// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
+import QtQuick 1.1
+import com.nokia.meego 1.0
+
+
+Rectangle{
+    id:container
+
+    property string picture:"none";
+    property string name:"User";
+    property string number:"number";
+    property string lastMsg:"Hello World!";
+    property string time:"00:00am"
+    property string formattedDate;
+    property int msgId;
+    property int msgType;
+    property string state_status
+
+    Component.onCompleted: {
+        if(msgType ==0){
+            state="received";
+        }
+
+    }
+
+    state:state_status == 0?"sending":(state_status ==1?"pending":"delivered")
+
+    signal clicked(string number);
+
+
+    height: 102;
+    //width: parent.width
+    //color: "#e6e6e6"
+    color:"transparent"
+
+    states: [
+        State {
+            name: "received"
+            PropertyChanges {
+                target: status
+                visible:false
+            }
+        },
+
+        State {
+            name: "sending"
+            PropertyChanges {
+                target: status
+                source: "pics/indicators/sending.png"
+            }
+            PropertyChanges {
+                target: status
+                visible:true
+            }
+        },
+        State {
+            name: "pending"
+            PropertyChanges {
+                target: status
+                source: "pics/indicators/pending.png"
+                 visible:true
+            }
+        },
+        State {
+            name: "delivered"
+            PropertyChanges {
+                target: status
+                source: "pics/indicators/delivered.png"
+                visible:true
+            }
+        }
+    ]
+
+    MouseArea{
+
+        id:mouseArea
+        anchors.fill: parent
+        //onClicked: {controls.opacity=1;container.height=80}
+        onClicked: container.clicked(number)
+    }
+
+	Rectangle {
+		anchors.fill: parent
+		color: theme.inverted? "darkgray" : "lightgray"
+		opacity: theme.inverted? 0.2 : 0.8
+		visible: mouseArea.pressed
+	}
+
+    Row
+    {
+        anchors.fill: parent
+        spacing: 10
+        anchors.topMargin: 10
+        anchors.leftMargin: 10
+        anchors.rightMargin: 10
+		height: 80
+		anchors.verticalCenter: parent.verticalCenter
+
+        //contact image
+        Rectangle{
+            width:80
+            height: 80
+            id:contact_picture_container
+            color:"transparent"
+			anchors.verticalCenter: parent.verticalCenter
+
+			RoundedImage {
+                id:contact_picture
+                size:80
+                imgsource: picture
+                x: 0; y: -4
+				opacity:appWindow.stealth?0.2:1
+            }
+
+			Image {
+	            id: status
+	            x: 64; y: 62
+	        }
+
+            /*Image {
+                id: contact_picture
+                source: picture;
+                //opacity:picture=="none"?0.2:1
+                width: parent.width
+                height:parent.height
+                fillMode: Image.PreserveAspectFit
+                opacity:appWindow.stealth?0.2:1
+
+            }*/
+
+            //anchors.margins: 10
+        }
+
+        Column{
+			id:last_msg_wrapper
+		    width:parent.width - 20
+			spacing: 0
+
+		    Label{
+		        id: contact_name
+		        text:name
+				font.bold: true
+				font.pointSize: 18
+				height: 30
+		    }
+
+            Label{
+                id:last_msg
+                text:lastMsg
+                elide: Text.ElideRight
+                font.pixelSize: 20
+                height: 30
+                verticalAlignment: Text.AlignVCenter
+            }
+
+            Label{
+                id:last_msg_time
+                text:formattedDate;
+                font.pixelSize: 16
+				color: "gray"
+				height: 30
+                //horizontalAlignment: Text.AlignRight
+                //anchors.right: parent.right
+                width:parent.width
+                //horizontalAlignment: Text.AlignRight
+
+            }
+		    
+        }
+    }
+
+
+
+}
+import QtQuick 1.1
+import com.nokia.meego 1.0
+
+import "chats.js" as ChatScript
+import "contacts.js" as ContactsScript
+Page {
+    Component.onCompleted: ChatScript.importChats()
+   // tools: commonTools
+   // anchors.fill: parent
+
+    id: chatsContainer
+    property alias indicator_state:wa_notifier.state
+
+    //width: parent.width
+    //anchors.fill: parent
+    //color: "#e6e6e6"
+
+    state:"no_data"
+
+    signal clicked(string number,string prev_state)
+
+    function setContacts(contacts){
+        ContactsScript.contacts = contacts;
+    }
+
+    function onMessageSent(msg_id){
+        var chatItemIndex = findChatItemIndex(msg_id);
+        if(chatItemIndex>=0){
+            var chatItem = chatsModel.get(chatItemIndex);
+
+
+              //chatsModel.remove(chatItemIndex);
+             //chatsModel.insert(chatItemIndex,chatItem);
+            //chatsModel.set(chatItemIndex,chatItem)
+
+            chatItem.status = 1
+
+        }
+
+
+    }
+
+    function onMessageDelivered(msg_id){
+        var chatItemIndex = findChatItemIndex(msg_id);
+        if(chatItemIndex>=0){
+            var chatItem = chatsModel.get(chatItemIndex);
+
+            chatItem.status = 2
+        }
+    }
+
+    function findChatItemIndex(msg_id){
+
+        for (var i=0; i<chatsModel.count;i++)
+        {
+            var chatItem = chatsModel.get(i);
+            console.log(chatItem.id);
+            if(chatItem.id == msg_id)
+                   return i
+        }
+        return -1
+    }
+
+    //function updateConversation(msg_id,msgType,user_id, lastMsg,time,formattedDate)
+    function updateConversation(msg)
+    {
+
+        var lastMsg = msg.content
+
+        var tmp = lastMsg.split('\n');
+
+        lastMsg = tmp[0];
+
+        var maxLength = screen.currentOrientation == Screen.Portrait?30:100
+
+        if(tmp.length>1){
+            lastMsg += "..."
+        }else if(lastMsg.length > maxLength){
+            lastMsg = lastMsg.substring(0,maxLength).trim()+"...";
+        }
+        msg.content = lastMsg
+
+
+
+       // ChatScript.updateChats(msg_id,msgType,user_id,lastMsg,time,formattedDate);
+        ChatScript.updateChats(msg);
+        chatsContainer.state=""
+       // chatScript.sendMessage({'chatsModel':chatsModel});
+    }
+
+    states: [
+        State {
+            name: "no_data"
+            PropertyChanges {
+                target: no_data
+                visible:true
+            }
+        }
+    ]
+
+
+
+    ListModel{
+        id:chatsModel
+    }
+    Component{
+        id:myDelegate;
+
+        Chat{
+            property variant contactInfo:ContactsScript.getContactData(model.jid)
+            picture: contactInfo.picture;
+            name: contactInfo.name
+            number:model.jid;
+            lastMsg:model.content
+            time:model.timestamp
+            formattedDate:model.formattedDate
+            onClicked: chatsContainer.clicked(model.jid,"chats")
+            width:chatsContainer.width
+            msgId: model.id
+            msgType:model.type
+            state_status:model.status
+
+        }
+    }
+
+    Column{
+        anchors.fill: parent;
+        spacing:1
+        width:parent.width
+        height:parent.height
+        WANotify{
+            id:wa_notifier
+        }
+        Item{
+            width:parent.width
+            height:parent.height-wa_notifier.height
+            visible:false;
+            id:no_data
+
+            Label{
+                anchors.centerIn: parent;
+                text:"No conversations yet"
+                font.pointSize: 20
+            }
+        }
+
+        ListView {
+            id: list_view1
+            //anchors.fill: parent
+            width:parent.width
+            height:parent.height-wa_notifier.height
+            model: chatsModel
+            delegate: myDelegate
+            spacing: 1
+            clip:true
+        }
+    }
+}
+// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
+import QtQuick 1.1
+import com.nokia.meego 1.0
+
+Rectangle{
+    id:container
+
+	property variant myData
+    property string picture:"none";
+    property string name:"User";
+    property string number:"number";
+    property string status:"Hi there I'm using whatsapp";
+    property string jid;
+    property bool hasPicture;
+    signal clicked();
+
+    height:80;
+    width: parent.width;
+   // color: "#e6e6e6"
+    color:"transparent"
+
+	Rectangle {
+		anchors.fill: parent
+		color: theme.inverted? "darkgray" : "lightgray"
+		opacity: theme.inverted? 0.2 : 0.8
+		visible: mouseArea.pressed
+	}
+
+    MouseArea{
+        id:mouseArea
+        anchors.fill: parent
+        //onClicked: {controls.opacity=1;container.height=80}
+        onClicked: container.clicked(number)//{console.log("EXPANDING");container.state=container.state=="opened"?"":"opened"}
+    }
+
+    states: State{
+
+        name:"opened";
+        PropertyChanges{target:container; height:136;}
+        PropertyChanges {
+            target: controls
+            opacity:1
+
+        }
+    }
+
+    transitions: Transition{
+        from:"";to:"opened";reversible:true
+        SequentialAnimation
+        {
+         NumberAnimation { property: "height";duration: 300;easing.type: Easing.InOutQuad }
+         NumberAnimation {  property: "opacity"; duration: 200 }
+        }
+    }
+
+    Row
+    {
+        anchors.fill: parent
+        spacing: 12
+        anchors.topMargin: 10
+        anchors.leftMargin: 10
+		height: 62
+		anchors.verticalCenter: parent.verticalCenter
+
+        RoundedImage {
+            id:contact_picture
+            size:62
+            imgsource: picture
+            opacity:appWindow.stealth?0.2:1
+        }
+
+        Column{
+			width: parent.width -80
+		    Label{
+				y: 2
+		        id: contact_name
+		        text:name
+		        font.pointSize: 18
+				font.bold: true
+		    }
+
+		    /*Label{
+		        id:contact_number
+		        text:number
+		        //anchors.
+		        font.pointSize: 14
+		        height: 25
+		    }*/
+
+		   Label{
+		        id:contact_status
+		        text:status
+		        font.pixelSize: 20
+		        color: "gray"
+				width: parent.width - 16
+				elide: Text.ElideRight
+		   }
+
+        }
+    }
+
+    Row
+    {
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        spacing:5
+        anchors.bottomMargin: 5
+        opacity:0
+        id:controls
+
+        WAButton{
+            button_color: "#0b83c8";
+            button_text: "Chat"
+            MouseArea{
+                anchors.fill: parent;
+                onClicked: container.clicked(number)
+            }
+        }
+        WAButton{
+            button_color: "#2ea11b";
+            button_text: "Call"
+        }
+
+        WAButton{
+            button_color: "#dc0a0a";
+            button_text: "Block"
+        }
+
+    }
+
+
+}
+import QtQuick 1.1
+import com.nokia.meego 1.0
+
+import "contacts.js" as ContactsManager
+
+
+Page {
+    id: contactsContainer
+   // tools: commonTools
+    //width: parent.width
+    //anchors.fill: parent
+      Component.onCompleted: {
+                ContactsManager.populateContacts();
+           // contactsContainer.newMessage({data:"Hi","user_id":"201006960035"})
+     }
+
+      property alias indicator_state:wa_notifier.state
+
+      State {
+          name: "syncing"
+          PropertyChanges {
+              target: sync_window
+              visible:true
+              opacity:1;
+
+          }
+      }
+
+      Rectangle{
+
+          id:sync_window
+          anchors.fill: parent
+          z:1
+          visible:false;
+          opacity: 0
+
+          ProgressBar{
+              indeterminate: true
+              visible:true;
+
+          }
+
+      }
+
+    // signal conversationUpdated(int msgId, int msgType, string user_id,string lastMsg,string time,string formattedDate);
+     signal conversationUpdated(variant message);
+     signal sendMessage(string user_id, string message);
+     signal sendTyping(string user_id);
+     signal sendPaused(string user_id);
+
+
+     function updateMessageStatus(msgKey,status)
+     {
+
+     }
+
+     function openChatWindow(user_id)
+     {
+
+         //var chatWindow = ContactsManager.openChatWindow(user_id,"contacts")
+          var chatWindow = getChatWindow(user_id);
+          appWindow.pageStack.push(chatWindow.conversation);
+          appWindow.requestPresence(user_id);
+          return chatWindow
+
+     }
+
+    function onMessageSent(message){
+
+          var chatWindow = getChatWindow(message.Contact.jid);
+          if(chatWindow)chatWindow.conversation.messageSent(message.id);
+    }
+
+    function onMessageDelivered(message){
+          var chatWindow = getChatWindow(message.Contact.jid);
+          if(chatWindow)chatWindow.conversation.messageDelivered(message.id);
+    }
+
+    function updatePresence(user_id,presence)
+    {
+        console.log("update presence in QML, IMPLEMENT ME");
+    }
+
+     function pushContacts(contacts)
+     {
+        //console.log("AHOM"+contacts)
+
+        ContactsManager.contacts=contacts;
+
+        ContactsManager.populateContacts();
+     }
+
+      function getChatWindow(user_id)
+      {
+
+          var chatWindow = ContactsManager.getChatWindow(user_id);
+          if(chatWindow == 0)
+          {
+              console.log("couldn't find chat window")
+              var contactData = ContactsManager.getContactData(user_id)
+
+              chatWindow = ContactsManager.createChatWindow(user_id, contactData.name,contactData.picture);
+
+          }
+
+          console.log("found chat window")
+          console.log(user_id)
+          console.log(chatWindow.conversation.user_id);
+
+          return chatWindow;
+      }
+
+      function onAvailable(user_id){
+          var chatWindow = getChatWindow(user_id);
+          chatWindow.conversation.setOnline();
+      }
+
+      function onUnavailable(user_id,seconds){
+          var chatWindow = getChatWindow(user_id);
+
+          if(seconds)
+              chatWindow.conversation.setOffline(seconds);
+          else
+              chatWindow.conversation.setOffline();
+
+      }
+
+      function onTyping(user_id){
+          var chatWindow = getChatWindow(user_id);
+          chatWindow.conversation.setTyping();
+
+      }
+
+      function onPaused(user_id){
+          var chatWindow = getChatWindow(user_id);
+          chatWindow.conversation.setPaused();
+      }
+
+     function addMessage(user_id,messages){
+
+          var chatWindow = getChatWindow(user_id);
+
+
+          for (var i =0; i< messages.length; i++)
+          {
+              chatWindow.conversation.newMessage(messages[i])
+          }
+
+
+      }
+
+    function newMessage(msg_data){
+
+        var chatWindow = getChatWindow(msg_data.user_id);
+        chatWindow.conversation.newMessage(msg_data);
+    }
+
+    ListModel{
+
+        id:contactsModel
+
+
+    }
+
+    Component{
+        id:myDelegate
+        Contact{
+
+            jid:model.jid
+            number:model.number
+            picture:model.picture
+            name:model.name;
+            status:model.status
+			myData: model
+
+            //onClicked: {ContactsManager.openChatWindow(model.number,"contacts");contactsContainer.parent.parent.state="conversation"}
+            onClicked: {openChatWindow(model.jid)}
+        }
+    }
+    Component {
+           id: sectionHeading
+           Rectangle {
+               width: parent.width
+               height: 50
+              // color: "#e6e6e6"
+               color:"transparent"
+
+				Rectangle {
+					id: divline
+					anchors.verticalCenter: parent.verticalCenter
+					anchors.leftMargin: 16
+					anchors.left: parent.left
+					anchors.rightMargin: 16
+					anchors.right: sectionLabel.left
+					height: 1
+					color: "gray"
+					opacity: 0.6
+				}
+				Text {
+					id: sectionLabel
+					text: section
+					font.pointSize: 18
+					font.bold: true
+					anchors.verticalCenter: parent.verticalCenter
+					anchors.right: parent.right
+					anchors.rightMargin: 16
+					color: "gray"
+				}
+               /*Text {
+                   text: section
+                   font.pixelSize: 42
+                   font.bold: true
+                   color:"#27a01b"
+                   anchors.verticalCenter: parent.verticalCenter
+                   horizontalAlignment: Text.AlignRight
+                   width:parent.width-5
+               }*/
+		
+           }
+       }
+
+    Column{
+        anchors.fill: parent;
+        spacing:1
+        width:parent.width
+        height:parent.height
+        WANotify{
+            id:wa_notifier
+        }
+
+        ListView {
+
+            id: list_view1
+            //anchors.fill: parent
+            width:parent.width
+            height:parent.height-wa_notifier.height
+            clip: true
+            model: contactsModel
+            delegate: myDelegate
+            spacing: 1
+            section.property: "alphabet"
+            section.criteria: ViewSection.FullString
+            section.delegate: sectionHeading
+
+        }
+
+		FastScroll {
+		    id: fast
+		    listView: list_view1
+		}
+
+    }
+
+    /*SectionScroller{
+        listView: list_view1
+    }*/
+
+
+
+}

UI/Conversation.qml

+import QtQuick 1.1
+import com.nokia.meego 1.0
+
+
+
+import "conversations.js" as ConvScript
+
+//import QtMobility.systeminfo 1.1
+//import QtMobility.feedback 1.1
+//import QtMultimediaKit 1.1
+
+Page {
+    id:conversation_view
+
+    tools: ToolBarLayout{
+                            id: commonTools
+                            ToolIcon {
+                                platformStyle: ToolButtonStyle{inverted:appWindow.stealth  || theme.inverted}
+                                iconId: "toolbar-back";
+                                onClicked: { appWindow.pageStack.pop(); } }
+                           // ToolIcon { iconId: "toolbar-view-menu"; }
+                    }
+
+    property string user_id;
+    property string user_name;
+    property string user_picture;
+    property string prev_state:"chats"
+    property bool iamtyping:false
+
+
+    Component.onCompleted:{
+            console.log("opened chat window");
+            requestPresence(user_id);
+
+    }
+
+    signal sendMessage(string user_id,string message);
+   // signal conversationUpdated(int msgId, int msgType, string number,string lastMsg,string time,string formattedDate);
+    signal conversationUpdated(variant message);
+    signal typing(string user_id);
+    signal paused(string user_id);
+
+    function requestPresence()
+    {
+        appWindow.requestPresence(user_id);
+    }
+
+    function notifyReceived(){
+        /*console.log('hello notify');
+        //set volume
+
+        devinfo.activeProfileDetails()
+
+        var profile = devinfo.activeProfileDetails;
+
+        console.log(profile.messageRingtoneVolume)
+        console.log(profile.vibrationActive);
+
+       /* snd_msg_received.volume = profile.messageRingtoneVolume()
+        snd_msg_received.play();
+
+
+        if(profile.vibrationActive())
+            vibra_msg_received.start();*/
+    }
+
+    function updatePresence(presence){
+        userstatus.state = presence == 1?"online":"";
+    }
+
+    function setOnline(){
+        status.setOnline();
+    }
+
+    function setTyping(){
+        status.setTyping();
+    }
+
+    function setPaused(){
+        status.setPaused();
+    }
+
+    function setOffline(seconds){
+        if(seconds)
+            status.setOffline(seconds);
+        else
+            status.setOffline();
+    }
+
+
+
+
+    function getBubble(msg_id){
+
+        for(var i =0; i < conv_data.count; i++){
+            var bubble = conv_data.get(i);
+            if(bubble.msg_id == msg_id)
+                return bubble;
+        }
+
+        return 0;
+    }
+
+    function getBubbleIndex(msg_id){
+        for(var i =0; i < conv_data.count; i++){
+            var bubble = conv_data.get(i);
+            if(bubble.msg_id == msg_id)
+                return i;
+        }
+
+        return -1;
+    }
+
+    function messageSent(msg_id){
+
+
+        var bubbleIndex = getBubbleIndex(msg_id);
+
+        if(bubbleIndex > -1){
+           // conv_items.view.model.setData(bubbleIndex,"state_status","pending");
+            conv_data.setProperty(bubbleIndex,"status","pending");
+        }
+    }
+
+    function messageDelivered(msg_id){
+
+        var bubble = getBubble(msg_id);
+        if(bubble){
+            bubble.status= "delivered";
+        }
+
+    }
+
+
+    function newMessage(message){
+        //ConvScript.addMessage(message.id,message.content,message.type,message.formattedDate,message.timestamp,message.status);
+        ConvScript.addMessage(message);
+
+    }
+
+    function getNameForBubble(uname)
+    {
+        var arr = uname.split(' ');
+        return arr[0];
+    }
+
+
+
+
+    Rectangle{
+        id:top_bar
+        //onClicked: {conversation_view.visible=false;conversation_view.parent.parent.state=prev_state;}
+        width:parent.width
+        height:72
+        color:"transparent"
+
+        UserStatus {
+            id:status
+            height:parent.height
+            width:parent.width/2
+            anchors.left: parent.left
+            anchors.leftMargin: 12
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Row {
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 10
+            width: parent.width/2
+            anchors.right: parent.right
+            anchors.rightMargin: 12
+
+            Label {
+                id: username
+                text: user_name
+				width: parent.width -60
+                anchors.verticalCenter: parent.verticalCenter
+				horizontalAlignment: Text.AlignRight
+                font.bold: true
+            }
+
+            RoundedImage {
+                id:userimage
+                size:48
+                imgsource: user_picture
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+        }
+
+		Rectangle {
+			height: 1
+			width: parent.width
+			x:0; y: 71
+			color: "gray"
+			opacity: 0.6
+		}	
+    }
+
+    ListModel{
+        id: conv_data
+    }
+
+    Component{
+        id:myDelegate
+
+       SpeechBubble{
+           message: model.message;
+           date:model.timestamp
+           from_me:model.type==1
+           //picture: user_picture
+           name: getNameForBubble(user_name)
+           state_status:model.status
+       }
+    }
+
+    ListView{
+        id:conv_items
+
+        anchors.bottom: input_separator.top
+        anchors.top: top_bar.bottom
+        anchors.bottomMargin: 10
+        anchors.topMargin: 5
+        width:parent.width
+        delegate: myDelegate
+        model: conv_data
+        spacing: 15
+        clip: true
+
+    }
+
+    Separator{
+        id:input_separator
+
+        bottom_margin: 1
+        top_margin: 0
+        anchors.bottom: input_holder.top
+        width:parent.width
+        visible: !appWindow.stealth && !theme.inverted
+    }
+
+    Timer {
+        id:typing_timer
+        interval: 2000; running: false; repeat: false
+        onTriggered: {
+            console.log("STOPPED TYPING");
+            iamtyping = false;
+            paused(user_id);
+            }
+    }
+
+
+
+
+    Row
+    {
+        id:input_holder
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 10
+        anchors.right: parent.right
+        anchors.left: parent.left
+        anchors.rightMargin: 2
+        anchors.leftMargin: 2
+        spacing: 5
+        opacity: appWindow.stealth?0.3:1
+
+
+        TextArea{
+            id:chat_text
+            //width:parent.width
+            width:parent.width-send_button.width-5
+
+
+            onFocusChanged: {
+                 conv_items.positionViewAtEnd()
+            }
+
+            onTextChanged: {
+
+                if(!iamtyping)
+                {
+                    console.log("TYPING");
+                    typing(user_id);
+                }
+                iamtyping = true;
+                typing_timer.restart();
+
+            }
+
+
+
+
+        }
+
+
+
+        /*DeviceInfo {
+               id: devinfo;
+
+           }
+
+
+        HapticsEffect {
+            id: vibra_msg_received
+            attackIntensity: 0.0
+            attackTime: 250
+            intensity: 1.0
+            duration: 500
+            fadeTime: 250
+            fadeIntensity: 0.0
+        }
+
+        //SoundEffect
+        Audio{
+               id: snd_msg_received
+
+               source: "/usr/share/sounds/ring-tones/Message 1.mp3"
+           }*/
+
+
+
+        Button
+        {
+            id:send_button
+            platformStyle:  ButtonStyle{
+               inverted:appWindow.stealth  || theme.inverted
+            }
+
+            width:65
+            ToolIcon{
+                platformStyle: ToolItemStyle{inverted:appWindow.stealth  || theme.inverted}
+                iconId: "toolbar-send-chat"
+                anchors.centerIn: parent
+                onClicked: parent.clicked();
+            }
+
+            anchors.bottom: parent.bottom
+            onClicked:{
+
+                 var toSend = chat_text.text.trim();
+                 if ( toSend != "")
+                 {
+
+                        sendMessage(user_id,toSend);
+                        chat_text.text = "";
+                 }
+                 chat_text.focus = true;
+
+            }
+
+                //{notifyReceived()}
+        }
+
+    }
+
+}
+// FastScroll.js - this is just SectionScroller.js with a fix for
+// section.criteria == ViewSection.FirstCharacter
+var sectionData = [];
+var _sections = [];
+
+function initialize(list) {
+    initSectionData(list);
+}
+
+function initSectionData(list) {
+    if (!list || !list.model) return;
+    sectionData = [];
+    _sections = [];
+    var current = "",
+        prop = list.section.property,
+        item;
+
+
+
+    if (list.section.criteria == ViewSection.FullString) {
+        for (var i = 0, count = list.count; i < count; i++) {
+            list.currentIndex = i;
+            item = list.currentItem.myData.name
+            if (item !== current) {
+                current = item;
+                _sections.push(current);
+                sectionData.push({ index: i, header: current });
+            }
+        }
+    } else if (list.section.criteria == ViewSection.FirstCharacter) {
+        for (var i2 = 0, count2 = list.count; i2 < count2; i2++) {
+            list.currentIndex = i2;
+            item = list.currentItem.myData.name.substring(0,1)
+            if (item !== current) {
+                current = item;
+                _sections.push(current);
+                sectionData.push({ index: i2, header: current });
+            }
+        }
+    }
+}
+
+function getSectionPositionString(name) {
+    var val = _sections.indexOf(name);
+    return val === 0 ? "first" :
+           val === _sections.length - 1 ? "last" : false;
+}
+
+function getAt(pos) {
+    return _sections[pos] ? _sections[pos] : "";
+}
+
+function getRelativeSections(current) {
+    var val = _sections.indexOf(current),
+        sect = [],
+        sl = _sections.length;
+
+    val = val < 1 ? 1 : val >= sl-1 ? sl-2 : val;
+    sect = [getAt(val - 1), getAt(val), getAt(val + 1)];
+
+    return sect;
+}
+
+function getClosestSection(pos, down) {
+    var tmp = (_sections.length) * pos;
+    var val = Math.ceil(tmp) // TODO: better algorithm
+    val = val < 2 ? 1 : val;
+    return _sections[val-1];
+}
+
+function getNextSection(current) {
+    var val = _sections.indexOf(current);
+    return (val > -1 ? _sections[(val < _sections.length - 1 ? val + 1 : val)] : _sections[0]) || "";
+}
+
+function getPreviousSection(current) {
+    var val = _sections.indexOf(current);
+    return (val > -1 ? _sections[(val > 0 ? val - 1 : val)] : _sections[0]) || "";
+}
+
+function getIndexFor(sectionName) {
+    var val = sectionData[_sections.indexOf(sectionName)].index;
+    return val === 0 || val > 0 ? val : -1;
+}

UI/FastScroll.qml

+import QtQuick 1.1
+import com.nokia.meego 1.0
+import "FastScroll.js" as Sections
+
+Item {
+    id: root
+
+    property ListView listView
+
+    property int __topPageMargin: 0
+    property int __bottomPageMargin: 0
+    property int __leftPageMargin: 0
+    property int __rightPageMargin: 0
+    property bool __hasPageWidth : false
+    property bool __hasPageHeight : false
+
+    property int __hideTimeout: 500
+
+    property Style platformStyle: FastScrollStyle {}
+
+    // This function ensures that we always anchor the decorator correctly according
+    // to the page margins.
+    function __updatePageMargin() {
+        if (!listView)
+            return
+        var p = listView.parent
+        while (p) {
+            if (p.hasOwnProperty("__isPage")) {
+                __hasPageWidth = function() { return p.width == listView.width }
+                __topPageMargin = function() { return p.anchors.topMargin }
+                __bottomPageMargin = function() { return p.anchors.bottomMargin }
+                __leftPageMargin = function() { return p.anchors.leftMargin }
+                __rightPageMargin = function() { return p.anchors.rightMargin }
+                return;
+            } else {
+                p = p.parent;
+            }
+        }
+    }
+
+    onListViewChanged: {
+        if (listView && listView.model) {
+            internal.initDirtyObserver();
+        } else if (listView) {
+            listView.modelChanged.connect(function() {
+                if (listView.model) {
+                    internal.initDirtyObserver();
+                }
+            });
+        }
+        __updatePageMargin()
+    }
+
+    anchors.fill: parent
+
+    //FIXME: Item
+    Item {
+        anchors.fill: parent
+        anchors.leftMargin: __hasPageWidth ? -__leftPageMargin : 0
+        anchors.rightMargin: __hasPageWidth ? -__rightPageMargin : 0
+        anchors.topMargin: __hasPageWidth ? -__topPageMargin : 0
+        anchors.bottomMargin: __hasPageWidth ? -__bottomPageMargin : 0
+
+        MouseArea {
+            id: dragArea
+            objectName: "dragArea"
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            width: 70
+            drag.target: magnifier
+            drag.axis: Drag.YAxis
+            drag.minimumY: 0 // listView.y
+            drag.maximumY: dragArea.height - magnifier.height // listView.y + listView.height - magnifier.height
+
+            onPressed: {
+                magnifier.positionAtY(dragArea.mouseY);
+            }
+
+            onPositionChanged: {
+                internal.adjustContentPosition(dragArea.mouseY);
+            }
+
+            Image {
+                id: rail
+                source: platformStyle.railImage
+                opacity: 0
+                anchors.fill: parent
+
+                property bool dragging: dragArea.drag.active
+
+                Image {
+                    id: handle
+                    opacity: !rail.dragging ? 0.7 : 0
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    source: platformStyle.handleImage
+                    y: 18 + (rail.height - 36 - height)/(1.0 - listView.visibleArea.heightRatio) * listView.visibleArea.yPosition
+                }
+
+                states: State {
+                    name: "visible"
+                    when: listView.moving || rail.dragging
+                    PropertyChanges {
+                        target: rail
+                        opacity: 1
+                    }
+                }
+
+                transitions: [
+                    Transition {
+                        from: ""; to: "visible"
+                        NumberAnimation {
+                            properties: "opacity"
+                            duration: root.__hideTimeout
+                        }
+                    },
+                    Transition {
+                        from: "visible"; to: ""
+                        NumberAnimation {
+                            properties: "opacity"
+                            duration: root.__hideTimeout
+                        }
+                    }
+                ]
+            }
+        }
+
+        Image {
+            id: magnifier
+            objectName: "popup"
+            opacity: rail.dragging ? 1 : 0
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: 150
+            source: platformStyle.magnifierImage
+
+            function positionAtY(yCoord) {
+                magnifier.y = Math.max(dragArea.drag.minimumY, Math.min(yCoord - magnifier.height/2, dragArea.drag.maximumY));
+            }
+
+            Text {
+                id: magnifierLabel
+                objectName: "magnifierLabel"
+                height: 150
+                width: parent.width
+                x: 14
+                verticalAlignment: Text.AlignVCenter
+                wrapMode: Text.WordWrap
+                font.pixelSize: 46
+                //font.family: "Nokia Pure Text Bold"
+                color: platformStyle.textColor
+                text: internal.currentSection
+            }
+        }
+    }
+
+    Timer {
+        id: dirtyTimer
+        interval: 100
+        running: false
+        onTriggered: {
+            Sections.initSectionData(listView);
+            internal.modelDirty = false;
+        }
+    }
+
+    Connections {
+        target: root.listView
+        onCurrentSectionChanged: internal.curSect = rail.dragging ? internal.curSect : ""
+    }
+
+    QtObject {
+        id: internal
+
+        property string currentSection: listView.currentSection
+        property string curSect: ""
+        property string curPos: "first"
+        property int oldY: 0
+        property bool modelDirty: false
+        property bool down: true
+
+        function initDirtyObserver() {
+            Sections.initialize(listView);
+            function dirtyObserver() {
+                if (!internal.modelDirty) {
+                    internal.modelDirty = true;
+                    dirtyTimer.running = true;
+                }
+            }
+
+            if (listView.model.countChanged)
+                listView.model.countChanged.connect(dirtyObserver);
+
+            if (listView.model.itemsChanged)
+                listView.model.itemsChanged.connect(dirtyObserver);
+
+            if (listView.model.itemsInserted)
+                listView.model.itemsInserted.connect(dirtyObserver);
+
+            if (listView.model.itemsMoved)
+                listView.model.itemsMoved.connect(dirtyObserver);
+
+            if (listView.model.itemsRemoved)
+                listView.model.itemsRemoved.connect(dirtyObserver);
+        }
+
+        function adjustContentPosition(y) {
+            if (y < 0 || y > dragArea.height) return;
+
+            internal.down = (y > internal.oldY);
+            var sect = Sections.getClosestSection((y / dragArea.height), internal.down);
+            internal.oldY = y;
+            if (internal.curSect != sect) {
+                internal.curSect = sect;
+                internal.curPos = Sections.getSectionPositionString(internal.curSect);
+                var sec = Sections.getRelativeSections(internal.curSect);
+                internal.currentSection = internal.curSect;
+                var idx = Sections.getIndexFor(sect);
+                listView.positionViewAtIndex(idx, ListView.Beginning);
+            }
+        }
+
+    }
+}

UI/FastScrollStyle.qml

+import QtQuick 1.1
+import com.nokia.meego 1.0 // for Style
+
+Style {
+
+    // Font
+    property int fontPixelSize: 68
+    property bool fontBoldProperty: true
+
+    // Color
+    property color textColor: inverted?"#000":"#fff"
+
+    property string handleImage: "image://theme/meegotouch-fast-scroll-handle"+__invertedString
+    property string magnifierImage: "image://theme/meegotouch-fast-scroll-magnifier"+__invertedString
+    property string railImage: "image://theme/meegotouch-fast-scroll-rail"+__invertedString
+}
+.pragma library
+
+function dateFromTimestamp(timestamp) {
+    
+}

UI/GlobalStore.js

+.pragma library
+
+var contacts = new Array();

UI/GraphicalStatus.qml

+import QtQuick 1.0
+
+Rectangle {
+    property string status: "offline"
+    id:indicator
+    width: 15
+    height: 15
+    radius:20
+
+    color: "gray"
+
+    states: [
+        State {
+            name: "online"
+            PropertyChanges {
+                target: indicator
+                color:"green"
+            }
+        },
+
+        State {
+        name: "offline"
+        PropertyChanges {
+        target: indicator
+        color:"red"
+     }
+    },
+
+        State {
+        name: ""
+        PropertyChanges {
+        target: indicator
+        color:"gray"
+     }
+    }
+    ]
+}

UI/LoadingPage.qml

+import QtQuick 1.1
+import com.nokia.meego 1.0
+
+Page{
+    property string operation: "Loading"
+    property alias buttonOneText: buttonOne.text
+    property alias buttonTwoText: buttonTwo.text
+
+    property int timeout:0;
+
+    signal buttonOneClicked()
+    signal buttonTwoClicked();
+
+    function startTimer(msecs){
+
+        timeout_timer.interval = msecs
+        timeout_timer.start();
+    }
+
+    Component.onCompleted: {
+
+        if(timeout !=0){
+            timeout_timer.interval = timeout
+
+        }
+
+    }
+
+
+    Timer {
+        id:timeout_timer
+        running: false;
+        repeat: false
+        onTriggered: {
+            timout_text.visible = true
+            timout_buttons.state="visible"
+            }
+    }
+
+
+    WAHeader{
+        title: "Refreshing"
+        anchors.top:parent.top
+        width:parent.width
+    }
+    Column{
+        spacing:5;
+        anchors.left:parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+
+
+        Label{
+            text:operation
+            horizontalAlignment: Text.AlignHCenter
+            width:parent.width
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        }
+
+        ProgressBar{
+            indeterminate: true
+            width:parent.width-32
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+        Label{
+            id:timout_text
+            text:"Taking too long?"
+            width:parent.width
+            horizontalAlignment: Text.AlignHCenter
+            visible: false
+        }
+
+        Column{
+            id:timout_buttons
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 10
+
+            states: [
+                State {
+                    name: "visible"
+                    PropertyChanges {
+                        target: buttonOne
+                        visible:buttonOne.text!="";
+                    }
+                    PropertyChanges {
+                        target: buttonTwo
+                        visible:buttonTwo.text!="";
+                    }
+                }
+            ]
+
+            Button{
+                id:buttonOne
+                visible:false
+                onClicked:buttonOneClicked()
+                //text:"Button one"
+            }
+
+            Button{
+                id:buttonTwo
+                visible:false
+                onClicked: buttonTwoClicked()
+                //text:"Button two"
+            }
+        }
+    }
+
+
+}

UI/Registration.qml

+import QtQuick 1.1
+import com.nokia.meego 1.0
+
+Page{
+    id:container
+    property string cc_val;
+    signal sendReg(string number, string cc);
+    //function _sendReg(){sendReg(phone_number.text,cc.text)}
+
+    Column{
+        //anchors.fill: parent
+        anchors{
+            left:parent.left
+            right:parent.right
+        }
+
+        //anchors.centerIn: parent
+        spacing:2
+
+        Text {
+            id: name
+            width:parent.width
+        //    anchors.centerIn: parent
+
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            text: qsTr("Please confirm your Country code and Enter your phone Number")
+        }
+
+        Row{
+            anchors.horizontalCenter: parent.horizontalCenter
+            id:cc_fields
+
+            spacing:2
+            TextField{
+                id:cc
+                width:100
+                text: cc_val
+            }
+
+            TextField{
+                width:container.width-20-cc.width-cc_fields.spacing
+                text:"Egypt"
+                enabled: false
+            }
+        }
+
+        Text{
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+             width:parent.width
+            text:qsTr("Your number without the country code:")
+        }
+
+        TextField{
+            id:phone_number
+            width:container.width-20
+            anchors.horizontalCenter:parent.horizontalCenter
+
+
+        }
+
+        Button{
+            text: "Submit"
+            width:200
+            anchors.right: parent.right
+            onClicked:{
+                regconfirm.phone_number=cc.text+phone_number.text
+                regconfirm.open();
+            }
+
+        }
+    }
+
+
+
+
+
+
+        Dialog{
+           // anchors.fill: parent
+            property string phone_number;
+            id:regconfirm
+            width:parent.width
+           // Component.onCompleted: {regconfirm.accepted.connect(_sendReg)}
+
+            onAccepted:sendReg(phone_number.text,cc.text)
+
+            title:Text{
+                color:"white"
+                text:"Please confirm"
+            }
+
+            content: Text{
+                color:"white"
+                width:parent.width
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                  font.pixelSize: 22
+                    horizontalAlignment: Text.AlignHCenter
+                text:"Whatsapp will send an SMS with your 3 digit activation code to "+regconfirm.phone_number+". Is that phone number correct?"
+            }
+
+            buttons:ButtonRow {
+                style: ButtonStyle { }
+                anchors.horizontalCenter: parent.horizontalCenter
+
+
+                Button{
+                    text:"Yes"
+                    onClicked: regconfirm.accept();
+                }
+
+                Button{
+                    text:"No"
+                    onClicked: regconfirm.reject();
+                }
+            }
+
+        }
+
+
+
+
+
+}

UI/RoundedImage.qml

+import QtQuick 1.1
+import com.nokia.meego 1.0
+
+Item {
+    id: container
+
+    property string imgsource
+    property int size
+    property bool rounded: true
+
+    signal clicked
+
+    height: size
+    width: size
+
+    MaskedItem {
+        id: mask
+        x:0; y:0
+        width: size
+        height: size
+        visible: sourceOffline!="" && rounded
+
+        mask: Image {
+            width: size
+            height: size
+            smooth: true
+            fillMode: Image.Stretch
+            source: "pics/usermask.png"
+        }
+
+        Image
+        {
+            id: image1
+            x:0; y:0
+            width: size
+            height: size
+            smooth: true
+            fillMode: Image.Stretch
+            source: imgsource
+        }
+    }
+
+    Image
+    {
+        x:0; y:0
+        width: size
+        height: size
+        smooth: true
+        fillMode: Image.Stretch
+        source: "pics/userborder.png"
+        visible: imgsource != "" && rounded
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: container.clicked()
+    }
+
+}
+// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
+import QtQuick 1.1
+
+Rectangle {
+    width: parent.width
+    height:top_margin.height+bottom_margin.height+1;
+    color:"transparent"
+    property alias top_margin:top_margin.height
+    property alias bottom_margin:bottom_margin.height
+
+    Column
+    {
+        anchors.fill: parent;
+        Rectangle{
+            id:top_margin
+            width:parent.width
+            color:"transparent"
+        }
+
+
+        Rectangle{
+            width:parent.width
+            height:1
+            color:"white"
+        }
+
+        Rectangle{
+            id:bottom_margin
+            width:parent.width
+            color:"transparent"
+        }
+    }
+}

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;
+    color:"transparent"
+
+    states: [
+        State {
+            name: "sending"
+            PropertyChanges {
+                target: status
+                source: "pics/indicators/sending.png"
+            }
+        },
+        State {
+            name: "pending"
+            PropertyChanges {
+                target: status
+                source: "pics/indicators/pending.png"
+            }
+        },
+        State {
+            name: "delivered"
+            PropertyChanges {
+                target: status
+                source: "pics/indicators/delivered.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:parent.width-150
+        height: parent.height
+        color: appWindow.stealth?"transparent":(from_me?"#cfd2d4":"#42b6f2");
+        opacity:theme.inverted?0.5:1
+
+        anchors.right: from_me?this.right:parent.right
+        anchors.left: !from_me?this.left:parent.left
+        anchors.rightMargin: 5
+        anchors.leftMargin: 5
+
+        Image {
+            id: status
+            visible: from_me
+            anchors.right: parent.right
+            anchors.rightMargin: 5
+            anchors.top:parent.top
+            anchors.topMargin: 5
+
+        }
+        Column{
+            id:content
+            //anchors.fill: parent;
+            height:parent.height
+            width:parent.width
+
+            Label{
+                id:sender_name
+                width:parent.width;
+                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: 5
+
+            }
+            Label{
+                    id:msg_text
+                    text:message;
+                    color:appWindow.stealth?colorPicker.color:(from_me?"black":"white")
+                    width:parent.width - 5
+                    wrapMode: "WrapAtWordBoundaryOrAnywhere"
+                    anchors.left: parent.left
+                    anchors.leftMargin: 5
+
+            }
+
+            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
+                    anchors.right: parent.right
+                    anchors.rightMargin: 5
+                    font.pixelSize: 15
+            }
+
+        }
+
+    }
+
+
+}
+
+import QtQuick 1.0
+
+Rectangle {
+    property string status: "offline"
+    id:indicator
+    width: 15
+    height: 15
+    radius:20
+
+    color: "transparent"
+
+    states: [
+        State {
+            name: "online"
+            PropertyChanges {
+                target: indicator
+                color:"green"
+            }
+        },
+
+        State {
+        name: "offline"
+        PropertyChanges {
+        target: indicator
+        color:"red"
+     }
+    },
+
+        State {
+        name: ""
+        PropertyChanges {
+        target: indicator
+        color:"gray"
+     }
+    }
+    ]
+}

UI/StatusText.qml

+// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
+import QtQuick 1.1
+
+Rectangle {
+
+
+    id:container
+    color:"transparent"
+
+    states: [
+        State {
+            name: "connecting"
+            PropertyChanges {
+                target: curr_operation
+                text:"Connecting"
+            }
+
+        },
+
+        State {
+            name: "refreshing"
+            PropertyChanges {
+                target: curr_operation
+                text:"Refreshing Favorites"
+
+            }
+        },
+
+        State {
+            name: "connected"
+            PropertyChanges {
+                target: curr_operation
+                text:"Connected"
+
+            }
+        },
+
+        State {
+            name: "disconnected"
+            PropertyChanges {
+                target: curr_operation
+                text:"Disconnected"
+
+            }
+        }
+    ]
+
+
+    Text{
+
+        id:curr_operation
+        anchors.centerIn: parent;
+        text:"Connecting"
+        font.pointSize: 12
+
+    }
+}
+// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
+import QtQuick 1.1
+
+Rectangle {
+
+    height: 20
+    width:60
+    opacity: 0.5
+
+    color:"transparent"
+
+    Rectangle
+    {
+        width: 1
+        height:parent.height
+        color:"white"
+        anchors.left: parent.left
+    }
+
+    Rectangle
+    {
+        width: 1
+        height:parent.height
+        color:"white"
+        anchors.right: parent.right
+    }
+}
+// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
+import QtQuick 1.1
+
+Rectangle {
+    width: parent.width
+    height: 30
+    color: "#dedddd"
+    id:container
+
+    TabItem{
+
+        anchors.right: parent.right
+        anchors.rightMargin: 5
+        anchors.verticalCenter: parent.verticalCenter
+
+        Image{
+
+            anchors.centerIn: parent
+
+            source: "pics/settings_icon.png"
+        }
+
+        MouseArea{
+
+            anchors.fill: parent
+            onClicked: container.parent.state="contacts"
+        }
+
+    }
+    Row{
+        id:tab_items
+        anchors.left: parent.left