diff --git a/public/css/Room.css b/public/css/Room.css index a52b6aca..9730623b 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -518,15 +518,11 @@ body { # Chat room emoji picker --------------------------------------------------------------*/ -emoji-picker { +em-emoji-picker { z-index: 0; position: absolute; - bottom: 100px; - width: 100%; - height: 50%; - --background: #16171b; - --num-columns: 8; - --emoji-size: 1.5rem; + bottom: 110px; + left: 10px; } /*-------------------------------------------------------------- diff --git a/public/js/Room.js b/public/js/Room.js index 2cb79070..c95ee654 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -1102,10 +1102,14 @@ function handleInputs() { rc.checkLineBreaks(); }; - rc.getId('chatEmoji').addEventListener('emoji-click', (e) => { - chatMessage.value += e.detail.emoji.unicode; + const pickerOptions = { onEmojiSelect: addEmojiToMsg }; + const emojiPicker = new EmojiMart.Picker(pickerOptions); + rc.getId('chatEmoji').appendChild(emojiPicker); + + function addEmojiToMsg(data) { + chatMessage.value += data.native; rc.toggleChatEmoji(); - }); + } } // #################################################### diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 601255f1..50ce5f93 100644 --- a/public/js/RoomClient.js +++ b/public/js/RoomClient.js @@ -2176,6 +2176,11 @@ class RoomClient { this.getId('chatEmojiButton').style.color = this.isChatEmojiOpen ? '#FFFF00' : '#FFFFFF'; } + addEmojiToMsg(data) { + msgerInput.value += data.native; + toggleChatEmoji(); + } + cleanMessage() { chatMessage.value = ''; chatMessage.style.height = '43px'; diff --git a/public/views/Room.html b/public/views/Room.html index 3a5d6532..6f331102 100644 --- a/public/views/Room.html +++ b/public/views/Room.html @@ -83,7 +83,7 @@ - + @@ -417,9 +417,7 @@ -