From 255e157d00fa9117399a377ac3dd9d9c8977c4b5 Mon Sep 17 00:00:00 2001 From: link2xt Date: Sun, 31 Oct 2021 11:25:55 +0300 Subject: GIFs, display names on every message and more - now we can view animated gifs ! - name are displayed on top of every message type (not just text messages and audio messages) This avoids some confusion in whether a message has been sent by us or not. - we fix the warnings of NON-NOTIFYABLE properties being used by adding one Q_PROPERTY: fileReadOnly, so we can use it to get the filename and not be bothered by console warnings. - we add some variables in Message.qml because some values were repeated and made more sense to put in a readonly var (maxH and maxW). - make scrollbar visible on hover. # Conflicts: # qml/ComposePane.qml --- message.h | 1 + qml/ChatPage.qml | 7 ++++ qml/ComposePane.qml | 22 ++++++++++++ qml/Message.qml | 100 +++++++++++++++++++++++++++++++++++++--------------- 4 files changed, 101 insertions(+), 29 deletions(-) diff --git a/message.h b/message.h index 5389124..ff58b54 100644 --- a/message.h +++ b/message.h @@ -19,6 +19,7 @@ class DcMessage : public QObject { Q_PROPERTY(QString text READ getText WRITE setText) Q_PROPERTY(QString subject READ getSubject CONSTANT) Q_PROPERTY(QString file READ getFile WRITE setFile) + Q_PROPERTY(QString fileReadOnly READ getFile CONSTANT) Q_PROPERTY(QString filename READ getFilename CONSTANT) Q_PROPERTY(int width READ getWidth CONSTANT) Q_PROPERTY(int height READ getHeight CONSTANT) diff --git a/qml/ChatPage.qml b/qml/ChatPage.qml index 63e3dae..fb99eeb 100644 --- a/qml/ChatPage.qml +++ b/qml/ChatPage.qml @@ -86,6 +86,13 @@ Kirigami.ScrollablePage { * item height from the height of currently visible messages. */ verticalLayoutDirection: ListView.BottomToTop + ScrollBar.vertical: ScrollBar { + wheelEnabled: true + hoverEnabled: true + background: Rectangle { + opacity: hovered ? 1 : 0.0 + } + } delegate: Message { message: root.context.getMessage(msgId) diff --git a/qml/ComposePane.qml b/qml/ComposePane.qml index 19d2da9..b2fcf88 100644 --- a/qml/ComposePane.qml +++ b/qml/ComposePane.qml @@ -29,6 +29,28 @@ Pane { padding: 0 + Shortcut { + sequence: "Ctrl+S" + onActivated: { + if (sendButton.enabled) { + sendButton.focus = true; + sendButton.clicked(); + sendButton.focus = false; + } + } + } + + Shortcut { + sequence: "Ctrl+O" + onActivated: { + if (attachButton.enabled) { + attachButton.focus = true; + attachButton.clicked(); + attachButton.focus = false; + } + } + } + FileDialog { id: attachFileDialog diff --git a/qml/Message.qml b/qml/Message.qml index 86ae397..37a7546 100644 --- a/qml/Message.qml +++ b/qml/Message.qml @@ -12,8 +12,13 @@ RowLayout { property DcMessage message property DcContext context - property var saveAsUrl: "" - property var saveSuccess: false + property string saveAsUrl: "" + property bool saveSuccess: false + readonly property string attachFile: "file:" + root.message.fileReadOnly + readonly property string attachFn: root.message.filename + readonly property int maxW: Kirigami.Units.gridUnit * 30 + readonly property int maxH: Kirigami.Units.gridUnit * 20 + readonly property DcContact from: context.getContact(message.fromId) readonly property DcMessage quoteMessage: message.quotedMessage readonly property DcContact quoteFrom: quoteMessage ? context.getContact(quoteMessage.fromId) : null @@ -64,7 +69,7 @@ RowLayout { FileDialog { id: saveAsDialog - title: "Save attachment `" + root.message.filename + "` as ..." + title: "Save attachment `" + attachFn + "` as ..." folder: shortcuts.home selectFolder: false selectExisting: false @@ -89,32 +94,28 @@ RowLayout { id: imageMessageView ColumnLayout { + Loader { + sourceComponent: textMessageView + } + Image { - source: "file:" + root.message.file + source: attachFile sourceSize.width: root.message.width sourceSize.height: root.message.height fillMode: Image.PreserveAspectCrop Layout.preferredWidth: root.width - Layout.maximumWidth: Kirigami.Units.gridUnit * 30 - Layout.maximumHeight: Kirigami.Units.gridUnit * 20 + Layout.maximumWidth: maxW + Layout.maximumHeight: maxH asynchronous: true MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor - onClicked: Qt.openUrlExternally("file:" + root.message.file) + onClicked: Qt.openUrlExternally(attachFile) } } - Label { - padding: 5 - font.bold: true - color: root.message.fromId > 0 ? root.from.color : "black" - text: root.displayName - textFormat: Text.PlainText - } - } } @@ -123,10 +124,14 @@ RowLayout { id: audioMessageView ColumnLayout { + Loader { + sourceComponent: textMessageView + } + MediaPlayer { id: player - source: Qt.resolvedUrl("file:" + root.message.file) + source: attachFile onError: console.log("Audio MediaPlayer error: " + errorString) onPlaybackStateChanged: { if (playbackState == 1) @@ -139,7 +144,7 @@ RowLayout { Label { padding: 5 font.bold: true - text: "Audio - " + root.message.filename + text: "Audio - " + attachFn textFormat: Text.PlainText } @@ -163,15 +168,19 @@ RowLayout { id: videoMessageView ColumnLayout { + Loader { + sourceComponent: textMessageView + } + MediaPlayer { id: videoplayer - source: Qt.resolvedUrl("file:" + root.message.file) autoPlay: true - autoLoad: false + autoLoad: true muted: true + source: Qt.resolvedUrl(attachFile) onError: console.log("Video MediaPlayer error: " + errorString) - // Credit to https://stackoverflow.com/questions/65909975/show-video-preview-thumbnail-of-video-using-qml for video thumbnail with Qt ver < Qt5.15 + // Credit to stackoverflow.com/questions/65909975/show-video-preview-thumbnail-of-video-using-qml for video thumbnail with Qt ver < Qt5.15 onStatusChanged: { if (status == MediaPlayer.Buffered) { pause(); @@ -186,8 +195,9 @@ RowLayout { VideoOutput { Layout.preferredWidth: root.width - Layout.maximumWidth: Kirigami.Units.gridUnit * 30 - Layout.maximumHeight: Kirigami.Units.gridUnit * 20 + Layout.preferredHeight: root.height + Layout.maximumWidth: maxW + Layout.maximumHeight: maxH source: videoplayer MouseArea { @@ -207,7 +217,7 @@ RowLayout { Label { padding: 5 font.bold: true - text: "Video - " + root.message.filename + text: "Video - " + attachFn textFormat: Text.PlainText } @@ -215,14 +225,45 @@ RowLayout { } + Component { + id: gifView + + ColumnLayout { + Loader { + sourceComponent: textMessageView + } + + AnimatedImage { + source: Qt.resolvedUrl(attachFile) + fillMode: Image.PreserveAspectFit + Layout.maximumWidth: maxW + Layout.maximumHeight: maxH + asynchronous: true + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: Qt.openUrlExternally("file:" + root.message.file) + } + + } + + } + + } + Component { id: anyFileView ColumnLayout { + Loader { + sourceComponent: textMessageView + } + Label { padding: 5 font.bold: true - text: "File - " + root.message.filename + text: "File - " + attachFn } Button { @@ -235,6 +276,7 @@ RowLayout { } + // This is what show the display name in top of every messages Component { id: textMessageView @@ -275,7 +317,7 @@ RowLayout { id: contextMenu Component.onCompleted: { - if (!root.message.filename.length > 0) + if (!attachFn.length > 0) contextMenu.removeAction(saveAsContext); } @@ -300,7 +342,8 @@ RowLayout { id: messageContents Loader { - sourceComponent: [20, 21, 23].includes(root.message.viewtype) ? imageMessageView + sourceComponent: [20, 23].includes(root.message.viewtype) ? imageMessageView + : [21].includes(root.message.viewtype) ? gifView : [40, 41].includes(root.message.viewtype) ? audioMessageView : [50].includes(root.message.viewtype) ? videoMessageView : [60].includes(root.message.viewtype) ? anyFileView @@ -322,8 +365,7 @@ RowLayout { TextEdit { id: quoteTextEdit - - Layout.maximumWidth: Kirigami.Units.gridUnit * 30 + Layout.maximumWidth: maxW text: root.message.quotedText ? root.message.quotedText : "" textFormat: Text.PlainText selectByMouse: true @@ -337,7 +379,7 @@ RowLayout { // Message TextEdit { - Layout.maximumWidth: Math.min(root.width, Kirigami.Units.gridUnit * 30) + Layout.maximumWidth: Math.min(root.width, maxW) textFormat: Text.PlainText selectByMouse: true readOnly: true -- cgit v1.2.3-70-g09d2