lazy load TextGlobalMessage component

This commit is contained in:
Lukas Hass 2022-03-01 18:23:01 +01:00 committed by David Négrier
parent 638a32e1b0
commit b8fd85fe15
4 changed files with 54 additions and 58 deletions

View File

@ -3,7 +3,6 @@
import SettingsSubMenu from "./SettingsSubMenu.svelte";
import ProfileSubMenu from "./ProfileSubMenu.svelte";
import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
import ContactSubMenu from "./ContactSubMenu.svelte";
import CustomSubMenu from "./CustomSubMenu.svelte";
import GuestSubMenu from "./GuestSubMenu.svelte";
@ -25,16 +24,16 @@
let props: { url: string; allowApi: boolean };
let unsubscriberSubMenuStore: Unsubscriber;
onMount(() => {
onMount(async () => {
unsubscriberSubMenuStore = subMenusStore.subscribe(() => {
if (!$subMenusStore.includes(activeSubMenu)) {
switchMenu($subMenusStore[0]);
void switchMenu($subMenusStore[0]);
}
});
checkSubMenuToShow();
switchMenu($subMenusStore[0]);
await switchMenu($subMenusStore[0]);
});
onDestroy(() => {
@ -43,7 +42,7 @@
}
});
function switchMenu(menu: MenuItem) {
async function switchMenu(menu: MenuItem) {
if (menu.type === "translated") {
activeSubMenu = menu;
switch (menu.key) {
@ -60,7 +59,7 @@
activeComponent = AboutRoomSubMenu;
break;
case SubMenusInterface.globalMessages:
activeComponent = GlobalMessageSubMenu;
activeComponent = (await import("./GlobalMessagesSubMenu.svelte")).default;
break;
case SubMenusInterface.contact:
activeComponent = ContactSubMenu;
@ -111,7 +110,7 @@
<button
type="button"
class="nes-btn {activeSubMenu === submenu ? 'is-disabled' : ''}"
on:click|preventDefault={() => switchMenu(submenu)}
on:click|preventDefault={() => void switchMenu(submenu)}
>
{translateMenuName(submenu)}
</button>

View File

@ -3,7 +3,7 @@
import { onDestroy, onMount } from "svelte";
import { gameManager } from "../../Phaser/Game/GameManager";
import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
import type { Quill } from "quill";
import Quill from "quill";
import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
import LL from "../../i18n/i18n-svelte";
@ -54,10 +54,7 @@
};
//Quill
onMount(async () => {
// Import quill
const { default: Quill } = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
onMount(() => {
quill = new Quill(QUILL_EDITOR, {
placeholder: $LL.menu.globalMessage.enter(),
theme: "snow",
@ -76,3 +73,49 @@
<section class="section-input-send-text">
<div class="input-send-text" bind:this={QUILL_EDITOR} />
</section>
<style lang="scss">
@import "../../../style/breakpoints.scss";
@import "quill/dist/quill.snow.css";
section.section-input-send-text {
--height-toolbar: 20%;
height: 100%;
:global(.ql-toolbar) {
max-height: var(--height-toolbar);
background: whitesmoke;
}
div.input-send-text {
height: calc(100% - var(--height-toolbar));
overflow: auto;
color: whitesmoke;
font-size: 1rem;
:global(.ql-editor.ql-blank::before) {
color: whitesmoke;
font-size: 1rem;
}
:global(.ql-tooltip) {
top: 40% !important;
left: 20% !important;
color: whitesmoke;
background-color: #333333;
}
}
}
@include media-breakpoint-up(md) {
section.section-input-send-text {
--height-toolbar: 30%;
:global(.ql-toolbar) {
overflow: auto;
}
}
}
</style>

View File

@ -1,45 +0,0 @@
//TextGlobalMessage
// TODO: load on demand with TextGlobalMessage component
@import "quill/dist/quill.snow.css";
section.section-input-send-text {
--height-toolbar: 20%;
height: 100%;
.ql-toolbar{
max-height: var(--height-toolbar);
background: whitesmoke;
}
div.input-send-text{
height: calc(100% - var(--height-toolbar));
overflow: auto;
color: whitesmoke;
font-size: 1rem;
.ql-editor.ql-blank::before {
color: whitesmoke;
font-size: 1rem;
}
.ql-tooltip {
top: 40% !important;
left: 20% !important;
color: whitesmoke;
background-color: #333333;
}
}
}
@include media-breakpoint-up(md) {
section.section-input-send-text {
--height-toolbar: 30%;
.ql-toolbar {
overflow: auto;
}
}
}

View File

@ -3,4 +3,3 @@
@import "cowebsite.scss";
@import "fonts.scss";
@import "style";
@import "TextGlobalMessageSvelte-Style";