From 9e8bed7aaba861d63507e0ee92c06c86efdac08f Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Fri, 23 Jul 2021 16:17:53 +0200
Subject: [PATCH] Position of quill tooltip Use inlineStyle to indent and align
 text correctly

---
 .../InputTextGlobalMessage.svelte                   | 13 ++++++-------
 front/src/Components/TypeMessage/TextMessage.svelte |  2 +-
 front/style/inputTextGlobalMessageSvelte-Style.scss | 11 +++++++++--
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte b/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte
index c3d2bd30..7baa8226 100644
--- a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte
+++ b/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
-    import { onMount } from "svelte";
+    import {onDestroy, onMount} from "svelte";
     import type { Game } from "../../Phaser/Game/Game";
     import type { GameManager } from "../../Phaser/Game/GameManager";
     import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
@@ -73,14 +73,13 @@
             },
         });
 
-        quill.on('selection-change', function (range, oldRange) {
-            if (range === null && oldRange !== null) {
-                consoleGlobalMessageManagerFocusStore.set(false);
-            } else if (range !== null && oldRange === null)
-                consoleGlobalMessageManagerFocusStore.set(true);
-        });
+        consoleGlobalMessageManagerFocusStore.set(true);
     });
 
+    onDestroy(() => {
+        consoleGlobalMessageManagerFocusStore.set(false);
+    })
+
     function disableConsole() {
         consoleGlobalMessageManagerVisibleStore.set(false);
         consoleGlobalMessageManagerFocusStore.set(false);
diff --git a/front/src/Components/TypeMessage/TextMessage.svelte b/front/src/Components/TypeMessage/TextMessage.svelte
index edc9181e..b4b1e089 100644
--- a/front/src/Components/TypeMessage/TextMessage.svelte
+++ b/front/src/Components/TypeMessage/TextMessage.svelte
@@ -4,7 +4,7 @@
     import { QuillDeltaToHtmlConverter } from "quill-delta-to-html";
 
     const content = JSON.parse($textMessageContentStore);
-    const converter = new QuillDeltaToHtmlConverter(content.ops);
+    const converter = new QuillDeltaToHtmlConverter(content.ops, {inlineStyles: true});
     const NAME_BUTTON = 'Ok';
 
     function closeTextMessage() {
diff --git a/front/style/inputTextGlobalMessageSvelte-Style.scss b/front/style/inputTextGlobalMessageSvelte-Style.scss
index dd46351e..46b54e2c 100644
--- a/front/style/inputTextGlobalMessageSvelte-Style.scss
+++ b/front/style/inputTextGlobalMessageSvelte-Style.scss
@@ -9,8 +9,7 @@ section.section-input-send-text {
   }
 
   div.input-send-text{
-    height: auto;
-    max-height: calc(100% - 100px);
+    height: calc(100% - 100px);
     overflow: auto;
 
     color: whitesmoke;
@@ -20,5 +19,13 @@ section.section-input-send-text {
       color: whitesmoke;
       font-size: 1rem;
     }
+
+    .ql-tooltip {
+      top: 40% !important;
+      left: 20% !important;
+
+      color: whitesmoke;
+      background-color: #333333;
+    }
   }
 }