status-desktop/ui/app/AppLayouts/Chat/ContactsColumn.qml

import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Controls 2.12 as QQC2
import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import QtGraphicalEffects 1.12
import "../../../imports"
import "./components"

Item {
    property alias chatGroupsListViewCount: chatGroupsListView.count
    property alias searchStr: searchText.text

    id: contactsColumn
    width: 300
    height: parent.height
    Layout.minimumWidth: 200

    ColumnLayout {
        anchors.fill: parent

        Item {
            Layout.preferredHeight: 100
            Layout.fillHeight: false
            Layout.fillWidth: true

            Text {
                id: element
                x: 772
                text: qsTr("Chat")
                anchors.top: parent.top
                anchors.topMargin: 17
                font.bold: true
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: 17
            }

            Rectangle {
                id: searchBox
                height: 36
                color: Theme.grey
                anchors.top: parent.top
                anchors.topMargin: 59
                radius: 8
                anchors.right: parent.right
                anchors.rightMargin: 65
                anchors.left: parent.left
                anchors.leftMargin: 16

                TextField {
                    id: searchText
                    placeholderText: qsTr("Search or join channel")
                    anchors.left: parent.left
                    anchors.leftMargin: 32
                    anchors.verticalCenter: parent.verticalCenter
                    font.pixelSize: 12
                    background: Rectangle {
                        color: "#00000000"
                    }
                }

                Image {
                    id: image4
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                    fillMode: Image.PreserveAspectFit
                    source: "../../img/search.svg"
                }

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    onClicked : {
                        searchText.forceActiveFocus(Qt.MouseFocusReason)
                    }
                }
            }

            Rectangle {
                id: addChat
                width: 36
                height: 36
                color: Theme.blue
                radius: 50
                anchors.right: parent.right
                anchors.rightMargin: 16
                anchors.top: parent.top
                anchors.topMargin: 59

                Text {
                    id: addChatLbl
                    color: "#ffffff"
                    text: qsTr("+")
                    anchors.verticalCenterOffset: -1
                    anchors.horizontalCenterOffset: 1
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    lineHeight: 1
                    fontSizeMode: Text.FixedSize
                    font.bold: true
                    font.pixelSize: 28
                    state: "default"
                    rotation: 0
                    states: [
                        State {
                            name: "default"
                            PropertyChanges { target: addChatLbl; rotation: 0 }
                        },
                        State {
                            name: "rotated"
                            PropertyChanges { target: addChatLbl; rotation: 45 }
                        }
                    ]

                    transitions: [
                        Transition {
                            from: "default"
                            to: "rotated"
                            RotationAnimation { 
                                duration: 150;
                                direction: RotationAnimation.Clockwise
                                easing.type: Easing.InCubic
                            }
                        },
                        Transition {
                            from: "rotated"
                            to: "default"
                            RotationAnimation { 
                                duration: 150; 
                                direction: RotationAnimation.Counterclockwise 
                                easing.type: Easing.OutCubic
                            }
                        }
                    ]

                }

                MouseArea {
                    anchors.fill: parent
                    acceptedButtons: Qt.LeftButton | Qt.RightButton
                    onClicked: {
                        addChatLbl.state = "rotated" 
                        let x = addChatLbl.x + addChatLbl.width / 2 - newChatMenu.width / 2
                        newChatMenu.popup(x, addChatLbl.height + 10)
                    }

                    QQC2.Menu {
                        id: newChatMenu
                        QQC2.Action { 
                            text: qsTr("Start new chat")
                            icon.source: "../../img/new_chat.svg"
                            onTriggered: {
                                console.log("TODO: Start new chat")
                            }
                        }
                        QQC2.Action { 
                            text: qsTr("Start group chat") 
                            icon.source: "../../img/group_chat.svg"
                            onTriggered: {
                                console.log("TODO: Start group chat")
                            }
                        }
                        QQC2.Action { 
                            text: qsTr("Join public chat")
                            icon.source: "../../img/public_chat.svg"
                            onTriggered: {
                                chatGroupsListView.currentIndex = chatsModel.joinChat(searchText.text);
                                searchText.text = "";
                            }
                        }
                        onAboutToHide: {
                            addChatLbl.state = "default" 
                        }
                        topPadding: 16
                        bottomPadding: 16

                        delegate: QQC2.MenuItem {
                            id: addChatMenuItem
                            implicitWidth: 200
                            implicitHeight: 40
                            font.pixelSize: 15
                            icon.color: addChatMenuItem.highlighted ? "white" : Theme.blue
                            background: Rectangle {
                                implicitWidth: 220
                                implicitHeight: 40
                                color: addChatMenuItem.highlighted ? Theme.blue : "transparent"
                            }
                        }

                        background: Rectangle {
                            id: bgAddItemMenu
                            implicitWidth: 220
                            implicitHeight: 172
                            color: "transparent"

                            Rectangle {
                                id: bgAddItemMenuArrow
                                color: Theme.white2
                                height: 14
                                width: 14
                                rotation: 135
                                x: bgAddItemMenu.width / 2 - width / 2
                                layer.enabled: true
                                layer.effect: DropShadow{
                                    width: bgAddItemMenuArrow.width
                                    height: bgAddItemMenuArrow.height
                                    x: bgAddItemMenuArrow.x
                                    y: bgAddItemMenuArrow.y + 10
                                    visible: bgAddItemMenuArrow.visible
                                    source: bgAddItemMenuArrow
                                    horizontalOffset: 0
                                    verticalOffset: 5
                                    radius: 10
                                    samples: 15
                                    color: "#22000000"
                                }
                            }

                            Rectangle {
                                id: bgAddItemMenu2
                                y: 7
                                implicitWidth: 220
                                implicitHeight: 152
                                color: Theme.white2
                                radius: 16
                                layer.enabled: true
                                layer.effect: DropShadow{
                                    width: bgAddItemMenu2.width
                                    height: bgAddItemMenu2.height
                                    x: bgAddItemMenu2.x
                                    y: bgAddItemMenu2.y + 10
                                    visible: bgAddItemMenu2.visible
                                    source: bgAddItemMenu2
                                    horizontalOffset: 0
                                    verticalOffset: 7
                                    radius: 10
                                    samples: 15
                                    color: "#22000000"
                                }
                            }
                            
                        }
                    }
                }
            }
        }

        StackLayout {
            Layout.fillHeight: true
            Layout.fillWidth: true

            currentIndex: chatGroupsListView.count > 0 ? 1 : 0
            Item {
                id: element1
                Layout.fillHeight: true
                Layout.fillWidth: true

                ColumnLayout {
                    anchors.right: parent.right
                    anchors.rightMargin: 20
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    anchors.top: parent.top
                    anchors.topMargin: 20
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Row {
                        id: description
                        Layout.fillHeight: false
                        Layout.fillWidth: true
                        width: parent.width

                        Text {
                            width: parent.width
                            text: qsTr("Follow your interests in one of the many Public Chats.")
                            font.pointSize: 15
                            wrapMode: Text.WordWrap
                            verticalAlignment: Text.AlignTop
                            horizontalAlignment: Text.AlignHCenter
                            fontSizeMode: Text.FixedSize
                            renderType: Text.QtRendering
                            onLinkActivated: console.log(link)
                        }
                    }

                    RowLayout {
                        id: row
                        Layout.fillHeight: false
                        Layout.fillWidth: true
                        anchors.right: parent.right
                        anchors.rightMargin: 0
                        anchors.left: parent.left
                        anchors.leftMargin: 0
                        anchors.top: description.bottom
                        anchors.topMargin: 20

                        Flow {
                            Layout.fillHeight: false
                            Layout.fillWidth: true
                            spacing: 6

                            SuggestedChannel { channel: "introductions" }
                            SuggestedChannel { channel: "chitchat" }
                            SuggestedChannel { channel: "status" }
                            SuggestedChannel { channel: "crypto" }
                            SuggestedChannel { channel: "tech" }
                            SuggestedChannel { channel: "music" }
                            SuggestedChannel { channel: "movies" }
                            SuggestedChannel { channel: "test" }
                            SuggestedChannel { channel: "test2" }
                        }
                    }
                }
            }

            Item {
                Component {
                    id: chatViewDelegate

                    Rectangle {
                        id: wrapper
                        color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent
                        anchors.right: parent.right
                        anchors.rightMargin: Theme.padding
                        anchors.top: applicationWindow.top
                        anchors.topMargin: 0
                        anchors.left: parent.left
                        anchors.leftMargin: Theme.padding
                        radius: 8
                        // Hide the box if it is filtered out
                        property bool isVisible: searchStr == "" || name.includes(searchStr)
                        visible: isVisible ? true : false
                        height: isVisible ? 64 : 0

                        MouseArea {
                            cursorShape: Qt.PointingHandCursor;
                            anchors.fill: parent
                            onClicked: {
                                chatsModel.setActiveChannelByIndex(index)
                                chatGroupsListView.currentIndex = index
                            }
                        }

                        Rectangle {
                            id: contactImage
                            width: 40
                            color: Theme.darkGrey
                            anchors.left: parent.left
                            anchors.leftMargin: Theme.padding
                            anchors.top: parent.top
                            anchors.topMargin: 12
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: 12
                            radius: 50
                        }

                        Text {
                            id: contactInfo
                            text: name
                            anchors.right: contactTime.left
                            anchors.rightMargin: Theme.smallPadding
                            elide: Text.ElideRight
                            font.weight: Font.Medium
                            font.pixelSize: 15
                            anchors.left: contactImage.right
                            anchors.leftMargin: Theme.padding
                            anchors.top: parent.top
                            anchors.topMargin: Theme.smallPadding
                            color: "black"
                        }
                        Text {
                            id: lastChatMessage
                            text: lastMessage || qsTr("No messages")
                            anchors.right: contactNumberChatsCircle.left
                            anchors.rightMargin: Theme.smallPadding
                            elide: Text.ElideRight
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: Theme.smallPadding
                            font.pixelSize: 15
                            anchors.left: contactImage.right
                            anchors.leftMargin: Theme.padding
                            color: Theme.darkGrey
                        }
                        Text {
                            id: contactTime
                            text: timestamp
                            anchors.right: parent.right
                            anchors.rightMargin: Theme.padding
                            anchors.top: parent.top
                            anchors.topMargin: Theme.smallPadding
                            font.pixelSize: 11
                            color: Theme.darkGrey
                        }
                        Rectangle {
                            id: contactNumberChatsCircle
                            width: 22
                            height: 22
                            radius: 50
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: Theme.smallPadding
                            anchors.right: parent.right
                            anchors.rightMargin: Theme.padding
                            color: Theme.blue
                            visible: unviewedMessagesCount > 0
                            Text {
                                id: contactNumberChats
                                text: unviewedMessagesCount
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.verticalCenter: parent.verticalCenter
                                color: "white"
                            }
                        }
                    }
                }

                ListView {
                    id: chatGroupsListView
                    anchors.topMargin: 24
                    anchors.fill: parent
                    model: chatsModel.chats
                    delegate: chatViewDelegate
                }
            }
        }
    }

}


/*##^##
Designer {
    D{i:0;height:770;width:300}
}
##^##*/