Fix style

front/dist/resources/style/style.css

@@ -410,6 +410,7 @@ body {
     width: 80%;
     height: 80%;
     min-height: 200px;
+    max-height: 80%;
     top: -80%;
     left: 10%;
     background: #000000a6;
@@ -421,12 +422,19 @@ body {
     height: auto;
     border-radius: 0 0 10px 10px;
     color: white;
-    padding: 10px;
     top: 0;
 }
 
+.message-container .content-message{
+    position: relative;
+    padding: 20px;
+    margin: 20px;
+    overflow: scroll;
+    max-height: 400px;
+}
+
 .main-console div.console,
-.message-container div {
+.message-container div.clear {
     position: absolute;
     color: white;
     z-index: 200;
@@ -441,12 +449,12 @@ body {
 }
 
 .main-console div.console p,
-.message-container div p{
+.message-container div.clear p{
     margin-top: 6px;
 }
 
 .main-console div.console:hover,
-.message-container div:hover {
+.message-container div.clear:hover {
     cursor: pointer;
     transform: scale(1.2) translateY(3px);
 }
@@ -458,6 +466,7 @@ body {
 .main-console #input-send-text .ql-editor{
     color: white;
     min-height: 200px;
+    max-height: 300px;
 }
 
 .main-console .ql-toolbar{

front/src/Administration/ConsoleGlobalMessageManager.ts

@@ -223,13 +223,17 @@ export class ConsoleGlobalMessageManager {
     }
 
     private sendTextMessage(){
-        const inputText = HtmlUtils.getElementByIdOrFail<HTMLTextAreaElement>(INPUT_CONSOLE_MESSAGE);
+        let elements = document.getElementsByClassName('ql-editor');
+        let quillEditor = elements.item(0);
+        if(!quillEditor){
+            throw "Error get quill node";
+        }
         let GlobalMessage : GlobalMessageInterface = {
             id: 1,
-            message: inputText.value,
+            message: quillEditor.innerHTML,
             type: MESSAGE_TYPE
         };
-        inputText.value = '';
+        quillEditor.innerHTML = '';
         this.Connection.emitGlobalMessage(GlobalMessage);
     }
 

front/src/Administration/GlobalMessageManager.ts

@@ -72,7 +72,6 @@ export class GlobalMessageManager {
             }, 1000);
         }
         messageAudio.onplay = () => {
-            console.log('play');
             divAudio.classList.add('active');
         }
         const messageAudioSource : HTMLSourceElement = document.createElement('source');
@@ -84,10 +83,11 @@ export class GlobalMessageManager {
     private playTextMessage(messageId : number, htmlMessage: string){
         //add button to clear message
         const buttonText = document.createElement('p');
-        buttonText.id = 'button-clear-message'
+        buttonText.id = 'button-clear-message';
         buttonText.innerText = 'Clear';
 
         const buttonMainConsole = document.createElement('div');
+        buttonMainConsole.classList.add('clear');
         buttonMainConsole.appendChild(buttonText);
         buttonMainConsole.addEventListener('click', () => {
             messageContainer.style.top = '-80%';
@@ -97,11 +97,16 @@ export class GlobalMessageManager {
             });
         });
 
+        //create content message
+        const messageCotent = document.createElement('div');
+        messageCotent.innerHTML = htmlMessage;
+        messageCotent.className = "content-message";
+
         //add message container
         const messageContainer = document.createElement('div');
-        messageContainer.innerHTML = htmlMessage;
         messageContainer.id = this.getHtmlMessageId(messageId);
         messageContainer.className = "message-container";
+        messageContainer.appendChild(messageCotent);
         messageContainer.appendChild(buttonMainConsole);
 
         const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');