lazy load TextGlobalMessage component
This commit is contained in:
parent
638a32e1b0
commit
b8fd85fe15
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -3,4 +3,3 @@
|
||||
@import "cowebsite.scss";
|
||||
@import "fonts.scss";
|
||||
@import "style";
|
||||
@import "TextGlobalMessageSvelte-Style";
|
||||
|
Loading…
Reference in New Issue
Block a user