From de9d5ad63fe734aa75240e8314e68ddad495961e Mon Sep 17 00:00:00 2001 From: Iuri Matias Date: Wed, 27 May 2020 18:59:17 -0400 Subject: [PATCH] extract ChatMessages into its own files --- ui/app/AppLayouts/Chat/ChatColumn.qml | 100 +----------------- .../Chat/ChatColumn/ChatMessages.qml | 29 +++++ ui/app/AppLayouts/Chat/ChatColumn/Message.qml | 81 ++++++++++++++ ui/app/AppLayouts/Chat/ChatColumn/qmldir | 3 +- 4 files changed, 114 insertions(+), 99 deletions(-) create mode 100644 ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml create mode 100644 ui/app/AppLayouts/Chat/ChatColumn/Message.qml diff --git a/ui/app/AppLayouts/Chat/ChatColumn.qml b/ui/app/AppLayouts/Chat/ChatColumn.qml index ea0270cfe..ae21b7a26 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn.qml @@ -32,104 +32,8 @@ StackLayout { Layout.fillHeight: true Layout.alignment: Qt.AlignLeft | Qt.AlignTop - Component { - id: chatLogViewDelegate - Rectangle { - id: chatBox - height: 60 + chatText.height - color: "#00000000" - border.color: "#00000000" - Layout.alignment: Qt.AlignLeft | Qt.AlignTop - Layout.fillWidth: true - width: chatLogView.width - - Image { - id: chatImage - width: 30 - height: 30 - anchors.left: !isCurrentUser ? parent.left : undefined - anchors.leftMargin: !isCurrentUser ? Theme.padding : 0 - anchors.right: !isCurrentUser ? undefined : parent.right - anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding - anchors.top: parent.top - anchors.topMargin: Theme.padding - fillMode: Image.PreserveAspectFit - source: identicon - } - - TextEdit { - id: chatName - text: userName - anchors.top: parent.top - anchors.topMargin: 22 - anchors.left: !isCurrentUser ? chatImage.right : undefined - anchors.leftMargin: Theme.padding - anchors.right: !isCurrentUser ? undefined : chatImage.left - anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding - font.bold: true - font.pixelSize: 14 - readOnly: true - wrapMode: Text.WordWrap - selectByMouse: true - } - - TextEdit { - id: chatText - text: message - horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight - font.family: "Inter" - wrapMode: Text.WordWrap - anchors.right: !isCurrentUser ? parent.right : chatName.right - anchors.rightMargin: !isCurrentUser ? 60 : 0 - anchors.left: !isCurrentUser ? chatName.left : parent.left - anchors.leftMargin: !isCurrentUser ? 0 : 60 - anchors.top: chatName.bottom - anchors.topMargin: Theme.padding - font.pixelSize: 14 - readOnly: true - selectByMouse: true - Layout.fillWidth: true - } - - TextEdit { - id: chatTime - color: Theme.darkGrey - font.family: "Inter" - text: timestamp - anchors.top: chatText.bottom - anchors.bottomMargin: Theme.padding - anchors.right: !isCurrentUser ? parent.right : undefined - anchors.rightMargin: !isCurrentUser ? Theme.padding : 0 - anchors.left: !isCurrentUser ? undefined : parent.left - anchors.leftMargin: !isCurrentUser ? 0 : Theme.padding - font.pixelSize: 10 - readOnly: true - selectByMouse: true - } - } - } - - ListView { - id: chatLogView - model: chatsModel.messageList - Layout.fillWidth: true - Layout.fillHeight: true - delegate: chatLogViewDelegate - highlightFollowsCurrentItem: true - onCountChanged: { - if (!this.atYEnd) { - // User has scrolled up, we don't want to scroll back - return - } - - // positionViewAtEnd doesn't work well. Instead, we use highlightFollowsCurrentItem - // and set the current Item/Index to the latest item - while (this.currentIndex < this.count - 1) { - this.incrementCurrentIndex() - } - } - } - } + ChatMessages {} + } RowLayout { id: chatInputContainer diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml new file mode 100644 index 000000000..b6609a41f --- /dev/null +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml @@ -0,0 +1,29 @@ +import QtQuick 2.3 +import QtQuick.Controls 2.3 +import QtQuick.Controls 2.12 as QQC2 +import QtQuick.Layouts 1.3 +import Qt.labs.platform 1.1 +import "../../../../shared" +import "../../../../imports" + +ListView { + id: chatLogView + model: chatsModel.messageList + Layout.fillWidth: true + Layout.fillHeight: true + delegate: Message {} + highlightFollowsCurrentItem: true + + onCountChanged: { + if (!this.atYEnd) { + // User has scrolled up, we don't want to scroll back + return + } + + // positionViewAtEnd doesn't work well. Instead, we use highlightFollowsCurrentItem + // and set the current Item/Index to the latest item + while (this.currentIndex < this.count - 1) { + this.incrementCurrentIndex() + } + } +} diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml new file mode 100644 index 000000000..438062f0a --- /dev/null +++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml @@ -0,0 +1,81 @@ +import QtQuick 2.3 +import QtQuick.Controls 2.3 +import QtQuick.Controls 2.12 as QQC2 +import QtQuick.Layouts 1.3 +import Qt.labs.platform 1.1 +import "../../../../shared" +import "../../../../imports" + +Rectangle { + id: chatBox + height: 60 + chatText.height + color: "#00000000" + border.color: "#00000000" + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.fillWidth: true + width: chatLogView.width + + Image { + id: chatImage + width: 30 + height: 30 + anchors.left: !isCurrentUser ? parent.left : undefined + anchors.leftMargin: !isCurrentUser ? Theme.padding : 0 + anchors.right: !isCurrentUser ? undefined : parent.right + anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding + anchors.top: parent.top + anchors.topMargin: Theme.padding + fillMode: Image.PreserveAspectFit + source: identicon + } + + TextEdit { + id: chatName + text: userName + anchors.top: parent.top + anchors.topMargin: 22 + anchors.left: !isCurrentUser ? chatImage.right : undefined + anchors.leftMargin: Theme.padding + anchors.right: !isCurrentUser ? undefined : chatImage.left + anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding + font.bold: true + font.pixelSize: 14 + readOnly: true + wrapMode: Text.WordWrap + selectByMouse: true + } + + TextEdit { + id: chatText + text: message + horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight + font.family: "Inter" + wrapMode: Text.WordWrap + anchors.right: !isCurrentUser ? parent.right : chatName.right + anchors.rightMargin: !isCurrentUser ? 60 : 0 + anchors.left: !isCurrentUser ? chatName.left : parent.left + anchors.leftMargin: !isCurrentUser ? 0 : 60 + anchors.top: chatName.bottom + anchors.topMargin: Theme.padding + font.pixelSize: 14 + readOnly: true + selectByMouse: true + Layout.fillWidth: true + } + + TextEdit { + id: chatTime + color: Theme.darkGrey + font.family: "Inter" + text: timestamp + anchors.top: chatText.bottom + anchors.bottomMargin: Theme.padding + anchors.right: !isCurrentUser ? parent.right : undefined + anchors.rightMargin: !isCurrentUser ? Theme.padding : 0 + anchors.left: !isCurrentUser ? undefined : parent.left + anchors.leftMargin: !isCurrentUser ? 0 : Theme.padding + font.pixelSize: 10 + readOnly: true + selectByMouse: true + } +} diff --git a/ui/app/AppLayouts/Chat/ChatColumn/qmldir b/ui/app/AppLayouts/Chat/ChatColumn/qmldir index 5db955e24..b27fe3b32 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/qmldir +++ b/ui/app/AppLayouts/Chat/ChatColumn/qmldir @@ -1 +1,2 @@ -TopBar 1.0 TopBar.qml \ No newline at end of file +TopBar 1.0 TopBar.qml +ChatMessages 1.0 ChatMessages.qml \ No newline at end of file