From 911aac92de2d9262fd4a2448f2a712c8e316ac1d Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Mon, 20 Jul 2020 15:29:57 -0400
Subject: [PATCH] feat: add onClicked to Emojis and use a Model to show them

---
 ui/app/AppLayouts/Chat/ChatColumn.qml         | 41 ++++++-------------
 .../Chat/components/EmojiReaction.qml         | 19 +++++++++
 .../AppLayouts/Chat/data/EmojiReactions.qml   | 30 ++++++++++++++
 ui/nim-status-client.pro                      |  2 +
 4 files changed, 63 insertions(+), 29 deletions(-)
 create mode 100644 ui/app/AppLayouts/Chat/components/EmojiReaction.qml
 create mode 100644 ui/app/AppLayouts/Chat/data/EmojiReactions.qml

diff --git a/ui/app/AppLayouts/Chat/ChatColumn.qml b/ui/app/AppLayouts/Chat/ChatColumn.qml
index f83f856124..fc9a76335f 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn.qml
+++ b/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 {
-                    source: "../../img/emojiReactions/heart.svg"
-                    width: 32
-                    fillMode: Image.PreserveAspectFit
-                }
-                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
+                Repeater {
+                    model: reactionModel
+                    delegate: EmojiReaction {
+                        source: "../../img/" + filename
+                        emojiId: model.emojiId
+                    }
                 }
             }
 
diff --git a/ui/app/AppLayouts/Chat/components/EmojiReaction.qml b/ui/app/AppLayouts/Chat/components/EmojiReaction.qml
new file mode 100644
index 0000000000..17d0f865aa
--- /dev/null
+++ b/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')
+
+        }
+    }
+}
diff --git a/ui/app/AppLayouts/Chat/data/EmojiReactions.qml b/ui/app/AppLayouts/Chat/data/EmojiReactions.qml
new file mode 100644
index 0000000000..edade8d13e
--- /dev/null
+++ b/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"
+    }
+}
diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro
index b46f75bc99..9d49bc6931 100644
--- a/ui/nim-status-client.pro
+++ b/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 \