Add emoji picker for reaction

imports/NeoChat/Component/ChatTextInput.qml

@@ -46,6 +46,7 @@ ToolBar {
 
             textArea: inputField
             emojiModel: EmojiModel { id: emojiModel }
+            onChoosen: textArea.insert(textArea.cursorPosition, emoji)
         }
 
         RowLayout {

imports/NeoChat/Component/Emoji/EmojiPicker.qml

@@ -17,6 +17,8 @@ ColumnLayout {
     property var textArea
     property var emojiModel
 
+    signal choosen(string emoji)
+
     spacing: 0
 
     ListView {
@@ -122,7 +124,7 @@ ColumnLayout {
             }
 
             onClicked: {
-                textArea.insert(textArea.cursorPosition, modelData.unicode)
+                choosen(modelData.unicode)
                 emojiModel.emojiUsed(modelData)
             }
         }

imports/NeoChat/Component/Timeline/MessageDelegate.qml

@@ -120,11 +120,15 @@ RowLayout {
             anchors.right: controlContainer.right
             spacing: 0
             QQC2.Button {
-                QQC2.ToolTip.text: i18n("React") + " (not implemented yet)"
+                QQC2.ToolTip.text: i18n("React")
                 QQC2.ToolTip.visible: hovered
                 visible: controlContainer.hovered
                 icon.name: "preferences-desktop-emoticons"
-                // TODO onClicked
+                onClicked: emojiDialog.open();
+                EmojiDialog {
+                    id: emojiDialog
+                    onReact: currentRoom.toggleReaction(eventId, emoji)
+                }
             }
             QQC2.Button {
                 QQC2.ToolTip.text: i18n("Reply")

imports/NeoChat/Dialog/EmojiDialog.qml

@@ -0,0 +1,30 @@
+/**
+ * SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+ *
+ * SPDX-License-Identifier: LGPL-2.1-or-later
+ */
+import QtQuick 2.14
+import QtQuick.Controls 2.14 as QQC2
+import org.kde.kirigami 2.13 as Kirigami
+
+import org.kde.neochat 1.0
+import NeoChat.Component.Emoji 1.0
+
+QQC2.Popup {
+    id: root
+
+    signal react(string emoji)
+
+    modal: true
+    focus: true
+    closePolicy: QQC2.Popup.CloseOnEscape | QQC2.Popup.CloseOnPressOutsideParent
+    margins: 0
+    padding: Kirigami.Units.smallSpacing
+    implicitWidth: Kirigami.Units.gridUnit * 15
+    implicitHeight: Kirigami.Units.gridUnit * 20
+
+    contentItem: EmojiPicker {
+        onChoosen: react(emoji);
+        emojiModel: EmojiModel {}
+    }
+}

imports/NeoChat/Dialog/qmldir

@@ -8,3 +8,4 @@ OpenFileDialog 1.0 OpenFileDialog.qml
 OpenFolderDialog 1.0 OpenFolderDialog.qml
 ImageClipboardDialog 1.0 ImageClipboardDialog.qml
 StartChatDialog 1.0 StartChatDialog.qml
+EmojiDialog 1.0 EmojiDialog.qml

res.qrc

@@ -47,15 +47,16 @@
         <file>imports/NeoChat/Dialog/qmldir</file>
         <file>imports/NeoChat/Dialog/RoomSettingsDialog.qml</file>
         <file>imports/NeoChat/Dialog/UserDetailDialog.qml</file>
-        <file>imports/NeoChat/Menu/Timeline/MessageSourceSheet.qml</file>
         <file>imports/NeoChat/Dialog/CreateRoomDialog.qml</file>
         <file>imports/NeoChat/Dialog/StartChatDialog.qml</file>
+        <file>imports/NeoChat/Dialog/EmojiDialog.qml</file>
         <file>imports/NeoChat/Dialog/OpenFileDialog.qml</file>
         <file>imports/NeoChat/Dialog/OpenFolderDialog.qml</file>
         <file>imports/NeoChat/Menu/qmldir</file>
         <file>imports/NeoChat/Menu/Timeline/qmldir</file>
         <file>imports/NeoChat/Menu/Timeline/MessageDelegateContextMenu.qml</file>
         <file>imports/NeoChat/Menu/Timeline/FileDelegateContextMenu.qml</file>
+        <file>imports/NeoChat/Menu/Timeline/MessageSourceSheet.qml</file>
         <file>imports/NeoChat/Menu/RoomListContextMenu.qml</file>
     </qresource>
 </RCC>