Merge branch 'develop' of github.com:thecodingmachine/workadventure

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,9 @@
       styleProperties: {
         '--font': 'Press Start 2P'
       },
-      autoFocusSearch : false
+      theme: 'dark',
+      emojisPerRow: isMobile() ? 6 : 8,
+      autoFocusSearch: false
     });
 
     picker.on("emoji", (selection) => {
@@ -36,6 +39,12 @@
     })
   })
 
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      emoteMenuStore.closeEmoteMenu();
+    }
+  }
+
   onDestroy(() => {
     if (unsubscriber) {
       unsubscriber();
@@ -46,6 +55,8 @@
 
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 <div class="emote-menu-container">
   <div class="emote-menu" bind:this={emojiContainer}></div>
 </div>
@@ -62,5 +73,4 @@
       pointer-events: all;
     }
   }
-
 </style>