feat: add onClicked to Emojis and use a Model to show them

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -5,6 +5,7 @@ import "../../../shared"
 import "../../../imports"
 import "./components"
 import "./ChatColumn"
+import "./data"
 
 StackLayout {
     id: chatColumnLayout
@@ -90,6 +91,11 @@ StackLayout {
             id: profilePopup
         }
 
+
+        EmojiReactions {
+            id: reactionModel
+        }
+
         PopupMenu {
             id: messageContextMenu
             width: emojiRow.width
@@ -101,35 +107,12 @@ StackLayout {
                 rightPadding: Style.current.smallPadding
                 bottomPadding: Style.current.padding
 
-                SVGImage {
+                Repeater {
-                    source: "../../img/emojiReactions/heart.svg"
+                    model: reactionModel
-                    width: 32
+                    delegate: EmojiReaction {
-                    fillMode: Image.PreserveAspectFit
+                        source: "../../img/" + filename
+                        emojiId: model.emojiId
                     }
-                SVGImage {
-                    source: "../../img/emojiReactions/thumbsUp.svg"
-                    width: 32
-                    fillMode: Image.PreserveAspectFit
-                }
-                SVGImage {
-                    source: "../../img/emojiReactions/thumbsDown.svg"
-                    width: 32
-                    fillMode: Image.PreserveAspectFit
-                }
-                SVGImage {
-                    source: "../../img/emojiReactions/laughing.svg"
-                    width: 32
-                    fillMode: Image.PreserveAspectFit
-                }
-                SVGImage {
-                    source: "../../img/emojiReactions/sad.svg"
-                    width: 32
-                    fillMode: Image.PreserveAspectFit
-                }
-                SVGImage {
-                    source: "../../img/emojiReactions/angry.svg"
-                    width: 32
-                    fillMode: Image.PreserveAspectFit
                 }
             }
 

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

@@ -0,0 +1,19 @@
+import QtQuick 2.13
+import "../../../../imports"
+import "../../../../shared"
+
+SVGImage {
+    property int emojiId
+    width: 32
+    fillMode: Image.PreserveAspectFit
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            console.log('Clicked on Emoji', emojiId)
+            console.log('This feature will be implmented at a later date')
+
+        }
+    }
+}

ui/app/AppLayouts/Chat/data/EmojiReactions.qml

@@ -0,0 +1,30 @@
+import QtQuick 2.13
+
+ListModel {
+    id: reactionModel
+
+    ListElement {
+        emojiId: 1
+        filename: "emojiReactions/heart.svg"
+    }
+    ListElement {
+        emojiId: 2
+        filename: "emojiReactions/thumbsUp.svg"
+    }
+    ListElement {
+        emojiId: 3
+        filename: "emojiReactions/thumbsDown.svg"
+    }
+    ListElement {
+        emojiId: 4
+        filename: "emojiReactions/laughing.svg"
+    }
+    ListElement {
+        emojiId: 5
+        filename: "emojiReactions/sad.svg"
+    }
+    ListElement {
+        emojiId: 6
+        filename: "emojiReactions/angry.svg"
+    }
+}

ui/nim-status-client.pro

@@ -133,7 +133,9 @@ DISTFILES += \
     app/AppLayouts/Chat/ChatColumn/MessageComponents/qmldir \
     app/AppLayouts/Chat/ContactsColumn/ClosedEmptyView.qml \
     app/AppLayouts/Chat/components/EmojiPopup.qml \
+    app/AppLayouts/Chat/components/EmojiReaction.qml \
     app/AppLayouts/Chat/components/InviteFriendsPopup.qml \
+    app/AppLayouts/Chat/data/EmojiReactions.qml \
     app/AppLayouts/Wallet/components/HeaderButton.qml \
     app/AppLayouts/Profile/Sections/Data/locales.js \
     fonts/InterStatus/InterStatus-Black.otf \