feat: show the all the emojis in the popup

ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml

@@ -47,11 +47,19 @@ Rectangle {
             cursorShape: Qt.PointingHandCursor
             anchors.fill: parent
             onClicked: {
-                if (stickersPopup.opened) {
+                console.log('CLICK')
-                    stickersPopup.close()
+                if (emojiPopup.opened) {
+                console.log('CLOSE')
+                    emojiPopup.close()
                 } else {
-                    stickersPopup.open()
+                console.log('OPEN')
+                    emojiPopup.open()
                 }
+                // if (stickersPopup.opened) {
+                //     stickersPopup.close()
+                // } else {
+                //     stickersPopup.open()
+                // }
             }
         }
     }
@@ -65,6 +73,14 @@ Rectangle {
         stickerList: chatsModel.stickers
         stickerPackList: chatsModel.stickerPacks
     }
+
+    EmojiPopup {
+        id: emojiPopup
+        width: 360
+        height: 440
+        x: parent.width - width - 8
+        y: parent.height - sendBtns.height - height - 8
+    }
 }
 /*##^##
 Designer {

ui/app/AppLayouts/Chat/components/EmojiPopup.qml

@@ -0,0 +1,98 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.0
+import "../../../../imports"
+import "../../../../shared"
+import "../ChatColumn/samples"
+
+import "./emojiList.js" as EmojiJSON
+
+Popup {
+    id: popup
+    modal: false
+    property int selectedPackId
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+    background: Rectangle {
+        radius: 8
+        border.color: Theme.grey
+        layer.enabled: true
+        layer.effect: DropShadow{
+            verticalOffset: 3
+            radius: 8
+            samples: 15
+            fast: true
+            cached: true
+            color: "#22000000"
+        }
+    }
+
+    ListModel {
+        id: emojiModel
+    }
+
+    Component.onCompleted: {
+        EmojiJSON.emoji_json.forEach(function (emoji) {
+            emojiModel.append({filename: emoji})
+        })
+    }
+
+    contentItem: ColumnLayout {
+        parent: popup
+        anchors.fill: parent
+        spacing: 0
+
+        Item {
+            Layout.fillWidth: true
+            Layout.leftMargin: 4
+            Layout.rightMargin: 4
+            Layout.topMargin: 4
+            Layout.bottomMargin: 0
+            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+            Layout.preferredHeight: 400 - 4
+
+            GridView {
+                property int imageWidth: 26
+                property int imageMargin: 4
+
+                id: emojiGrid
+                visible: count > 0
+                anchors.fill: parent
+                cellWidth: imageWidth + emojiGrid.imageMargin * 2
+                cellHeight: imageWidth + emojiGrid.imageMargin * 2
+                model: emojiModel
+                focus: true
+                clip: true
+                delegate: Item {
+                    width: emojiGrid.cellWidth
+                    height: emojiGrid.cellHeight
+                    Column {
+                        anchors.fill: parent
+                        anchors.topMargin: emojiGrid.imageMargin
+                        anchors.leftMargin: emojiGrid.imageMargin
+                        Image {
+                            width: emojiGrid.imageWidth
+                            height: emojiGrid.imageWidth
+                            source: "../../../../imports/twemoji/26x26/" + filename
+                            fillMode: Image.PreserveAspectFit
+                            MouseArea {
+                                cursorShape: Qt.PointingHandCursor
+                                anchors.fill: parent
+                                onClicked: {
+                                    console.log('SELECT')
+//                                    chatsModel.sendSticker(hash, popup.selectedPackId)
+                                    popup.close()
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+/*##^##
+Designer {
+    D{i:0;formeditorColor:"#ffffff";height:440;width:360}
+}
+##^##*/

ui/nim-status-client.pro

@@ -51,6 +51,7 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
 !isEmpty(target.path): INSTALLS += target
 
 DISTFILES += \
+    app/AppLayouts/Chat/components/EmojiPopup.qml \
     fonts/InterStatus/InterStatus-Black.otf \
     fonts/InterStatus/InterStatus-BlackItalic.otf \
     fonts/InterStatus/InterStatus-Bold.otf \