tan
/
Spectral
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Separate different message delegates.

square-messages
Black Hat 2018-07-10 12:18:21 +08:00
parent 236f8ce48b
commit 31d435e6f4
11 changed files with 170 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
matrix/controller.cpp
View File

@ -51,6 +51,10 @@ void Controller::logout() {
setIsLogin(false);
}
void Controller::uploadFile(QString filename) {
m_connection->uploadFile(filename);
}
void Controller::connected() {
qDebug() << "Logged in.";
setHomeserver(m_connection->homeserver().toString());

2
matrix/controller.h
View File

@ -32,6 +32,8 @@ class Controller : public QObject {
Q_INVOKABLE void loginWithCredentials(QString, QString, QString);
Q_INVOKABLE void logout();
Q_INVOKABLE void uploadFile(QString);
// All the non-Q_INVOKABLE functions.
// All the Q_PROPERTYs.

52
qml/component/ImageBubble.qml Normal file
View File

@ -0,0 +1,52 @@
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
Row {
id: messageRow
spacing: 6
ImageStatus {
id: avatar
width: height
height: 40
round: false
visible: !sentByMe
source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
displayText: author.displayName
MouseArea {
anchors.fill: parent
hoverEnabled: true
ToolTip.visible: containsMouse
ToolTip.text: author.displayName
}
}
Rectangle {
id: messageRect
width: messageImage.implicitWidth + 24
height: messageImage.implicitHeight + 24
color: sentByMe ? "lightgrey" : Material.accent
Image {
id: messageImage
anchors.centerIn: parent
source: "image://mxc/" + content.url
MouseArea {
anchors.fill: parent
hoverEnabled: true
propagateComposedEvents: true
ToolTip.visible: containsMouse
ToolTip.text: content.body
}
}
}
}

59
qml/component/MessageBubble.qml Normal file
View File

@ -0,0 +1,59 @@
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
Row {
readonly property bool isNotice: eventType === "notice"
id: messageRow
spacing: 6
ImageStatus {
id: avatar
width: height
height: 40
round: false
visible: !sentByMe && aboveAuthor !== author
source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
displayText: author.displayName
MouseArea {
anchors.fill: parent
hoverEnabled: true
ToolTip.visible: containsMouse
ToolTip.text: author.displayName
}
}
Rectangle {
width: height
height: 40
color: "transparent"
visible: !sentByMe && aboveAuthor === author
}
Rectangle {
id: messageRect
width: Math.min(messageText.implicitWidth + 24, messageListView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
height: messageText.implicitHeight + 24
color: isNotice ? "transparent" : sentByMe ? "lightgrey" : Material.accent
border.color: Material.accent
border.width: isNotice ? 2 : 0
Label {
id: messageText
text: display
color: isNotice ? "black" : sentByMe ? "black" : "white"
anchors.fill: parent
anchors.margins: 12
wrapMode: Label.Wrap
linkColor: isNotice ? Material.accent : sentByMe ? Material.accent : "white"
textFormat: Text.StyledText
}
}
}

126
qml/component/MessageDelegate.qml
View File

@ -3,22 +3,17 @@ import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
Item {
id: messageDelegate
readonly property bool sentByMe: author === currentRoom.localUser
anchors.right: messageRow.visible && sentByMe ? parent.right : undefined
anchors.horizontalCenter: stateText.visible ? parent.horizontalCenter : undefined
width: delegateLoader.width
height: delegateLoader.height
width: {
if (messageRow.visible) return messageRow.width
if (stateText.visible) return stateText.width
}
height: {
if (messageRow.visible) return messageRow.height
if (stateText.visible) return stateText.height
}
anchors.right: (eventType === "message" || eventType === "image") && sentByMe ? parent.right : undefined
anchors.horizontalCenter: (eventType === "state" || eventType === "emote") ? parent.horizontalCenter : undefined
MouseArea {
id: baseMouseArea
anchors.fill: parent
ToolTip.visible: pressed
@ -26,105 +21,20 @@ Item {
ToolTip.text: time
}
Row {
id: messageRow
visible: eventType === "message" || eventType === "image" || eventType === "notice"
Loader {
id: delegateLoader
spacing: 6
ImageStatus {
id: avatar
width: height
height: 40
round: false
visible: !sentByMe
source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
displayText: author.displayName
MouseArea {
anchors.fill: parent
hoverEnabled: true
ToolTip.visible: containsMouse
ToolTip.text: author.displayName
source: {
switch (eventType) {
case "notice":
case "message":
return "MessageBubble.qml"
case "image":
return "ImageBubble.qml"
case "emote":
case "state":
return "StateBubble.qml"
}
}
Rectangle {
id: messageRect
width: {
if (eventType === "image") return messageImage.width + 24
if (eventType === "message")
return Math.min(messageText.implicitWidth + 24, messageListView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
if (eventType === "notice")
return Math.min(noticeText.implicitWidth + 24, messageListView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
}
height: {
if (eventType === "image") return messageImage.height + 24
if (eventType === "message") return messageText.implicitHeight + 24
if (eventType === "notice") return noticeText.implicitHeight + 24
}
color: noticeText.visible ? "transparent" : sentByMe ? "lightgrey" : Material.accent
border.color: Material.accent
border.width: noticeText.visible ? 2 : 0
Label {
id: messageText
visible: eventType === "message"
text: display
color: sentByMe ? "black" : "white"
anchors.fill: parent
anchors.margins: 12
wrapMode: Label.Wrap
textFormat: Text.RichText
}
Label {
id: noticeText
visible: eventType === "notice"
text: display
color: "black"
anchors.fill: parent
anchors.margins: 12
wrapMode: Label.Wrap
textFormat: Text.RichText
}
Image {
id: messageImage
anchors.centerIn: parent
visible: eventType === "image"
source: visible? "image://mxc/" + content.url : ""
MouseArea {
anchors.fill: parent
hoverEnabled: true
propagateComposedEvents: true
ToolTip.visible: containsMouse
ToolTip.text: visible ? content.body : ""
}
}
}
}
Label {
id: stateText
visible: eventType === "state" || eventType === "emote"
width: Math.min(implicitWidth, messageListView.width)
height: implicitHeight
padding: 12
text: author.displayName + " " + display
color: eventType === "state" ? "black" : "white"
wrapMode: Label.Wrap
textFormat: Text.StyledText
background: Rectangle {
anchors.fill: parent
color: eventType === "state" ? "lightgrey" : Material.accent
}
}
}

2
qml/component/SideNavButton.qml
View File

@ -29,7 +29,7 @@ Item {
anchors.fill: parent
onClicked: {
if(!page && stackView.currentItem !== page) {
if(page && stackView.currentItem !== page) {
if(stackView.depth === 1) {
stackView.replace(page)
} else {

24
qml/component/StateBubble.qml Normal file
View File

@ -0,0 +1,24 @@
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
Rectangle {
readonly property bool isEmote: eventType === "emote"
id: stateRect
width: Math.min(stateText.implicitWidth + 24, messageListView.width)
height: stateText.implicitHeight + 24
color: isEmote ? Material.accent : "lightgrey"
Label {
id: stateText
text: "<b>" + author.displayName + "</b> " + display
color: isEmote ? "white" : "black"
anchors.fill: parent
anchors.margins: 12
wrapMode: Label.Wrap
textFormat: Text.StyledText
}
}

2
qml/form/ListForm.qml
View File

@ -125,7 +125,7 @@ Item {
height: parent.height
}
Text {
Label {
height: parent.height
visible: !mini
text: "Search"

11
qml/form/RoomForm.qml
View File

@ -89,6 +89,7 @@ Item {
displayMarginBeginning: 40
displayMarginEnd: 40
verticalLayoutDirection: ListView.BottomToTop
maximumFlickVelocity: 1024
spacing: 12
model: MessageEventModel{
@ -98,13 +99,11 @@ Item {
onRoomChanged: if (room.timelineSize === 0) room.getPreviousContent(50)
}
delegate: MessageDelegate {
}
delegate: MessageDelegate {}
onAtYBeginningChanged: if (atYBeginning && currentRoom) currentRoom.getPreviousContent(50)
ScrollBar.vertical: ScrollBar { /*anchors.left: messageListView.right*/ }
ScrollBar.vertical: ScrollBar {}
Behavior on contentY {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
@ -125,7 +124,7 @@ Item {
color: "white"
}
opacity: hovered ? 0.7 : 0.4
opacity: pressed ? 1 : hovered ? 0.7 : 0.4
Material.background: Qt.lighter(Material.accent)
onClicked: parent.positionViewAtBeginning()
@ -188,7 +187,7 @@ Item {
type = "m.emote"
}
// var parsedText = Markdown.markdown_parser(text)
// var parsedText = Markdown.markdown_parser(text)
currentRoom.postMessage(type, text)
}
}

2
qml/main.qml
View File

@ -118,7 +118,7 @@ ApplicationWindow {
anchors.fill: parent
anchors.margins: 15
source: matriqueController.connection.localUser && matriqueController.connection.localUser.avatarUrl ? "image://mxc/" + matriqueController.connection.localUser.avatarUrl : ""
source: matriqueController.isLogin ? matriqueController.connection.localUser && matriqueController.connection.localUser.avatarUrl ? "image://mxc/" + matriqueController.connection.localUser.avatarUrl : "" : "qrc:/asset/img/avatar.png"
displayText: matriqueController.connection.localUser && matriqueController.connection.localUser.displayText ? matriqueController.connection.localUser.displayText : "N"
opaqueBackground: false
}

3
res.qrc
View File

@ -18,5 +18,8 @@
<file>asset/img/icon.png</file>
<file>js/md.js</file>
<file>qml/component/MessageDelegate.qml</file>
<file>qml/component/MessageBubble.qml</file>
<file>qml/component/ImageBubble.qml</file>
<file>qml/component/StateBubble.qml</file>
</qresource>
</RCC>