_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix style quill box

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
front/dist/index.html vendored
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"> 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"> <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 --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
<script> <script>
@ -15,6 +21,7 @@
gtag('config', 'UA-10196481-11'); gtag('config', 'UA-10196481-11');
</script> </script>
<link rel="apple-touch-icon" sizes="57x57" href="static/images/favicons/apple-icon-57x57.png"> <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="60x60" href="static/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="static/images/favicons/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="static/images/favicons/apple-icon-72x72.png">
@ -40,6 +47,7 @@
</head> </head>
<body id="body" style="margin: 0"> <body id="body" style="margin: 0">
<div class="main-container" id="main-container"> <div class="main-container" id="main-container">
<!-- Create the editor container -->
<div id="game" class="game" style="/*background: red;*/"> <div id="game" class="game" style="/*background: red;*/">
<div id="game-overlay" class="game-overlay" style="/*background: violet*/;"> <div id="game-overlay" class="game-overlay" style="/*background: violet*/;">
<div id="main-section" class="main-section"> <div id="main-section" class="main-section">
@ -120,5 +128,6 @@
<audio id="audio-webrtc-in"> <audio id="audio-webrtc-in">
<source src="/resources/objects/webrtc-in.mp3" type="audio/mp3"> <source src="/resources/objects/webrtc-in.mp3" type="audio/mp3">
</audio> </audio>
</body> </body>
</html> </html>

26
front/dist/resources/style/style.css vendored
View File

@ -409,6 +409,7 @@ body {
position: absolute; position: absolute;
width: 80%; width: 80%;
height: 80%; height: 80%;
min-height: 200px;
top: -80%; top: -80%;
left: 10%; left: 10%;
background: #000000a6; background: #000000a6;
@ -424,8 +425,8 @@ body {
top: 0; top: 0;
} }
.message-container div, .main-console div.console,
.main-console div{ .message-container div {
position: absolute; position: absolute;
color: white; color: white;
z-index: 200; z-index: 200;
@ -439,13 +440,26 @@ body {
text-align: center; text-align: center;
} }
.message-container div p, .main-console div.console p,
.main-console div p{ .message-container div p{
margin-top: 6px; margin-top: 6px;
} }
.message-container div:hover, .main-console div.console:hover,
.main-console div:hover{ .message-container div:hover {
cursor: pointer; cursor: pointer;
transform: scale(1.2) translateY(3px); 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;
}

51
front/src/Administration/ConsoleGlobalMessageManager.ts
View File

@ -1,3 +1,5 @@
const Quill = require("quill");
import {HtmlUtils} from "../WebRtc/HtmlUtils"; import {HtmlUtils} from "../WebRtc/HtmlUtils";
import {Connection, GlobalMessageInterface} from "../Connection"; import {Connection, GlobalMessageInterface} from "../Connection";
@ -20,6 +22,7 @@ export class ConsoleGlobalMessageManager {
constructor(Connection: Connection) { constructor(Connection: Connection) {
this.Connection = Connection; this.Connection = Connection;
this.buttonMainConsole = document.createElement('div'); this.buttonMainConsole = document.createElement('div');
this.buttonMainConsole.classList.add('console');
this.divMainConsole = document.createElement('div'); this.divMainConsole = document.createElement('div');
this.initialise(); this.initialise();
} }
@ -47,23 +50,59 @@ export class ConsoleGlobalMessageManager {
} }
createTextMessagePart(){ createTextMessagePart(){
const input = document.createElement('textarea'); const div = document.createElement('div');
this.divMainConsole.appendChild(input); div.id = INPUT_CONSOLE_MESSAGE;
input.id = INPUT_CONSOLE_MESSAGE;
const buttonSend = document.createElement('button');
const buttonSend = document.createElement('button');
buttonSend.innerText = 'Envoyer'; buttonSend.innerText = 'Envoyer';
buttonSend.addEventListener('click', (event: MouseEvent) => { buttonSend.addEventListener('click', (event: MouseEvent) => {
this.sendMessage(); this.sendMessage();
this.disabled(); this.disabled();
}); });
this.divMainConsole.appendChild(buttonSend);
const typeConsole = document.createElement('input'); const typeConsole = document.createElement('input');
typeConsole.id = INPUT_TYPE_CONSOLE; typeConsole.id = INPUT_TYPE_CONSOLE;
typeConsole.value = MESSAGE_TYPE; typeConsole.value = MESSAGE_TYPE;
typeConsole.type = 'hidden'; 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(){ sendMessage(){