Colored emoji support.

Also, this approach seems to have a memory leak while converting
QStringList to QVariant.

flatpak/org.eu.encom.matrique.json

@@ -4,7 +4,7 @@
     "rename-icon": "matrique",
     "rename-desktop-file": "matrique.desktop",
     "runtime": "org.kde.Platform",
-    "runtime-version": "5.11",
+    "runtime-version": "5.10",
     "sdk": "org.kde.Sdk",
     "command": "matrique",
     "finish-args": [

matrique.pro

@@ -21,7 +21,8 @@ SOURCES += src/main.cpp \
     src/roomlistmodel.cpp \
     src/imageprovider.cpp \
     src/messageeventmodel.cpp \
-    src/imageproviderconnection.cpp
+    src/imageproviderconnection.cpp \
+    src/emojimodel.cpp
 
 RESOURCES += \
     res.qrc
@@ -57,4 +58,5 @@ HEADERS += \
     src/roomlistmodel.h \
     src/imageprovider.h \
     src/messageeventmodel.h \
-    src/imageproviderconnection.h
+    src/imageproviderconnection.h \
+    src/emojimodel.h

qml/component/EmojiButton.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+
+Text {
+    property string category
+
+    width: 36
+    height: 36
+
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+
+    font.pointSize: 20
+    font.family: "Noto Color Emoji"
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: emojiCategory = category
+    }
+}

qml/component/EmojiPicker.qml

@@ -2,11 +2,16 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
-import QtQuick.XmlListModel 2.0
+import Matrique 0.1
 
 Popup {
     property var textArea
-    property string emojiCategory: "faces"
+    property string emojiCategory: "people"
+
+    EmojiModel {
+        id: emojiModel
+        category: emojiCategory
+    }
 
     ColumnLayout {
         anchors.fill: parent
@@ -22,14 +27,9 @@ Popup {
 
             clip: true
 
-            model: XmlListModel {
+            model: emojiModel.model
-                source: "qrc:/asset/xml/emoji.xml"
-                query: "/root/emoji_by_category/" +emojiCategory + "/element"
 
-                XmlRole { name: "emoji"; query: "string()" }
+            delegate: Text {
-            }
-
-            delegate: Label {
                 width: 36
                 height: 36
 
@@ -37,11 +37,12 @@ Popup {
                 verticalAlignment: Text.AlignVCenter
 
                 font.pointSize: 20
-                text: emoji
+                font.family: "Noto Color Emoji"
+                text: modelData
 
                 MouseArea {
                     anchors.fill: parent
-                    onClicked: textArea.insert(textArea.cursorPosition, emoji)
+                    onClicked: textArea.insert(textArea.cursorPosition, modelData)
                 }
             }
 
@@ -54,41 +55,15 @@ Popup {
             color: Material.theme == Material.Dark ? "white" : "black"
         }
 
-        ListView {
+        Row {
-            Layout.fillWidth: true
+            EmojiButton { text: "😏"; category: "people" }
-            Layout.preferredHeight: 48
+            EmojiButton { text: "🌲"; category: "nature" }
-
+            EmojiButton { text: "🍛"; category: "food"}
-            orientation: ListView.Horizontal
+            EmojiButton { text: "🚁"; category: "activity" }
-
+            EmojiButton { text: "🚅"; category: "travel" }
-            boundsBehavior: Flickable.DragOverBounds
+            EmojiButton { text: "💡"; category: "objects" }
-
+            EmojiButton { text: "🔣"; category: "symbols" }
-            clip: true
+            EmojiButton { text: "🏁"; category: "flags" }
-
-            model: XmlListModel {
-                source: "qrc:/asset/xml/emoji.xml"
-                query: "/root/emoji_categories/element"
-
-                XmlRole { name: "emoji_unified"; query: "emoji_unified/string()" }
-                XmlRole { name: "name"; query: "name/string()" }
-            }
-
-            delegate: Label {
-                width: 48
-                height: 48
-
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-
-                font.pointSize: 20
-                text: emoji_unified
-
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: emojiCategory = name
-                }
-            }
-
-            ScrollBar.horizontal: ScrollBar {}
         }
     }
 }

res.qrc

@@ -31,6 +31,6 @@
         <file>qml/component/MessageContextMenu.qml</file>
         <file>qml/form/SettingGeneralForm.qml</file>
         <file>qml/component/EmojiPicker.qml</file>
-        <file>asset/xml/emoji.xml</file>
+        <file>qml/component/EmojiButton.qml</file>
     </qresource>
 </RCC>

src/emojimodel.h

@@ -0,0 +1,43 @@
+#ifndef EMOJIMODEL_H
+#define EMOJIMODEL_H
+
+#include <QObject>
+#include <QVariant>
+
+class EmojiModel : public QObject {
+  Q_OBJECT
+  Q_PROPERTY(QVariant model READ getModel NOTIFY categoryChanged)
+  Q_PROPERTY(QString category READ getCategory WRITE setCategory NOTIFY
+                 categoryChanged)
+ public:
+  explicit EmojiModel(QObject *parent = nullptr);
+
+  QVariant getModel();
+
+  QString getCategory() { return m_category; }
+  void setCategory(QString category) {
+    if (category != m_category) {
+      m_category = category;
+      emit categoryChanged();
+    }
+  }
+
+ private:
+  static const QStringList people;
+  static const QStringList nature;
+  static const QStringList food;
+  static const QStringList activity;
+  static const QStringList travel;
+  static const QStringList objects;
+  static const QStringList symbols;
+  static const QStringList flags;
+
+  QString m_category = "people";
+
+ signals:
+  void categoryChanged();
+
+ public slots:
+};
+
+#endif  // EMOJIMODEL_H

src/main.cpp

@@ -8,6 +8,7 @@
 #include "messageeventmodel.h"
 #include "room.h"
 #include "roomlistmodel.h"
+#include "emojimodel.h"
 
 #include "csapi/joining.h"
 #include "csapi/leaving.h"
@@ -28,6 +29,7 @@ int main(int argc, char *argv[]) {
   qmlRegisterType<Controller>("Matrique", 0, 1, "Controller");
   qmlRegisterType<RoomListModel>("Matrique", 0, 1, "RoomListModel");
   qmlRegisterType<MessageEventModel>("Matrique", 0, 1, "MessageEventModel");
+  qmlRegisterType<EmojiModel>("Matrique", 0, 1, "EmojiModel");
   qmlRegisterUncreatableType<RoomMessageEvent>("Matrique", 0, 1, "RoomMessageEvent", "ENUM");
 
   QQmlApplicationEngine engine;