Add message list. Closes #104

application/qml/desktop/HomePage.qml

@@ -3,8 +3,10 @@ import QtQuick.Controls 2.0
 import elevons.team 1.0
 
 Page {
-    width: parent.width
-    height: parent.height
+    id: root
+    anchors.fill: parent
+
+    property int contactBoxWidth: 400
 
     header: Label {
         padding: 20
@@ -26,20 +28,42 @@ Page {
     }
 
     padding: 10
-    contentItem: MessageList {
-        model: ModelProvider.messageList
-    }
-    Component.onCompleted: Messenger.requestMessageList (Messenger.userId)
+    contentHeight: parent.height
+    contentWidth: parent.width
 
-    footer: Control {
-        padding: 10
-        contentItem: Column {
-            spacing: 10
-            NewMessageForm {
-                width: parent.width*0.75
+    contentItem: Row {
+        spacing: 5
+        ContactList {
+            id: contactList
+            width: 400
+            height: parent.height
+        }
+
+        Column {
+            height: parent.height
+            MessageList {
+                height: parent.height - newMessageForm.height
+                width: root.width - contactList.width - 20
             }
 
-            FloorBar {}
+            NewMessageForm {
+                id: newMessageForm
+                width: root.width - contactList.width - 20
+            }
         }
     }
+
+    Component.onCompleted: Messenger.requestMessageList(Messenger.userId)
+
+    //    footer: Control {
+    //        padding: 10
+    //        contentItem: Column {
+    //            spacing: 10
+    //            NewMessageForm {
+    //                width: parent.width * 0.75
+    //            }
+
+    //            FloorBar {}
+    //        }
+    //    }
 }

application/qml/desktop/MessageDelegate.qml

@@ -3,37 +3,43 @@ import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.12
 
 Control {
-
     property alias userName: nameText.text
     property alias timestamp: timeText.text
     property alias text: messageText.text
 
-    padding: 10
+    padding: 12
+    width: parent.width
 
     background: Rectangle {
-        border {
-            width: 1
-            color: "#00B4AB"
-        }
+        color: "#1fe4f2f3"
+        radius: 5
+        anchors.fill: parent
     }
 
-    contentItem: GridLayout {
-        width: parent.width
-        columns: 3
-        rows: 2
-        Text {
-            id: nameText
-        }
-        Item {
-            Layout.fillWidth: true
-        }
-        Text {
-            id: timeText
+    contentItem: Column {
+        spacing: 10
+        Row {
+            spacing: 10
+            Text {
+                id: nameText
+                font.bold: true
+                font.pixelSize: 14
+                text: userName
+            }
+
+            Text {
+                id: timeText
+                anchors.verticalCenter: parent.verticalCenter
+                font.italic: true
+            }
         }
 
         Text {
             id: messageText
-            Layout.columnSpan: 3
+            width: parent.width
+            horizontalAlignment: Text.AlignLeft
+            wrapMode: Text.Wrap
+            font.pixelSize: 12
         }
     }
 }

application/qml/desktop/MessageList.qml

@@ -1,15 +1,28 @@
-import QtQuick 2.0
+import QtQuick 2.11
 
-ListView {
-
-    spacing: 10
-    clip: true
-
-    delegate: MessageDelegate {
-        width: Math.min(ListView.view.width, 400)
+Rectangle {
+    id: root
+    height: 700
+    ListModel {
+        id: messageList
+        dynamicRoles: true
+        Component.onCompleted: {
+            for (var i = 0; i <= 100; i++) {
+                append({})
+            }
+        }
+    }
 
-        userName: model.name ? model.name : "ID: " + model.id.slice(0,10)
-        timestamp: model.timestamp
-        text: model.text
+    ListView {
+        verticalLayoutDirection: ListView.BottomToTop
+        anchors.fill: parent
+        spacing: 2
+        model: messageList
+        clip: true
+        delegate: MessageDelegate {
+            userName: "Dukalis Andruha"
+            text: "Сегодня мы познакомимся с Вами еще с одним лингвистическим явлением, которое называется «панграмма». Это греческий термин, который означает «παν» - «все» и «γραμμα» - «буква» и обозначает фразу или предложение, которое содержит все или почти все буквы алфавита того или иного языка. В некоторых языках из-за специфичности алфавита очень сложно составить панграммы с повторением буквы в предложении только один раз, поэтому допустимы отклонения от этого правила: некоторые буквы могут повторяться, используются сокращения, в соответствии с древнеримской традицией буквы J и U заменяются на I и V."
+            timestamp: "22-05-2020 23:12:56"
+        }
     }
 }