Yeet HoverActions into the sun

Replace HoverActions with an inline action component that appears on hover. There are only actions for reply and react if there is space the overflow button opens the normal message menu.

NOTE: the most recent update changes things slightly, from the images below the buttons are now top aligned because of potentially hige messages. The actions are also now disabled for compact mode as they never really made sense there anyway. The menu now has all options so no one is missing out.

For normal messages

![image](/uploads/b8679eb09c9190404fc84f01e14169af/image.png){width=419 height=138}

When space is limited

![image](/uploads/ecd7c725ea2526689e586a2d786f389e/image.png){width=411 height=130}

User messages

![image](/uploads/767ef09f6650a5fb6abf3a49ef9f9b90/image.png){width=296 height=114}

BUG: 503784
This commit is contained in:
James Graham
2025-05-11 11:11:52 +01:00
parent a04769baad
commit 101a8b9ec3
12 changed files with 239 additions and 222 deletions

View File

@@ -0,0 +1,90 @@
// SPDX-FileCopyrightText: 2025 James Graham <james.h.graham@protonmail.com>
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
import QtQuick
import QtQuick.Controls as QQC2
import QtQuick.Layouts
import org.kde.kirigami as Kirigami
import org.kde.neochat
RowLayout {
id: root
/**
* @brief The NeoChatRoom the delegate is being displayed in.
*/
required property NeoChatRoom room
/**
* @brief The matrix ID of the message event.
*/
required property string eventId
property real availableWidth: 0.0
property bool reacting: false
QQC2.Button {
id: reactButton
visible: root.availableWidth > overflowButton.implicitWidth + root.spacing + reactButton.implicitWidth
text: i18n("React")
icon.name: "preferences-desktop-emoticons"
display: QQC2.ToolButton.IconOnly
onClicked: {
var dialog = emojiDialog.createObject(reactButton);
dialog.chosen.connect(emoji => {
root.reacting = false;
root.room.toggleReaction(root.eventId, emoji);
if (!Kirigami.Settings.isMobile) {
// root.focusChatBar();
}
});
dialog.closed.connect(() => {
root.reacting = false;
})
root.reacting = true;
dialog.open();
}
QQC2.ToolTip.text: text
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
Component {
id: emojiDialog
EmojiDialog {
currentRoom: root.room
showQuickReaction: true
}
}
}
QQC2.Button {
id: replyButton
visible: !root.room.readOnly && root.availableWidth > overflowButton.implicitWidth + reactButton.implicitWidth + replyButton.implicitWidth + root.spacing
text: i18n("Reply")
icon.name: "mail-replied-symbolic"
display: QQC2.Button.IconOnly
onClicked: {
root.room.mainCache.replyId = root.eventId;
root.room.editCache.editId = "";
root.room.mainCache.threadId = "";
}
QQC2.ToolTip.text: text
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
}
QQC2.Button {
id: overflowButton
text: i18n("Message menu")
icon.name: "overflow-menu"
onClicked: _private.showMessageMenu()
display: QQC2.ToolButton.IconOnly
QQC2.ToolTip.text: text
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
}
}