matrixion/resources/qml/TimelineView.qml

512 lines
13 KiB
QML
Raw Normal View History

import QtQuick 2.9
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
2019-09-07 02:33:46 +03:00
import QtGraphicalEffects 1.0
2019-09-18 21:34:30 +03:00
import QtQuick.Window 2.2
2019-08-30 20:29:25 +03:00
import im.nheko 1.0
2020-05-14 03:19:15 +03:00
import im.nheko.EmojiModel 1.0
import "./delegates"
2020-05-14 03:19:15 +03:00
import "./emoji"
Page {
id: timelineRoot
property var colors: currentActivePalette
property var systemInactive: SystemPalette { colorGroup: SystemPalette.Disabled }
property var inactiveColors: currentInactivePalette ? currentInactivePalette : systemInactive
property int avatarSize: 40
property real highlightHue: colors.highlight.hslHue
property real highlightSat: colors.highlight.hslSaturation
property real highlightLight: colors.highlight.hslLightness
2019-09-19 22:53:24 +03:00
palette: colors
2020-04-30 23:02:41 +03:00
FontMetrics {
id: fontMetrics
}
2020-07-25 23:57:54 +03:00
EmojiPicker {
id: emojiPopup
width: 7 * 52 + 20
height: 6 * 52
colors: palette
model: EmojiProxyModel {
category: EmojiCategory.People
sourceModel: EmojiModel {}
}
}
2020-05-14 03:19:15 +03:00
Menu {
id: messageContextMenu
2020-02-02 02:33:55 +03:00
modal: true
2020-07-26 03:06:38 +03:00
function show(eventId_, eventType_, isEncrypted_, showAt_, position) {
eventId = eventId_
eventType = eventType_
isEncrypted = isEncrypted_
2020-07-26 03:06:38 +03:00
if (position)
popup(position, showAt_)
else
2020-07-20 01:42:48 +03:00
popup(showAt_)
}
property string eventId
property int eventType
property bool isEncrypted
2020-07-20 01:42:48 +03:00
2020-05-08 03:53:24 +03:00
MenuItem {
text: qsTr("React")
2020-07-20 01:42:48 +03:00
onClicked: emojiPopup.show(messageContextMenu.parent, messageContextMenu.eventId)
2020-05-08 03:53:24 +03:00
}
MenuItem {
text: qsTr("Reply")
onClicked: chat.model.replyAction(messageContextMenu.eventId)
}
MenuItem {
text: qsTr("Read receipts")
onTriggered: chat.model.readReceiptsAction(messageContextMenu.eventId)
}
MenuItem {
text: qsTr("Mark as read")
}
MenuItem {
text: qsTr("View raw message")
onTriggered: chat.model.viewRawMessage(messageContextMenu.eventId)
}
MenuItem {
visible: messageContextMenu.isEncrypted
height: visible ? implicitHeight : 0
text: qsTr("View decrypted raw message")
onTriggered: chat.model.viewDecryptedRawMessage(messageContextMenu.eventId)
}
MenuItem {
text: qsTr("Redact message")
onTriggered: chat.model.redactEvent(messageContextMenu.eventId)
}
MenuItem {
visible: messageContextMenu.eventType == MtxEvent.ImageMessage || messageContextMenu.eventType == MtxEvent.VideoMessage || messageContextMenu.eventType == MtxEvent.AudioMessage || messageContextMenu.eventType == MtxEvent.FileMessage || messageContextMenu.eventType == MtxEvent.Sticker
height: visible ? implicitHeight : 0
text: qsTr("Save as")
onTriggered: timelineManager.timeline.saveMedia(messageContextMenu.eventId)
}
}
Rectangle {
anchors.fill: parent
color: colors.window
Label {
visible: !timelineManager.timeline && !timelineManager.isInitialSync
anchors.centerIn: parent
text: qsTr("No room open")
font.pointSize: 24
2020-04-29 22:41:46 +03:00
color: colors.text
}
2019-08-31 00:20:53 +03:00
BusyIndicator {
visible: running
anchors.centerIn: parent
running: timelineManager.isInitialSync
height: 200
width: 200
z: 3
}
ColumnLayout {
anchors.fill: parent
Rectangle {
id: topBar
Layout.fillWidth: true
implicitHeight: topLayout.height + 16
z: 3
color: colors.base
MouseArea {
anchors.fill: parent
onClicked: timelineManager.openRoomSettings();
}
GridLayout {
id: topLayout
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 8
anchors.verticalCenter: parent.verticalCenter
//Layout.margins: 8
ImageButton {
id: backToRoomsButton
Layout.column: 0
Layout.row: 0
Layout.rowSpan: 2
Layout.alignment: Qt.AlignVCenter
visible: timelineManager.isNarrowView
image: ":/icons/icons/ui/angle-pointing-to-left.png"
ToolTip.visible: hovered
ToolTip.text: qsTr("Back to room list")
onClicked: timelineManager.backToRooms()
}
Avatar {
Layout.column: 1
Layout.row: 0
Layout.rowSpan: 2
Layout.alignment: Qt.AlignVCenter
width: avatarSize
height: avatarSize
2020-09-03 20:51:50 +03:00
url: chat.model ? chat.model.roomAvatarUrl.replace("mxc://", "image://MxcImage/") : ""
displayName: chat.model ? chat.model.roomName : qsTr("No room selected")
MouseArea {
anchors.fill: parent
onClicked: timelineManager.openRoomSettings();
}
}
Label {
Layout.fillWidth: true
Layout.column: 2
Layout.row: 0
font.pointSize: fontMetrics.font.pointSize * 1.1
2020-09-03 20:51:50 +03:00
text: chat.model ? chat.model.roomName : qsTr("No room selected")
MouseArea {
anchors.fill: parent
onClicked: timelineManager.openRoomSettings();
}
}
MatrixText {
Layout.fillWidth: true
Layout.column: 2
Layout.row: 1
Layout.maximumHeight: fontMetrics.lineSpacing * 2 // show 2 lines
clip: true
2020-09-03 20:51:50 +03:00
text: chat.model ? chat.model.roomTopic : ""
}
ImageButton {
id: roomOptionsButton
Layout.column: 3
Layout.row: 0
Layout.rowSpan: 2
Layout.alignment: Qt.AlignVCenter
image: ":/icons/icons/ui/vertical-ellipsis.png"
ToolTip.visible: hovered
ToolTip.text: qsTr("Room options")
onClicked: roomOptionsMenu.popup(roomOptionsButton)
Menu {
id: roomOptionsMenu
MenuItem {
text: qsTr("Invite users")
onTriggered: timelineManager.openInviteUsersDialog();
}
MenuItem {
text: qsTr("Members")
onTriggered: timelineManager.openMemberListDialog();
}
MenuItem {
text: qsTr("Leave room")
onTriggered: timelineManager.openLeaveRoomDialog();
}
MenuItem {
text: qsTr("Settings")
onTriggered: timelineManager.openRoomSettings();
}
}
}
}
}
ListView {
id: chat
2020-07-25 23:57:54 +03:00
visible: !!timelineManager.timeline
2020-01-17 03:25:14 +03:00
cacheBuffer: 400
Layout.fillWidth: true
Layout.fillHeight: true
model: timelineManager.timeline
2019-09-18 21:34:30 +03:00
boundsBehavior: Flickable.StopAtBounds
2020-04-30 23:02:41 +03:00
ScrollHelper {
flickable: parent
anchors.fill: parent
}
2019-09-18 21:34:30 +03:00
pixelAligned: true
2020-01-31 01:57:39 +03:00
Shortcut {
sequence: StandardKey.MoveToPreviousPage
2020-01-31 02:02:15 +03:00
onActivated: { chat.contentY = chat.contentY - chat.height / 2; chat.returnToBounds(); }
2020-01-31 01:57:39 +03:00
}
Shortcut {
sequence: StandardKey.MoveToNextPage
2020-01-31 02:02:15 +03:00
onActivated: { chat.contentY = chat.contentY + chat.height / 2; chat.returnToBounds(); }
2020-01-31 01:57:39 +03:00
}
Shortcut {
sequence: StandardKey.Cancel
onActivated: chat.model.reply = undefined
}
Shortcut {
sequence: "Alt+Up"
onActivated: chat.model.reply = chat.model.indexToId(chat.model.reply? chat.model.idToIndex(chat.model.reply) + 1 : 0)
}
Shortcut {
sequence: "Alt+Down"
onActivated: {
var idx = chat.model.reply? chat.model.idToIndex(chat.model.reply) - 1 : -1
chat.model.reply = idx >= 0 ? chat.model.indexToId(idx) : undefined
}
}
2020-01-31 01:57:39 +03:00
ScrollBar.vertical: ScrollBar {
id: scrollbar
2019-09-18 21:34:30 +03:00
}
spacing: 4
2020-01-04 01:21:33 +03:00
verticalLayoutDirection: ListView.BottomToTop
onCountChanged: if (atYEnd) model.currentIndex = 0 // Mark last event as read, since we are at the bottom
property int delegateMaxWidth: (settings.timelineMaxWidth > 100 && (parent.width - settings.timelineMaxWidth) > scrollbar.width*2) ? settings.timelineMaxWidth : (parent.width - scrollbar.width*2)
delegate: Item {
2020-01-04 01:21:33 +03:00
// This would normally be previousSection, but our model's order is inverted.
property bool sectionBoundary: (ListView.nextSection != "" && ListView.nextSection !== ListView.section) || model.index === chat.count - 1
id: wrapper
property Item section
2020-07-08 03:02:48 +03:00
anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
width: chat.delegateMaxWidth
2020-01-04 01:21:33 +03:00
height: section ? section.height + timelinerow.height : timelinerow.height
TimelineRow {
id: timelinerow
y: section ? section.y + section.height : 0
}
onSectionBoundaryChanged: {
if (sectionBoundary) {
var properties = {
'modelData': model.dump,
'section': ListView.section,
'nextSection': ListView.nextSection
}
section = sectionHeader.createObject(wrapper, properties)
} else {
section.destroy()
section = null
}
}
2020-07-25 23:57:54 +03:00
Connections {
target: chat
function onMovementEnded() {
if (y + height + 2 * chat.spacing > chat.contentY + chat.height && y < chat.contentY + chat.height)
chat.model.currentIndex = index;
}
}
}
section {
property: "section"
2020-01-04 01:21:33 +03:00
}
Component {
id: sectionHeader
Column {
property var modelData
property string section
property string nextSection
topPadding: 4
bottomPadding: 4
spacing: 8
2020-01-04 01:21:33 +03:00
visible: !!modelData
width: parent.width
height: (section.includes(" ") ? dateBubble.height + 8 + userName.height : userName.height) + 8
Label {
id: dateBubble
2020-01-04 01:21:33 +03:00
anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
visible: section.includes(" ")
2020-01-04 01:21:33 +03:00
text: chat.model.formatDateSeparator(modelData.timestamp)
2020-05-06 00:43:43 +03:00
color: colors.text
2020-04-29 12:14:43 +03:00
height: fontMetrics.height * 1.4
width: contentWidth * 1.2
2020-04-28 10:38:13 +03:00
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
background: Rectangle {
radius: parent.height / 2
2020-05-06 00:43:43 +03:00
color: colors.base
}
}
Row {
height: userName.height
spacing: 8
Avatar {
width: avatarSize
height: avatarSize
2020-01-04 01:21:33 +03:00
url: chat.model.avatarUrl(modelData.userId).replace("mxc://", "image://MxcImage/")
displayName: modelData.userName
userid: modelData.userId
MouseArea {
anchors.fill: parent
2020-01-04 01:21:33 +03:00
onClicked: chat.model.openUserProfile(modelData.userId)
cursorShape: Qt.PointingHandCursor
propagateComposedEvents: true
}
}
Label {
id: userName
2020-09-03 20:51:50 +03:00
text: timelineManager.escapeEmoji(modelData.userName)
color: timelineManager.userColor(modelData.userId, colors.window)
textFormat: Text.RichText
MouseArea {
anchors.fill: parent
onClicked: chat.model.openUserProfile(section.split(" ")[0])
cursorShape: Qt.PointingHandCursor
propagateComposedEvents: true
}
}
Label {
color: colors.buttonText
text: timelineManager.userStatus(modelData.userId)
textFormat: Text.PlainText
elide: Text.ElideRight
width: chat.delegateMaxWidth - parent.spacing*2 - userName.implicitWidth - avatarSize
font.italic: true
}
}
}
}
2020-01-17 03:25:14 +03:00
2020-07-25 23:57:54 +03:00
footer: BusyIndicator {
anchors.horizontalCenter: parent.horizontalCenter
running: chat.model && chat.model.paginationInProgress
height: 50
width: 50
z: 3
}
2020-01-17 03:25:14 +03:00
}
Item {
2020-01-17 03:25:14 +03:00
id: chatFooter
implicitHeight: Math.max(fontMetrics.height * 1.2, footerContent.height)
Layout.fillWidth: true
2020-01-17 03:25:14 +03:00
z: 3
2020-01-28 21:08:16 +03:00
Column {
id: footerContent
2020-01-17 03:25:14 +03:00
anchors.left: parent.left
anchors.right: parent.right
Rectangle {
id: typingRect
Connections {
target: chat.model
onTypingUsersChanged: {
if (chat.model && chat.model.formatTypingUsers(chat.model.typingUsers,
colors.window) === "")
typingRect.color = "transparent"
else
typingRect.color = colors.window
}
}
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 10
anchors.rightMargin: 10
color: "transparent"
height: fontMetrics.height
Label {
id: typingDisplay
anchors.left: parent.left
anchors.right: parent.right
color: colors.text
text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, colors.window) : ""
textFormat: Text.RichText
}
}
2020-01-28 07:28:11 +03:00
2020-01-28 21:08:16 +03:00
Rectangle {
2020-01-28 07:28:11 +03:00
anchors.left: parent.left
anchors.right: parent.right
2020-01-28 21:08:16 +03:00
id: replyPopup
2020-01-28 07:28:11 +03:00
2020-04-13 17:22:30 +03:00
visible: chat.model && chat.model.reply
2020-01-28 21:08:16 +03:00
// Height of child, plus margins, plus border
height: replyPreview.height + 10
2020-02-03 21:21:03 +03:00
color: colors.base
2020-01-28 07:28:11 +03:00
2020-01-28 21:08:16 +03:00
Reply {
id: replyPreview
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: closeReplyButton.left
anchors.rightMargin: 20
2020-01-28 21:08:16 +03:00
anchors.bottom: parent.bottom
2020-07-10 00:15:22 +03:00
modelData: chat.model ? chat.model.getDump(chat.model.reply, chat.model.id) : {}
userColor: timelineManager.userColor(modelData.userId, colors.window)
2020-01-28 07:28:11 +03:00
}
2020-01-28 21:08:16 +03:00
2020-01-28 07:28:11 +03:00
ImageButton {
id: closeReplyButton
2020-01-28 21:08:16 +03:00
anchors.right: parent.right
anchors.rightMargin: 15
2020-01-28 21:08:16 +03:00
anchors.top: replyPreview.top
hoverEnabled: true
width: 16
height: 16
2020-01-28 21:08:16 +03:00
2020-01-28 07:28:11 +03:00
image: ":/icons/icons/ui/remove-symbol.png"
ToolTip.visible: closeReplyButton.hovered
ToolTip.text: qsTr("Close")
2020-01-28 07:28:11 +03:00
2020-04-13 17:22:30 +03:00
onClicked: chat.model.reply = undefined
2020-01-28 07:28:11 +03:00
}
}
}
2019-08-31 00:20:53 +03:00
}
2019-08-31 23:43:31 +03:00
}
}
2019-08-30 20:29:25 +03:00
}