import "./delegates" import "./device-verification" import "./emoji" import QtGraphicalEffects 1.0 import QtQuick 2.9 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.2 import QtQuick.Window 2.2 import im.nheko 1.0 import im.nheko.EmojiModel 1.0 Page { id: timelineRoot property var colors: currentActivePalette property var systemInactive 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 palette: colors FontMetrics { id: fontMetrics } EmojiPicker { id: emojiPopup width: 7 * 52 + 20 height: 6 * 52 colors: palette model: EmojiProxyModel { category: EmojiCategory.People sourceModel: EmojiModel { } } } Menu { id: messageContextMenu property string eventId property int eventType property bool isEncrypted function show(eventId_, eventType_, isEncrypted_, showAt_, position) { eventId = eventId_; eventType = eventType_; isEncrypted = isEncrypted_; if (position) popup(position, showAt_); else popup(showAt_); } modal: true MenuItem { text: qsTr("React") onClicked: emojiPopup.show(messageContextMenu.parent, messageContextMenu.eventId) } 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 Component { id: deviceVerificationDialog DeviceVerification { } } Connections { function onNewDeviceVerificationRequest(flow, transactionId, userId, deviceId, isRequest) { var dialog = deviceVerificationDialog.createObject(timelineRoot, { "flow": flow }); dialog.show(); } target: TimelineManager } Connections { function onOpenProfile(profile) { var userProfile = userProfileComponent.createObject(timelineRoot, { "profile": profile }); userProfile.show(); } target: TimelineManager.timeline } Label { visible: !TimelineManager.timeline && !TimelineManager.isInitialSync anchors.centerIn: parent text: qsTr("No room open") font.pointSize: 24 color: colors.text } BusyIndicator { visible: running anchors.centerIn: parent running: TimelineManager.isInitialSync height: 200 width: 200 z: 3 } ColumnLayout { visible: TimelineManager.timeline != null anchors.fill: parent spacing: 0 Rectangle { id: topBar Layout.fillWidth: true implicitHeight: topLayout.height + 16 z: 3 color: colors.window MouseArea { anchors.fill: parent onClicked: TimelineManager.openRoomSettings() } GridLayout { //Layout.margins: 8 id: topLayout anchors.left: parent.left anchors.right: parent.right anchors.margins: 8 anchors.verticalCenter: parent.verticalCenter 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 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 color: colors.text font.pointSize: fontMetrics.font.pointSize * 1.1 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 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() } } } } } Rectangle { Layout.fillWidth: true height: 1 z: 3 color: colors.mid } Rectangle { Layout.fillWidth: true Layout.fillHeight: true color: colors.base ListView { id: chat property int delegateMaxWidth: (Settings.timelineMaxWidth > 100 && (parent.width - Settings.timelineMaxWidth) > scrollbar.width * 2) ? Settings.timelineMaxWidth : (parent.width - scrollbar.width * 2) cacheBuffer: 400 anchors.fill: parent model: TimelineManager.timeline boundsBehavior: Flickable.StopAtBounds pixelAligned: true spacing: 4 verticalLayoutDirection: ListView.BottomToTop onCountChanged: { if (atYEnd) model.currentIndex = 0; } // Mark last event as read, since we are at the bottom ScrollHelper { flickable: parent anchors.fill: parent } Shortcut { sequence: StandardKey.MoveToPreviousPage onActivated: { chat.contentY = chat.contentY - chat.height / 2; chat.returnToBounds(); } } Shortcut { sequence: StandardKey.MoveToNextPage onActivated: { chat.contentY = chat.contentY + chat.height / 2; chat.returnToBounds(); } } 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; } } Component { id: userProfileComponent UserProfile { } } section { property: "section" } Component { id: sectionHeader Column { property var modelData property string section property string nextSection topPadding: 4 bottomPadding: 4 spacing: 8 visible: !!modelData width: parent.width height: (section.includes(" ") ? dateBubble.height + 8 + userName.height : userName.height) + 8 Label { id: dateBubble anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined visible: section.includes(" ") text: chat.model.formatDateSeparator(modelData.timestamp) color: colors.text height: fontMetrics.height * 1.4 width: contentWidth * 1.2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter background: Rectangle { radius: parent.height / 2 color: colors.window } } Row { height: userName.height spacing: 8 Avatar { width: avatarSize height: avatarSize url: chat.model.avatarUrl(modelData.userId).replace("mxc://", "image://MxcImage/") displayName: modelData.userName userid: modelData.userId MouseArea { anchors.fill: parent onClicked: chat.model.openUserProfile(modelData.userId) cursorShape: Qt.PointingHandCursor propagateComposedEvents: true } } Label { id: userName text: TimelineManager.escapeEmoji(modelData.userName) color: TimelineManager.userColor(modelData.userId, colors.window) textFormat: Text.RichText MouseArea { anchors.fill: parent Layout.alignment: Qt.AlignHCenter onClicked: chat.model.openUserProfile(modelData.userId) cursorShape: Qt.PointingHandCursor propagateComposedEvents: true } } } } } ScrollBar.vertical: ScrollBar { id: scrollbar } delegate: Item { id: wrapper // 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 property Item section anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined width: chat.delegateMaxWidth height: section ? section.height + timelinerow.height : timelinerow.height onSectionBoundaryChanged: { if (sectionBoundary) { var properties = { "modelData": model.dump, "section": ListView.section, "nextSection": ListView.nextSection }; section = sectionHeader.createObject(wrapper, properties); } else { section.destroy(); section = null; } } TimelineRow { id: timelinerow y: section ? section.y + section.height : 0 } Connections { function onMovementEnded() { if (y + height + 2 * chat.spacing > chat.contentY + chat.height && y < chat.contentY + chat.height) chat.model.currentIndex = index; } target: chat } } footer: BusyIndicator { anchors.horizontalCenter: parent.horizontalCenter running: chat.model && chat.model.paginationInProgress height: 50 width: 50 z: 3 } } } Item { implicitHeight: Math.max(fontMetrics.height * 1.2, typingDisplay.height) Layout.fillWidth: true Rectangle { id: typingRect color: colors.base anchors.left: parent.left anchors.right: parent.right height: (chat.model && chat.model.typingUsers.length > 0) ? typingDisplay.height : 0 z: 3 Label { id: typingDisplay anchors.left: parent.left anchors.leftMargin: 10 anchors.right: parent.right anchors.rightMargin: 10 anchors.bottom: parent.bottom color: colors.text text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, colors.base) : "" textFormat: Text.RichText } } } Rectangle { id: replyPopup Layout.fillWidth: true visible: chat.model && chat.model.reply // Height of child, plus margins, plus border implicitHeight: replyPreview.height + 10 color: colors.window z: 3 Reply { id: replyPreview anchors.left: parent.left anchors.leftMargin: 10 anchors.right: closeReplyButton.left anchors.rightMargin: 20 anchors.bottom: parent.bottom modelData: chat.model ? chat.model.getDump(chat.model.reply, chat.model.id) : { } userColor: TimelineManager.userColor(modelData.userId, colors.window) } ImageButton { id: closeReplyButton anchors.right: parent.right anchors.rightMargin: 15 anchors.top: replyPreview.top hoverEnabled: true width: 16 height: 16 image: ":/icons/icons/ui/remove-symbol.png" ToolTip.visible: closeReplyButton.hovered ToolTip.text: qsTr("Close") onClicked: chat.model.reply = undefined } } ActiveCallBar { Layout.fillWidth: true z: 3 } Rectangle { Layout.fillWidth: true z: 3 height: 1 color: colors.mid } Rectangle { color: colors.window Layout.fillWidth: true Layout.preferredHeight: textInput.height Layout.minimumHeight: 40 RowLayout { id: inputBar anchors.fill: parent spacing: 16 ImageButton { Layout.alignment: Qt.AlignBottom hoverEnabled: true width: 22 height: 22 image: ":/icons/icons/ui/place-call.png" Layout.topMargin: 8 Layout.bottomMargin: 8 Layout.leftMargin: 16 } ImageButton { Layout.alignment: Qt.AlignBottom hoverEnabled: true width: 22 height: 22 image: ":/icons/icons/ui/paper-clip-outline.png" Layout.topMargin: 8 Layout.bottomMargin: 8 } ScrollView { id: textInput Layout.alignment: Qt.AlignBottom Layout.maximumHeight: Window.height / 4 Layout.fillWidth: true TextArea { placeholderText: qsTr("Write a message...") placeholderTextColor: colors.buttonText color: colors.text wrapMode: TextEdit.Wrap MouseArea { // workaround for wrong cursor shape on some platforms anchors.fill: parent acceptedButtons: Qt.NoButton cursorShape: Qt.IBeamCursor } background: Rectangle { color: colors.window } } } ImageButton { Layout.alignment: Qt.AlignRight | Qt.AlignBottom hoverEnabled: true width: 22 height: 22 image: ":/icons/icons/ui/smile.png" Layout.topMargin: 8 Layout.bottomMargin: 8 } ImageButton { Layout.alignment: Qt.AlignRight | Qt.AlignBottom hoverEnabled: true width: 22 height: 22 image: ":/icons/icons/ui/cursor.png" Layout.topMargin: 8 Layout.bottomMargin: 8 Layout.rightMargin: 16 } } } } } systemInactive: SystemPalette { colorGroup: SystemPalette.Disabled } }