d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-11-22 11:00:48 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

prepare code for message bubbles and dynamic message layout

Browse source
This commit is contained in:
Malte E 2022-02-03 20:26:20 +01:00
parent fcefdb7ca6
commit 04b47d6882
5 changed files with 106 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
resources/qml/TimelineRow.qml
View file

@ -71,27 +71,39 @@ Item {
gesturePolicy: TapHandler.ReleaseWithinBounds
}
RowLayout {
Item {
id: row
anchors.rightMargin: 1
anchors.leftMargin: Nheko.avatarSize + 16
anchors.left: parent.left
anchors.right: parent.right
Column {
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
spacing: 4
Layout.topMargin: 1
Layout.bottomMargin: 1
height: msg.height+reactionRow.height+2
GridLayout {
id: msg
anchors {
right: parent.right
left: parent.left
top: parent.top
topMargin: 1
bottomMargin: 1
}
rowSpacing: 0
columnSpacing: 0
columns: 2
rows: 2
// fancy reply, if this is a reply
Reply {
Layout.row: 0
Layout.column: 0
Layout.fillWidth: true
Layout.margins: 0
id: reply
function fromModel(role) {
return replyTo != "" ? room.dataById(replyTo, role, r.eventId) : null;
}
visible: replyTo
userColor: r.relatedEventCacheBuster, TimelineManager.userColor(userId, Nheko.colors.base)
blurhash: r.relatedEventCacheBuster, fromModel(Room.Blurhash) ?? ""
@ -118,9 +130,12 @@ Item {
// actual message content
MessageDelegate {
Layout.row: 1
Layout.column: 0
Layout.fillWidth: true
Layout.margins: 2
id: contentItem
width: parent.width
blurhash: r.blurhash
body: r.body
formattedBody: r.formattedBody
@ -144,67 +159,76 @@ Item {
isReply: false
}
Reactions {
id: reactionRow
RowLayout {
Layout.column: 1
Layout.row: 0
Layout.rowSpan: 2
Layout.alignment: Qt.AlignTop | Qt.AlignRight
reactions: r.reactions
eventId: r.eventId
StatusIndicator {
Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.preferredHeight: 16
width: 16
status: r.status
eventId: r.eventId
}
Image {
visible: isEdited || eventId == chat.model.edit
Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.preferredHeight: 16
Layout.preferredWidth: 16
height: 16
width: 16
sourceSize.width: 16 * Screen.devicePixelRatio
sourceSize.height: 16 * Screen.devicePixelRatio
source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((eventId == chat.model.edit) ? Nheko.colors.highlight : Nheko.colors.buttonText)
ToolTip.visible: editHovered.hovered
ToolTip.delay: Nheko.tooltipDelay
ToolTip.text: qsTr("Edited")
HoverHandler {
id: editHovered
}
}
EncryptionIndicator {
visible: room.isEncrypted
encrypted: isEncrypted
trust: trustlevel
Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.preferredHeight: 16
Layout.preferredWidth: 16
}
Label {
Layout.alignment: Qt.AlignRight | Qt.AlignTop
text: timestamp.toLocaleTimeString(Locale.ShortFormat)
width: Math.max(implicitWidth, text.length * fontMetrics.maximumCharacterWidth)
color: Nheko.inactiveColors.text
ToolTip.visible: ma.hovered
ToolTip.delay: Nheko.tooltipDelay
ToolTip.text: Qt.formatDateTime(timestamp, Qt.DefaultLocaleLongDate)
HoverHandler {
id: ma
}
}
}
}
StatusIndicator {
Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.preferredHeight: 16
width: 16
status: r.status
Reactions {
anchors {
top: msg.bottom
left: parent.left
}
id: reactionRow
reactions: r.reactions
eventId: r.eventId
}
Image {
visible: isEdited || eventId == chat.model.edit
Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.preferredHeight: 16
Layout.preferredWidth: 16
height: 16
width: 16
sourceSize.width: 16 * Screen.devicePixelRatio
sourceSize.height: 16 * Screen.devicePixelRatio
source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((eventId == chat.model.edit) ? Nheko.colors.highlight : Nheko.colors.buttonText)
ToolTip.visible: editHovered.hovered
ToolTip.delay: Nheko.tooltipDelay
ToolTip.text: qsTr("Edited")
HoverHandler {
id: editHovered
}
}
EncryptionIndicator {
visible: room.isEncrypted
encrypted: isEncrypted
trust: trustlevel
Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.preferredHeight: 16
Layout.preferredWidth: 16
}
Label {
Layout.alignment: Qt.AlignRight | Qt.AlignTop
text: timestamp.toLocaleTimeString(Locale.ShortFormat)
width: Math.max(implicitWidth, text.length * fontMetrics.maximumCharacterWidth)
color: Nheko.inactiveColors.text
ToolTip.visible: ma.hovered
ToolTip.delay: Nheko.tooltipDelay
ToolTip.text: Qt.formatDateTime(timestamp, Qt.DefaultLocaleLongDate)
HoverHandler {
id: ma
}
}
}
}

9
resources/qml/delegates/MessageDelegate.qml
View file

@ -13,7 +13,7 @@ Item {
required property bool isReply
property alias child: chooser.child
property real implicitWidth: (chooser.child && chooser.child.implicitWidth) ? chooser.child.implicitWidth : width
// property real implicitWidth: (chooser.child && chooser.child.implicitWidth) ? chooser.child.implicitWidth : width
required property double proportionalHeight
required property int type
required property string typeString
@ -35,14 +35,17 @@ Item {
required property int encryptionError
required property int relatedEventCacheBuster
height: chooser.child ? chooser.child.height : Nheko.paddingLarge
Layout.preferredHeight: chooser.child ? chooser.child.height : Nheko.paddingLarge
DelegateChooser {
id: chooser
//role: "type" //< not supported in our custom implementation, have to use roleValue
roleValue: type
anchors.fill: parent
//anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
DelegateChoice {
roleValue: MtxEvent.UnknownMessage

2
resources/qml/delegates/Placeholder.qml
View file

@ -10,6 +10,6 @@ MatrixText {
required property string typeString
text: qsTr("unimplemented event: ") + typeString
width: parent.width
// width: parent.width
color: Nheko.inactiveColors.text
}

14
resources/qml/delegates/Reply.qml
View file

@ -35,7 +35,7 @@ Item {
property int encryptionError
property int relatedEventCacheBuster
width: parent.width
Layout.preferredHeight: replyContainer.height
height: replyContainer.height
CursorShape {
@ -52,12 +52,12 @@ Item {
color: TimelineManager.userColor(userId, Nheko.colors.base)
}
Column {
ColumnLayout {
id: replyContainer
anchors.left: colorLine.right
anchors.leftMargin: 4
width: parent.width - 8
spacing: 0
TapHandler {
acceptedButtons: Qt.LeftButton
@ -80,6 +80,7 @@ Item {
}
Text {
Layout.leftMargin: 4
id: userName_
text: TimelineManager.escapeEmoji(userName)
@ -94,8 +95,8 @@ Item {
}
MessageDelegate {
Layout.leftMargin: 4
id: reply
blurhash: r.blurhash
body: r.body
formattedBody: r.formattedBody
@ -118,7 +119,7 @@ Item {
encryptionError: r.encryptionError
// This is disabled so that left clicking the reply goes to its location
enabled: false
width: parent.width
Layout.fillWidth: true
isReply: true
}
@ -128,8 +129,7 @@ Item {
id: backgroundItem
z: -1
height: replyContainer.height
width: Math.min(Math.max(reply.implicitWidth, userName_.implicitWidth) + 8 + 4, parent.width)
anchors.fill: replyContainer
color: Qt.rgba(userColor.r, userColor.g, userColor.b, 0.1)
}

4
resources/qml/delegates/TextMessage.qml
View file

@ -33,8 +33,8 @@ MatrixText {
blockquote { margin-left: 1em; }
</style>
" + formatted.replace("<pre>", "<pre style='white-space: pre-wrap; background-color: " + Nheko.colors.alternateBase + "'>").replace("<del>", "<s>").replace("</del>", "</s>").replace("<strike>", "<s>").replace("</strike>", "</s>")
width: parent.width
height: isReply ? Math.round(Math.min(timelineView.height / 8, implicitHeight)) : undefined
// width: parent.width
//height: isReply ? Math.round(Math.min(timelineView.height / 8, implicitHeight)) : undefined
clip: isReply
selectByMouse: !Settings.mobileMode && !isReply
font.pointSize: (Settings.enlargeEmojiOnlyMessages && isOnlyEmoji > 0 && isOnlyEmoji < 4) ? Settings.fontSize * 3 : Settings.fontSize