Add reply GUI controls

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 

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
 

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
     }
 

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 {

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
+    }
+}

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")

src/icons/thin/reply-cancel.svg

@@ -0,0 +1,3 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m23 20.168-8.185-8.187 8.185-8.174-2.832-2.807-8.182 8.179-8.176-8.179-2.81 2.81 8.186 8.196-8.186 8.184 2.81 2.81 8.203-8.192 8.18 8.192z"/>
+</svg>

src/icons/thin/reply-to.svg

@@ -0,0 +1,3 @@
+<svg height="17" viewBox="0 0 18 17" width="18" xmlns="http://www.w3.org/2000/svg">
+    <path d="m7 4.5402542v-4.5402542l-7 7 7 7v-4.6402542c5 0 8.5 2.1402542 11 5.6402542-1-5-4-9.4597458-11-10.4597458z" fill-rule="evenodd" transform="translate(0 .5)"/>
+</svg>

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
 

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