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

300 lines
11 KiB
QML

import QtQuick 2.3
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
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: element3
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
}
MouseArea {
anchors.fill: parent
onClicked : {
chatGroupsListView.currentIndex = chatsModel.joinChat(searchText.text);
searchText.text = "";
}
}
}
}
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}
}
##^##*/