Qml emoji completer

resources/qml/Completer.qml

@@ -56,24 +56,60 @@ Popup {
 
             delegate: Rectangle {
                 color: model.index == popup.currentIndex ? colors.window : colors.base
-                height: del.implicitHeight + 4
-                width: del.implicitWidth + 4
+                height: chooser.childrenRect.height + 4
+                width: chooser.childrenRect.width + 4
 
-                RowLayout {
-                    id: del
+                DelegateChooser {
+                    id: chooser
 
+                    roleValue: popup.completerName
                     anchors.centerIn: parent
 
-                    Avatar {
-                        height: 24
-                        width: 24
-                        displayName: model.displayName
-                        url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
+                    DelegateChoice {
+                        roleValue: "user"
+
+                        RowLayout {
+                            id: del
+
+                            anchors.centerIn: parent
+
+                            Avatar {
+                                height: 24
+                                width: 24
+                                displayName: model.displayName
+                                url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
+                            }
+
+                            Label {
+                                text: model.displayName
+                                color: colors.text
+                            }
+
+                        }
+
                     }
 
-                    Label {
-                        text: model.displayName
-                        color: colors.text
+                    DelegateChoice {
+                        roleValue: "emoji"
+
+                        RowLayout {
+                            id: del
+
+                            anchors.centerIn: parent
+
+                            Label {
+                                text: model.unicode
+                                color: colors.text
+                                font: Settings.emojiFont
+                            }
+
+                            Label {
+                                text: model.shortName
+                                color: colors.text
+                            }
+
+                        }
+
                     }
 
                 }

resources/qml/MessageInput.qml

@@ -99,6 +99,10 @@ Rectangle {
                         completerTriggeredAt = cursorPosition;
                         popup.completerName = "user";
                         popup.open();
+                    } else if (event.key == Qt.Key_Colon) {
+                        completerTriggeredAt = cursorPosition;
+                        popup.completerName = "emoji";
+                        popup.open();
                     } else if (event.key == Qt.Key_Escape && popup.opened) {
                         completerTriggeredAt = -1;
                         popup.completerName = "";

src/emoji/EmojiModel.cpp

@@ -3,6 +3,8 @@
 #include <Cache.h>
 #include <MatrixClient.h>
 
+#include "CompletionModelRoles.h"
+
 using namespace emoji;
 
 QHash<int, QByteArray>
@@ -35,10 +37,12 @@ EmojiModel::data(const QModelIndex &index, int role) const
         if (hasIndex(index.row(), index.column(), index.parent())) {
                 switch (role) {
                 case Qt::DisplayRole:
+                case CompletionModel::CompletionRole:
                 case static_cast<int>(EmojiModel::Roles::Unicode):
                         return Provider::emoji[index.row()].unicode;
 
                 case Qt::ToolTipRole:
+                case CompletionModel::SearchRole:
                 case static_cast<int>(EmojiModel::Roles::ShortName):
                         return Provider::emoji[index.row()].shortName;
 

src/timeline/InputBar.cpp

@@ -25,6 +25,7 @@
 #include "Utils.h"
 #include "dialogs/PlaceCall.h"
 #include "dialogs/PreviewUploadOverlay.h"
+#include "emoji/EmojiModel.h"
 
 #include "blurhash.hpp"
 
@@ -173,6 +174,11 @@ InputBar::completerFor(QString completerName)
                 auto proxy     = new CompletionProxyModel(userModel);
                 userModel->setParent(proxy);
                 return proxy;
+        } else if (completerName == "emoji") {
+                auto emojiModel = new emoji::EmojiModel();
+                auto proxy      = new CompletionProxyModel(emojiModel);
+                emojiModel->setParent(proxy);
+                return proxy;
         }
         return nullptr;
 }