extract ChatMessages into its own files

This commit is contained in:
Iuri Matias 2020-05-27 18:59:17 -04:00
parent c1ec5de949
commit de9d5ad63f
4 changed files with 114 additions and 99 deletions

View File

@ -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

View File

@ -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()
}
}
}

View File

@ -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
}
}

View File

@ -1 +1,2 @@
TopBar 1.0 TopBar.qml
TopBar 1.0 TopBar.qml
ChatMessages 1.0 ChatMessages.qml