Add recently used reactions

fixes #435

3 files changed, 70 insertions, 1 deletions

diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml

index 375b4017..62f7735b 100644
--- a/resources/qml/MessageView.qml
+++ b/resources/qml/MessageView.qml
@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
+import "./components"
 import "./delegates"
 import "./emoji"
 import "./ui"
@@ -49,7 +50,7 @@ ScrollView {
             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
-            readonly property int padding: 4
+            readonly property int padding: Nheko.paddingSmall
 
             visible: Settings.buttonsInTimeline && !!attached && (attached.hovered || messageActionHover.hovered)
             x: attached ? attachedPos.x : 0
@@ -76,6 +77,25 @@ ScrollView {
                 anchors.centerIn: parent
                 spacing: messageActions.padding
 
+                Repeater {
+                    model: Settings.recentReactions
+
+                    delegate: TextButton {
+                        required property string modelData
+
+                        visible: chat.model ? chat.model.permissions.canSend(MtxEvent.Reaction) : false
+
+                        height: fontMetrics.height
+                        font.family: Settings.emojiFont
+
+                        text: modelData
+                        onClicked: {
+                            room.input.reaction(row.model.eventId, modelData);
+                            TimelineManager.focusMessageInput();
+                        }
+                    }
+                }
+
                 ImageButton {
                     id: editButton
 
diff --git a/resources/qml/components/TextButton.qml b/resources/qml/components/TextButton.qml
new file mode 100644

index 00000000..5dc946e7
--- /dev/null
+++ b/resources/qml/components/TextButton.qml
@@ -0,0 +1,48 @@
+// SPDX-FileCopyrightText: 2021 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import "../ui"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import im.nheko 1.0 // for cursor shape
+
+AbstractButton {
+    id: button
+
+    property alias cursor: mouseArea.cursorShape
+    property color highlightColor: Nheko.colors.highlight
+    property color buttonTextColor: Nheko.colors.buttonText
+
+    focusPolicy: Qt.NoFocus
+    width: buttonText.implicitWidth
+    height: buttonText.implicitHeight
+    implicitWidth: buttonText.implicitWidth
+    implicitHeight: buttonText.implicitHeight
+
+    Label {
+        id: buttonText
+
+        anchors.centerIn: parent
+        padding: 0
+        text: button.text
+        color: button.hovered ? highlightColor : buttonTextColor
+        font: button.font
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    CursorShape {
+        id: mouseArea
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    Ripple {
+        color: Qt.rgba(buttonTextColor.r, buttonTextColor.g, buttonTextColor.b, 0.5)
+        clip: false
+        rippleTarget: button
+    }
+
+}
diff --git a/resources/res.qrc b/resources/res.qrc

index 67c35351..bc3a8bd2 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -114,6 +114,7 @@
         <file>qml/components/AvatarListTile.qml</file>
         <file>qml/components/FlatButton.qml</file>
         <file>qml/components/MainWindowDialog.qml</file>
+        <file>qml/components/TextButton.qml</file>
         <file>qml/delegates/Encrypted.qml</file>
         <file>qml/delegates/FileMessage.qml</file>
         <file>qml/delegates/ImageMessage.qml</file>