meegim/qml/MessagesPage.qml

import QtQuick 1.1

//FIXME: temporary for the platform: Harmattan
//use TextArea
//import com.nokia.meego 1.0

MyPage {
    id: messagesPage

    /************************************************************/
    colorPage: "white"

    property string avatarPic: ""
    property string resourceJid: ""

    Component.onCompleted: {
        /* разблокировка ориентации */
        main.appOrientation = main.orAuto

        /* открываем чат и инициализируем список сообщениями
         * которые были ранее с этим собеседником */
        xmppClient.openChat( xmppClient.chatJid )

        /* запрашиваем его аватарку */
        avatarPic = xmppClient.getAvatarByJid( xmppClient.chatJid )

        /* если последнее сообщение было от собеседника чата
         * то инициализируем ресурс messagesPage.resourceJid
         * ресурсом его последнего сообщения */
        if( xmppClient.bareJidLastMsg == xmppClient.chatJid ) {
            messagesPage.resourceJid = xmppClient.resourceLastMsg
        }

        if( messagesPage.resourceJid == "" ) {
            listModelResources.append( {resource:"(by default)", checked:true} )
        } else {
            listModelResources.append( {resource:"(by default)", checked:false} )
        }

        var listResources = xmppClient.getResourcesByJid(xmppClient.chatJid)
        /* инициализация списка ресурсов */
        for( var z=0; z<listResources.length; z++ )
        {
            //console.log( "resources:["+listResources[z]+"]" )
            if( listResources[z] == "" ) { continue; }
            if( messagesPage.resourceJid ==listResources[z] ) {
                listModelResources.append( {resource:listResources[z], checked:true} )
            } else {
                listModelResources.append( {resource:listResources[z], checked:false} )
            }
        }
    }

    /**-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-**/
    Component {
        id: componentWrapperItem

        Rectangle {
            id: wrapper
            border.color: msgType == 0 ? "blue" : "red"
            color: msgMy === true ? "white" : "lightblue"
            radius: 8
            property string text: msgText
            clip: true
            //height: imgDlr.height+imgDlr.anchors.bottomMargin + imgAvatar.height + imgAvatar.anchors.topMargin

            anchors.horizontalCenter: parent.horizontalCenter

            MouseArea {
                id: maMsg
                anchors.fill: parent
                enabled: msgType == 0 ? true : false
                onPressAndHold: {
                    // цитирование
                    animCit.start()
                    txtMessage.text += "> \"" + mainSmiles.htmlToPlainText( wrapper.text ) + "\"\n"
                    //txtMessage.text += "> \"" + wrapper.text + "\"<br/>"
                }
                onClicked: {
                    wrapper.ListView.view.currentIndex = index
                }
            }

            ListView.onAdd: ParallelAnimation {
                NumberAnimation {
                    target: wrapper
                    property: "opacity"
                    from: 0; to: 1
                    duration: 100
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    target: wrapper;
                    property: "scale";
                    duration: 200;
                    from: 0.1; to: 1
                    easing.type: Easing.InOutQuad
                }
            }

            Image {
                id: imgDlr
                visible: msgType == 0 ? true : false
                anchors.bottom: parent.bottom; anchors.bottomMargin: 10
                source: msgMy !== true ? "qrc:/qml/images/msg_recv.png" : ( msgDlr === true ? "qrc:/qml/images/msg_dlr.png" : "qrc:/qml/images/msg_sent.png")
                height: 32
                width: 32
                smooth: true
                Component.onCompleted: {
                    if( msgMy == true ) {
                        imgDlr.anchors.right = parent.right
                        imgDlr.anchors.rightMargin = 10
                    } else {
                        imgDlr.anchors.left = parent.left
                        imgDlr.anchors.leftMargin = 10
                    }
                }
            }

            Image {
                id: imgAvatar
                smooth: true
                height: 32
                width: 32
                anchors.top: parent.top; anchors.topMargin: 10
                source: msgMy === true ? "qrc:/qml/images/avatar.png" : (avatarPic === "" ? "qrc:/qml/images/avatar.png" : avatarPic)
                Image {
                    anchors.centerIn: parent
                    height: parent.height
                    width: parent.width
                    smooth: true
                    source: msgMy === true ? "qrc:/qml/images/meego_frame_32w.png" : "qrc:/qml/images/meego_frame_32b.png"
                }
                Component.onCompleted: {
                    if( msgMy == true ) {
                        imgAvatar.anchors.right = parent.right
                        imgAvatar.anchors.rightMargin = 10
                    } else {
                        imgAvatar.anchors.left = parent.left
                        imgAvatar.anchors.leftMargin = 10
                    }
                }
            }

            Text {
                id: txtHeader
                anchors.top: parent.top; anchors.topMargin: 10
                anchors.left: msgMy == true ? parent.left : imgDlr.right; anchors.leftMargin: 10
                text:  msgMy === true ? "[" + msgDateTime + "] :" : "[" + msgDateTime + "]  " + xmppClient.chatJid + "/" + msgResource + ":"
                font.pixelSize: 16
                opacity: 0.8
                color: msgMy === true ? "blue" : "black"
            }

            Text {
                id: text_field
                anchors.left: msgMy == true ? parent.left : imgDlr.right; anchors.leftMargin: 10
                anchors.right: msgMy == true ? imgDlr.left : parent.right; anchors.rightMargin: 10
                anchors.top: txtHeader.bottom; anchors.topMargin: 5
                anchors.bottom: parent.bottom; anchors.bottomMargin: 10
                text: msgType == 0 ? wrapper.text : msgMy == true ? "You have called " + xmppClient.chatJid : xmppClient.chatJid + " has called you !"
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                font.pixelSize: 20
                font.italic: msgType == 0 ? false : true
                textFormat: Text.RichText
                onLinkActivated: {
                    Qt.openUrlExternally(link)
                }
            }

            width: listViewMessages.width - 10
            height: text_field.paintedHeight + text_field.anchors.topMargin + text_field.anchors.bottomMargin + txtHeader.height + txtHeader.anchors.topMargin <
                    imgDlr.height+imgDlr.anchors.bottomMargin + imgAvatar.height + imgAvatar.anchors.topMargin ?
                        imgDlr.height+imgDlr.anchors.bottomMargin + imgAvatar.height + imgAvatar.anchors.topMargin :
                        text_field.paintedHeight + text_field.anchors.topMargin + text_field.anchors.bottomMargin + txtHeader.height + txtHeader.anchors.topMargin

            SequentialAnimation {
                id: animCit
                NumberAnimation { target: wrapper; property: "rotation"; to:  0.8; duration: 35 }
                NumberAnimation { target: wrapper; property: "rotation"; to: -0.8; duration: 70 }
                NumberAnimation { target: wrapper; property: "rotation"; to:  0; duration: 30 }
                loops: 3
                alwaysRunToEnd: true
            }
            Component.onCompleted: {
                // парсинг на смайлы в сообщении
                wrapper.text = mainSmiles.parseMsgString( wrapper.text )
            }

            states: State {
                name: "Current"
                when: (wrapper.ListView.isCurrentItem )
                //PropertyChanges { target: posGr1; position: 0 }
            }

            transitions: Transition {
                //NumberAnimation { properties: "position"; duration: 300 }
            }
        }

    } //Component

    /**-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-**/


    /* --------------------( ресурсы jid )-------------------- */
    ListModel {
        id: listModelResources
    }


    /*--------------------(верхняя панелька с отображение информации о jid)--------------------*/
    property bool flTyping: false
    property bool flSendMsg: false
    Timer {
        id: timerTextTyping
        interval: 3000
        repeat: true
        onTriggered: {
            if( flTyping == false ) {
                timerTextTyping.stop()
                xmppClient.typingStop( xmppClient.chatJid, messagesPage.resourceJid )
            }
            flTyping = false
        }
    }


    /* ------------( подписка на сигналы XMPP клиента )------------ */
    Connections {
        target: xmppClient
        onPresenceJidChanged: {
            if( presenceBareJid == xmppClient.chatJid ) {
                imgPresence.source = presencePicStatus
                //txtPresence.text = strTopPanel( isTyping, false ) //что это ??? - закоментировал
            }
        }
        onTypingChanged: {
            if( bareJid == xmppClient.chatJid ) {
                txtPresence.text = strTopPanel( isTyping, true ) //показываем надпись "печатает.../остановил печать"
            }
        }
        onMessageReceived: {
            txtPresence.text = strTopPanel( false, false ) //скрываем надпись "печатает..."
            if( xmppClient.bareJidLastMsg == xmppClient.chatJid ) {
                messagesPage.resourceJid = xmppClient.resourceLastMsg
            }
        }
    }


    function strTopPanel( isTyping, showTyping )
    {
        var ret = xmppClient.chatJid
        if(messagesPage.resourceJid != "") {
            ret += "/" + messagesPage.resourceJid
        }
        if( showTyping ) {
            if( isTyping ) {
                ret += " is typing"
                timerChangeTop.interval = 5000
                timerChangeTop.restart()
            } else {
                ret += " has stopped typing"
                timerChangeTop.interval = 4000
                timerChangeTop.restart()
            }
        }
        return ret;
    }

    Timer {
        id: timerChangeTop
        onTriggered: {
            txtPresence.text = strTopPanel( false, false )
        }
    }

    /* панелька с надписью jid */
    Rectangle {
        id: topPanelChat
        visible: main.inPortrait
        z: 11
        width: parent.width
        height: 40
        color: "black"
        anchors.top: parent.top;
        anchors.left: parent.left;

        gradient:  gr1
        Gradient {
            id: gr1
            GradientStop { position: 0; color: "#3f3f3f" }
            GradientStop { position: 1; color: "#000000" }
        }
        Gradient {
            id: gr2
            GradientStop { position: 0; color: "#000000" }
            GradientStop { position: 1; color: "#3f3f3f" }
        }

        Image {
            id: imgPresence
            anchors.left: parent.left; anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            height: topPanelChat.height - 10
            width: height
            source: xmppClient.getPicPresenceByJid( xmppClient.chatJid )
        }
        Text {
            id: txtPresence
            anchors.left: imgPresence.right; anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            color: "white"
            font.pixelSize: parent.height/2.5
            text: strTopPanel( false, false )
        }
        Image {
            id: imgDownArrow
            source: "qrc:/qml/images/small_arrow_black.png"
            anchors.right: parent.right; anchors.rightMargin: 15
            smooth: true
            rotation: -90
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if(panelListResources.state == "hidden") {
                    panelListResources.state = "visible"
                } else {
                    panelListResources.state = "hidden"
                }
            }
            onPressedChanged: {
                if(pressed) {
                    topPanelChat.gradient = gr2
                } else {
                    topPanelChat.gradient = gr1
                }
            }
        }
    }

    /* -----------------( выпадающая панелька с ресурсами jid )----------------- */
    Rectangle {
        id: panelListResources
        z: 10
        clip: true
        anchors.left: parent.left
        width: parent.width
        height: 250
        color: "black"
        opacity: 0.8
        state: "hidden"
        states: [
            State {
                name: "hidden"
                AnchorChanges{ target: panelListResources; anchors.bottom: messagesPage.top }
                PropertyChanges { target: imgDownArrow ; rotation: -90 }
            },
            State {
                name: "visible"
                AnchorChanges{ target: panelListResources; anchors.top: topPanelChat.bottom }
                PropertyChanges { target: imgDownArrow ; rotation: 90 }
            }
        ]
        transitions: Transition {
            ParallelAnimation {
                AnchorAnimation { duration: 400; easing.type: Easing.InOutQuad }
                PropertyAnimation { duration: 400; property: "rotation" }
            }
        }
        ListView {
            id: listViewResources
            //anchors.fill: parent
            anchors.top: parent.top
            anchors.left: parent.left
            width: parent.width
            height: parent.height - bottomPanel.height
            model: listModelResources
            clip: true
            delegate: Component {
                Rectangle {
                    id: itemResource
                    height: 60
                    width: panelListResources.width
                    color: "transparent"
                    border.color: "gray"
                    radius: 5
                    Text {
                        id: textResource
                        text: resource
                        font.pixelSize: itemResource.height/2
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        color: "white"
                        font.bold: false
                    }
                    states: State {
                        name: "Current"
                        when: itemResource.ListView.isCurrentItem
                        PropertyChanges { target: itemResource; color: "gray" }
                        PropertyChanges { target: textResource; font.bold: true }
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            itemResource.ListView.view.currentIndex = index

                            if( index == 0 ) {
                                messagesPage.resourceJid = ""
                            } else {
                                messagesPage.resourceJid = resource
                            }

                            for( var i=0; i<listModelResources.count; i++ ) {
                                if( index == i ) {
                                    listModelResources.get( index ).checked = true
                                } else {
                                    listModelResources.get( index ).checked = false
                                }
                            }
                            txtPresence.text = strTopPanel( false, false )
                            panelListResources.state = "hidden"
                        } //onClicked
                    } //MouseArea
                }
            } //Component
        }
        Rectangle {
            id: bottomPanel
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            width: parent.width
            height: 25
            gradient: Gradient {
                GradientStop { position: 0; color: "gray" }
                GradientStop { position: 0.5; color: "black" }
                GradientStop { position: 1; color: "gray" }
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    panelListResources.state = "hidden"
                }
            }
        }
    }

    /* --------------------(список сообщений)-------------------- */
    ListView {
        id: listViewMessages
        anchors.top: main.inPortrait == true ? topPanelChat.bottom : parent.top
        anchors.topMargin: 5
        anchors.bottom: panelWriteText.top; anchors.bottomMargin: 5
        anchors.left: parent.left;// anchors.leftMargin: 5
        anchors.right: parent.right;// anchors.rightMargin: 5
        clip: true
        model: xmppClient.messages
        delegate: componentWrapperItem
        spacing: 5
        onCountChanged: {
            listViewMessages.positionViewAtIndex(count - 1, ListView.Beginning)
        }
        onHeightChanged: {
            listViewMessages.positionViewAtIndex(count - 1, ListView.Beginning)
        }
    }


    /*--------------------(панелька с вводом текста)--------------------*/
    Rectangle {
        id: panelWriteText
        height: 100
        anchors.bottom: main.inPortrait == true ? toolBar.top : parent.bottom;
        anchors.left: parent.left;
        anchors.right: parent.right;
        color: "gray"



        Rectangle {
            id: wrapperTextEdit
            anchors.bottom: parent.bottom; anchors.bottomMargin: 5
            anchors.left: parent.left; anchors.leftMargin: 5
            anchors.right: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? wrapperImgSmiles.left : wrapperImgSend.left
            anchors.top: parent.top; anchors.topMargin: 5
            //border.color: "blue"
            //border.width: 2
            //color: "white"
            color: "transparent"
            radius: 8
            clip: true

            /*MyTextEdit2 {
                id: txtMessage
                wrapMode: TextEdit.Wrap
                font.pixelSize: 22
                textFormat: TextEdit.PlainText
                width: parent.width
                height: parent.height
                onTextChanged: {
                    flTyping = true
                    if( (!timerTextTyping.running) && (flSendMsg==false) ) {
                        timerTextTyping.restart()
                        xmppClient.typingStart( xmppClient.chatJid )
                        flTyping = false
                    }
                }
            }*/


            Flickable {
                id: flickMsg
                anchors.fill: parent
                contentHeight: txtMessage.height
                contentWidth: txtMessage.width
                flickableDirection: Flickable.VerticalFlick
                clip: true
                function ensureVisible(r)
                {
                    if (contentX >= r.x)
                        contentX = r.x;
                    else if (contentX+width <= r.x+r.width)
                        contentX = r.x+r.width-width;
                    if (contentY >= r.y)
                        contentY = r.y;
                    else if (contentY+height <= r.y+r.height)
                        contentY = r.y+r.height-height;
                }

                MyTextEdit2 {
                    id: txtMessage
                    wrapMode: TextEdit.Wrap
                    font.pixelSize: 22
                    textFormat: TextEdit.PlainText
                    //textFormat: TextEdit.RichText
                    width: flickMsg.width
                    height: flickMsg.height
                    //onCursorRectangleChanged: flickMsg.ensureVisible( cursorRectangle )
                    onTextChanged: {
                        flTyping = true
                        if( (!timerTextTyping.running) && (flSendMsg==false) ) {
                            timerTextTyping.restart()
                            xmppClient.typingStart( xmppClient.chatJid, messagesPage.resourceJid )
                            flTyping = false
                        }
                    }
                }

            } //Flickable
        } //wrapperTextEdit
/**/


        /* кнопка смайлов для вертикальной ориентации */
        Rectangle {
            id: wrapperImgSmiles
            visible: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? true : false
            height: 100
            width: 100
            anchors.right:wrapperImgSend.left
            anchors.verticalCenter: parent.verticalCenter
            color: "transparent"
            Image {
                id: imgFramePressSmiles
                source: "qrc:/qml/images/bar_glow.png"
                width: imgSmilesMsg.width + 2
                height: imgSmilesMsg.height + 2
                anchors.centerIn: parent
                smooth: true
                opacity: 0
                Behavior on opacity { NumberAnimation { duration: 150 } }
            }
            Image {
                id: imgSmilesMsg
                anchors.centerIn: parent
                source: "qrc:/qml/images/bar_smiles.png"
                height: 96
                width: 96
                smooth: true
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        dlgSmiles.dlgShowHide()
                    }
                    onPressedChanged: {
                        if( pressed ) {
                            imgFramePressSmiles.opacity = 1
                        } else  {
                            imgFramePressSmiles.opacity = 0
                        }
                    }
                }
            }
        } //wrapperImgSend


        /* копка отправки сообщения */
        Rectangle {
            id: wrapperImgSend
            height: 100
            width: 100
            anchors.right:parent.right
            //anchors.rightMargin: 5
            anchors.verticalCenter: parent.verticalCenter
            color: "transparent"
            Image {
                id: imgFramePress
                source: "qrc:/qml/images/bar_glow.png"
                width: imgSendMsg.width + 2
                height: imgSendMsg.height + 2
                anchors.centerIn: parent
                smooth: true
                opacity: 0
                Behavior on opacity { NumberAnimation { duration: 150 } }
            }
            Image {
                id: imgSendMsg
                anchors.centerIn: parent
                source: "qrc:/qml/images/msg_send.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        var ret = xmppClient.sendMyMessage( xmppClient.chatJid, messagesPage.resourceJid, txtMessage.text )
                        if( ret ) {
                            flSendMsg = true
                            timerTextTyping.stop()
                            txtMessage.text = ""
                            flTyping = false
                            flSendMsg = false
                            notify.notifyMessageSent()
                        }
                    }
                    onPressedChanged: {
                        if( pressed ) {
                            imgFramePress.opacity = 1
                        } else  {
                            imgFramePress.opacity = 0
                        }
                    }
                }
            }
        } //wrapperImgSend
    } //panelWriteText


    /********************************( Toolbar )************************************/

    ToolBar {
        id: toolBar

        visible: main.inPortrait

        /****/
        ToolButton {
            id: toolBarButtonRoster
            icon: "qrc:/qml/images/bar_roster.png"
            anchors.left: parent.left
            anchors.leftMargin: (0.5*(parent.width/4) - 0.5*toolBarButtonRoster.width)
            onClicked: {
                messagesPage.closePage( "qrc:/qml/RosterPage.qml" )
                xmppClient.resetUnreadMessages( xmppClient.chatJid ) //сброс непрочитанных сообщ.
                xmppClient.hideChat()
            }
            pauseAnim: 500
        }
        ToolButton {
            id: toolBarButtonChats
            icon: "qrc:/qml/images/bar_open_chats.png"
            anchors.left: parent.left
            anchors.leftMargin: (1.5*(parent.width/4) - 0.5*toolBarButtonChats.width)
            onClicked: {
                messagesPage.closePage( "qrc:/qml/ChatsPage.qml" )
                xmppClient.resetUnreadMessages( xmppClient.chatJid ) //сброс непрочитанных сообщ.
                xmppClient.hideChat()
            }
            pauseAnim: 600
        }
        ToolButton {
            id: toolBarButtonSmiles
            icon: "qrc:/qml/images/bar_smiles.png"
            anchors.left: parent.left
            anchors.leftMargin: (2.5*(parent.width/4) - 0.5*toolBarButtonSmiles.width)
            onClicked: {
                dlgSmiles.dlgShowHide()
            }
            pauseAnim: 700
        }
        ToolButton {
            id: toolBarButtonOptions
            icon: "qrc:/qml/images/bar_options.png"
            anchors.left: parent.left
            anchors.leftMargin: (3.5*(parent.width/4) - 0.5*toolBarButtonOptions.width)
            onClicked: {
                dlgMsgOptions.dlgShowHide()
            }
            pauseAnim: 800
        }
    }
    /*********************************************************************/

    /*-------------------( смайлы )-------------------*/
    DialogSmiles {
        id: dlgSmiles
        title: "Smiles"
        smilesModel: mainSmiles.smilesModel
        onSmileSelected: {
            txtMessage.text += dlgSmiles.selectedSmile
        }
    }

    /*----------------------( опции чата )----------------------*/
    DialogMsgOptions {
        id: dlgMsgOptions
        onItemClicked: {
            if( itemSelected == "clearChat" ) {
                xmppClient.clearChat( xmppClient.chatJid )
            } else if( itemSelected == "attention" ) {
                xmppClient.attentionSend( xmppClient.chatJid, messagesPage.resourceJid )
            }
        }
    }
}