Created call window body

This commit is contained in:
Pierre HUBERT 2019-01-25 15:34:40 +01:00
parent b08255cd18
commit 29b5499b85
2 changed files with 71 additions and 50 deletions

View File

@ -13,23 +13,12 @@
right: 10px;
z-index: 100;
border: 1px black solid;
display: flex;
flex-direction: column;
}
/**
* Loading message
*/
.loading-message-container {
position: absolute;
height: inherit;
width: inherit;
display: flex;
background: 1px #0009;
flex-direction: column;
justify-content: space-around;
text-align: center;
font-size: 150%;
color: white;
.call.window.body {
flex: 1;
}
@ -52,3 +41,20 @@
.call-title {
flex: 1;
}
/**
* Loading message
*/
.loading-message-container {
position: absolute;
min-height: 110px;
width: 100%;
display: flex;
background: 1px #0009;
flex-direction: column;
justify-content: space-around;
text-align: center;
font-size: 150%;
color: white;
}

View File

@ -47,41 +47,6 @@ ComunicWeb.components.calls.callWindow = {
call.window.container = callContainer;
//Create loading message area
call.window.loadingMessageContainer = createElem2({
appendTo: callContainer,
type: "div",
class: "loading-message-container",
innerHTML: "<i class='fa fa-clock-o'></i>"
});
call.window.loadingMessageContent = createElem2({
appendTo: call.window.loadingMessageContainer,
type: "div",
class: "message",
innerHTML: "Loading..."
});
/**
* Set loading message visiblity
*
* @param {Boolean} visible TRUE to make it visible / FALSE else
*/
call.setLoadingMessageVisibility = function(visible){
call.window.loadingMessageContainer.style.display = visible ? "flex" : "none";
}
/**
* Update call loading message
*
* @param {String} message The new message to show to the
* users
*/
call.setLoadingMessage = function(message){
call.window.loadingMessageContent.innerHTML = message;
}
//Add toolbar
call.window.toolbar = createElem2({
appendTo: callContainer,
@ -137,6 +102,56 @@ ComunicWeb.components.calls.callWindow = {
});
//Call box body
call.window.body = createElem2({
appendTo: callContainer,
type: "div",
class: "call-window-body"
});
/**
* Create loading message area
*/
call.window.loadingMessageContainer = createElem2({
appendTo: call.window.body,
type: "div",
class: "loading-message-container",
innerHTML: "<i class='fa fa-clock-o'></i>"
});
call.window.loadingMessageContent = createElem2({
appendTo: call.window.loadingMessageContainer,
type: "div",
class: "message",
innerHTML: "Loading..."
});
/**
* Set loading message visiblity
*
* @param {Boolean} visible TRUE to make it visible / FALSE else
*/
call.setLoadingMessageVisibility = function(visible){
call.window.loadingMessageContainer.style.display = visible ? "flex" : "none";
}
/**
* Update call loading message
*
* @param {String} message The new message to show to the
* users
*/
call.setLoadingMessage = function(message){
call.window.loadingMessageContent.innerHTML = message;
}
//Load user media
call.setLoadingMessage("Waiting for your microphone and camera...");