From b1dd0d1dd44cfac86d1c72ab322673c9657111c2 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Mon, 13 Apr 2020 11:18:04 +0200 Subject: [PATCH] Start to anchor video calls --- assets/css/common/global.css | 5 ++++ assets/css/components/calls/window.css | 9 +++++++ .../css/pages/conversations/conversation.css | 24 +++++++++++++++++++ assets/css/pages/conversations/main.css | 6 ++++- assets/js/components/calls/controller.js | 5 ++++ assets/js/components/calls/window.js | 22 +++++++++++++++++ assets/js/pages/conversations/conversation.js | 10 ++++---- assets/js/pages/conversations/main.js | 8 +++++++ assets/js/pages/conversations/utils.js | 4 ++-- 9 files changed, 85 insertions(+), 8 deletions(-) diff --git a/assets/css/common/global.css b/assets/css/common/global.css index bcef7c8e..e48118a8 100644 --- a/assets/css/common/global.css +++ b/assets/css/common/global.css @@ -37,6 +37,11 @@ a, .cursor-pointer { padding-bottom: 0px; } +#pageTarget { + display: flex; + flex-direction: column; +} + /** * Adapt menu bar to small screens */ diff --git a/assets/css/components/calls/window.css b/assets/css/components/calls/window.css index 9648c4aa..b6c7eaad 100644 --- a/assets/css/components/calls/window.css +++ b/assets/css/components/calls/window.css @@ -27,6 +27,15 @@ visibility: visible; } +.call-window.embedded { + position: relative; + top: unset !important; + left: unset !important; + width: unset; + height: 150px; + margin: 20px; +} + .call-window .head { color: white; padding: 5px; diff --git a/assets/css/pages/conversations/conversation.css b/assets/css/pages/conversations/conversation.css index f0d997ae..5ef78588 100644 --- a/assets/css/pages/conversations/conversation.css +++ b/assets/css/pages/conversations/conversation.css @@ -4,6 +4,30 @@ * @author Pierre HUBERT */ +.big-box-conversation { + flex: 1; + display: flex; + flex-direction: column; + max-width: 90%; + margin: auto; +} + +.big-box-conversation .box-body { + flex: 1; + display: flex; + flex-direction: column; +} + +.big-box-conversation .box-body .slimScrollDiv { + flex: 1; +} + +.big-box-conversation .direct-chat-messages { + flex: 1 1 auto; + height: 0px; + overflow: auto; +} + .big-box-conversation .direct-chat-info span { margin-right: 10px; } diff --git a/assets/css/pages/conversations/main.css b/assets/css/pages/conversations/main.css index 0b7cfcbf..35fa73c6 100644 --- a/assets/css/pages/conversations/main.css +++ b/assets/css/pages/conversations/main.css @@ -7,7 +7,11 @@ .conversations-page-container { max-width: 1000px; margin: auto; - margin-top: 10px; + display: flex; + flex-direction: column; + flex: 1; + width: 100%; + padding-bottom: 50px; } diff --git a/assets/js/components/calls/controller.js b/assets/js/components/calls/controller.js index 0bd8ecde..e4f873f8 100644 --- a/assets/js/components/calls/controller.js +++ b/assets/js/components/calls/controller.js @@ -131,4 +131,9 @@ document.addEventListener("openPage", () => { if(!OpenCalls.has(c)) CallsController.Open(await getSingleConversation(c)) }) + + // Check if a conversation can be integrated inside the page + for(const call of OpenCalls.values()) { + call.CheckNewTargetForWindow() + } }) \ No newline at end of file diff --git a/assets/js/components/calls/window.js b/assets/js/components/calls/window.js index b9924414..8f709829 100644 --- a/assets/js/components/calls/window.js +++ b/assets/js/components/calls/window.js @@ -212,6 +212,9 @@ class CallWindow extends CustomEvents { + // Check for anchors + this.CheckNewTargetForWindow() + // Join the call @@ -244,6 +247,25 @@ class CallWindow extends CustomEvents { } } + /** + * Check if current call window can be applied somewhere on the screen + */ + CheckNewTargetForWindow() { + const target = byId("target-for-video-call-"+this.callID) + + this.rootEl.remove() + + if(target) { + target.appendChild(this.rootEl) + this.rootEl.classList.add("embedded") + } + + else { + byId("callsTarget").appendChild(this.rootEl) + this.rootEl.classList.remove("embedded") + } + } + /** * Check if this conversation window is open or not * diff --git a/assets/js/pages/conversations/conversation.js b/assets/js/pages/conversations/conversation.js index fefea082..c10b4ecd 100644 --- a/assets/js/pages/conversations/conversation.js +++ b/assets/js/pages/conversations/conversation.js @@ -334,7 +334,7 @@ const ConversationPageConvPart = { //Enable / update slimscroll var target = ComunicWeb.pages.conversations.conversation._conv_info.window.messagesTarget; var scrollBottom = $(target).prop("scrollHeight")+"px"; - ComunicWeb.pages.conversations.utils.enableSlimScroll(target, ComunicWeb.pages.conversations.utils.getAvailableHeight(), scrollBottom); + //ComunicWeb.pages.conversations.utils.enableSlimScroll(target, "100%", scrollBottom); }, 100); } @@ -580,10 +580,10 @@ const ConversationPageConvPart = { newScrollPos = oldestMessage.offsetTop - 30; if(newScrollPos < 0) newScrollPos = 0; - ComunicWeb.pages.conversations.utils.enableSlimScroll( - convInfo.window.messagesTarget, - ComunicWeb.pages.conversations.utils.getAvailableHeight(), - newScrollPos); + /*ComunicWeb.pages.conversations.utils.enableSlimScroll( + convInfo.window.messagesTarget, + "100%", + newScrollPos);*/ }); }); }, diff --git a/assets/js/pages/conversations/main.js b/assets/js/pages/conversations/main.js index b1fc3622..b6c42204 100644 --- a/assets/js/pages/conversations/main.js +++ b/assets/js/pages/conversations/main.js @@ -23,6 +23,14 @@ ComunicWeb.pages.conversations.main = { //Check if a conversation has to be opened if(args.subfolder){ + + // Add a target for video calls + createElem2({ + appendTo: container, + type: "div", + id: "target-for-video-call-"+this.getCurrentConversationID() + }) + ComunicWeb.pages.conversations.conversation.open(this.getCurrentConversationID(), container); } diff --git a/assets/js/pages/conversations/utils.js b/assets/js/pages/conversations/utils.js index 5bababc4..c7874027 100644 --- a/assets/js/pages/conversations/utils.js +++ b/assets/js/pages/conversations/utils.js @@ -10,14 +10,14 @@ ComunicWeb.pages.conversations.utils = { * Enable slimscroll for the conversation element * * @param {HMTLElement} target The target for slimscroll - * @param {Number} height The available height for the element + * @param {Number|String} height The available height for the element * @param {Number} pos Scroll position to go to */ enableSlimScroll: function(target, height, pos){ $(target).slimScroll({ scrollTo: pos + "px", - height: height + "px", + height: height + (typeof height == "number" ? "px" : ""), }); },