From 7ac232d37233c1518aa037d02401c4d97db948fc Mon Sep 17 00:00:00 2001 From: Carl Schwan Date: Sun, 16 May 2021 14:07:44 +0200 Subject: [PATCH] Minor optimizations to the timeline delegates * Use anchors instead of Layouts * Don't use Loader for message display name * Lazy load the emoji popup --- imports/NeoChat/Component/ChatBox/ChatBox.qml | 2 +- .../Component/Timeline/ReplyComponent.qml | 91 +++--- .../Component/Timeline/SectionDelegate.qml | 2 +- .../Component/Timeline/TextDelegate.qml | 5 +- .../Component/Timeline/TimelineContainer.qml | 286 +++++++++--------- .../Timeline/MessageDelegateContextMenu.qml | 49 +-- imports/NeoChat/Page/RoomPage.qml | 71 +++-- 7 files changed, 258 insertions(+), 248 deletions(-) diff --git a/imports/NeoChat/Component/ChatBox/ChatBox.qml b/imports/NeoChat/Component/ChatBox/ChatBox.qml index 0f09da13d..f060edf54 100644 --- a/imports/NeoChat/Component/ChatBox/ChatBox.qml +++ b/imports/NeoChat/Component/ChatBox/ChatBox.qml @@ -237,7 +237,6 @@ Item { function onEditing(editContent, editFormatedContent) { // Set the input field in edit mode root.inputFieldText = editContent; - //root.replyContent = editContent; // clean autocompletion list chatBar.userAutocompleted = {}; @@ -253,6 +252,7 @@ Item { while ((match = regex.exec(editFormatedContent.toString())) !== null) { chatBar.userAutocompleted[match[2]] = match[1]; } + chatBox.forceActiveFocus(); } } diff --git a/imports/NeoChat/Component/Timeline/ReplyComponent.qml b/imports/NeoChat/Component/Timeline/ReplyComponent.qml index 4d63e3afb..c654b4796 100644 --- a/imports/NeoChat/Component/Timeline/ReplyComponent.qml +++ b/imports/NeoChat/Component/Timeline/ReplyComponent.qml @@ -11,48 +11,63 @@ import org.kde.kirigami 2.15 as Kirigami import org.kde.neochat 1.0 import NeoChat.Component.Timeline 1.0 -QQC2.AbstractButton { - visible: replyVisible - Component.onCompleted: parent.Layout.fillWidth = true +MouseArea { + id: replyButton + Layout.fillWidth: true + implicitHeight: replyName.implicitHeight + replyText.implicitHeight + Kirigami.Units.largeSpacing + implicitWidth: Math.min(bubbleMaxWidth, Math.max(replyText.implicitWidth, replyName.implicitWidth)) + Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 3 + Component.onCompleted: { + parent.Layout.fillWidth = true; + parent.Layout.preferredWidth = Qt.binding(function() { return implicitWidth; }) + parent.Layout.maximumWidth = Qt.binding(function() { return bubbleMaxWidth + Kirigami.Units.largeSpacing * 2; }) + } + Rectangle { + id: replyLeftBorder + width: Kirigami.Units.smallSpacing + height: parent.height + color: Kirigami.Theme.highlightColor + } - contentItem: RowLayout { - Layout.fillWidth: true + Kirigami.Avatar { + id: avatatReply + anchors.left: replyLeftBorder.right + anchors.leftMargin: Kirigami.Units.smallSpacing + width: Kirigami.Units.gridUnit + height: Kirigami.Units.gridUnit + sourceSize.width: width + sourceSize.height: height + Layout.alignment: Qt.AlignTop + visible: Config.showAvatarInTimeline + source: reply.author.avatarMediaId ? ("image://mxc/" + reply.author.avatarMediaId) : "" + name: reply.author.name || "" + color: reply.author.color + } - Rectangle { - Layout.preferredWidth: Kirigami.Units.smallSpacing - Layout.fillHeight: true - - color: Kirigami.Theme.highlightColor + QQC2.Label { + id: replyName + anchors { + left: avatatReply.right + leftMargin: Kirigami.Units.smallSpacing + right: parent.right + rightMargin: Kirigami.Units.smallSpacing } + text: reply.author.displayName + color: reply.author.color + elide: Text.ElideRight + } - Kirigami.Avatar { - Layout.preferredWidth: Kirigami.Units.gridUnit - Layout.preferredHeight: Kirigami.Units.gridUnit - Layout.alignment: Qt.AlignTop - visible: Config.showAvatarInTimeline - source: replyVisible && reply.author.avatarMediaId ? ("image://mxc/" + reply.author.avatarMediaId) : "" - name: replyVisible ? (reply.author.name || "") : "H" - color: replyVisible ? reply.author.color : Kirigami.Theme.highlightColor - } - - ColumnLayout { - id: replyLayout - Layout.fillWidth: true - - QQC2.Label { - Layout.fillWidth: true - text: replyVisible ? reply.author.displayName : "" - color: replyVisible ? reply.author.color: null - elide: Text.ElideRight - } - - TextDelegate { - Layout.fillWidth: true - Layout.leftMargin: 0 - text: replyVisible ? ("" + reply.display) : "" - textFormat: Text.RichText - wrapMode: Text.WordWrap - } + TextDelegate { + id: replyText + anchors { + left: avatatReply.right + top: replyName.bottom + leftMargin: Kirigami.Units.smallSpacing + topMargin: Kirigami.Units.smallSpacing + right: parent.right + rightMargin: Kirigami.Units.smallSpacing } + textMessage: reply.display + textFormat: Text.RichText + wrapMode: Text.WordWrap } } diff --git a/imports/NeoChat/Component/Timeline/SectionDelegate.qml b/imports/NeoChat/Component/Timeline/SectionDelegate.qml index 8f8258bac..221c21719 100644 --- a/imports/NeoChat/Component/Timeline/SectionDelegate.qml +++ b/imports/NeoChat/Component/Timeline/SectionDelegate.qml @@ -8,7 +8,7 @@ import org.kde.kirigami 2.15 as Kirigami Kirigami.Heading { level: 4 - text: section + text: model.showSection ? section : "" verticalAlignment: Text.AlignVCenter topPadding: Kirigami.Units.largeSpacing * 2 bottomPadding: Kirigami.Units.smallSpacing diff --git a/imports/NeoChat/Component/Timeline/TextDelegate.qml b/imports/NeoChat/Component/Timeline/TextDelegate.qml index 5273a4919..23d3dfa4f 100644 --- a/imports/NeoChat/Component/Timeline/TextDelegate.qml +++ b/imports/NeoChat/Component/Timeline/TextDelegate.qml @@ -17,6 +17,7 @@ TextEdit { readonly property var isEmoji: /^()?(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])+(<\/span>)?$/ property bool isEmote: false + property string textMessage: model.display text: "" + (isEmote ? "* " + author.displayName + " " : "") + model.display + (isEdited ? (" " + "" + i18n(" (edited)") + "") : "") +" + (isEmote ? "* " + author.displayName + " " : "") + textMessage + (isEdited ? (" " + "" + i18n(" (edited)") + "") : "") color: Kirigami.Theme.textColor - font.pointSize: !replyVisible && isEmoji.test(model.display) ? Kirigami.Theme.defaultFont.pointSize * 4 : Kirigami.Theme.defaultFont.pointSize + font.pointSize: model.reply === undefined && isEmoji.test(model.display) ? Kirigami.Theme.defaultFont.pointSize * 4 : Kirigami.Theme.defaultFont.pointSize selectByMouse: !Kirigami.Settings.isMobile readOnly: true wrapMode: Text.WordWrap diff --git a/imports/NeoChat/Component/Timeline/TimelineContainer.qml b/imports/NeoChat/Component/Timeline/TimelineContainer.qml index f5a67209f..0e3d4c320 100644 --- a/imports/NeoChat/Component/Timeline/TimelineContainer.qml +++ b/imports/NeoChat/Component/Timeline/TimelineContainer.qml @@ -15,18 +15,13 @@ import NeoChat.Dialog 1.0 QQC2.ItemDelegate { id: messageDelegate default property alias innerObject : column.children - readonly property bool sentByMe: author.isLocalUser - readonly property bool darkBackground: !sentByMe - readonly property bool replyVisible: reply ?? false - readonly property bool failed: marks == EventStatus.SendingFailed - readonly property color authorColor: eventType == "notice" ? Kirigami.Theme.activeTextColor : author.color - readonly property color replyAuthorColor: replyVisible ? reply.author.color : Kirigami.Theme.focusColor + // readonly property bool failed: marks == EventStatus.SendingFailed + property bool isLoaded property bool isEmote: false property bool cardBackground: true - property bool isLoaded - property var hoverComponent + readonly property int bubbleMaxWidth: Math.min(width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 4, Kirigami.Units.gridUnit * 20) signal saveFileAs() signal openExternally() @@ -34,9 +29,8 @@ QQC2.ItemDelegate { topPadding: 0 bottomPadding: 0 - - //height: mainColumn.childrenRect.height + (readMarker ? Kirigami.Units.smallSpacing : 0) - //height: mainColumn.implicitHeight + (readMarker ? Kirigami.Units.smallSpacing : 0) + background: null + property Item hoverComponent // show hover actions onHoveredChanged: { @@ -47,160 +41,154 @@ QQC2.ItemDelegate { // updates the global hover component to point to this delegate, and update its position function updateHoverComponent() { - hoverComponent.bubble = bubble - hoverComponent.updateFunction = updateHoverComponent; - hoverComponent.event = model + if (hoverComponent) { + hoverComponent.bubble = bubble + hoverComponent.updateFunction = updateHoverComponent; + hoverComponent.event = model + } } - contentItem: ColumnLayout { - id: mainColumn - spacing: 0 + height: sectionDelegate.height + Math.max(avatar.height, bubble.implicitHeight) + loader.height + (model.showAuthor ? Kirigami.Units.smallSpacing : 0) - SectionDelegate { - id: sectionDelegate - Layout.maximumWidth: parent.width - Layout.alignment: Qt.AlignHCenter + SectionDelegate { + id: sectionDelegate + width: parent.width + anchors.left: parent.left + anchors.leftMargin: Kirigami.Units.gridUnit * 2 + Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing + visible: model.showSection + height: visible ? implicitHeight : 0 + } - visible: showSection + Kirigami.Avatar { + id: avatar + width: Kirigami.Units.gridUnit * 2 + height: width + sourceSize.width: width + sourceSize.height: width + anchors { + top: sectionDelegate.bottom + topMargin: model.showAuthor ? Kirigami.Units.smallSpacing * 2 : Kirigami.Units.smallSpacing + left: parent.left + leftMargin: Kirigami.Units.largeSpacing } - RowLayout { - id: root + visible: model.showAuthor && Config.showAvatarInTimeline + name: model.author.name ?? model.author.displayName + source: model.author.avatarMediaId ? ("image://mxc/" + model.author.avatarMediaId) : "" + color: model.author.color - spacing: Kirigami.Units.smallSpacing - Layout.leftMargin: Kirigami.Units.largeSpacing - Layout.rightMargin: Kirigami.Units.smallSpacing - Layout.bottomMargin: 0 - Layout.topMargin: model.showAuthor ? Kirigami.Units.smallSpacing : 0 - Layout.fillWidth: true - - Kirigami.Avatar { - Layout.minimumWidth: Kirigami.Units.gridUnit * 2 - Layout.minimumHeight: Kirigami.Units.gridUnit * 2 - Layout.maximumWidth: Kirigami.Units.gridUnit * 2 - Layout.maximumHeight: Kirigami.Units.gridUnit * 2 - sourceSize.width: Kirigami.Units.gridUnit * 2 - sourceSize.height: Kirigami.Units.gridUnit * 2 - - Layout.alignment: Qt.AlignTop - - visible: model.showAuthor && Config.showAvatarInTimeline - name: author.name ?? author.displayName - source: author.avatarMediaId ? ("image://mxc/" + author.avatarMediaId) : "" - color: author.color - - Component { - id: userDetailDialog - - UserDetailDialog {} - } - - MouseArea { - anchors.fill: parent - onClicked: userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {"room": currentRoom, "user": author.object, "displayName": author.displayName, "avatarMediaId": author.avatarMediaId, "avatarUrl": author.avatarUrl}).open() - cursorShape: Qt.PointingHandCursor - } + MouseArea { + anchors.fill: parent + onClicked: { + userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, { + room: currentRoom, + user: author.object, + displayName: author.displayName, + avatarMediaId: author.avatarMediaId, + avatarUrl: author.avatarUrl + }).open(); } + cursorShape: Qt.PointingHandCursor + } + } + QQC2.Control { + id: bubble + topPadding: Kirigami.Units.largeSpacing + bottomPadding: 0 + leftPadding: 0 + rightPadding: 0 + hoverEnabled: true + anchors { + top: avatar.top + left: avatar.right + leftMargin: Kirigami.Units.smallSpacing + } + + contentItem: ColumnLayout { + id: column + spacing: 0 Item { - Layout.minimumWidth: Kirigami.Units.gridUnit * 2 - Layout.preferredHeight: 1 - visible: !model.showAuthor && Config.showAvatarInTimeline - } - - QQC2.Control { - id: bubble - implicitHeight: contentItem.implicitHeight + topPadding - topPadding: Kirigami.Units.largeSpacing - bottomPadding: 0 - leftPadding: 0 - rightPadding: 0 - hoverEnabled: true - Layout.maximumWidth: mainColumn.width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 2 - - contentItem: ColumnLayout { - id: column - spacing: 0 - Loader { - id: topRow - active: model.showAuthor && !isEmote - visible: active - Layout.fillWidth: true - Layout.leftMargin: Kirigami.Units.largeSpacing - Layout.rightMargin: Kirigami.Units.largeSpacing - Layout.bottomMargin: visible ? Kirigami.Units.smallSpacing : 0 - - sourceComponent: RowLayout { - id: rowLayout - - QQC2.Label { - Layout.fillWidth: true - topInset: 0 - - visible: model.showAuthor && !isEmote - - text: author.displayName - font.weight: Font.Bold - color: author.color - wrapMode: Text.Wrap - } - QQC2.Label { - visible: model.showAuthor && !isEmote - text: time.toLocaleTimeString(Locale.ShortFormat) - color: Kirigami.Theme.disabledTextColor - } - } - } - Loader { - id: replyLoader - source: 'qrc:imports/NeoChat/Component/Timeline/ReplyComponent.qml' - active: replyVisible - visible: active - Layout.bottomMargin: Kirigami.Units.smallSpacing - - Connections { - target: replyLoader.item - function onClicked() { - replyClicked(reply.eventId) - } - } - } - } - - background: Kirigami.ShadowedRectangle { - visible: cardBackground - color: model.isHighlighted ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor - radius: Kirigami.Units.smallSpacing - shadow.size: Kirigami.Units.smallSpacing - shadow.color: !model.isHighlighted ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10) - border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15) - border.width: Kirigami.Units.devicePixelRatio - } - } - Item { + id: rowLayout + visible: model.showAuthor && !isEmote Layout.fillWidth: true + Layout.leftMargin: Kirigami.Units.largeSpacing + Layout.rightMargin: Kirigami.Units.largeSpacing + Layout.preferredWidth: nameLabel.implicitWidth + timeLabel.implicitWidth + Kirigami.Units.largeSpacing + Layout.maximumWidth: bubbleMaxWidth - Kirigami.Units.largeSpacing * 2 + implicitHeight: visible ? nameLabel.implicitHeight : 0 + + QQC2.Label { + id: nameLabel + topInset: 0 + + visible: model.showAuthor && !isEmote + anchors.left: rowLayout.left + anchors.right: timeLabel.left + anchors.rightMargin: Kirigami.Units.smallSpacing + + text: visible ? author.displayName : "" + font.weight: Font.Bold + color: author.color + wrapMode: Text.Wrap + } + QQC2.Label { + id: timeLabel + anchors.right: rowLayout.right + visible: model.showAuthor && !isEmote + text: visible ? time.toLocaleTimeString(Locale.ShortFormat) : "" + color: Kirigami.Theme.disabledTextColor + } + } + Loader { + id: replyLoader + active: model.reply !== undefined + source: 'qrc:imports/NeoChat/Component/Timeline/ReplyComponent.qml' + visible: active + Layout.bottomMargin: Kirigami.Units.smallSpacing + + Connections { + target: replyLoader.item + function onClicked() { + replyClicked(reply.eventId) + } + } } } - Loader { - id: loader - Layout.fillWidth: true - Layout.leftMargin: Kirigami.Units.gridUnit * 2 + Kirigami.Units.largeSpacing * 2 - Layout.topMargin: active ? Kirigami.Units.smallSpacing : 0 - //Layout.bottomMargin: readMarker ? Kirigami.Units.smallSpacing : 0 - active: eventType !== "state" && eventType !== "notice" && reaction != undefined && reaction.length > 0 - visible: active - sourceComponent: ReactionDelegate { } + + background: Kirigami.ShadowedRectangle { + visible: cardBackground + color: model.isHighlighted ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor + radius: Kirigami.Units.smallSpacing + shadow.size: Kirigami.Units.smallSpacing + shadow.color: !model.isHighlighted ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10) + border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15) + border.width: Kirigami.Units.devicePixelRatio } } - background: Item { - Rectangle { - width: parent.width * 0.9 - x: parent.width * 0.05 - height: Kirigami.Units.smallSpacing / 2 - anchors.bottom: parent.bottom - visible: readMarker - color: Kirigami.Theme.positiveTextColor + Loader { + id: loader + anchors { + left: parent.left + leftMargin: Kirigami.Units.gridUnit * 2 + Kirigami.Units.largeSpacing * 2 + right: parent.right + top: bubble.bottom + topMargin: active ? Kirigami.Units.smallSpacing : 0 } + height: active ? item.implicitHeight + Kirigami.Units.smallSpacing : 0 + //Layout.bottomMargin: readMarker ? Kirigami.Units.smallSpacing : 0 + active: eventType !== "state" && eventType !== "notice" && reaction != undefined && reaction.length > 0 + visible: active + sourceComponent: ReactionDelegate { } + } + + Rectangle { + width: parent.width * 0.9 + x: parent.width * 0.05 + height: Kirigami.Units.smallSpacing / 2 + anchors.top: loader.bottom + visible: readMarker + color: Kirigami.Theme.positiveTextColor } } diff --git a/imports/NeoChat/Menu/Timeline/MessageDelegateContextMenu.qml b/imports/NeoChat/Menu/Timeline/MessageDelegateContextMenu.qml index 28418525a..953f39817 100644 --- a/imports/NeoChat/Menu/Timeline/MessageDelegateContextMenu.qml +++ b/imports/NeoChat/Menu/Timeline/MessageDelegateContextMenu.qml @@ -16,31 +16,33 @@ Loader { required property var author required property string message required property string eventId + property string eventType: "" + property string formattedBody: "" required property string source property list actions: [ + Kirigami.Action { + text: i18n("Edit") + icon.name: "document-edit" + onTriggered: ChatBoxHelper.edit(message, formattedBody, eventId); + visible: eventType.length > 0 && author.id === Controller.activeConnection.localUserId && (eventType === "emote" || eventType === "message") + }, Kirigami.Action { text: i18n("Reply") icon.name: "mail-replied-symbolic" - onTriggered: { - ChatBoxHelper.replyToMessage(eventId, message, author); - } + onTriggered: ChatBoxHelper.replyToMessage(eventId, message, author); }, Kirigami.Action { visible: author.id === currentRoom.localUser.id || currentRoom.canSendState("redact") text: i18n("Remove") icon.name: "edit-delete-remove" icon.color: "red" - onTriggered: { - currentRoom.redactEvent(eventId); - } + onTriggered: currentRoom.redactEvent(eventId); }, Kirigami.Action { text: i18n("Copy") icon.name: "edit-copy" - onTriggered: { - Clipboard.saveText(message) - } + onTriggered: Clipboard.saveText(message) }, Kirigami.Action { text: i18n("View Source") @@ -54,6 +56,17 @@ Loader { Component { id: regularMenu + QQC2.Menu { + Repeater { + model: loadRoot.actions + QQC2.MenuItem { + visible: modelData.visible + action: modelData + onClicked: loadRoot.item.close(); + } + } + } + /* Kirigami.OverlaySheet { id: root @@ -133,18 +146,8 @@ Loader { Kirigami.Separator { Layout.fillWidth: true } - Repeater { - model: loadRoot.actions - Kirigami.BasicListItem { - visible: modelData.visible - action: modelData - onClicked: { - loadRoot.item.close(); - } - } - } } - } + }*/ } Component { id: mobileMenu @@ -254,7 +257,11 @@ Loader { } onStatusChanged: if (status == Loader.Ready) { - item.open(); + if (Kirigami.Settings.isMobile) { + item.open(); + } else { + item.popup(); + } } } diff --git a/imports/NeoChat/Page/RoomPage.qml b/imports/NeoChat/Page/RoomPage.qml index 90937538e..da308e3ab 100644 --- a/imports/NeoChat/Page/RoomPage.qml +++ b/imports/NeoChat/Page/RoomPage.qml @@ -138,6 +138,7 @@ Kirigami.ScrollablePage { hoverActions.updateFunction(); } } + Item { id: hoverActions property var event @@ -382,22 +383,21 @@ Kirigami.ScrollablePage { isLoaded: timelineDelegateChooser.delegateLoaded isEmote: true onReplyClicked: goToEvent(eventID) - hoverComponent: hoverActions innerObject: TextDelegate { isEmote: true - Layout.maximumWidth: emoteContainer.width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 4 + Layout.maximumWidth: emoteContainer.bubbleMaxWidth Layout.rightMargin: Kirigami.Units.largeSpacing Layout.leftMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing * 2 TapHandler { acceptedButtons: Qt.RightButton - onTapped: openMessageContext(author, model.display, eventId, toolTip) + onTapped: openMessageContext(author, model.message, eventId, toolTip, eventType, model.formattedBody) } TapHandler { acceptedButtons: Qt.LeftButton - onLongPressed: openMessageContext(author, model.display, eventId, toolTip) + onLongPressed: openMessageContext(author, model.message, eventId, toolTip, eventType, model.formattedBody) } } } @@ -410,21 +410,20 @@ Kirigami.ScrollablePage { width: messageListView.width isLoaded: timelineDelegateChooser.delegateLoaded onReplyClicked: goToEvent(eventID) - hoverComponent: hoverActions innerObject: TextDelegate { - Layout.maximumWidth: messageContainer.width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 4 + Layout.maximumWidth: messageContainer.bubbleMaxWidth Layout.rightMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing Layout.leftMargin: Kirigami.Units.largeSpacing TapHandler { acceptedButtons: Qt.RightButton - onTapped: openMessageContext(author, model.display, eventId, toolTip) + onTapped: openMessageContext(author, model.message, eventId, toolTip, eventType, model.formattedBody) } TapHandler { acceptedButtons: Qt.LeftButton - onLongPressed: openMessageContext(author, model.display, eventId, toolTip) + onLongPressed: openMessageContext(author, model.message, eventId, toolTip, eventType, model.formattedBody) } } } @@ -438,9 +437,8 @@ Kirigami.ScrollablePage { isLoaded: timelineDelegateChooser.delegateLoaded onReplyClicked: goToEvent(eventID) - hoverComponent: hoverActions innerObject: TextDelegate { - Layout.maximumWidth: noticeContainer.width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 4 + Layout.maximumWidth: noticeContainer.bubbleMaxWidth Layout.rightMargin: Kirigami.Units.largeSpacing Layout.leftMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing * 2 @@ -451,18 +449,18 @@ Kirigami.ScrollablePage { DelegateChoice { roleValue: "image" delegate: TimelineContainer { + id: imageContainer isLoaded: timelineDelegateChooser.delegateLoaded + width: messageListView.width onReplyClicked: goToEvent(eventID) - hoverComponent: hoverActions innerObject: ImageDelegate { - Layout.minimumWidth: Kirigami.Units.gridUnit * 10 - Layout.fillWidth: true + Layout.preferredWidth: Kirigami.Units.gridUnit * 15 + Layout.maximumWidth: imageContainer.bubbleMaxWidth Layout.bottomMargin: Kirigami.Units.largeSpacing Layout.preferredHeight: info.h / info.w * width - Layout.maximumHeight: Kirigami.Units.gridUnit * 15 - Layout.maximumWidth: Kirigami.Units.gridUnit * 30 + Layout.maximumHeight: Kirigami.Units.gridUnit * 20 TapHandler { acceptedButtons: Qt.RightButton onTapped: openFileContext(author, model.display, eventId, toolTip, progressInfo, parent) @@ -484,7 +482,6 @@ Kirigami.ScrollablePage { isLoaded: timelineDelegateChooser.delegateLoaded width: messageListView.width onReplyClicked: goToEvent(eventID) - hoverComponent: hoverActions cardBackground: false @@ -500,14 +497,15 @@ Kirigami.ScrollablePage { DelegateChoice { roleValue: "audio" delegate: TimelineContainer { + id: audioContainer width: messageListView.width - hoverComponent: hoverActions - isLoaded: timelineDelegateChooser.delegateLoaded onReplyClicked: goToEvent(eventID) + hoverComponent: hoverActions innerObject: AudioDelegate { Layout.fillWidth: true + Layout.maximumWidth: audioContainer.bubbleMaxWidth TapHandler { acceptedButtons: Qt.RightButton onTapped: openFileContext(author, model.display, eventId, toolTip, progressInfo, parent) @@ -523,16 +521,15 @@ Kirigami.ScrollablePage { DelegateChoice { roleValue: "video" delegate: TimelineContainer { + id: videoContainer width: messageListView.width - hoverComponent: hoverActions - isLoaded: timelineDelegateChooser.delegateLoaded onReplyClicked: goToEvent(eventID) + hoverComponent: hoverActions innerObject: VideoDelegate { Layout.fillWidth: true - Layout.minimumWidth: Kirigami.Units.gridUnit * 10 - Layout.maximumWidth: Kirigami.Units.gridUnit * 30 + Layout.maximumWidth: videoContainer.bubbleMaxWidth Layout.preferredHeight: content.info.h / content.info.w * width Layout.maximumHeight: Kirigami.Units.gridUnit * 15 Layout.minimumHeight: Kirigami.Units.gridUnit * 5 @@ -552,15 +549,14 @@ Kirigami.ScrollablePage { DelegateChoice { roleValue: "file" delegate: TimelineContainer { + id: fileContainer width: messageListView.width - - hoverComponent: hoverActions - isLoaded: timelineDelegateChooser.delegateLoaded onReplyClicked: goToEvent(eventID) innerObject: FileDelegate { Layout.fillWidth: true + Layout.maximumWidth: fileContainer.bubbleMaxWidth TapHandler { acceptedButtons: Qt.RightButton onTapped: openFileContext(author, model.display, eventId, toolTip, progressInfo, parent) @@ -818,23 +814,26 @@ Kirigami.ScrollablePage { /// Open message context dialog for file and videos function openFileContext(author, message, eventId, source, progressInfo, file) { const contextMenu = fileDelegateContextMenu.createObject(page, { - 'author': author, - 'message': message, - 'eventId': eventId, - 'source': source, - 'file': file, - 'progressInfo': progressInfo, + author: author, + message: message, + eventId: eventId, + source: source, + file: file, + progressInfo: progressInfo, }); contextMenu.open(); } /// Open context menu for normal message - function openMessageContext(author, message, eventId, source) { + function openMessageContext(author, message, eventId, source, eventType, formattedBody) { + console.log("message", message) const contextMenu = messageDelegateContextMenu.createObject(page, { - 'author': author, - 'message': message, - 'eventId': eventId, - 'source': source, + author: author, + message: message, + eventId: eventId, + formattedBody: formattedBody, + source: source, + eventType: eventType }); contextMenu.open(); }