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

273 lines
8.1 KiB
QML
Raw Normal View History

2020-06-17 19:18:31 +00:00
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "../../../shared"
import "../../../imports"
2020-06-25 16:27:46 +00:00
import "./components"
2020-05-27 21:59:34 +00:00
import "./ChatColumn"
import "./data"
StackLayout {
id: chatColumnLayout
property int chatGroupsListViewCount: 0
2020-07-09 17:47:36 +00:00
property bool isReply: false
property bool isImage: false
property bool isExtendedInput: isReply || isImage
property var appSettings
property bool isConnected: false
Layout.fillHeight: true
Layout.fillWidth: true
2020-05-28 12:56:43 +00:00
Layout.minimumWidth: 300
currentIndex: chatsModel.activeChannelIndex > -1 && chatGroupsListViewCount > 0 ? 0 : 1
function showReplyArea(){
isReply = true;
isImage = false;
replyAreaContainer.setup()
}
function showImageArea(imagePath){
isImage = true;
isReply = false;
sendImageArea.image = imagePath[0];
}
function hideExtendedArea(){
isImage = false;
isReply = false;
replyAreaContainer.setup();
sendImageArea.image = "";
}
ColumnLayout {
2020-07-09 17:47:36 +00:00
spacing: 0
RowLayout {
id: chatTopBar
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.fillWidth: true
z: 60
2020-07-09 17:47:36 +00:00
spacing: 0
TopBar {
id: topBar
}
}
RowLayout {
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
z: 60
Rectangle {
Component.onCompleted: {
if(!isConnected){
connectedStatusRect.visible = true
}
}
id: connectedStatusRect
Layout.fillWidth: true
height: 40;
color: isConnected ? Style.current.green : Style.current.darkGrey
visible: false
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: Style.current.white
id: connectedStatusLbl
text: isConnected ?
qsTr("Connected") :
qsTr("Disconnected")
}
}
Timer {
id: timer
}
Connections {
target: chatsModel
onOnlineStatusChanged: {
isConnected = connected
if(connected){
timer.setTimeout(function(){
connectedStatusRect.visible = false;
}, 5000);
} else {
connectedStatusRect.visible = true;
}
}
}
}
RowLayout {
id: chatContainer
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
2020-07-09 17:47:36 +00:00
spacing: 0
2020-05-28 17:34:54 +00:00
ChatMessages {
2020-07-09 17:47:36 +00:00
id: chatMessages
2020-05-28 17:34:54 +00:00
messageList: chatsModel.messageList
appSettings: chatColumnLayout.appSettings
2020-05-28 17:34:54 +00:00
}
}
2020-06-25 16:27:46 +00:00
ProfilePopup {
id: profilePopup
}
EmojiReactions {
id: reactionModel
}
2020-07-09 17:47:36 +00:00
PopupMenu {
id: messageContextMenu
width: emojiRow.width
Row {
id: emojiRow
spacing: Style.current.smallPadding
leftPadding: Style.current.smallPadding
rightPadding: Style.current.smallPadding
bottomPadding: Style.current.padding
Repeater {
model: reactionModel
delegate: EmojiReaction {
source: "../../img/" + filename
emojiId: model.emojiId
}
}
}
Separator {
anchors.topMargin: 0
anchors.top: emojiRow.bottom
}
2020-07-09 17:47:36 +00:00
Action {
id: viewProfileAction
2020-07-16 15:20:29 +00:00
//% "View profile"
text: qsTrId("view-profile")
2020-07-09 17:47:36 +00:00
onTriggered: profilePopup.open()
}
Action {
2020-07-16 15:20:29 +00:00
//% "Reply to"
text: qsTrId("reply-to")
onTriggered: showReplyArea()
2020-07-09 17:47:36 +00:00
}
}
ListModel {
id: suggestions
}
Connections {
target: chatsModel
onActiveChannelChanged: {
suggestions.clear()
for (let i = 0; i < chatsModel.suggestionList.rowCount(); i++) {
suggestions.append({
alias: chatsModel.suggestionList.rowData(i, "alias"),
ensName: chatsModel.suggestionList.rowData(i, "ensName"),
address: chatsModel.suggestionList.rowData(i, "address"),
identicon: chatsModel.suggestionList.rowData(i, "identicon"),
ensVerified: chatsModel.suggestionList.rowData(i, "ensVerified")
});
}
}
}
Rectangle {
2020-07-09 17:47:36 +00:00
id: inputArea
color: Style.current.background
2020-07-09 17:47:36 +00:00
border.width: 1
border.color: Style.current.border
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
Layout.fillWidth: true
Layout.preferredWidth: parent.width
height: !isExtendedInput ? 70 : 140
Layout.preferredHeight: height
2020-07-09 17:47:36 +00:00
2020-07-20 15:38:24 +00:00
SuggestionBox {
id: suggestionsBox
model: suggestions
width: chatContainer.width
anchors.bottom: inputArea.top
anchors.left: inputArea.left
filter: chatInput.textInput.text
cursorPosition: chatInput.textInput.cursorPosition
2020-07-20 15:38:24 +00:00
property: "ensName, alias"
onItemSelected: function (item, lastAtPosition, lastCursorPosition) {
2020-07-20 15:38:24 +00:00
let currentText = chatInput.textInput.text
let lastAt = currentText.lastIndexOf("@")
let aliasName = item[suggestionsBox.property.split(",").map(p => p.trim()).find(p => !!item[p])]
let nameLen = aliasName.length + 2 // We're doing a +2 here because of the `@` and the trailing whitespace
let position = 0;
let text = ""
if (currentText === "@") {
2020-07-20 15:38:24 +00:00
position = nameLen
text = "@" + aliasName + " "
} else {
let left = currentText.substring(0, lastAtPosition)
let right = currentText.substring(lastCursorPosition)
text = `${left}@${aliasName} ${right}`
2020-07-20 15:38:24 +00:00
position = left.length + nameLen
}
chatInput.textInput.text = text
chatInput.textInput.cursorPosition = position
suggestionsBox.suggestionsModel.clear()
}
}
2020-07-09 17:47:36 +00:00
ReplyArea {
2020-07-10 22:22:39 +00:00
id: replyAreaContainer
2020-07-09 17:47:36 +00:00
visible: isReply
}
SendImageArea {
id: sendImageArea
visible: isImage
}
ChatInput {
id: chatInput
2020-07-09 17:47:36 +00:00
height: 40
anchors.top: {
if(!isExtendedInput){
return inputArea.top;
}
if(isReply){
return replyAreaContainer.bottom;
}
if(isImage){
return sendImageArea.bottom;
}
}
2020-07-09 17:47:36 +00:00
anchors.topMargin: 4
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
}
2020-05-28 00:12:07 +00:00
EmptyChat {}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";height:770;width:800}
}
##^##*/