From 9b955ebd20fe819ab64c4158cbc65490e5bb2f1d Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sun, 20 Sep 2020 19:31:24 +0200 Subject: [PATCH] fix style quill box --- front/dist/index.html | 9 ++++ front/dist/resources/style/style.css | 26 +++++++--- .../ConsoleGlobalMessageManager.ts | 51 ++++++++++++++++--- 3 files changed, 74 insertions(+), 12 deletions(-) diff --git a/front/dist/index.html b/front/dist/index.html index 4fd514a8..f885079a 100644 --- a/front/dist/index.html +++ b/front/dist/index.html @@ -6,6 +6,12 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + + + + + + + @@ -40,6 +47,7 @@
+
@@ -120,5 +128,6 @@ + diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index bf66bf3d..6ad80d88 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -409,6 +409,7 @@ body { position: absolute; width: 80%; height: 80%; + min-height: 200px; top: -80%; left: 10%; background: #000000a6; @@ -424,8 +425,8 @@ body { top: 0; } -.message-container div, -.main-console div{ +.main-console div.console, +.message-container div { position: absolute; color: white; z-index: 200; @@ -439,13 +440,26 @@ body { text-align: center; } -.message-container div p, -.main-console div p{ +.main-console div.console p, +.message-container div p{ margin-top: 6px; } -.message-container div:hover, -.main-console div:hover{ +.main-console div.console:hover, +.message-container div:hover { cursor: pointer; transform: scale(1.2) translateY(3px); +} + +.main-console #input-send-text{ + min-height: 200px; +} + +.main-console #input-send-text .ql-editor{ + color: white; + min-height: 200px; +} + +.main-console .ql-toolbar{ + background: white; } \ No newline at end of file diff --git a/front/src/Administration/ConsoleGlobalMessageManager.ts b/front/src/Administration/ConsoleGlobalMessageManager.ts index 4a76a0d2..7be459d4 100644 --- a/front/src/Administration/ConsoleGlobalMessageManager.ts +++ b/front/src/Administration/ConsoleGlobalMessageManager.ts @@ -1,3 +1,5 @@ +const Quill = require("quill"); + import {HtmlUtils} from "../WebRtc/HtmlUtils"; import {Connection, GlobalMessageInterface} from "../Connection"; @@ -20,6 +22,7 @@ export class ConsoleGlobalMessageManager { constructor(Connection: Connection) { this.Connection = Connection; this.buttonMainConsole = document.createElement('div'); + this.buttonMainConsole.classList.add('console'); this.divMainConsole = document.createElement('div'); this.initialise(); } @@ -47,23 +50,59 @@ export class ConsoleGlobalMessageManager { } createTextMessagePart(){ - const input = document.createElement('textarea'); - this.divMainConsole.appendChild(input); - input.id = INPUT_CONSOLE_MESSAGE; - const buttonSend = document.createElement('button'); + const div = document.createElement('div'); + div.id = INPUT_CONSOLE_MESSAGE; + const buttonSend = document.createElement('button'); buttonSend.innerText = 'Envoyer'; buttonSend.addEventListener('click', (event: MouseEvent) => { this.sendMessage(); this.disabled(); }); - this.divMainConsole.appendChild(buttonSend); const typeConsole = document.createElement('input'); typeConsole.id = INPUT_TYPE_CONSOLE; typeConsole.value = MESSAGE_TYPE; typeConsole.type = 'hidden'; - this.divMainConsole.appendChild(typeConsole); + + const section = document.createElement('section'); + section.appendChild(buttonSend); + section.appendChild(typeConsole); + section.appendChild(div); + this.divMainConsole.appendChild(section); + + //TODO refactor + setTimeout(() => { + const toolbarOptions = [ + ['bold', 'italic', 'underline', 'strike'], // toggled buttons + ['blockquote', 'code-block'], + + [{ 'header': 1 }, { 'header': 2 }], // custom button values + [{ 'list': 'ordered'}, { 'list': 'bullet' }], + [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript + [{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent + [{ 'direction': 'rtl' }], // text direction + + [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown + [{ 'header': [1, 2, 3, 4, 5, 6, false] }], + + [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme + [{ 'font': [] }], + [{ 'align': [] }], + + ['clean'], + + ['link', 'image', 'video'] + // remove formatting button + ]; + + let quill = new Quill(`#${INPUT_CONSOLE_MESSAGE}`, { + theme: 'snow', + modules: { + toolbar: toolbarOptions + }, + }); + }, 1000); } sendMessage(){