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: main.useSyspal? syspal.window :"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     SystemPalette{ id: syspal }
  97
  98     Rectangle{
  99         id: historyWrapper
 100         BorderImage { source: "img/lineedit.sci"; anchors.fill: parent }
 101         anchors{ bottom: editor.top; right: parent.right; left: parent.left; top: parent.top; margins: 4}
 102         color: parent.color
 103
 104         // Create a flickable to view a large view.
 105         Flickable{
 106             id: history
 107             anchors.fill: parent
 108             clip: true;
 109
 110             contentHeight: content.height
 111             contentWidth: content.width
 112
 113             function addMessage(incoming, sender, time, message) {
 114                 var item = messageItemComponent.createObject(content);
 115                 item.incoming = incoming;
 116                 item.sender = sender;
 117                 item.time = time;
 118                 item.message = message;
 119                 item.x = 0;
 120                 item.y = content.height;
 121                 content.height += item.height;
 122                 updatePosition();
 123             }
 124             function updatePosition(){
 125                 contentWrapper.height = Math.max(content.height, history.height);
 126                 history.contentY = contentWrapper.height - history.height;
 127             }
 128             onHeightChanged: {updatePosition();}
 129
 130             Rectangle{
 131                 id: contentWrapper
 132                 width: historyWrapper.width
 133                 color: "transparent"
 134                 Rectangle{
 135                     id: content
 136                     height: 0
 137                     width: historyWrapper.width
 138                     color: "transparent"
 139                     anchors.bottom: contentWrapper.bottom
 140                 }
 141             }
 142         }
 143         Text {
 144             id: statusMessage
 145             text: ""
 146             color: main.useSyspal? syspal.windowText :"gray"
 147             opacity: 0.6
 148             anchors{horizontalCenter: parent.horizontalCenter; bottom: parent.bottom; leftMargin:6}
 149         }
 150     }
 151
 152     Rectangle{
 153         id: editor
 154         color: parent.color
 155         //BorderImage { source: "img/lineedit.sci"; anchors.fill: parent }
 156         //height: Math.max( parent.height * 0.2, messageTextArea.minimumHeight)
 157         height: 2 * messageTextArea.minimumHeight
 158         anchors{ bottom: parent.bottom; right: parent.right; left: parent.left; margins: 4}
 159
 160         Rectangle{
 161             id: flipButton
 162             anchors{top: parent.top; right: parent.right; bottom: parent.bottom}
 163             width: height
 164             color: parent.color
 165             BorderImage { source: "img/lineedit.sci"; anchors.fill: parent }
 166             MouseArea{
 167                 anchors.fill: parent
 168                 onClicked: {
 169                     inputMethod.flipped = !inputMethod.flipped;
 170                     messageTextArea.focus = !inputMethod.flipped;
 171                 }
 172             }
 173             Image {
 174                 id: keyboard
 175                 source: "img/keyboard.png"
 176                 anchors.fill: parent
 177             }
 178         }
 179
 180         Flipable {
 181             id: inputMethod
 182             state: main.useSyspal? syspal.window :"back"
 183
 184             property bool flipped: false
 185             property int angle: 180
 186             property int yAxis: 0
 187             property int xAxis: 1
 188
 189             anchors{top: parent.top; left: parent.left; bottom: parent.bottom; right: flipButton.left; rightMargin: 4}
 190
 191             transform: Rotation {
 192                 id: rotation; origin.x: inputMethod.width / 2; origin.y: inputMethod.height / 2
 193                 axis.x: inputMethod.xAxis; axis.y: inputMethod.yAxis; axis.z: 0
 194             }
 195
 196             states: State {
 197                 name: "back"; when: inputMethod.flipped
 198                 PropertyChanges { target: rotation; angle: inputMethod.angle }
 199             }
 200
 201             transitions: Transition {
 202                 ParallelAnimation {
 203                     NumberAnimation { target: rotation; properties: "angle"; duration: 500 }
 204                     SequentialAnimation {
 205                         NumberAnimation { target: inputMethod; property: "scale"; to: 0.75; duration: 250 }
 206                         NumberAnimation { target: inputMethod; property: "scale"; to: 1.0; duration: 250 }
 207                     }
 208                 }
 209             }
 210
 211             front: TextArea{
 212                 id: messageTextArea
 213                 anchors.fill: parent
 214                 //anchors.margins: 10
 215
 216                 Keys.onReleased: {
 217                     if (event.key == Qt.Key_Return && !(event.modifiers & Qt.ShiftModifier)){
 218                         var message = messageTextArea.text.trim();
 219                         messageTextArea.text = "";
 220                         sendMessagePriv(message);
 221                         //items[0].component.state = "detail"
 222                     }
 223                     typing(true);
 224                 }
 225                 focus: true
 226             }
 227
 228             back: Rectangle{
 229                 id: back
 230                 color: editor.color;
 231                 anchors.fill: parent
 232                 clip: true
 233
 234                 BorderImage { source: "img/lineedit.sci"; anchors.fill: parent }
 235                 MouseArea{
 236                     anchors.fill: parent
 237                     onClicked: {
 238                         if (popup === undefined || popup === null){
 239                             if(inputPopupComponent.status != Component.Ready){
 240                                 error("Component "+inputPopupComponent.url+" is not ready!");
 241                                 error(inputPopupComponent.errorString());
 242                                 return false;
 243                             }
 244
 245                             popup = inputPopupComponent.createObject(main);
 246                             if(popup === null){
 247                                 error("error creating popup");
 248                                 error(inputPopupComponent.errorString());
 249                                 return false;
 250                             }
 251
 252                             popup.destroyOnHide = false;
 253                             popup.popupFromX = main.width * .9;
 254                             popup.popupFromY = main.height * .2;
 255                             popup.finalWidth = main.width * .8;
 256                             popup.finalHeight = editor.height * 3;
 257                             popup.state = "visible";
 258
 259                             popup.enterText.connect(sendMessagePriv);
 260                             popup.typing.connect(typing);
 261                         }
 262                         popup.show();
 263                         typing(true);
 264                     }
 265                 }
 266                 Image {
 267                     id: sendIcon
 268                     source: "img/chat.svg"
 269                     anchors{horizontalCenter: parent.horizontalCenter; top: parent.top; bottom: parent.bottom}
 270                     width: height
 271                 }
 272             }
 273         }
 274     }
 275
 276 }