path: root/qml/PlaceThread.qml

import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

import secushare 1.0

Rectangle {
    color: "white"

    property var thread: null

    Rectangle {
        anchors.fill: parent
        anchors.leftMargin: 20
        anchors.rightMargin: 20
        anchors.topMargin: 20

        Image {
            id: placeBackgroundImage
            anchors.fill: parent
            opacity: 0.5
            fillMode: Image.Tile
            clip: true
            source: thread.image || "images/demo/ubuntu-wallpaper.jpg"
        }

        Rectangle {
            id: forumTitleRectangle
            color: "black"
            height: 50
            width: 500
            opacity: 0.9
            anchors.top: parent.top
            anchors.topMargin: 20
            Text {
                id: forumTitleText
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 20
		//
		// FIXME: mockup title.. should either be _subject or
		// first words of first _converse	-lynX
		//
                text: qsTr("Forum for clandestine urban art")
                wrapMode : Text.Wrap
                elide : Text.ElideRight
                color: "white"
                //font.bold: true
                font.pointSize: 22
                font.family: bebasFont.name
            }
        }

        ListModel {
            id: messageListModel
            //
            // FIXME: These users are just mock-ups, they
            //	    should actually be coming from the
            //	    place's nym list!	    -lynX
            //
            ListElement {
                messageId: 1
                threadId: 1
                date: "2012-12-20 12:12"
                nymName: "Bailadora"
                nymImage: "images/demo/baila.jpg"
                textData: "Did you see that NSA graffiti on the corner of Chaussestr. and Torstr. not only does it look amazing, it's also such a strong message !!"
            }
            ListElement {
                messageId: 2
                threadId: 1
                date: "2012-12-20 12:20"
                nymName: "La Doll"
                nymImage: "images/demo/doll.jpg"

                textData: "Oh yeah, totally awesome! Was about time somebody said that! And with style!"
            }
            ListElement {
                messageId: 3
                threadId: 1
                date: "2015-12-22 20:12"
                nymName: "Arpeggio"
                nymImage: "images/demo/arp.jpg"
                textData: "What! What ? Guess I'll take an extra detour on the bike to see that!"
            }
        }

        ListView {
            id: messageList
            anchors.top: forumTitleRectangle.bottom
            anchors.topMargin: 30
            anchors.bottom: parent.bottom
            anchors.right: parent.right

            anchors.left: parent.left
            anchors.leftMargin: 15

            spacing: 15
            clip: true

            model: messageListModel
            delegate: messageDelegate

            Component {
                id: messageDelegate
                Item  {
                    id: messageItem
                    width:  parent.width - 100
                    height: ((contentWrapper.height > userWrapper.height)  ? contentWrapper.height : userWrapper.height) + ((replyField.visible) ? replyField.height + 10 : 0);

                    Rectangle {
                        id: userWrapper
                        width:  (index == 0) ? 140 : 90
                        height: (index == 0) ? 140 : 90
                        anchors.left: parent.left
                        anchors.leftMargin: index * 50

                        color: "black"
                        opacity: 1.0

                        Image {
                            id: messageMiniImage
                            source: nymImage
                            fillMode: Image.PreserveAspectCrop
                            height: (index == 0) ? 100 : 60
                            width: (index == 0) ? 130 : 80
                            anchors.left: parent.left
                            anchors.leftMargin: 5
                            anchors.top: parent.top
                            anchors.topMargin: 5
                        }

                        Text {
                            anchors.top: messageMiniImage.bottom
                            id: contactText
                            text: nymName

                            width: (index == 0) ? 135 : 85
                            height: 30
                            anchors.left: parent.left
                            anchors.leftMargin: 10

                            wrapMode : Text.Wrap
                            elide : Text.ElideRight
                            color: "white"
                            font.family: ubuntuBIFont.name
                            font.pointSize: (index == 0) ? 16 : 12
                            font.letterSpacing : -2
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                messageList.currentIndex = index
                            }
                        }
                    }

                    Rectangle {
                        id: contentWrapper

                        anchors.left: userWrapper.right
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.leftMargin: 10
                        anchors.rightMargin: 10
                        anchors.topMargin: 0

                        height: contentText.contentHeight + contentDate.contentHeight + 25

                        Text {
                            id: contentText
                            anchors.margins: 10
                            //width: parent.width
                            anchors.fill: parent

                            text: textData
                            font.pointSize: 12
                            wrapMode : Text.Wrap

                            font.family: ubuntuFont.name
                        }

                        Text {
                            id: contentReply

                            anchors.bottom: parent.bottom
                            anchors.margins: 10

                            text: "Reply"
                            font.pointSize: 11
                            font.family: ubuntuFont.name

                            MouseArea {
                                anchors.fill: parent
                                onClicked: replyField.visible = !replyField.visible;
                            }
                        }

                        Text {
                            id: contentDate

                            width: parent.width - 10
                            anchors.bottom: parent.bottom
                            anchors.margins: 10

                            text: date
                            font.pointSize: 11
                            horizontalAlignment: Text.AlignRight
                            font.family: ubuntuFont.name
                        }
                    }

                    Item {
                        id: replyField
                        visible: false
                        height: 70
                        anchors.left: parent.left
                        anchors.leftMargin: (index + 1) * 50
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom

                        Rectangle {
                            id: replyUserWrapper
                            width:  60
                            height: 60
                            color: "black"
                            opacity: 1.0

                            anchors.left: parent.left
                            anchors.leftMargin: 5
                            anchors.top: parent.top

                            Image {
                                id: replyMessageMiniImage
                                source: "images/demo/lynX.jpg"
                                fillMode: Image.PreserveAspectCrop
                                height: 40
                                width: 48
                                anchors.left: parent.left
                                anchors.top: parent.top
                                anchors.margins: 3
                            }

                            Text {
                                anchors.top: replyMessageMiniImage.bottom
                                text: "lynX"
                                font.pointSize: 10
                                width: 55
                                height: 15
                                anchors.left: parent.left
                                anchors.leftMargin: 5

                                wrapMode : Text.Wrap
                                elide : Text.ElideRight
                                color: "white"

                                font.family: ubuntuBIFont.name
                                font.letterSpacing : -1
                            }
                        }

                        TextArea {
                            anchors.left: replyUserWrapper.right
                            anchors.right: parent.right
                            anchors.top: replyUserWrapper.top
                            anchors.bottom: replyUserWrapper.bottom
                            anchors.rightMargin: 10
                            anchors.leftMargin: 10

                            Keys.onReturnPressed: {
                                if (Qt.ControlModifier & event.modifiers)
                                {
                                    thread.talk(text)
                                    cursorPosition = 0
                                    text = ""
                                    event.accepted = true
                                }
                                else event.accepted = false
                            }
                        }
                    }
                }
            }
        }
    }
}