REVIEW : Migration Menu and Report Menu in Svelte (#1363)

* WIP: svelte menu * temp * temp * New menu svelte * Migration of report menu in svelte * Migration of registerCustomMenu for Menu in Svelte Refactor subMenuStore Suppression of old MenuScene and ReportMenu * Suppression of HTML files that aren't use anymore * fix deeployer * First pass on css * First pass on css * Second pass on css and reportMenu * Second pass on css and reportMenu * Second pass on css and reportMenu * Third pass on css and reportMenu * Correction following test * Contact page only if environment variable exist * Update service worker Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com> * Change requested * Change requested Co-authored-by: kharhamel <oognic@gmail.com> Co-authored-by: Gregoire Parant <g.parant@thecodingmachine.com>
2021-08-26 12:01:07 +02:00 · 2021-08-26 12:01:07 +02:00 · 7c956d1481
commit 7c956d1481
parent 29c1ea25c7
45 changed files with 1131 additions and 1257 deletions
--- a/front/src/Components/Menu/Menu.svelte
+++ b/front/src/Components/Menu/Menu.svelte
@ -0,0 +1,132 @@
+<script lang="typescript">
+    import {fly} from "svelte/transition";
+    import SettingsSubMenu from "./SettingsSubMenu.svelte";
+    import ProfileSubMenu from "./ProfileSubMenu.svelte";
+    import CreateMapSubMenu from "./CreateMapSubMenu.svelte";
+    import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
+    import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
+    import ContactSubMenu from "./ContactSubMenu.svelte";
+    import {menuVisiblilityStore, SubMenusInterface, subMenusStore} from "../../Stores/MenuStore";
+    import {onMount} from "svelte";
+    import {get} from "svelte/store";
+    import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
+
+    let activeSubMenu: string = SubMenusInterface.settings;
+    let activeComponent: typeof SettingsSubMenu = SettingsSubMenu;
+
+    onMount(() => {
+        switchMenu(SubMenusInterface.settings);
+    })
+
+    function switchMenu(menu: string) {
+        if (get(subMenusStore).find((subMenu) => subMenu === menu)) {
+            activeSubMenu = menu;
+            switch (menu) {
+                case SubMenusInterface.settings:
+                    activeComponent = SettingsSubMenu;
+                    break;
+                case SubMenusInterface.profile:
+                    activeComponent = ProfileSubMenu;
+                    break;
+                case SubMenusInterface.createMap:
+                    activeComponent = CreateMapSubMenu;
+                    break;
+                case SubMenusInterface.aboutRoom:
+                    activeComponent = AboutRoomSubMenu;
+                    break;
+                case SubMenusInterface.globalMessages:
+                    activeComponent = GlobalMessageSubMenu;
+                    break;
+                case SubMenusInterface.contact:
+                    activeComponent = ContactSubMenu;
+                    break;
+                default:
+                    sendMenuClickedEvent(menu);
+                    menuVisiblilityStore.set(false);
+                    break;
+            }
+        } else throw ("There is no menu called " + menu);
+    }
+
+    function closeMenu() {
+        menuVisiblilityStore.set(false);
+    }
+    function onKeyDown(e:KeyboardEvent) {
+        if (e.key === 'Escape') {
+            closeMenu();
+        }
+    }
+</script>
+
+<svelte:window on:keydown={onKeyDown}/>
+
+
+<div class="menu-container-main">
+    <div class="menu-nav-sidebar nes-container is-rounded" transition:fly="{{ x: -1000, duration: 500 }}">
+        <h2>Menu</h2>
+        <nav>
+            {#each $subMenusStore as submenu}
+                <button type="button" class="nes-btn {activeSubMenu === submenu ? 'is-disabled' : ''}" on:click|preventDefault={() => switchMenu(submenu)}>
+                    {submenu}
+                </button>
+            {/each}
+        </nav>
+    </div>
+    <div class="menu-submenu-container nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
+        <h2>{activeSubMenu}</h2>
+        <svelte:component this={activeComponent}/>
+    </div>
+</div>
+
+<style lang="scss">
+  .nes-container {
+    padding: 5px;
+  }
+
+  div.menu-container-main {
+    --size-first-columns-grid: 200px;
+
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    height: 80vh;
+    width: 75vw;
+    top: 10vh;
+
+    position: relative;
+    margin: auto;
+
+    display: grid;
+    grid-template-columns: var(--size-first-columns-grid) calc(100% - var(--size-first-columns-grid));
+    grid-template-rows: 100%;
+
+    h2 {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    div.menu-nav-sidebar {
+      background-color: #333333;
+      color: whitesmoke;
+
+      nav button {
+        width: calc(100% - 10px);
+        margin-bottom: 10px;
+      }
+    }
+
+    div.menu-submenu-container {
+      background-color: #333333;
+      color: whitesmoke;
+    }
+  }
+
+  @media only screen and (max-width: 800px) {
+    div.menu-container-main {
+      --size-first-columns-grid: 120px;
+      height: 70vh;
+      top: 55px;
+      width: 100vw;
+      font-size: 0.5em;
+    }
+  }
+</style>