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

Fix style

Browse Source
This commit is contained in:
Gregoire Parant 2020-09-23 18:07:31 +02:00
parent bcb126a146
commit d5fdb9d857
3 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -223,13 +223,17 @@ export class ConsoleGlobalMessageManager {
} }
private sendTextMessage(){ 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 = { let GlobalMessage : GlobalMessageInterface = {
id: 1, id: 1,
message: inputText.value, message: quillEditor.innerHTML,
type: MESSAGE_TYPE type: MESSAGE_TYPE
}; };
inputText.value = ''; quillEditor.innerHTML = '';
this.Connection.emitGlobalMessage(GlobalMessage); this.Connection.emitGlobalMessage(GlobalMessage);
} }

11
front/src/Administration/GlobalMessageManager.ts
View File

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