diff --git a/TODO.md b/TODO.md index 67e4ff28..66490522 100644 --- a/TODO.md +++ b/TODO.md @@ -88,7 +88,7 @@ - Animate `DayBreak` apparition - Device settings -- Replies +- Proparly formatted rich replies - Messages editing - Code highlighting - Adapt shortcuts flicking speed to font size diff --git a/src/gui/Pages/Chat/Chat.qml b/src/gui/Pages/Chat/Chat.qml index 4095e3e6..b1ff1b2a 100644 --- a/src/gui/Pages/Chat/Chat.qml +++ b/src/gui/Pages/Chat/Chat.qml @@ -22,6 +22,9 @@ Item { property bool ready: Boolean(userInfo && roomInfo) property bool longLoading: false + property string replyToUserId: "" + property string replyToDisplayName: "" + readonly property alias loader: loader readonly property alias roomPane: roomPaneLoader.item diff --git a/src/gui/Pages/Chat/ChatPage.qml b/src/gui/Pages/Chat/ChatPage.qml index 0ac2eebc..52b225a9 100644 --- a/src/gui/Pages/Chat/ChatPage.qml +++ b/src/gui/Pages/Chat/ChatPage.qml @@ -64,6 +64,18 @@ HColumnPage { TypingMembersBar { typingMembers: JSON.parse(chat.roomInfo.typing_members) + + Layout.fillWidth: true + } + + ReplyBar { + replyToUserId: chat.replyToUserId + replyToDisplayName: chat.replyToDisplayName + onCancel: { + chat.replyToUserId = "" + chat.replyToDisplayName = "" + } + Layout.fillWidth: true } diff --git a/src/gui/Pages/Chat/InfoBar.qml b/src/gui/Pages/Chat/InfoBar.qml index 6a03fed0..7e117c04 100644 --- a/src/gui/Pages/Chat/InfoBar.qml +++ b/src/gui/Pages/Chat/InfoBar.qml @@ -11,12 +11,14 @@ Rectangle { readonly property alias icon: icon readonly property alias label: label + default property alias rowLayoutData: rowLayout.data Behavior on implicitHeight { HNumberAnimation {} } HRowLayout { id: rowLayout + width: parent.width spacing: theme.spacing HIcon { diff --git a/src/gui/Pages/Chat/ReplyBar.qml b/src/gui/Pages/Chat/ReplyBar.qml new file mode 100644 index 00000000..b036c5cf --- /dev/null +++ b/src/gui/Pages/Chat/ReplyBar.qml @@ -0,0 +1,35 @@ +// SPDX-License-Identifier: LGPL-3.0-or-later + +import QtQuick 2.12 +import QtQuick.Layouts 1.12 +import "../../Base" + +InfoBar { + color: theme.chat.replyBar.background + icon.svgName: "reply-to" + label.textFormat: Text.StyledText + label.text: + replyToUserId ? + utils.coloredNameHtml(replyToDisplayName, replyToUserId) : + "" + + + signal cancel() + + + property string replyToUserId: "" + property string replyToDisplayName: "" + + + HButton { + backgroundColor: "transparent" + icon.name: "reply-cancel" + icon.color: theme.colors.negativeBackground + // iconItem.small: true + // topPadding: 0 + // bottomPadding: topPadding + onClicked: cancel() + + Layout.fillHeight: true + } +} diff --git a/src/gui/Pages/Chat/Timeline/EventDelegate.qml b/src/gui/Pages/Chat/Timeline/EventDelegate.qml index 17c6ee78..dd88aa8f 100644 --- a/src/gui/Pages/Chat/Timeline/EventDelegate.qml +++ b/src/gui/Pages/Chat/Timeline/EventDelegate.qml @@ -228,6 +228,16 @@ HColumnLayout { } } + HMenuItem { + icon.name: "reply-to" + text: qsTr("Reply") + + onTriggered: { + chat.replyToUserId = model.sender_id + chat.replyToDisplayName = model.sender_name + } + } + HMenuItemPopupSpawner { icon.name: "remove-message" text: qsTr("Remove") diff --git a/src/icons/thin/reply-cancel.svg b/src/icons/thin/reply-cancel.svg new file mode 100644 index 00000000..e4728028 --- /dev/null +++ b/src/icons/thin/reply-cancel.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/thin/reply-to.svg b/src/icons/thin/reply-to.svg new file mode 100644 index 00000000..30743bb0 --- /dev/null +++ b/src/icons/thin/reply-to.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/themes/Glass.qpl b/src/themes/Glass.qpl index 9e41363f..1776b3d0 100644 --- a/src/themes/Glass.qpl +++ b/src/themes/Glass.qpl @@ -445,6 +445,9 @@ chat: colors.hue, colors.saturation, colors.intensity * 9, 0.52 ) + replyBar: + color background: chat.typingMembers.background + fileTransfer: color background: chat.typingMembers.background diff --git a/src/themes/Midnight.qpl b/src/themes/Midnight.qpl index 022c488f..09a0b28c 100644 --- a/src/themes/Midnight.qpl +++ b/src/themes/Midnight.qpl @@ -454,6 +454,9 @@ chat: colors.hue, colors.saturation, colors.intensity * 9, 0.52 ) + replyBar: + color background: chat.typingMembers.background + fileTransfer: color background: chat.typingMembers.background