feat: ponies.im emoji support (custom emojum)

imports/NeoChat/Component/ChatBox/ChatBar.qml

@@ -335,7 +335,7 @@ ToolBar {
                     } else if (completionInfo.type === ChatDocumentHandler.Command) {
                         completionMenu.model = CommandModel.filterModel(completionInfo.keyword);
                     } else {
-                        completionMenu.model = EmojiModel.filterModel(completionInfo.keyword);
+                        completionMenu.model = Array.from(chatBar.customEmojiModel.filterModel(completionInfo.keyword)).concat(EmojiModel.filterModel(completionInfo.keyword))
                     }
 
                     if (completionMenu.model.length === 0) {
@@ -443,6 +443,10 @@ ToolBar {
         }
     }
 
+    property CustomEmojiModel customEmojiModel: CustomEmojiModel {
+        connection: Controller.activeConnection
+    }
+
     function pasteImage() {
         let localPath = Platform.StandardPaths.writableLocation(Platform.StandardPaths.CacheLocation) + "/screenshots/" + (new Date()).getTime() + ".png";
         if (!Clipboard.saveImage(localPath)) {
@@ -457,7 +461,7 @@ ToolBar {
         if (ChatBoxHelper.hasAttachment) {
             // send attachment but don't reset the text
             actionsHandler.postMessage("", ChatBoxHelper.attachmentPath,
-                ChatBoxHelper.replyEventId, ChatBoxHelper.editEventId, {});
+                ChatBoxHelper.replyEventId, ChatBoxHelper.editEventId, {}, this.customEmojiModel);
             currentRoom.markAllMessagesAsRead();
             messageSent();
             return;
@@ -470,7 +474,7 @@ ToolBar {
         } else {
             // send normal message
             actionsHandler.postMessage(inputField.text.trim(), ChatBoxHelper.attachmentPath,
-                ChatBoxHelper.replyEventId, ChatBoxHelper.editEventId, userAutocompleted);
+                ChatBoxHelper.replyEventId, ChatBoxHelper.editEventId, userAutocompleted, this.customEmojiModel);
         }
         currentRoom.markAllMessagesAsRead();
         inputField.clear();

imports/NeoChat/Component/ChatBox/CompletionMenu.qml

@@ -10,6 +10,7 @@ import Qt.labs.qmlmodels 1.0
 import org.kde.kirigami 2.15 as Kirigami
 
 import org.kde.neochat 1.0
+import NeoChat.Component 1.0
 
 Popup {
     id: control
@@ -94,23 +95,40 @@ Popup {
         Kirigami.BasicListItem {
             id: emojiItem
             width: ListView.view.width ?? implicitWidth
-            property string displayName: modelData.unicode
-            text: modelData.unicode + " " + modelData.shortname
+            property string displayName: modelData.isCustom ? modelData.shortname : modelData.unicode
+            text: modelData.shortname
+            reserveSpaceForSubtitle: true
 
-            leading: Label {
-                id: unicodeLabel
-                Layout.preferredHeight: Kirigami.Units.gridUnit
-                Layout.preferredWidth: textMetrics.tightBoundingRect.width
-                font.pointSize: Kirigami.Units.gridUnit * 0.75
-                text: modelData.unicode
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-            }
-            TextMetrics {
-                id: textMetrics
-                text: modelData.unicode
-                font: unicodeLabel.font
+            leading: Image {
+                source: modelData.isCustom ? modelData.unicode : ""
+
+                width: height
+                sourceSize.width: width
+                sourceSize.height: height
+
+                Rectangle {
+                    anchors.fill: parent
+                    visible: parent.status === Image.Loading
+                    radius: height/2
+                    gradient: ShimmerGradient { }
+                }
+
+                Label {
+                    id: unicodeLabel
+
+                    visible: !modelData.isCustom
+
+                    font.family: 'emoji'
+                    font.pixelSize: height - 2
+
+                    text: modelData.unicode
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+
+                    anchors.fill: parent
+                }
             }
+
             onClicked: completeTriggered();
         }
     }

imports/NeoChat/Component/Emoji/EmojiPicker.qml

@@ -10,10 +10,16 @@ import org.kde.neochat 1.0 as NeoChat
 import NeoChat.Component 1.0
 
 ColumnLayout {
+    id: _picker
+
     property string emojiCategory: "history"
     property var textArea
     readonly property var emojiModel: NeoChat.EmojiModel
 
+    property NeoChat.CustomEmojiModel customModel: NeoChat.CustomEmojiModel {
+        connection: NeoChat.Controller.activeConnection
+    }
+
     signal chosen(string emoji)
 
     spacing: 0
@@ -29,6 +35,7 @@ ColumnLayout {
         orientation: ListView.Horizontal
 
         model: ListModel {
+            ListElement { label: "custom"; category: "custom" }
             ListElement { label: "⌛️"; category: "history" }
             ListElement { label: "😏"; category: "people" }
             ListElement { label: "🌲"; category: "nature" }
@@ -41,16 +48,23 @@ ColumnLayout {
         }
 
         delegate: ItemDelegate {
-            width: Kirigami.Units.gridUnit * 2
+            id: del
+
+            required property string label
+            required property string category
+
+            width: contentItem.Layout.preferredWidth
             height: Kirigami.Units.gridUnit * 2
 
             contentItem: Kirigami.Heading {
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
-                level: 1
+                level: del.label === "custom" ? 4 : 1
 
-                font.family: 'emoji'
-                text: label
+                Layout.preferredWidth: del.label === "custom" ? implicitWidth + Kirigami.Units.largeSpacing : Kirigami.Units.gridUnit * 2
+
+                font.family: del.label === "custom" ? undefined : 'emoji'
+                text: del.label === "custom" ? i18n("Custom") : del.label
             }
 
             Rectangle {
@@ -87,6 +101,8 @@ ColumnLayout {
 
         model: {
             switch (emojiCategory) {
+            case "custom":
+                return _picker.customModel
             case "history":
                 return emojiModel.history
             case "people":
@@ -118,11 +134,32 @@ ColumnLayout {
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
                 font.family: 'emoji'
-                text: modelData.unicode
+                text: modelData.isCustom ? "" : modelData.unicode
+            }
+
+            Image {
+                visible: modelData.isCustom
+                source: modelData.unicode
+                anchors.fill: parent
+                anchors.margins: 2
+
+                sourceSize.width: width
+                sourceSize.height: height
+
+                Rectangle {
+                    anchors.fill: parent
+                    visible: parent.status === Image.Loading
+                    radius: height/2
+                    gradient: ShimmerGradient { }
+                }
             }
 
             onClicked: {
-                chosen(modelData.unicode)
+                if (modelData.isCustom) {
+                    chosen(modelData.shortname)
+                } else {
+                    chosen(modelData.unicode)
+                }
                 emojiModel.emojiUsed(modelData)
             }
         }

imports/NeoChat/Component/ShimmerGradient.qml

@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: 2021 Carson Black <uhhadd@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
+
+// Not to be confused with the Shimmer project.
+// I like their gradiented GTK themes though.
+
+import QtQuick 2.15
+import org.kde.kirigami 2.15 as Kirigami
+
+Gradient {
+    id: gradient
+
+    orientation: Gradient.Horizontal
+
+    property color color: Kirigami.Theme.textColor
+    property color translucent: Qt.rgba(color.r, color.g, color.b, 0.2)
+    property color bright: Qt.rgba(color.r, color.g, color.b, 0.3)
+    property real pos: 0.5
+    property real offset: 0.6
+
+    property SequentialAnimation ani: SequentialAnimation {
+        running: true
+        loops: Animation.Infinite
+        NumberAnimation {
+            from: -2.0
+            to: 2.0
+            duration: 700
+            target: gradient
+            properties: "pos"
+        }
+        PauseAnimation {
+            duration: 300
+        }
+    }
+
+    GradientStop { position: gradient.pos-gradient.offset; color: gradient.translucent }
+    GradientStop { position: gradient.pos; color: gradient.bright }
+    GradientStop { position: gradient.pos+gradient.offset; color: gradient.translucent }
+}

imports/NeoChat/Component/qmldir

@@ -4,3 +4,4 @@ ChatTextInput 1.0 ChatTextInput.qml
 FancyEffectsContainer 1.0 FancyEffectsContainer.qml
 TypingPane 1.0 TypingPane.qml
 QuickSwitcher 1.0 QuickSwitcher.qml
+ShimmerGradient 1.0 ShimmerGradient.qml