Fix style

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

View File

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

View File

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

View File

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