mirror of
https://github.com/Nheko-Reborn/nheko.git
synced 2024-10-30 09:30:47 +03:00
Use overlay buttons for message actions
This commit is contained in:
Nicolas Werner
parent
e3803ceb9a
commit
1142fe2663
4 changed files with 127 additions and 79 deletions
|
|
@ -2,40 +2,24 @@ import QtQuick 2.12
|
|||
import QtQuick.Controls 2.1
|
||||
import im.nheko 1.0
|
||||
|
||||
Rectangle {
|
||||
id: indicator
|
||||
Image {
|
||||
id: stateImg
|
||||
|
||||
property bool encrypted: false
|
||||
|
||||
function getEncryptionImage() {
|
||||
width: 16
|
||||
height: 16
|
||||
source: {
|
||||
if (encrypted)
|
||||
return "image://colorimage/:/icons/icons/ui/lock.png?" + colors.buttonText;
|
||||
else
|
||||
return "image://colorimage/:/icons/icons/ui/unlock.png?#dd3d3d";
|
||||
}
|
||||
|
||||
function getEncryptionTooltip() {
|
||||
if (encrypted)
|
||||
return qsTr("Encrypted");
|
||||
else
|
||||
return qsTr("This message is not encrypted!");
|
||||
}
|
||||
|
||||
color: "transparent"
|
||||
width: 16
|
||||
height: 16
|
||||
ToolTip.visible: ma.hovered && indicator.visible
|
||||
ToolTip.text: getEncryptionTooltip()
|
||||
ToolTip.visible: ma.hovered
|
||||
ToolTip.text: encrypted ? qsTr("Encrypted") : qsTr("This message is not encrypted!")
|
||||
|
||||
HoverHandler {
|
||||
id: ma
|
||||
}
|
||||
|
||||
Image {
|
||||
id: stateImg
|
||||
|
||||
anchors.fill: parent
|
||||
source: getEncryptionImage()
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import "./delegates"
|
||||
import "./emoji"
|
||||
import QtGraphicalEffects 1.0
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.3
|
||||
|
|
@ -29,6 +30,95 @@ ScrollView {
|
|||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
//closePolicy: Popup.NoAutoClose
|
||||
|
||||
id: messageActions
|
||||
|
||||
property Item attached: null
|
||||
property alias model: row.model
|
||||
// use comma to update on scroll
|
||||
property var attachedPos: chat.contentY, attached ? chat.mapFromItem(attached, attached ? attached.width - width : 0, -height) : null
|
||||
property int padding: 4
|
||||
|
||||
visible: Settings.buttonsInTimeline && !!attached && (attached.hovered || messageActionHover.hovered)
|
||||
x: attached ? attachedPos.x : 0
|
||||
y: attached ? attachedPos.y : 0
|
||||
z: 10
|
||||
height: row.implicitHeight + padding * 2
|
||||
width: row.implicitWidth + padding * 2
|
||||
color: colors.window
|
||||
border.color: colors.buttonText
|
||||
border.width: 1
|
||||
radius: padding
|
||||
|
||||
HoverHandler {
|
||||
id: messageActionHover
|
||||
grabPermissions: PointerHandler.CanTakeOverFromAnything
|
||||
}
|
||||
|
||||
Row {
|
||||
id: row
|
||||
|
||||
property var model
|
||||
|
||||
anchors.centerIn: parent
|
||||
spacing: messageActions.padding
|
||||
|
||||
ImageButton {
|
||||
id: editButton
|
||||
|
||||
visible: !!row.model && row.model.isEditable
|
||||
buttonTextColor: colors.buttonText
|
||||
width: 16
|
||||
hoverEnabled: true
|
||||
image: ":/icons/icons/ui/edit.png"
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: row.model && row.model.isEditable ? qsTr("Edit") : qsTr("Edited")
|
||||
onClicked: {
|
||||
if (row.model.isEditable)
|
||||
chat.model.editAction(row.model.id);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
EmojiButton {
|
||||
id: reactButton
|
||||
|
||||
width: 16
|
||||
hoverEnabled: true
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("React")
|
||||
emojiPicker: emojiPopup
|
||||
event_id: row.model ? row.model.id : ""
|
||||
}
|
||||
|
||||
ImageButton {
|
||||
id: replyButton
|
||||
|
||||
width: 16
|
||||
hoverEnabled: true
|
||||
image: ":/icons/icons/ui/mail-reply.png"
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("Reply")
|
||||
onClicked: chat.model.replyAction(row.model.id)
|
||||
}
|
||||
|
||||
ImageButton {
|
||||
id: optionsButton
|
||||
|
||||
width: 16
|
||||
hoverEnabled: true
|
||||
image: ":/icons/icons/ui/vertical-ellipsis.png"
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("Options")
|
||||
onClicked: messageContextMenu.show(row.model.id, row.model.type, row.model.isEncrypted, row.model.isEditable, optionsButton)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ScrollHelper {
|
||||
flickable: parent
|
||||
anchors.fill: parent
|
||||
|
|
@ -203,7 +293,25 @@ ScrollView {
|
|||
TimelineRow {
|
||||
id: timelinerow
|
||||
|
||||
property alias hovered: hoverHandler.hovered
|
||||
|
||||
y: section.visible && section.active ? section.y + section.height : 0
|
||||
|
||||
HoverHandler {
|
||||
id: hoverHandler
|
||||
|
||||
enabled: !Settings.mobileMode
|
||||
|
||||
onHoveredChanged: {
|
||||
if (hovered) {
|
||||
if (!messageActionHover.hovered) {
|
||||
messageActions.attached = timelinerow;
|
||||
messageActions.model = model;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Connections {
|
||||
|
|
|
|||
|
|
@ -79,68 +79,26 @@ Item {
|
|||
encrypted: model.isEncrypted
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignTop
|
||||
Layout.preferredHeight: 16
|
||||
width: 16
|
||||
Layout.preferredWidth: 16
|
||||
}
|
||||
|
||||
ImageButton {
|
||||
id: editButton
|
||||
|
||||
visible: (Settings.buttonsInTimeline && model.isEditable) || model.isEdited
|
||||
buttonTextColor: chat.model.edit == model.id ? colors.highlight : colors.buttonText
|
||||
Image {
|
||||
visible: model.isEdited
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignTop
|
||||
Layout.preferredHeight: 16
|
||||
Layout.preferredWidth: 16
|
||||
height: 16
|
||||
width: 16
|
||||
hoverEnabled: true
|
||||
image: ":/icons/icons/ui/edit.png"
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: model.isEditable ? qsTr("Edit") : qsTr("Edited")
|
||||
onClicked: {
|
||||
if (model.isEditable)
|
||||
chat.model.editAction(model.id);
|
||||
sourceSize.width: 16
|
||||
sourceSize.height: 16
|
||||
source: "image://colorimage/:/icons/icons/ui/edit.png?" + colors.buttonText
|
||||
ToolTip.visible: editHovered.hovered
|
||||
ToolTip.text: qsTr("Edited")
|
||||
|
||||
HoverHandler {
|
||||
id: editHovered
|
||||
}
|
||||
}
|
||||
|
||||
EmojiButton {
|
||||
id: reactButton
|
||||
|
||||
visible: Settings.buttonsInTimeline
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignTop
|
||||
Layout.preferredHeight: 16
|
||||
width: 16
|
||||
hoverEnabled: true
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("React")
|
||||
emojiPicker: emojiPopup
|
||||
event_id: model.id
|
||||
}
|
||||
|
||||
ImageButton {
|
||||
id: replyButton
|
||||
|
||||
visible: Settings.buttonsInTimeline
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignTop
|
||||
Layout.preferredHeight: 16
|
||||
width: 16
|
||||
hoverEnabled: true
|
||||
image: ":/icons/icons/ui/mail-reply.png"
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("Reply")
|
||||
onClicked: chat.model.replyAction(model.id)
|
||||
}
|
||||
|
||||
ImageButton {
|
||||
id: optionsButton
|
||||
|
||||
visible: Settings.buttonsInTimeline
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignTop
|
||||
Layout.preferredHeight: 16
|
||||
width: 16
|
||||
hoverEnabled: true
|
||||
image: ":/icons/icons/ui/vertical-ellipsis.png"
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("Options")
|
||||
onClicked: messageContextMenu.show(model.id, model.type, model.isEncrypted, model.isEditable, optionsButton)
|
||||
}
|
||||
|
||||
Label {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
TextMessage {
|
||||
font.italic: true
|
||||
color: colors.buttonText
|
||||
height: isReply ? Math.min(timelineRoot.height / 8, implicitHeight) : undefined
|
||||
clip: isReply
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue