Merge branch 'twemojiEmoteMenuSvelte' of github.com:thecodingmachine/workadventure into twemojiEmoteMenuSvelte

front/src/Components/EmoteMenu/EmoteMenu.svelte

@@ -4,7 +4,8 @@
   import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
   import { onDestroy, onMount } from "svelte";
   import { EmojiButton } from '@joeattardi/emoji-button';
- 
+  import { isMobile } from "../../Enum/EnvironmentVariable";
+
   let emojiContainer: HTMLElement;
   let picker: EmojiButton;
 
@@ -16,7 +17,8 @@
       styleProperties: {
         '--font': 'Press Start 2P'
       },
-      autoFocusSearch : false
+      emojisPerRow: isMobile() ? 6 : 8,
+      autoFocusSearch: false
     });
 
     picker.on("emoji", (selection) => {
@@ -36,6 +38,12 @@
     })
   })
 
+  function onKeyDown(e:KeyboardEvent) {
+    if (e.key === 'Escape') {
+      emoteMenuStore.closeEmoteMenu();
+    }
+  }
+
   onDestroy(() => {
     if (unsubscriber) {
       unsubscriber();
@@ -46,6 +54,8 @@
 
 </script>
 
+<svelte:window on:keydown={onKeyDown}/>
+
 <div class="emote-menu-container">
   <div class="emote-menu" bind:this={emojiContainer}></div>
 </div>

front/style/style.scss

@@ -1105,4 +1105,13 @@ div.is-silent.hide {
 
 .emote-menu .emoji-picker .emoji-picker__emoji {
     font-family: "Twemoji Mozilla" !important;
+}
+
+div.emoji-picker {
+    background-color: #333;
+    border-radius: 1em;
+
+    input.emoji-picker__search {
+        border-radius: 1em;
+    }
 }