Friendiqa/source-android/qml/contactqml/ContactComponent.qml

import QtQuick 2.0
import QtQuick.Controls 1.3
import "qrc:/qml/genericqml"

Item {
id: contactComponent
property var createdAtDate: new Date(contact.created_at)
property string connectUrl: (contact.network!=="dfrn")||(contact.isFriend==1)?"":( "<a href='"+contact.url.replace("profile","dfrn_request") +"'>"+qsTr("Connect")+"</a><br>")

Rectangle {
    id: wrapper
    width: 16*mm
    height: 15*mm
    border.color:  "grey"
    color:"white"
    Image {
        id: photoImage
        x:1
        y:1
        width: 10*mm
        height:10*mm
        source:(contact.profile_image!="")? "file://"+contact.profile_image : contact.profile_image_url
        onStatusChanged: if (photoImage.status == Image.Error) {source="qrc:/images/defaultcontact.jpg"}
        }

    Label {
        id: namelabel
        x: 1
        width: wrapper.width-4
        height: 3*mm
        text: contact.screen_name
        elide:Text.ElideRight
        anchors.topMargin: 0
        anchors.left: photoImage.left
        color: "#303030"
        font.pixelSize: 3*mm
        anchors.top: photoImage.bottom
        }
    BlueButton{
        id:infobutton
        width: 5*mm
        height: 5*mm
        color:"transparent"
        text:"?"
        anchors.left: photoImage.right
        anchors.leftMargin: 0.5*mm
        anchors.topMargin: mm
        anchors.top: parent.top
        onClicked:{
            contactComponent.state="large";
            var component = Qt.createComponent("qrc:/qml/contactqml/ContactDetailsComponent.qml");
            if (component.status== Component.Ready){
                var contactDetails = component.createObject(wrapper,{"contact": contact})}
            }
        }
   }
    Timer{id:selectiontimer; //weird behaviour when state set to "large" onCompleted
    interval: 200; running: false; repeat: false
        onTriggered: {

            contactComponent.state="large";
            var component = Qt.createComponent("qrc:/qml/contactqml/ContactDetailsComponent.qml");
            if (component.status== Component.Ready){
                var contactDetails = component.createObject(wrapper,{"contact": contact})}
               }
    }
    Component.onCompleted: {
        if(status=="large"){selectiontimer.start()}
        else{contactComponent.state=""}
    }

states: [
    State {
        name: "large"
        PropertyChanges { target: namelabel; font.pixelSize: 4*mm; x:mm; width:friendsTabView.width-4*mm; text:Qt.atob(contact.name)+" (@"+contact.screen_name+")"}
        ParentChange{target:contactComponent;parent:root; x:mm;y:2*mm}
        //PropertyChanges { target: contactComponent; z: 2; x:0;y:0}
        PropertyChanges { target: wrapper; width:friendsTabView.width;height:friendsTabView.height-15*mm}
        PropertyChanges { target: photoImage; width:15*mm;height:15*mm;x:mm;y:mm }
PropertyChanges { target: contactComponent.GridView.view; interactive:false}

        }
]
}