Qml emoji completer

2 files changed, 52 insertions, 12 deletions

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

index 2c520dec..0557a2e7 100644
--- a/resources/qml/Completer.qml
+++ b/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
+                            }
+
+                        }
+
                     }
 
                 }
diff --git a/resources/qml/MessageInput.qml b/resources/qml/MessageInput.qml

index 1366689c..ac91e46c 100644
--- a/resources/qml/MessageInput.qml
+++ b/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 = "";