diff --git a/CMakeLists.txt b/CMakeLists.txt
index 548d5303..7e02bf34 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -701,6 +701,8 @@ set(QML_SOURCES
resources/qml/ChatPage.qml
resources/qml/CommunitiesList.qml
resources/qml/RoomList.qml
+ resources/qml/TimelineSectionHeader.qml
+ resources/qml/TimelineDefaultMessageStyle.qml
resources/qml/TimelineView.qml
resources/qml/Avatar.qml
resources/qml/Completer.qml
diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml
index 1add0ce7..907ef63c 100644
--- a/resources/qml/MessageView.qml
+++ b/resources/qml/MessageView.qml
@@ -25,7 +25,7 @@ Item {
// HACK: https://bugreports.qt.io/browse/QTBUG-83972, qtwayland cannot auto hide menu
Connections {
function onHideMenu() {
- messageContextMenu.close();
+ messageContextMenuC.close();
replyContextMenu.close();
}
@@ -59,293 +59,9 @@ Item {
spacing: 2
verticalLayoutDirection: ListView.BottomToTop
- delegate: TimelineEvent {
- id: wrapper
- ListView.delayRemove: true
- width: chat.delegateMaxWidth
- height: Math.max((section.item?.height ?? 0) + gridContainer.implicitHeight + reactionRow.implicitHeight + unreadRow.height, 10)
- anchors.horizontalCenter: ListView.view.contentItem.horizontalCenter
- //room: chatRoot.roommodel
-
- required property var day
- required property bool isSender
- required property int index
- property var previousMessageDay: (index + 1) >= chat.count ? 0 : chat.model.dataByIndex(index + 1, Room.Day)
- property bool previousMessageIsStateEvent: (index + 1) >= chat.count ? true : chat.model.dataByIndex(index + 1, Room.IsStateEvent)
- property string previousMessageUserId: (index + 1) >= chat.count ? "" : chat.model.dataByIndex(index + 1, Room.UserId)
-
- required property date timestamp
- required property string userId
- required property string userName
- required property string threadId
- required property int userPowerlevel
- required property bool isEdited
- required property bool isEncrypted
- required property var reactions
- required property int status
- required property int trustlevel
- required property int type
- required property bool isEditable
-
- property int avatarMargin: (wrapper.isStateEvent || Settings.smallAvatars ? 0 : (Nheko.avatarSize + 8)) // align bubble with section header
-
- property alias hovered: messageHover.hovered
-
- data: [
- Loader {
- id: section
-
- property var day: wrapper.day
- property bool isSender: wrapper.isSender
- property bool isStateEvent: wrapper.isStateEvent
- property int parentWidth: wrapper.width
- property var previousMessageDay: wrapper.previousMessageDay
- property bool previousMessageIsStateEvent: wrapper.previousMessageIsStateEvent
- property string previousMessageUserId: wrapper.previousMessageUserId
- property date timestamp: wrapper.timestamp
- property string userId: wrapper.userId
- property string userName: wrapper.userName
- property string userPowerlevel: wrapper.userPowerlevel
-
- active: previousMessageUserId !== userId || previousMessageDay !== day || previousMessageIsStateEvent !== isStateEvent
- //asynchronous: true
- sourceComponent: sectionHeader
- visible: status == Loader.Ready
- z: 4
- },
- Rectangle {
- anchors.fill: gridContainer
- color: (Settings.messageHoverHighlight && messageHover.hovered) ? palette.alternateBase : "transparent"
-
- // this looks better without margins
- TapHandler {
- acceptedButtons: Qt.RightButton
- acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus | PointerDevice.TouchPad
- gesturePolicy: TapHandler.ReleaseWithinBounds
-
- onSingleTapped: messageContextMenu.show(wrapper.eventId, wrapper.threadId, wrapper.type, wrapper.isSender, wrapper.isEncrypted, wrapper.isEditable, wrapper.main.hoveredLink, wrapper.main.copyText)
- }
- },
- RowLayout {
- id: gridContainer
-
- width: wrapper.width
- y: section.visible && section.active ? section.y + section.height : 0
-
- Item {
- Layout.preferredWidth: wrapper.avatarMargin
- }
-
- AbstractButton {
- ToolTip.delay: Nheko.tooltipDelay
- ToolTip.text: qsTr("Part of a thread")
- ToolTip.visible: hovered
- Layout.fillHeight: true
- visible: wrapper.threadId
- Layout.preferredWidth: 4
-
- onClicked: room.thread = wrapper.threadId
-
- Rectangle {
- id: threadLine
-
- anchors.fill: parent
- color: TimelineManager.userColor(wrapper.threadId, palette.base)
- }
- }
- ColumnLayout {
- id: contentColumn
- Layout.fillWidth: true
-
- AbstractButton {
- id: replyRow
- visible: wrapper.reply
- Layout.fillWidth: true
- Layout.maximumHeight: timelineView.height / 8
- Layout.preferredWidth: replyRowLay.implicitWidth
- Layout.preferredHeight: replyRowLay.implicitHeight
-
- property color userColor: TimelineManager.userColor(wrapper.reply?.userId ?? '', palette.base)
-
- clip: true
-
- contentItem: RowLayout {
- id: replyRowLay
-
- anchors.fill: parent
-
-
- Rectangle {
- id: replyLine
- Layout.fillHeight: true
- color: replyRow.userColor
- Layout.preferredWidth: 4
- }
-
- ColumnLayout {
- spacing: 0
-
- AbstractButton {
- id: replyUserButton
- Layout.fillWidth: true
- contentItem: ElidedLabel {
- id: userName_
- fullText: wrapper.reply?.userName ?? ''
- color: replyRow.userColor
- textFormat: Text.RichText
- width: parent.width
- elideWidth: width
- }
- onClicked: room.openUserProfile(wrapper.reply?.userId)
- }
- data: [
- replyUserButton,
- wrapper.reply,
- ]
- }
- }
-
- background: Rectangle {
- width: replyRow.implicitContentWidth
- color: Qt.tint(palette.base, Qt.hsla(replyRow.userColor.hslHue, 0.5, replyRow.userColor.hslLightness, 0.1))
- }
- }
-
- data: [
- replyRow, wrapper.main,
- ]
- }
-
- Item {
- // spacer to fill width if needed
- Layout.fillWidth: true
- }
-
- RowLayout {
- id: metadata
-
- property int iconSize: Math.floor(fontMetrics.ascent * scaling)
- property double scaling: Settings.bubbles ? 0.75 : 1
-
- Layout.alignment: Qt.AlignTop | Qt.AlignRight
- Layout.preferredWidth: implicitWidth
- spacing: 2
- visible: !isStateEvent
-
- StatusIndicator {
- Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
- eventId: wrapper.eventId
- height: parent.iconSize
- status: wrapper.status
- width: parent.iconSize
- }
- Image {
- Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
- ToolTip.delay: Nheko.tooltipDelay
- ToolTip.text: qsTr("Edited")
- ToolTip.visible: editHovered.hovered
- height: parent.iconSize
- source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((wrapper.eventId == room.edit) ? palette.highlight : palette.buttonText)
- sourceSize.height: parent.iconSize * Screen.devicePixelRatio
- sourceSize.width: parent.iconSize * Screen.devicePixelRatio
- visible: wrapper.isEdited || wrapper.eventId == room.edit
- width: parent.iconSize
-
- HoverHandler {
- id: editHovered
-
- }
- }
- ImageButton {
- Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
- ToolTip.delay: Nheko.tooltipDelay
- ToolTip.text: qsTr("Part of a thread")
- ToolTip.visible: hovered
- buttonTextColor: TimelineManager.userColor(wrapper.threadId, palette.base)
- height: parent.iconSize
- image: ":/icons/icons/ui/thread.svg"
- visible: wrapper.threadId
- width: parent.iconSize
-
- onClicked: room.thread = threadId
- }
- EncryptionIndicator {
- Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
- encrypted: wrapper.isEncrypted
- height: parent.iconSize
- sourceSize.height: parent.iconSize * Screen.devicePixelRatio
- sourceSize.width: parent.iconSize * Screen.devicePixelRatio
- trust: wrapper.trustlevel
- visible: room.isEncrypted
- width: parent.iconSize
- }
- Label {
- id: ts
-
- Layout.alignment: Qt.AlignRight | Qt.AlignTop
- Layout.preferredWidth: implicitWidth
- ToolTip.delay: Nheko.tooltipDelay
- ToolTip.text: Qt.formatDateTime(wrapper.timestamp, Qt.DefaultLocaleLongDate)
- ToolTip.visible: ma.hovered
- color: palette.inactive.text
- font.pointSize: fontMetrics.font.pointSize * parent.scaling
- text: wrapper.timestamp.toLocaleTimeString(Locale.ShortFormat)
-
- HoverHandler {
- id: ma
-
- }
- }
- }
- },
- Item {
- id: messageActionsAnchor
- anchors.fill: gridContainer
- property alias hovered: messageHover.hovered
- HoverHandler {
- id: messageHover
- onHoveredChanged: () => {
- if (!Settings.mobileMode && hovered) {
- if (!messageActions.hovered) {
- messageActions.model = wrapper;
- messageActions.attached = wrapper;
- messageActions.anchors.bottomMargin = -gridContainer.y
- }
- }
- }
- }
- },
- Reactions {
- id: reactionRow
-
- eventId: wrapper.eventId
- layoutDirection: row.bubbleOnRight ? Qt.RightToLeft : Qt.LeftToRight
- reactions: wrapper.reactions
- width: wrapper.width - wrapper.avatarMargin
- x: wrapper.avatarMargin
-
- anchors {
- //left: row.bubbleOnRight ? undefined : row.left
- //right: row.bubbleOnRight ? row.right : undefined
- top: gridContainer.bottom
- topMargin: -4
- }
- },
- Rectangle {
- id: unreadRow
-
- color: palette.highlight
- height: visible ? 3 : 0
- visible: (wrapper.index > 0 && (room.fullyReadEventId == wrapper.eventId))
-
- anchors {
- left: parent.left
- right: parent.right
- top: reactionRow.bottom
- topMargin: 5
- }
- }
- ]
+ delegate: TimelineDefaultMessageStyle {
+ messageActions: messageActionsC
+ messageContextMenu: messageContextMenuC
}
footer: Item {
anchors.horizontalCenter: parent.horizontalCenter
@@ -380,7 +96,7 @@ Item {
source: room
}
Control {
- id: messageActions
+ id: messageActionsC
property Item attached: null
// use comma to update on scroll
@@ -405,7 +121,7 @@ Item {
property var model
- spacing: messageActions.padding
+ spacing: messageActionsC.padding
Repeater {
model: Settings.recentReactions
@@ -542,7 +258,7 @@ Item {
image: ":/icons/icons/ui/options.svg"
width: 16
- onClicked: messageContextMenu.show(row.model.eventId, row.model.threadId, row.model.type, row.model.isSender, row.model.isEncrypted, row.model.isEditable, "", row.model.body, optionsButton)
+ onClicked: messageContextMenuC.show(row.model.eventId, row.model.threadId, row.model.type, row.model.isSender, row.model.isEncrypted, row.model.isEditable, "", row.model.body, optionsButton)
}
}
}
@@ -624,152 +340,9 @@ Item {
room.setCurrentIndex(room.currentIndex);
}
}
- Component {
- id: sectionHeader
-
- Column {
- bottomPadding: Settings.bubbles ? (isSender && previousMessageDay == day ? 0 : 2) : 3
- spacing: 8
- topPadding: userName_.visible ? 4 : 0
- visible: (previousMessageUserId !== userId || previousMessageDay !== day || isStateEvent !== previousMessageIsStateEvent)
- width: parentWidth
-
- Label {
- id: dateBubble
-
- anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
- color: palette.text
- height: Math.round(fontMetrics.height * 1.4)
- horizontalAlignment: Text.AlignHCenter
- text: room ? room.formatDateSeparator(timestamp) : ""
- verticalAlignment: Text.AlignVCenter
- visible: room && previousMessageDay !== day
- width: contentWidth * 1.2
-
- background: Rectangle {
- color: palette.window
- radius: parent.height / 2
- }
- }
- Row {
- id: userInfo
-
- property int remainingWidth: chat.delegateMaxWidth - spacing - messageUserAvatar.width
-
- height: userName_.height
- spacing: 8
- visible: !isStateEvent && (!isSender || !Settings.bubbles)
-
- Avatar {
- id: messageUserAvatar
-
- ToolTip.delay: Nheko.tooltipDelay
- ToolTip.text: userid
- ToolTip.visible: messageUserAvatar.hovered
- displayName: userName
- height: Nheko.avatarSize * (Settings.smallAvatars ? 0.5 : 1)
- url: !room ? "" : room.avatarUrl(userId).replace("mxc://", "image://MxcImage/")
- userid: userId
- width: Nheko.avatarSize * (Settings.smallAvatars ? 0.5 : 1)
-
- onClicked: room.openUserProfile(userId)
- }
- Connections {
- function onRoomAvatarUrlChanged() {
- messageUserAvatar.url = room.avatarUrl(userId).replace("mxc://", "image://MxcImage/");
- }
- function onScrollToIndex(index) {
- chat.positionViewAtIndex(index, ListView.Center);
- }
-
- target: room
- }
-
- AbstractButton {
- id: userNameButton
-
- PowerlevelIndicator {
- id: powerlevelIndicator
- anchors.left: parent.left
- //anchors.horizontalCenter: parent.horizontalCenter
-
- powerlevel: userPowerlevel
- height: fontMetrics.lineSpacing
- width: fontMetrics.lineSpacing
-
- sourceSize.width: fontMetrics.lineSpacing
- sourceSize.height: fontMetrics.lineSpacing
-
- permissions: room ? room.permissions : null
- visible: isAdmin || isModerator
- }
-
- ToolTip.delay: Nheko.tooltipDelay
- ToolTip.text: userId
- ToolTip.visible: hovered
- leftPadding: powerlevelIndicator.visible ? 16 : 0
- leftInset: 0
- rightInset: 0
- rightPadding: 0
-
- contentItem: Label {
- id: userName_
-
- color: TimelineManager.userColor(userId, palette.base)
- text: TimelineManager.escapeEmoji(userNameTextMetrics.elidedText)
- textFormat: Text.RichText
- }
-
- onClicked: room.openUserProfile(userId)
-
- TextMetrics {
- id: userNameTextMetrics
-
- elide: Text.ElideRight
- elideWidth: userInfo.remainingWidth - Math.min(statusMsg.implicitWidth, userInfo.remainingWidth / 3)
- text: userName
- }
- NhekoCursorShape {
- anchors.fill: parent
- cursorShape: Qt.PointingHandCursor
- }
- }
- Label {
- id: statusMsg
-
- property string userStatus: Presence.userStatus(userId)
-
- ToolTip.delay: Nheko.tooltipDelay
- ToolTip.text: qsTr("%1's status message").arg(userName)
- ToolTip.visible: statusMsgHoverHandler.hovered
- anchors.baseline: userNameButton.baseline
- color: palette.buttonText
- elide: Text.ElideRight
- font.italic: true
- font.pointSize: Math.floor(fontMetrics.font.pointSize * 0.8)
- text: userStatus.replace(/\n/g, " ")
- textFormat: Text.PlainText
- width: Math.min(implicitWidth, userInfo.remainingWidth - userName_.width - parent.spacing)
-
- HoverHandler {
- id: statusMsgHoverHandler
-
- }
- Connections {
- function onPresenceChanged(id) {
- if (id == userId)
- statusMsg.userStatus = Presence.userStatus(userId);
- }
-
- target: Presence
- }
- }
- }
- }
- }
}
Platform.Menu {
- id: messageContextMenu
+ id: messageContextMenuC
property string eventId
property int eventType
@@ -824,22 +397,22 @@ Item {
onTriggered: function () {
topBar.searchString = "";
- room.showEvent(messageContextMenu.eventId);
+ room.showEvent(messageContextMenuC.eventId);
}
}
Platform.MenuItem {
enabled: visible
text: qsTr("&Copy")
- visible: messageContextMenu.text
+ visible: messageContextMenuC.text
- onTriggered: Clipboard.text = messageContextMenu.text
+ onTriggered: Clipboard.text = messageContextMenuC.text
}
Platform.MenuItem {
enabled: visible
text: qsTr("Copy &link location")
- visible: messageContextMenu.link
+ visible: messageContextMenuC.link
- onTriggered: Clipboard.text = messageContextMenu.link
+ onTriggered: Clipboard.text = messageContextMenuC.link
}
Platform.MenuItem {
id: reactionOption
@@ -848,7 +421,7 @@ Item {
visible: room ? room.permissions.canSend(MtxEvent.Reaction) : false
onTriggered: emojiPopup.visible ? emojiPopup.close() : emojiPopup.show(null, room.roomId, function (plaintext, markdown) {
- room.input.reaction(messageContextMenu.eventId, plaintext);
+ room.input.reaction(messageContextMenuC.eventId, plaintext);
TimelineManager.focusMessageInput();
})
}
@@ -856,41 +429,41 @@ Item {
text: qsTr("Repl&y")
visible: room ? room.permissions.canSend(MtxEvent.TextMessage) : false
- onTriggered: room.reply = (messageContextMenu.eventId)
+ onTriggered: room.reply = (messageContextMenuC.eventId)
}
Platform.MenuItem {
enabled: visible
text: qsTr("&Edit")
- visible: messageContextMenu.isEditable && (room ? room.permissions.canSend(MtxEvent.TextMessage) : false)
+ visible: messageContextMenuC.isEditable && (room ? room.permissions.canSend(MtxEvent.TextMessage) : false)
- onTriggered: room.edit = (messageContextMenu.eventId)
+ onTriggered: room.edit = (messageContextMenuC.eventId)
}
Platform.MenuItem {
enabled: visible
text: qsTr("&Thread")
visible: (room ? room.permissions.canSend(MtxEvent.TextMessage) : false)
- onTriggered: room.thread = (messageContextMenu.threadId || messageContextMenu.eventId)
+ onTriggered: room.thread = (messageContextMenuC.threadId || messageContextMenuC.eventId)
}
Platform.MenuItem {
enabled: visible
- text: visible && room.pinnedMessages.includes(messageContextMenu.eventId) ? qsTr("Un&pin") : qsTr("&Pin")
+ text: visible && room.pinnedMessages.includes(messageContextMenuC.eventId) ? qsTr("Un&pin") : qsTr("&Pin")
visible: (room ? room.permissions.canChange(MtxEvent.PinnedEvents) : false)
- onTriggered: visible && room.pinnedMessages.includes(messageContextMenu.eventId) ? room.unpin(messageContextMenu.eventId) : room.pin(messageContextMenu.eventId)
+ onTriggered: visible && room.pinnedMessages.includes(messageContextMenuC.eventId) ? room.unpin(messageContextMenuC.eventId) : room.pin(messageContextMenuC.eventId)
}
Platform.MenuItem {
text: qsTr("&Read receipts")
- onTriggered: room.showReadReceipts(messageContextMenu.eventId)
+ onTriggered: room.showReadReceipts(messageContextMenuC.eventId)
}
Platform.MenuItem {
text: qsTr("&Forward")
- visible: messageContextMenu.eventType == MtxEvent.ImageMessage || messageContextMenu.eventType == MtxEvent.VideoMessage || messageContextMenu.eventType == MtxEvent.AudioMessage || messageContextMenu.eventType == MtxEvent.FileMessage || messageContextMenu.eventType == MtxEvent.Sticker || messageContextMenu.eventType == MtxEvent.TextMessage || messageContextMenu.eventType == MtxEvent.LocationMessage || messageContextMenu.eventType == MtxEvent.EmoteMessage || messageContextMenu.eventType == MtxEvent.NoticeMessage
+ visible: messageContextMenuC.eventType == MtxEvent.ImageMessage || messageContextMenuC.eventType == MtxEvent.VideoMessage || messageContextMenuC.eventType == MtxEvent.AudioMessage || messageContextMenuC.eventType == MtxEvent.FileMessage || messageContextMenuC.eventType == MtxEvent.Sticker || messageContextMenuC.eventType == MtxEvent.TextMessage || messageContextMenuC.eventType == MtxEvent.LocationMessage || messageContextMenuC.eventType == MtxEvent.EmoteMessage || messageContextMenuC.eventType == MtxEvent.NoticeMessage
onTriggered: {
var forwardMess = forwardCompleterComponent.createObject(timelineRoot);
- forwardMess.setMessageEventId(messageContextMenu.eventId);
+ forwardMess.setMessageEventId(messageContextMenuC.eventId);
forwardMess.open();
timelineRoot.destroyOnClose(forwardMess);
}
@@ -901,23 +474,23 @@ Item {
Platform.MenuItem {
text: qsTr("View raw message")
- onTriggered: room.viewRawMessage(messageContextMenu.eventId)
+ onTriggered: room.viewRawMessage(messageContextMenuC.eventId)
}
Platform.MenuItem {
enabled: visible
text: qsTr("View decrypted raw message")
// TODO(Nico): Fix this still being iterated over, when using keyboard to select options
- visible: messageContextMenu.isEncrypted
+ visible: messageContextMenuC.isEncrypted
- onTriggered: room.viewDecryptedRawMessage(messageContextMenu.eventId)
+ onTriggered: room.viewDecryptedRawMessage(messageContextMenuC.eventId)
}
Platform.MenuItem {
text: qsTr("Remo&ve message")
- visible: (room ? room.permissions.canRedact() : false) || messageContextMenu.isSender
+ visible: (room ? room.permissions.canRedact() : false) || messageContextMenuC.isSender
onTriggered: function () {
var dialog = removeReason.createObject(timelineRoot);
- dialog.eventId = messageContextMenu.eventId;
+ dialog.eventId = messageContextMenuC.eventId;
dialog.show();
dialog.forceActiveFocus();
timelineRoot.destroyOnClose(dialog);
@@ -926,23 +499,23 @@ Item {
Platform.MenuItem {
enabled: visible
text: qsTr("&Save as")
- visible: messageContextMenu.eventType == MtxEvent.ImageMessage || messageContextMenu.eventType == MtxEvent.VideoMessage || messageContextMenu.eventType == MtxEvent.AudioMessage || messageContextMenu.eventType == MtxEvent.FileMessage || messageContextMenu.eventType == MtxEvent.Sticker
+ visible: messageContextMenuC.eventType == MtxEvent.ImageMessage || messageContextMenuC.eventType == MtxEvent.VideoMessage || messageContextMenuC.eventType == MtxEvent.AudioMessage || messageContextMenuC.eventType == MtxEvent.FileMessage || messageContextMenuC.eventType == MtxEvent.Sticker
- onTriggered: room.saveMedia(messageContextMenu.eventId)
+ onTriggered: room.saveMedia(messageContextMenuC.eventId)
}
Platform.MenuItem {
enabled: visible
text: qsTr("&Open in external program")
- visible: messageContextMenu.eventType == MtxEvent.ImageMessage || messageContextMenu.eventType == MtxEvent.VideoMessage || messageContextMenu.eventType == MtxEvent.AudioMessage || messageContextMenu.eventType == MtxEvent.FileMessage || messageContextMenu.eventType == MtxEvent.Sticker
+ visible: messageContextMenuC.eventType == MtxEvent.ImageMessage || messageContextMenuC.eventType == MtxEvent.VideoMessage || messageContextMenuC.eventType == MtxEvent.AudioMessage || messageContextMenuC.eventType == MtxEvent.FileMessage || messageContextMenuC.eventType == MtxEvent.Sticker
- onTriggered: room.openMedia(messageContextMenu.eventId)
+ onTriggered: room.openMedia(messageContextMenuC.eventId)
}
Platform.MenuItem {
enabled: visible
text: qsTr("Copy link to eve&nt")
- visible: messageContextMenu.eventId
+ visible: messageContextMenuC.eventId
- onTriggered: room.copyLinkToEvent(messageContextMenu.eventId)
+ onTriggered: room.copyLinkToEvent(messageContextMenuC.eventId)
}
}
Component {
diff --git a/resources/qml/TimelineDefaultMessageStyle.qml b/resources/qml/TimelineDefaultMessageStyle.qml
new file mode 100644
index 00000000..2dcf153c
--- /dev/null
+++ b/resources/qml/TimelineDefaultMessageStyle.qml
@@ -0,0 +1,320 @@
+// SPDX-FileCopyrightText: Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import "./components"
+import "./delegates"
+import "./emoji"
+import "./ui"
+import "./dialogs"
+import Qt.labs.platform 1.1 as Platform
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import im.nheko
+
+TimelineEvent {
+ id: wrapper
+ ListView.delayRemove: true
+ width: chat.delegateMaxWidth
+ height: Math.max((section.item?.height ?? 0) + gridContainer.implicitHeight + reactionRow.implicitHeight + unreadRow.height, 10)
+ anchors.horizontalCenter: ListView.view.contentItem.horizontalCenter
+ //room: chatRoot.roommodel
+
+ required property var day
+ required property bool isSender
+ required property int index
+ property var previousMessageDay: (index + 1) >= chat.count ? 0 : chat.model.dataByIndex(index + 1, Room.Day)
+ property bool previousMessageIsStateEvent: (index + 1) >= chat.count ? true : chat.model.dataByIndex(index + 1, Room.IsStateEvent)
+ property string previousMessageUserId: (index + 1) >= chat.count ? "" : chat.model.dataByIndex(index + 1, Room.UserId)
+
+ required property date timestamp
+ required property string userId
+ required property string userName
+ required property string threadId
+ required property int userPowerlevel
+ required property bool isEdited
+ required property bool isEncrypted
+ required property var reactions
+ required property int status
+ required property int trustlevel
+ required property int type
+ required property bool isEditable
+
+ required property QtObject messageContextMenu
+ required property Item messageActions
+
+ property int avatarMargin: (wrapper.isStateEvent || Settings.smallAvatars ? 0 : (Nheko.avatarSize + 8)) // align bubble with section header
+
+ property alias hovered: messageHover.hovered
+
+ data: [
+ Loader {
+ id: section
+
+ active: wrapper.previousMessageUserId !== wrapper.userId || wrapper.previousMessageDay !== wrapper.day || wrapper.previousMessageIsStateEvent !== wrapper.isStateEvent
+ //asynchronous: true
+ sourceComponent: TimelineSectionHeader {
+ day: wrapper.day
+ isSender: wrapper.isSender
+ isStateEvent: wrapper.isStateEvent
+ parentWidth: wrapper.width
+ previousMessageDay: wrapper.previousMessageDay
+ previousMessageIsStateEvent: wrapper.previousMessageIsStateEvent
+ previousMessageUserId: wrapper.previousMessageUserId
+ timestamp: wrapper.timestamp
+ userId: wrapper.userId
+ userName: wrapper.userName
+ userPowerlevel: wrapper.userPowerlevel
+ }
+ visible: status == Loader.Ready
+ z: 4
+ },
+ Rectangle {
+ anchors.fill: gridContainer
+ color: (Settings.messageHoverHighlight && messageHover.hovered) ? palette.alternateBase : "transparent"
+
+ // this looks better without margins
+ TapHandler {
+ acceptedButtons: Qt.RightButton
+ acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus | PointerDevice.TouchPad
+ gesturePolicy: TapHandler.ReleaseWithinBounds
+
+ onSingleTapped: messageContextMenu.show(wrapper.eventId, wrapper.threadId, wrapper.type, wrapper.isSender, wrapper.isEncrypted, wrapper.isEditable, wrapper.main.hoveredLink, wrapper.main.copyText)
+ }
+ },
+ RowLayout {
+ id: gridContainer
+
+ width: wrapper.width
+ y: section.visible && section.active ? section.y + section.height : 0
+
+ HoverHandler {
+ id: messageHover
+ blocking: false
+ onHoveredChanged: () => {
+ if (!Settings.mobileMode && hovered) {
+ if (!messageActions.hovered) {
+ messageActions.model = wrapper;
+ messageActions.attached = wrapper;
+ messageActions.anchors.bottomMargin = -gridContainer.y
+ }
+ }
+ }
+
+ }
+
+ Item {
+ Layout.preferredWidth: wrapper.avatarMargin
+ }
+
+ AbstractButton {
+ ToolTip.delay: Nheko.tooltipDelay
+ ToolTip.text: qsTr("Part of a thread")
+ ToolTip.visible: hovered
+ Layout.fillHeight: true
+ visible: wrapper.threadId
+ Layout.preferredWidth: 4
+
+ onClicked: wrapper.room.thread = wrapper.threadId
+
+ Rectangle {
+ id: threadLine
+
+ anchors.fill: parent
+ color: TimelineManager.userColor(wrapper.threadId, palette.base)
+ }
+ }
+ ColumnLayout {
+ id: contentColumn
+ Layout.fillWidth: true
+
+ AbstractButton {
+ id: replyRow
+ visible: wrapper.reply
+ Layout.fillWidth: true
+ Layout.maximumHeight: timelineView.height / 8
+ Layout.preferredWidth: replyRowLay.implicitWidth
+ Layout.preferredHeight: replyRowLay.implicitHeight
+
+ property color userColor: TimelineManager.userColor(wrapper.reply?.userId ?? '', palette.base)
+
+ clip: true
+
+ NhekoCursorShape {
+ anchors.fill: parent
+ cursorShape: Qt.PointingHandCursor
+ }
+
+ contentItem: RowLayout {
+ id: replyRowLay
+
+ anchors.fill: parent
+
+
+ Rectangle {
+ id: replyLine
+ Layout.fillHeight: true
+ color: replyRow.userColor
+ Layout.preferredWidth: 4
+ }
+
+ ColumnLayout {
+ spacing: 0
+
+ AbstractButton {
+ id: replyUserButton
+ Layout.fillWidth: true
+ contentItem: ElidedLabel {
+ id: userName_
+ fullText: wrapper.reply?.userName ?? ''
+ color: replyRow.userColor
+ textFormat: Text.RichText
+ width: parent.width
+ elideWidth: width
+ }
+ onClicked: wrapper.room.openUserProfile(wrapper.reply?.userId)
+ }
+ data: [
+ replyUserButton,
+ wrapper.reply,
+ ]
+ }
+ }
+
+ background: Rectangle {
+ width: replyRow.implicitContentWidth
+ color: Qt.tint(palette.base, Qt.hsla(replyRow.userColor.hslHue, 0.5, replyRow.userColor.hslLightness, 0.1))
+ }
+
+ onClicked: {
+ let link = wrapper.reply.hoveredLink
+ if (link) {
+ Nheko.openLink(link)
+ } else {
+ console.log("Scrolling to "+wrapper.replyTo);
+ wrapper.room.showEvent(wrapper.replyTo)
+ }
+ }
+ }
+
+ data: [
+ replyRow, wrapper.main,
+ ]
+ }
+
+ Item {
+ // spacer to fill width if needed
+ Layout.fillWidth: true
+ }
+
+ RowLayout {
+ id: metadata
+
+ property int iconSize: Math.floor(fontMetrics.ascent * scaling)
+ property double scaling: Settings.bubbles ? 0.75 : 1
+
+ Layout.alignment: Qt.AlignTop | Qt.AlignRight
+ Layout.preferredWidth: implicitWidth
+ spacing: 2
+ visible: !isStateEvent
+
+ StatusIndicator {
+ Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+ eventId: wrapper.eventId
+ height: parent.iconSize
+ status: wrapper.status
+ width: parent.iconSize
+ }
+ Image {
+ Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+ ToolTip.delay: Nheko.tooltipDelay
+ ToolTip.text: qsTr("Edited")
+ ToolTip.visible: editHovered.hovered
+ height: parent.iconSize
+ source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((wrapper.eventId == wrapper.room.edit) ? palette.highlight : palette.buttonText)
+ sourceSize.height: parent.iconSize * Screen.devicePixelRatio
+ sourceSize.width: parent.iconSize * Screen.devicePixelRatio
+ visible: wrapper.isEdited || wrapper.eventId == wrapper.room.edit
+ width: parent.iconSize
+
+ HoverHandler {
+ id: editHovered
+
+ }
+ }
+ ImageButton {
+ Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+ ToolTip.delay: Nheko.tooltipDelay
+ ToolTip.text: qsTr("Part of a thread")
+ ToolTip.visible: hovered
+ buttonTextColor: TimelineManager.userColor(wrapper.threadId, palette.base)
+ height: parent.iconSize
+ image: ":/icons/icons/ui/thread.svg"
+ visible: wrapper.threadId
+ width: parent.iconSize
+
+ onClicked: wrapper.room.thread = threadId
+ }
+ EncryptionIndicator {
+ Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+ encrypted: wrapper.isEncrypted
+ height: parent.iconSize
+ sourceSize.height: parent.iconSize * Screen.devicePixelRatio
+ sourceSize.width: parent.iconSize * Screen.devicePixelRatio
+ trust: wrapper.trustlevel
+ visible: wrapper.room.isEncrypted
+ width: parent.iconSize
+ }
+ Label {
+ id: ts
+
+ Layout.alignment: Qt.AlignRight | Qt.AlignTop
+ Layout.preferredWidth: implicitWidth
+ ToolTip.delay: Nheko.tooltipDelay
+ ToolTip.text: Qt.formatDateTime(wrapper.timestamp, Qt.DefaultLocaleLongDate)
+ ToolTip.visible: ma.hovered
+ color: palette.inactive.text
+ font.pointSize: fontMetrics.font.pointSize * parent.scaling
+ text: wrapper.timestamp.toLocaleTimeString(Locale.ShortFormat)
+
+ HoverHandler {
+ id: ma
+
+ }
+ }
+ }
+ },
+ Reactions {
+ id: reactionRow
+
+ eventId: wrapper.eventId
+ layoutDirection: row.bubbleOnRight ? Qt.RightToLeft : Qt.LeftToRight
+ reactions: wrapper.reactions
+ width: wrapper.width - wrapper.avatarMargin
+ x: wrapper.avatarMargin
+
+ anchors {
+ //left: row.bubbleOnRight ? undefined : row.left
+ //right: row.bubbleOnRight ? row.right : undefined
+ top: gridContainer.bottom
+ topMargin: -4
+ }
+ },
+ Rectangle {
+ id: unreadRow
+
+ color: palette.highlight
+ height: visible ? 3 : 0
+ visible: (wrapper.index > 0 && (wrapper.room.fullyReadEventId == wrapper.eventId))
+
+ anchors {
+ left: parent.left
+ right: parent.right
+ top: reactionRow.bottom
+ topMargin: 5
+ }
+ }
+ ]
+}
diff --git a/resources/qml/TimelineSectionHeader.qml b/resources/qml/TimelineSectionHeader.qml
new file mode 100644
index 00000000..61c5ef28
--- /dev/null
+++ b/resources/qml/TimelineSectionHeader.qml
@@ -0,0 +1,164 @@
+// SPDX-FileCopyrightText: Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import Qt.labs.platform 1.1 as Platform
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.2
+import QtQuick.Window 2.13
+import im.nheko 1.0
+
+Column {
+
+ required property var day
+ required property bool isSender
+ required property bool isStateEvent
+ required property int parentWidth
+ required property var previousMessageDay
+ required property bool previousMessageIsStateEvent
+ required property string previousMessageUserId
+ required property date timestamp
+ required property string userId
+ required property string userName
+ required property string userPowerlevel
+
+ bottomPadding: Settings.bubbles ? (isSender && previousMessageDay == day ? 0 : 2) : 3
+ spacing: 8
+ topPadding: userName_.visible ? 4 : 0
+ visible: (previousMessageUserId !== userId || previousMessageDay !== day || isStateEvent !== previousMessageIsStateEvent)
+ width: parentWidth
+
+ Label {
+ id: dateBubble
+
+ anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
+ color: palette.text
+ height: Math.round(fontMetrics.height * 1.4)
+ horizontalAlignment: Text.AlignHCenter
+ text: room ? room.formatDateSeparator(timestamp) : ""
+ verticalAlignment: Text.AlignVCenter
+ visible: room && previousMessageDay !== day
+ width: contentWidth * 1.2
+
+ background: Rectangle {
+ color: palette.window
+ radius: parent.height / 2
+ }
+ }
+ Row {
+ id: userInfo
+
+ property int remainingWidth: chat.delegateMaxWidth - spacing - messageUserAvatar.width
+
+ height: userName_.height
+ spacing: 8
+ visible: !isStateEvent && (!isSender || !Settings.bubbles)
+
+ Avatar {
+ id: messageUserAvatar
+
+ ToolTip.delay: Nheko.tooltipDelay
+ ToolTip.text: userid
+ ToolTip.visible: messageUserAvatar.hovered
+ displayName: userName
+ height: Nheko.avatarSize * (Settings.smallAvatars ? 0.5 : 1)
+ url: !room ? "" : room.avatarUrl(userId).replace("mxc://", "image://MxcImage/")
+ userid: userId
+ width: Nheko.avatarSize * (Settings.smallAvatars ? 0.5 : 1)
+
+ onClicked: room.openUserProfile(userId)
+ }
+ Connections {
+ function onRoomAvatarUrlChanged() {
+ messageUserAvatar.url = room.avatarUrl(userId).replace("mxc://", "image://MxcImage/");
+ }
+ function onScrollToIndex(index) {
+ chat.positionViewAtIndex(index, ListView.Center);
+ }
+
+ target: room
+ }
+
+ AbstractButton {
+ id: userNameButton
+
+ PowerlevelIndicator {
+ id: powerlevelIndicator
+ anchors.left: parent.left
+ //anchors.horizontalCenter: parent.horizontalCenter
+
+ powerlevel: userPowerlevel
+ height: fontMetrics.lineSpacing
+ width: fontMetrics.lineSpacing
+
+ sourceSize.width: fontMetrics.lineSpacing
+ sourceSize.height: fontMetrics.lineSpacing
+
+ permissions: room ? room.permissions : null
+ visible: isAdmin || isModerator
+ }
+
+ ToolTip.delay: Nheko.tooltipDelay
+ ToolTip.text: userId
+ ToolTip.visible: hovered
+ leftPadding: powerlevelIndicator.visible ? 16 : 0
+ leftInset: 0
+ rightInset: 0
+ rightPadding: 0
+
+ contentItem: Label {
+ id: userName_
+
+ color: TimelineManager.userColor(userId, palette.base)
+ text: TimelineManager.escapeEmoji(userNameTextMetrics.elidedText)
+ textFormat: Text.RichText
+ }
+
+ onClicked: room.openUserProfile(userId)
+
+ TextMetrics {
+ id: userNameTextMetrics
+
+ elide: Text.ElideRight
+ elideWidth: userInfo.remainingWidth - Math.min(statusMsg.implicitWidth, userInfo.remainingWidth / 3)
+ text: userName
+ }
+ NhekoCursorShape {
+ anchors.fill: parent
+ cursorShape: Qt.PointingHandCursor
+ }
+ }
+ Label {
+ id: statusMsg
+
+ property string userStatus: Presence.userStatus(userId)
+
+ ToolTip.delay: Nheko.tooltipDelay
+ ToolTip.text: qsTr("%1's status message").arg(userName)
+ ToolTip.visible: statusMsgHoverHandler.hovered
+ anchors.baseline: userNameButton.baseline
+ color: palette.buttonText
+ elide: Text.ElideRight
+ font.italic: true
+ font.pointSize: Math.floor(fontMetrics.font.pointSize * 0.8)
+ text: userStatus.replace(/\n/g, " ")
+ textFormat: Text.PlainText
+ width: Math.min(implicitWidth, userInfo.remainingWidth - userName_.width - parent.spacing)
+
+ HoverHandler {
+ id: statusMsgHoverHandler
+
+ }
+ Connections {
+ function onPresenceChanged(id) {
+ if (id == userId)
+ statusMsg.userStatus = Presence.userStatus(userId);
+ }
+
+ target: Presence
+ }
+ }
+ }
+}
+
diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml
index 466041bd..0369d5a1 100644
--- a/resources/qml/delegates/ImageMessage.qml
+++ b/resources/qml/delegates/ImageMessage.qml
@@ -130,21 +130,23 @@ AbstractButton {
id: mxcimage
visible: loaded
- anchors.fill: parent
roomm: room
play: !Settings.animateImagesOnHover || parent.hovered
eventId: parent.eventId
+ width: parent.implicitWidth
+ height: parent.implicitHeight
}
Image {
id: blurhash_
- anchors.fill: parent
source: blurhash ? ("image://blurhash/" + blurhash) : ("image://colorimage/:/icons/icons/ui/image-failed.svg?" + palette.buttonText)
asynchronous: true
fillMode: Image.PreserveAspectFit
- sourceSize.width: parent.width * Screen.devicePixelRatio
- sourceSize.height: parent.height * Screen.devicePixelRatio
+ sourceSize.width: parent.implicitWidth * Screen.devicePixelRatio
+ sourceSize.height: parent.implicitHeight * Screen.devicePixelRatio
+ width: parent.implicitWidth
+ height: parent.implicitHeight
}
onClicked: Settings.openImageExternal ? room.openMedia(eventId) : TimelineManager.openImageOverlay(room, url, eventId, originalWidth, proportionalHeight);
@@ -152,7 +154,8 @@ AbstractButton {
Item {
id: overlay
- anchors.fill: parent
+ width: parent.implicitWidth
+ height: parent.implicitHeight
visible: parent.hovered
Rectangle {
diff --git a/resources/qml/delegates/TextMessage.qml b/resources/qml/delegates/TextMessage.qml
index dc8caf01..9ef2e6cc 100644
--- a/resources/qml/delegates/TextMessage.qml
+++ b/resources/qml/delegates/TextMessage.qml
@@ -44,7 +44,8 @@ MatrixText {
Layout.maximumHeight: !keepFullText ? Math.round(Math.min(timelineView.height / 8, implicitHeight)) : implicitHeight
clip: !keepFullText
selectByMouse: !Settings.mobileMode && !isReply
- enabled: !Settings.mobileMode
+ enabled: !Settings.mobileMode && !isReply
+ hoverEnabled: !Settings.mobileMode
font.pointSize: (Settings.enlargeEmojiOnlyMessages && isOnlyEmoji > 0 && isOnlyEmoji < 4) ? Settings.fontSize * 3 : Settings.fontSize
NhekoCursorShape {
|
