conversations/src/qml/chat/whatsthat/whatsthat.qml

import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0

Rectangle {
    id: root
    visible: true
    color: "grey"

    property string chatBackgroundSelf: "#056162"
    property string chatBackgroundThem: "#262d31"
    property int itemHeightDefault: 68
    property int itemHeightSmall: 32

    Image {
        source: "qrc:/whatsthat/bg.png"
        anchors.fill: parent
        fillMode: Image.Tile
    }

    ListView {
        id: chatListView
        anchors.fill: parent
        anchors.topMargin: 10
        anchors.leftMargin: 32
        anchors.rightMargin: 32

        model: chatModel

        onCountChanged: {  // scroll to bottom
            chatListView.currentIndex = count - 1
        }

        delegate: RowLayout {
            id: item
            property int itemHeight: 32
            height: itemHeight + 12
            width: parent.width
            spacing: 0

            Item {
                visible: outgoing
                Layout.fillWidth: true
                Layout.preferredHeight: 32
            }

            Rectangle {
                id: textRectangle
                radius: 4
                clip: true
                color: outgoing ? root.chatBackgroundSelf : root.chatBackgroundThem
                Layout.preferredHeight: itemHeight
                Layout.preferredWidth: {
                    var max_width = item.width / 6 * 4;
                    var meta_width = metaRow.implicitWidth + 32;
                    var text_width = textMessage.implicitWidth + 32;

                    if(meta_width > text_width)
                        if(meta_width < max_width) return meta_width;

                    if(text_width < max_width) return text_width;
                    return max_width;
                }

                ColumnLayout {
                    id: textColumn
                    anchors.fill: parent
                    anchors.margins: 6
                    anchors.leftMargin: 10
                    anchors.rightMargin: 10
                    Layout.fillWidth: true
                    Layout.preferredHeight: itemHeight

                    RowLayout {
                        id: metaRow
                        spacing: 8

                        Item {
                            visible: !isHead
                            Layout.fillWidth: true
                        }

                        Text {
                            visible: !outgoing && isHead
                            font.pointSize: 12
                            color: "lightblue"
                            text: name
                        }

                        Item {
                            visible: isHead
                            Layout.fillWidth: true
                        }

                        Text {
                            font.pointSize: 12
                            color: "#98ac90"
                            text: datestr + " " + hourstr
                            Layout.rightMargin: 0
                        }
                    }

                    Text {
                        id: textMessage
                        color: "white"
                        text: message
                        wrapMode: Text.WordWrap
                        width: parent.width
                        font.pointSize: 14
                        Layout.preferredWidth: parent.width

                        // Dynamically set the height of `textRectangle`.
                        // Unfortunately this uses a timer, so that the text component has
                        // time to correctly wrap itself before starting to calculate the height.
                        Timer {
                            id: timer
                            running: false
                            repeat: false
                            interval: 50
                            onTriggered: itemHeight = textColumn.implicitHeight + 12;
                        }
                        Component.onCompleted: timer.start();
                    }
                }
            }

            Item {
                visible: !outgoing
                Layout.fillWidth: true
                Layout.preferredHeight: 32
            }
        }
    }
}