Add UI chat display item. Closed #104

omarcompany · Nov 23, 2020 · 4166953 · 4166953
1 parent fe63ab8
commit 4166953
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 49 deletions.
diff --git a/application/qml/desktop/ChatTitle.qml b/application/qml/desktop/ChatTitle.qml
@@ -0,0 +1,25 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.12
+
+Row {
+    spacing: 7
+
+    ContactItem {
+        width: 44
+        height: 47
+        border.color: constants.greenColor
+        horizontalAlignment: Text.AlignHCenter
+        text: recipientName[0]
+    }
+
+    ContactItem {
+        width: 420
+        height: 17
+        text: recipientName
+        anchors {
+            top: parent.top
+            topMargin: 13
+        }
+    }
+
+}
diff --git a/application/qml/desktop/ContactBackgroundItem.qml b/application/qml/desktop/ContactBackgroundItem.qml
@@ -2,6 +2,8 @@ import QtQuick 2.13
 import QtGraphicalEffects 1.12
 
 Rectangle {
+    id: root
+    signal leftClicked()
 
     RadialGradient {
         anchors.fill: parent
@@ -15,5 +17,6 @@ Rectangle {
         id: targetArea
         anchors.fill: parent
         hoverEnabled: true
+        onClicked: root.leftClicked()
     }
 }
diff --git a/application/qml/desktop/HomePage.qml b/application/qml/desktop/HomePage.qml
@@ -1,50 +1,106 @@
 import QtQuick 2.0
 import QtQuick.Controls 2.0
 import elevons.team 1.0
+import QtQuick.Layouts 1.12
 
 Page {
+    id:root
     width: parent.width
     height: parent.height
+    property string recipientID
+    property string recipientName
+
+    Component.onCompleted: Messenger.requestUserList()
 
     Timer {
         interval: 60000
         running: true
         repeat: true
-        onTriggered: Messenger.requestUserList()
+        onTriggered : Messenger.requestUserList()
+    }
+
+    Timer {
+        interval: 6000
+        running: true
+        repeat: true
+        onTriggered : Messenger.requestMessageList()
     }
 
-    header: ToolBar {
-        position: ToolBar.Header
+    GridLayout {
+        anchors.fill: parent
+        columns: 2
+        rows: 3
 
-        Button {
-            height: parent.height
-            anchors.right: parent.right
-            text: qsTr("Sign out")
+        Rectangle {
+            id:searchField
+            width: 500
+            height: 82
+            Layout.row: 1
+            Layout.column: 1
+            Button {
+                height: parent.height
+                anchors.left: parent.left
+                text: qsTr("Sign out")
 
-            onClicked: Messenger.signOut()
+                onClicked: Messenger.signOut()
 
-            background: Rectangle {
-                color: parent.pressed ? "grey" : "skyblue"
+                background: Rectangle {
+                    color: parent.pressed ? "grey" : "skyblue"
+                }
             }
         }
-    }
 
-    Component.onCompleted: Messenger.requestUserList()
+        ListView {
+            width: searchField.width
+            Layout.rowSpan: 2
+            Layout.row: 2
+            Layout.column: 1
+            Layout.fillHeight: true
+            model: ModelProvider.contactModel
+            clip: true
+            spacing: 1
+            delegate: ContactDelegate {
+                onLeftClicked: {
+                    recipientID = model.id
+                    recipientName = model.name
+                }
+            }
+        }
+
+        Rectangle {
+            Layout.row: 1
+            Layout.column: 2
+            Layout.fillWidth: true
+            height: searchField.height
+
+            ChatTitle {
+                anchors {
+                    left: parent.left
+                    leftMargin: 24
+                    verticalCenter: parent.verticalCenter
+                }
+            }
+        }
+
+        MessageList {
+            Layout.row:2
+            Layout.column: 2
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            model: ModelProvider.messageList
+        }
+
+        NewMessageForm {
+            Layout.  row:3
+            Layout.  column: 2
+            Layout.  fillWidth: true
+            Layout.  fillHeight: true
 
-    ListView {
-        width: 500
-        anchors {
-            top: parent.top
-            bottom: parent.bottom
         }
-        model: ModelProvider.contactModel
-        clip: true
-        spacing: 1
-        delegate: ContactDelegate { }
     }
 
     footer: Label  {
         text: qsTr("Your ID: %1").arg(Messenger.userId)
     }
 }
-
diff --git a/application/qml/desktop/MessageDelegate.qml b/application/qml/desktop/MessageDelegate.qml
@@ -18,6 +18,7 @@ Control {
     }
 
     contentItem: GridLayout {
+
         width: parent.width
         columns: 3
         rows: 2

diff --git a/application/qml/desktop/NewMessageForm.qml b/application/qml/desktop/NewMessageForm.qml
@@ -3,41 +3,30 @@ import QtQuick.Controls 2.5
 import QtQuick.Layouts 1.12
 import elevons.team 1.0
 
-GridLayout {
-    columns: 2
-    rows: 2
-
-    TextField {
-        id: recipientField
-        font.pixelSize: 11
-        placeholderText: qsTr("Enter recipient id...")
+RowLayout {
+    TypingArea {
+        id: typingArea
+        height: 60
+        width: parent.width - button.width
+        pointSize: 11
         placeholderTextColor: "#00B4AB"
-        selectByMouse: true
+        borderColor: "#21be2b"
         Layout.fillWidth: true
+        Layout.columnSpan: 2
+        Layout.row: 1
     }
 
     RoundButton {
+        id: button
         radius: 5
         text: qsTr("Send message")
-        enabled: recipientField.text !== "" && typingArea.message !== ""
+        enabled: typingArea.message !== ""
         onClicked: {
-            Messenger.sendMessage(recipientField.text, typingArea.message)
+            Messenger.sendMessage(recipientID, typingArea.message)
             typingArea.clear()
         }
     }
 
-    TypingArea {
-        id: typingArea
-        height: 60
-        width: parent.width
-        pointSize: 11
-        placeholderTextColor: "#00B4AB"
-        borderColor: "#21be2b"
-        Layout.fillWidth: true
-        Layout.columnSpan: 2
-        Layout.row: 1
-    }
-
 }
 
 
diff --git a/application/qml/desktop/qml.qrc b/application/qml/desktop/qml.qrc
@@ -21,5 +21,6 @@
         <file>MessageDelegate.qml</file>
         <file>ContactDelegate.qml</file>
         <file>ContactBackgroundItem.qml</file>
+        <file>ChatTitle.qml</file>
     </qresource>
 </RCC>
diff --git a/application/src/messagemodel.cpp b/application/src/messagemodel.cpp
@@ -52,7 +52,7 @@ QVariant MessageModel::data(const QModelIndex &index, int role) const
     case TextRole:
         return m_messageList[index.row()].text;
     case Timestamp:
-        return m_messageList[index.row()].timestamp;
+        return (m_messageList[index.row()].timestamp.toLocalTime()).toString();
     default:
         return QVariant();
     }

diff --git a/application/src/messenger.cpp b/application/src/messenger.cpp
@@ -62,11 +62,11 @@ void Messenger::sendMessage(const QString &recipientId, const QString &text)
     m_requester->sendRequest(Requester::POST, Requester::SEND_MESSAGE, jsonData);
 }
 
-void Messenger::requestMessageList(const QString &recipientId) const
+void Messenger::requestMessageList()
 {
     QVariantMap jsonData;
     jsonData["sender"] = UuidManager::getId();
-    jsonData["recipient"] = recipientId;
+    jsonData["recipient"] = userId();
 
     m_requester->sendRequest(Requester::GET, Requester::REQUEST_MESSAGE_LIST, jsonData);
 }

diff --git a/application/src/messenger.h b/application/src/messenger.h
@@ -26,7 +26,7 @@ class Messenger : public QObject
     Q_INVOKABLE void signUp(const QString &name);
     Q_INVOKABLE void signOut();   
     Q_INVOKABLE void sendMessage(const QString &recipientId, const QString &text);
-    Q_INVOKABLE void requestMessageList(const QString &recipientId) const;
+    Q_INVOKABLE void requestMessageList();
     Q_INVOKABLE void requestUserList();
 
     QString userId() const;