Make emoji picker use the grid view

3 files changed, 66 insertions, 16 deletions

diff --git a/resources/qml/Avatar.qml b/resources/qml/Avatar.qml
index f761b1f5..4951a9fb 100644
--- a/resources/qml/Avatar.qml
+++ b/resources/qml/Avatar.qml
@@ -60,7 +60,13 @@ AbstractButton {
         smooth: true
         sourceSize.width: avatar.width * Screen.devicePixelRatio
         sourceSize.height: avatar.height * Screen.devicePixelRatio
-        source: avatar.url ? (avatar.url + "?radius=" + (Settings.avatarCircles ? 100 : 25) + ((avatar.crop) ? "" : "&scale")) : ""
+        source: if (avatar.url.startsWith('image://')) {
+            return avatar.url + "?radius=" + (Settings.avatarCircles ? 100 : 25) + ((avatar.crop) ? "" : "&scale");
+        } else if (avatar.url.startsWith(':/')) {
+            return "image://colorimage/" + avatar.url + "?" + textColor;
+        } else {
+            return "";
+        }
 
     }
 
diff --git a/resources/qml/MessageInput.qml b/resources/qml/MessageInput.qml
index 14f27fff..9bdf1f60 100644
--- a/resources/qml/MessageInput.qml
+++ b/resources/qml/MessageInput.qml
@@ -441,6 +441,7 @@ Rectangle {
                 id: stickerPopup
 
                 colors: Nheko.colors
+                emoji: false
             }
 
         }
@@ -456,10 +457,17 @@ Rectangle {
             image: ":/icons/icons/ui/smile.svg"
             ToolTip.visible: hovered
             ToolTip.text: qsTr("Emoji")
-            onClicked: emojiPopup.visible ? emojiPopup.close() : emojiPopup.show(emojiButton, function(emoji) {
-                messageInput.insert(messageInput.cursorPosition, emoji);
+            onClicked: emojiPopup2.visible ? emojiPopup2.close() : emojiPopup2.show(emojiButton, room.roomId, function(plaintext, markdown) {
+                messageInput.insert(messageInput.cursorPosition, markdown);
                 TimelineManager.focusMessageInput();
             })
+
+            StickerPicker {
+                id: emojiPopup2
+
+                colors: Nheko.colors
+                emoji: true
+            }
         }
 
         ImageButton {
diff --git a/resources/qml/emoji/StickerPicker.qml b/resources/qml/emoji/StickerPicker.qml
index 69f065ed..2f9283f4 100644
--- a/resources/qml/emoji/StickerPicker.qml
+++ b/resources/qml/emoji/StickerPicker.qml
@@ -17,13 +17,14 @@ Menu {
     property var colors
     property string roomid
     property alias model: gridView.model
+    required property bool emoji
     property var textArea
     property real highlightHue: Nheko.colors.highlight.hslHue
     property real highlightSat: Nheko.colors.highlight.hslSaturation
     property real highlightLight: Nheko.colors.highlight.hslLightness
-    readonly property int stickerDim: 128
-    readonly property int stickerDimPad: 128 + Nheko.paddingSmall
-    readonly property int stickersPerRow: 3
+    readonly property int stickerDim: emoji ? 48 : 128
+    readonly property int stickerDimPad: stickerDim + Nheko.paddingSmall
+    readonly property int stickersPerRow: emoji ? 7 : 3
     readonly property int sidebarAvatarSize: 24
 
     function show(showAt, roomid_, callback) {
@@ -110,10 +111,10 @@ Menu {
             ListView {
                 id: gridView
 
-                model: roomid ? TimelineManager.completerFor("stickergrid", roomid) : null
+                model: roomid ? TimelineManager.completerFor(stickerPopup.emoji ? "emojigrid" : "stickergrid", roomid) : null
                 Layout.row: 1
                 Layout.column: 1
-                Layout.preferredHeight: cellHeight * 3.5
+                Layout.preferredHeight: cellHeight * (stickersPerRow + 0.5)
                 Layout.preferredWidth: stickersPerRow * stickerDimPad + 20 - Nheko.paddingSmall
                 property int cellHeight: stickerDimPad
                 boundsBehavior: Flickable.StopAtBounds
@@ -157,23 +158,58 @@ Menu {
                         model: row
 
                         delegate: AbstractButton {
+                            id: del
+
+                            required property var modelData
+
                             width: stickerDim
                             height: stickerDim
                             hoverEnabled: true
-                            ToolTip.text: ":" + modelData.shortcode + ": - " + modelData.body
+                            ToolTip.text: ":" + modelData.shortcode + ": - " + (modelData.unicode ? model.unicodeName : modelData.body)
                             ToolTip.visible: hovered
                             // TODO: maybe add favorites at some point?
                             onClicked: {
-                                console.debug("Picked " + modelData.descriptor);
+                                console.debug("Picked " + modelData);
                                 stickerPopup.close();
-                                callback(modelData.descriptor);
+                                if (!stickerPopup.emoji) {
+                                    // return descriptor to calculate sticker to send
+                                    callback(modelData.descriptor);
+                                } else if (modelData.unicode) {
+                                    // return the emoji unicode as both plain text and markdown
+                                    callback(modelData.unicode, modelData.unicode);
+                                } else {
+                                    // return the emoji url as plain text and a markdown link as markdown
+                                    callback(modelData.url, modelData.markdown);
+                                }
                             }
 
-                            contentItem: Image {
-                                height: stickerDim
-                                width: stickerDim
-                                source: modelData.url.replace("mxc://", "image://MxcImage/") + "?scale"
-                                fillMode: Image.PreserveAspectFit
+                            contentItem: DelegateChooser {
+                                roleValue: del.modelData.unicode != undefined
+
+                                DelegateChoice {
+                                    roleValue: true
+
+                                    Text {
+                                        width: stickerDim
+                                        height: stickerDim
+                                        horizontalAlignment: Text.AlignHCenter
+                                        verticalAlignment: Text.AlignVCenter
+                                        font.family: Settings.emojiFont
+                                        font.pixelSize: 36
+                                        text: del.modelData.unicode.replace('\ufe0f', '')
+                                        color: Nheko.colors.text
+                                    }
+                                }
+
+                                DelegateChoice {
+                                    roleValue: false
+                                    Image {
+                                        height: stickerDim
+                                        width: stickerDim
+                                        source: del.modelData.url.replace("mxc://", "image://MxcImage/") + "?scale"
+                                        fillMode: Image.PreserveAspectFit
+                                    }
+                                }
                             }
 
                             background: Rectangle {