fix style quill box
This commit is contained in:
Gregoire Parant
parent
844bffa988
commit
9b955ebd20
9
front/dist/index.html
vendored
9
front/dist/index.html
vendored
|
|
@ -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>
|
||||
|
|
|
|||
26
front/dist/resources/style/style.css
vendored
26
front/dist/resources/style/style.css
vendored
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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(){
|
||||
|
|
|
|||
Loading…
Reference in a new issue