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