src/ui-mobile/declarative/ChatWidget.qml

   1 /*
   2  *   Copyright (C) 2011 Lukáš Karas <lukas.karas@centrum.cz>
   3  *
   4  *   This program is free software; you can redistribute it and/or modify
   5  *   it under the terms of the GNU General Public License as published by
   6  *   the Free Software Foundation; either version 2 of the License, or
   7  *   (at your option) any later version.
   8  *
   9  *   This program is distributed in the hope that it will be useful,
  10  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
  11  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12  *   GNU General Public License for more details.
  13  *
  14  *   You should have received a copy of the GNU General Public License
  15  *   along with this program; if not, write to the
  16  *   Free Software Foundation, Inc.,
  17  *   59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
  18  */
  19 import QtQuick 1.0
  20 import Qt 4.7
  21 import "./components/styles/default" as DefaultStyles
  22 import "components"
  23 import org.makneto 0.1 as Makneto
  24
  25 import QtWebKit 1.0
  26
  27 Rectangle {
  28     id: chatWidget
  29     width: 100
  30     height: 62
  31     color: "black"
  32
  33     signal sendMessage(string sessionId, string text)
  34     signal changeChatState(string sessionId, int state)
  35
  36     property variant inputPopupComponent : Qt.createComponent("InputPopup.qml");
  37     property variant messageItemComponent : Qt.createComponent("MessageItem.qml");
  38     property variant popup: undefined
  39     property bool typingState: false
  40
  41     function log(msg){
  42         console.log("II [ChatWidget.qml]: "+msg);
  43     }
  44     function error(msg){
  45         console.log("EE [ChatWidget.qml]: "+msg);
  46     }
  47     function warn(msg){
  48         console.log("WW [ChatWidget.qml]: "+msg);
  49     }
  50     function textMessageReceived(text, contact){
  51         //log("message received from "+contact+": "+text);
  52         history.addMessage(true, contact, new Date(), text);
  53     }
  54     function chatStateChanged(chatState, contact){
  55         // status message like "karry typing..."
  56         var msg = "";
  57         if (chatState == Makneto.Session.ChatStateGone)
  58             msg = contact+" gone"
  59         if (chatState == Makneto.Session.ChatStateComposing)
  60             msg = contact+" typing..."
  61
  62         statusMessage.text = msg;
  63     }
  64
  65     function sendMessagePriv(message){
  66         message = message.trim();
  67         if (message.length===0)
  68             return;
  69         //log("sending message... "+message);
  70         sendMessage(sessionScene.sessionId, message);
  71         history.addMessage(false, "you", new Date(), message);
  72     }
  73     function typing(b){
  74         if (b){
  75             typingTimer.restart();
  76         }
  77         if (typingState == b)
  78             return;
  79         typingState = b;
  80         //log("typing "+b);
  81         changeChatState(sessionScene.sessionId, b? Makneto.Session.ChatStateComposing: Makneto.Session.ChatStateActive)
  82     }
  83
  84     Timer{
  85         id: typingTimer
  86         interval: 3000; running: false; repeat: false
  87         onTriggered: {
  88             typing(false);
  89         }
  90     }
  91
  92     Component.onCompleted: {
  93
  94     }
  95
  96     Rectangle{
  97         id: historyWrapper
  98         BorderImage { source: "img/lineedit.sci"; anchors.fill: parent }
  99         anchors{ bottom: editor.top; right: parent.right; left: parent.left; top: parent.top; margins: 4}
 100         color: parent.color
 101
 102         // Create a flickable to view a large view.
 103         Flickable{
 104             id: history
 105             anchors.fill: parent
 106             clip: true;
 107
 108             contentHeight: content.height
 109             contentWidth: content.width
 110
 111             function addMessage(incoming, sender, time, message) {
 112                 var item = messageItemComponent.createObject(content);
 113                 item.incoming = incoming;
 114                 item.sender = sender;
 115                 item.time = time;
 116                 item.message = message;
 117                 item.x = 0;
 118                 item.y = content.height;
 119                 content.height += item.height;
 120                 updatePosition();
 121             }
 122             function updatePosition(){
 123                 contentWrapper.height = Math.max(content.height, history.height);
 124                 history.contentY = contentWrapper.height - history.height;
 125             }
 126             onHeightChanged: {updatePosition();}
 127
 128             Rectangle{
 129                 id: contentWrapper
 130                 width: historyWrapper.width
 131                 color: "transparent"
 132                 Rectangle{
 133                     id: content
 134                     height: 0
 135                     width: historyWrapper.width
 136                     color: "transparent"
 137                     anchors.bottom: contentWrapper.bottom
 138                 }
 139             }
 140         }
 141         Text {
 142             id: statusMessage
 143             text: ""
 144             color: "gray"
 145             anchors{horizontalCenter: parent.horizontalCenter; bottom: parent.bottom; leftMargin:6}
 146         }
 147     }
 148
 149     Rectangle{
 150         id: editor
 151         color: parent.color
 152         //BorderImage { source: "img/lineedit.sci"; anchors.fill: parent }
 153         //height: Math.max( parent.height * 0.2, messageTextArea.minimumHeight)
 154         height: 2 * messageTextArea.minimumHeight
 155         anchors{ bottom: parent.bottom; right: parent.right; left: parent.left; margins: 4}
 156
 157         Rectangle{
 158             id: flipButton
 159             anchors{top: parent.top; right: parent.right; bottom: parent.bottom}
 160             width: height
 161             color: parent.color
 162             BorderImage { source: "img/lineedit.sci"; anchors.fill: parent }
 163             MouseArea{
 164                 anchors.fill: parent
 165                 onClicked: {
 166                     inputMethod.flipped = !inputMethod.flipped;
 167                     messageTextArea.focus = !inputMethod.flipped;
 168                 }
 169             }
 170             Image {
 171                 id: keyboard
 172                 source: "img/keyboard.png"
 173                 anchors.fill: parent
 174             }
 175         }
 176
 177         Flipable {
 178             id: inputMethod
 179             state: "back"
 180
 181             property bool flipped: false
 182             property int angle: 180
 183             property int yAxis: 0
 184             property int xAxis: 1
 185
 186             anchors{top: parent.top; left: parent.left; bottom: parent.bottom; right: flipButton.left; rightMargin: 4}
 187
 188             transform: Rotation {
 189                 id: rotation; origin.x: inputMethod.width / 2; origin.y: inputMethod.height / 2
 190                 axis.x: inputMethod.xAxis; axis.y: inputMethod.yAxis; axis.z: 0
 191             }
 192
 193             states: State {
 194                 name: "back"; when: inputMethod.flipped
 195                 PropertyChanges { target: rotation; angle: inputMethod.angle }
 196             }
 197
 198             transitions: Transition {
 199                 ParallelAnimation {
 200                     NumberAnimation { target: rotation; properties: "angle"; duration: 500 }
 201                     SequentialAnimation {
 202                         NumberAnimation { target: inputMethod; property: "scale"; to: 0.75; duration: 250 }
 203                         NumberAnimation { target: inputMethod; property: "scale"; to: 1.0; duration: 250 }
 204                     }
 205                 }
 206             }
 207
 208             front: TextArea{
 209                 id: messageTextArea
 210                 anchors.fill: parent
 211                 //anchors.margins: 10
 212
 213                 Keys.onReleased: {
 214                     if (event.key == Qt.Key_Return && !(event.modifiers & Qt.ShiftModifier)){
 215                         var message = messageTextArea.text.trim();
 216                         messageTextArea.text = "";
 217                         sendMessagePriv(message);
 218                         //items[0].component.state = "detail"
 219                     }
 220                     typing(true);
 221                 }
 222                 focus: true
 223             }
 224
 225             back: Rectangle{
 226                 id: back
 227                 color: editor.color;
 228                 anchors.fill: parent
 229                 clip: true
 230
 231                 BorderImage { source: "img/lineedit.sci"; anchors.fill: parent }
 232                 MouseArea{
 233                     anchors.fill: parent
 234                     onClicked: {
 235                         if (popup === undefined || popup === null){
 236                             if(inputPopupComponent.status != Component.Ready){
 237                                 error("Component "+inputPopupComponent.url+" is not ready!");
 238                                 error(inputPopupComponent.errorString());
 239                                 return false;
 240                             }
 241
 242                             popup = inputPopupComponent.createObject(main);
 243                             if(popup === null){
 244                                 error("error creating popup");
 245                                 error(inputPopupComponent.errorString());
 246                                 return false;
 247                             }
 248
 249                             popup.destroyOnHide = false;
 250                             popup.popupFromX = main.width * .9;
 251                             popup.popupFromY = main.height * .2;
 252                             popup.finalWidth = main.width * .8;
 253                             popup.finalHeight = editor.height * 3;
 254                             popup.state = "visible";
 255
 256                             popup.enterText.connect(sendMessagePriv);
 257                             popup.typing.connect(typing);
 258                         }
 259                         popup.show();
 260                         typing(true);
 261                     }
 262                 }
 263                 Image {
 264                     id: sendIcon
 265                     source: "img/chat.svg"
 266                     anchors{horizontalCenter: parent.horizontalCenter; top: parent.top; bottom: parent.bottom}
 267                     width: height
 268                 }
 269             }
 270         }
 271     }
 272
 273 }