From a7d9d31ca5379a133442d43fb08044e3a02e8955 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Mon, 8 Nov 2021 20:41:15 +0100
Subject: [PATCH] [mirotalksfu] - improve chat emoji picker

---
 public/css/Room.css     | 5 +++--
 public/js/Room.js       | 4 ++++
 public/js/RoomClient.js | 1 +
 public/view/Room.html   | 3 +++
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/public/css/Room.css b/public/css/Room.css
index ff558b87..2e194ab4 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -438,10 +438,11 @@ body {
 --------------------------------------------------------------*/
 
 emoji-picker {
+    z-index: 0;
     position: absolute;
-    top: 45px;
+    bottom: 70px;
     width: 100%;
-    height: 92%;
+    height: 50%;
     --background: #16171b;
     --num-columns: 8;
     --emoji-size: 1.5rem;
diff --git a/public/js/Room.js b/public/js/Room.js
index cedfbe6e..dc9b8e14 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -94,6 +94,7 @@ function initClient() {
         setTippy('chatMessage', 'Press enter to send', 'top-start');
         setTippy('chatSendButton', 'Send', 'top');
         setTippy('chatEmojiButton', 'Emoji', 'top');
+        setTippy('chatCloseEmojiButton', 'Close emoji', 'top');
         setTippy('chatCleanButton', 'Clean', 'bottom');
         setTippy('chatSaveButton', 'Save', 'bottom');
         setTippy('sessionTime', 'Session time', 'right');
@@ -583,6 +584,9 @@ function handleButtons() {
     chatEmojiButton.onclick = () => {
         rc.toggleChatEmoji();
     };
+    chatCloseEmojiButton.onclick = () => {
+        rc.toggleChatEmoji();
+    };
     fullScreenButton.onclick = () => {
         rc.toggleFullScreen();
     };
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index aeb23cc7..79e023c1 100644
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -1421,6 +1421,7 @@ class RoomClient {
 
     toggleChatEmoji() {
         this.getId('chatEmoji').classList.toggle('show');
+        this.getId('chatCloseEmojiButton').classList.toggle('show');
     }
 
     sendMessage() {
diff --git a/public/view/Room.html b/public/view/Room.html
index 8d841a75..572776d7 100644
--- a/public/view/Room.html
+++ b/public/view/Room.html
@@ -333,6 +333,9 @@ access to use this app.
                         type="text"
                         placeholder="💬 Enter your message..."
                     />
+                    <button id="chatCloseEmojiButton" class="hidden">
+                        <i class="fas fa-times"></i>
+                    </button>
                     <button id="chatEmojiButton" class="hidden">
                         <i class="fas fa-smile"></i>
                     </button>