aboutsummaryrefslogtreecommitdiff
path: root/qml/ChatPage.qml
blob: 97d80695e006afee8f78588960646deb7b92b343 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQml.Models 2.1
import org.kde.kirigami 2.12 as Kirigami

import DeltaChat 1.0

Kirigami.ScrollablePage {
    id: chatPage

    title: chat ? chat.name : qsTr("Chat")

    required property DcContext context
    required property DcAccountsEventEmitter eventEmitter

    required property var chatId
    readonly property DcChat chat: context.getChat(chatId)

    function updateMessagelist() {
        // Reverse message list, because it is laid out from bottom to top.
        let messagelist = context.getMsgIdList(chatId).reverse()

        for (let i = 0; i < messagelist.length; i++) {
            const msgId = messagelist[i]

            const item = {
                msgId: msgId
            }

            let j;
            for (j = i; j < messagelistModel.count; j++) {
                if (messagelistModel.get(j).msgId == msgId) {
                    messagelistModel.move(j, i, 1)
                    messagelistModel.set(i, item)
                    break
                }
            }

            if (j == messagelistModel.count) {
                messagelistModel.insert(i, item)
            }
        }

        if (messagelistModel.count > messagelist.length) {
            messagelistModel.remove(messagelist.length,
                                    messagelistModel.count - messagelist.length)
        }
    }

    ListModel {
        id: messagelistModel
    }

    Connections {
        target: chatPage.eventEmitter

        function onChatModified() {
            console.log("CHAT MODIFIED!")
        }
        function onIncomingMessage(accountId, chatId, msgId) {
            console.log("Incoming message for chat " + chatId)

            if (chatId == chatPage.chatId) {
                chatPage.updateMessagelist()
            }
        }
        function onMessagesChanged(accountId, chatId, msgId) {
            console.log("Messages changed for chat " + chatId)

            if (chatId == chatPage.chatId) {
                chatPage.updateMessagelist()
            }
        }
    }

    Component.onCompleted: {
        chatPage.updateMessagelist()
    }

    background: Rectangle {
        color: Kirigami.Theme.alternateBackgroundColor
        anchors.fill: parent
    }

    Component {
        id: composePane

        Pane {
            Layout.fillWidth: true

            RowLayout {
                width: parent.width

                TextField {
                    id: messageField

                    Layout.fillWidth: true
                    placeholderText: qsTr("Message")
                    wrapMode: TextArea.Wrap
                    selectByMouse: true
                }

                Button {
                    id: sendButton

                    icon.name: "document-send"
                    text: qsTr("Send")
                    enabled: messageField.length > 0
                    onClicked: {
                        chatPage.context.sendTextMessage(chatPage.chatId, messageField.text)
                        messageField.text = ""
                    }
                }
            }
        }
    }

    ListView {
        id: messageListView

        anchors.fill: parent
        spacing: 10

        model: messagelistModel

        /*
         * Messages are laid out bottom to top, because their height
         * is not known in advance.
         *
         * Attempts to lay out messages top to bottom and scroll to the
         * bottom of the list with ListView.positionViewAtEnd() result in
         * imprecise scrollbar position, because this method estimates
         * item height from the height of currently visible messages.
         */
        verticalLayoutDirection: ListView.BottomToTop

        delegate: Message {
            message: chatPage.context.getMessage(msgId)
            context: chatPage.context
        }
    }

    footer: Loader {
        sourceComponent: composePane
        Layout.fillWidth: true
        visible: chat && chat.canSend
    }
}