fix style quill box

This commit is contained in:
Gregoire Parant 2020-09-20 19:31:24 +02:00
parent 844bffa988
commit 9b955ebd20
3 changed files with 74 additions and 12 deletions

View File

@ -6,6 +6,12 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
<script>
@ -15,6 +21,7 @@
gtag('config', 'UA-10196481-11');
</script>
<link rel="apple-touch-icon" sizes="57x57" href="static/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="static/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="static/images/favicons/apple-icon-72x72.png">
@ -40,6 +47,7 @@
</head>
<body id="body" style="margin: 0">
<div class="main-container" id="main-container">
<!-- Create the editor container -->
<div id="game" class="game" style="/*background: red;*/">
<div id="game-overlay" class="game-overlay" style="/*background: violet*/;">
<div id="main-section" class="main-section">
@ -120,5 +128,6 @@
<audio id="audio-webrtc-in">
<source src="/resources/objects/webrtc-in.mp3" type="audio/mp3">
</audio>
</body>
</html>

View File

@ -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;
}

View File

@ -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(){