From d297bf92d09b86651e4c9991540968b0eb160fc7 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Mon, 13 Apr 2020 16:30:13 +0200 Subject: [PATCH] Create submenu --- assets/css/components/calls/window.css | 16 +++++++ assets/js/components/calls/window.js | 65 ++++++++++++++++++++++++-- 2 files changed, 76 insertions(+), 5 deletions(-) diff --git a/assets/css/components/calls/window.css b/assets/css/components/calls/window.css index fbc5e37d..e98b3471 100644 --- a/assets/css/components/calls/window.css +++ b/assets/css/components/calls/window.css @@ -137,10 +137,26 @@ background-color: #fff3; } +.call-window .window-bottom div i { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + .call-window .window-bottom div.hang-up-button { color: #dd4b39; } +.call-window .window-bottom .dropdown-menu { + left: -95px; +} + +.call-window .window-bottom .dropdown-menu i { + display: inline; +} + /** * Responsive mode */ diff --git a/assets/js/components/calls/window.js b/assets/js/components/calls/window.js index f2268354..1a9490d7 100644 --- a/assets/js/components/calls/window.js +++ b/assets/js/components/calls/window.js @@ -156,18 +156,29 @@ class CallWindow extends CustomEvents { }, + // Submenu button + { + subMenu: true, + icon: "fa-ellipsis-v", + selected: true, + label: "submenu", + onclick: () => {} + }, + ] + + // Sub-menu entries + const menuEntries = [ + //Full screen button { icon: "fa-expand", - selected: false, + text: "Toggle fullscreen", needVideo: true, - onclick: (btn) => { + onclick: () => { RequestFullScreen(this.rootEl); - setTimeout(() => { - setButtonSelected(btn, IsFullScreen()); - }, 1000); } }, + ] //Add buttons @@ -176,6 +187,7 @@ class CallWindow extends CustomEvents { if(button.needVideo && !this.allowVideo) return; + const buttonEl = createElem2({ appendTo: bottomArea, type: "div", @@ -222,6 +234,49 @@ class CallWindow extends CustomEvents { + + + // Process sub menu + const menu = bottomArea.querySelector("[data-label=\"submenu\"]"); + menu.classList.add("dropup"); + + + const menuButton = menu.firstChild; + menuButton.classList.add("dropdown-toggle"); + menuButton.setAttribute("data-toggle", "dropdown") + + const menuEntriesTarget = createElem2({ + appendTo: menu, + type: "ul", + class: "dropdown-menu" + }) + + // Parse list of menu entries + for(const entry of menuEntries) { + + const a = createElem2({ + appendTo: menuEntriesTarget, + type: "li", + innerHTML: "" + }).firstChild; + + // Add icon + createElem2({ + appendTo: a, + type: "i", + class: "fa " + entry.icon, + }) + + // Add label + a.innerHTML += entry.text + + a.addEventListener("click", () => entry.onclick()) + } + + + + + // Check for anchors this.CheckNewTargetForWindow()