diff --git a/conference.js b/conference.js index f81cf2265..f4f79b265 100644 --- a/conference.js +++ b/conference.js @@ -1229,7 +1229,8 @@ export default { room.on(ConferenceEvents.TALK_WHILE_MUTED, () => { APP.UI.showToolbar(6000); - UIUtil.animateShowElement($("#talkWhileMutedPopup"), true, 5000); + + APP.UI.showCustomToolbarPopup('#talkWhileMutedPopup', true, 5000); }); /* diff --git a/css/_base.scss b/css/_base.scss index 659bd74c2..0444a0ff1 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -122,6 +122,7 @@ form { z-index: $tooltipsZ; &-inner { background-color: $tooltipBg; + max-width: 350px; } &-arrow { diff --git a/css/_login_menu.scss b/css/_login_menu.scss index 1e51d72eb..f8cf72203 100644 --- a/css/_login_menu.scss +++ b/css/_login_menu.scss @@ -1,34 +1,10 @@ /*Initialize*/ -ul.loginmenu { - font-family: $baseFontFamily; - line-height: normal; - display:none; +div.loginmenu { position: absolute; margin: 0; padding: 5px; - padding-bottom: 7px; - top: 45px; - left: -5px; - background-color: rgba(0,0,0,0.9); - border: 1px solid rgba(256, 256, 256, 0.2); - border-radius:8px; -} - -ul.loginmenu li { - list-style-type: none; - padding: 7px; - color: #fff; - font-size: 11pt; - cursor: default; - white-space: pre; -} - -ul.loginmenu:after { - content: url('../images/dropdownPointer.png'); - display: block; - position: absolute; - top: -7px; - left: 18px; + top: 40px; + left: 20px; } a.disabled { @@ -36,23 +12,7 @@ a.disabled { pointer-events: none; } -.loginmenuPadding { - width: 50px; - height: 30px; - position: absolute; - top: -30px; - left: 0px; -} - .loginmenu.extendedToolbarPopup { - left: 55px; - top: 0px; -} - -ul.loginmenu.extendedToolbarPopup:after { - content: url('../images/leftDropdownPointer.png'); - display: block; - position: absolute; - top: 18px; - left: -7px; + top: 20px; + left: 40px; } \ No newline at end of file diff --git a/images/dropdownPointer.png b/images/dropdownPointer.png deleted file mode 100644 index fcc7d0396..000000000 Binary files a/images/dropdownPointer.png and /dev/null differ diff --git a/images/leftDropdownPointer.png b/images/leftDropdownPointer.png deleted file mode 100644 index 2acd76ef4..000000000 Binary files a/images/leftDropdownPointer.png and /dev/null differ diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 624b5c1ba..d83574c47 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -712,6 +712,17 @@ UI.inputDisplayNameHandler = function (newDisplayName) { eventEmitter.emit(UIEvents.NICKNAME_CHANGED, newDisplayName); }; +/** + * Show custom popup/tooltip for a specified button. + * @param popupSelectorID the selector id of the popup to show + * @param show true or false/show or hide the popup + * @param timeout the time to show the popup + */ +UI.showCustomToolbarPopup = function (popupSelectorID, show, timeout) { + eventEmitter.emit(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP, + popupSelectorID, show, timeout); +}; + /** * Return the type of the remote video. * @param jid the jid for the remote video diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js index 0b2e58cbd..11e218938 100644 --- a/modules/UI/shared_video/SharedVideo.js +++ b/modules/UI/shared_video/SharedVideo.js @@ -541,7 +541,7 @@ export default class SharedVideoManager { if(show) this.showSharedVideoMutedPopup(false); - UIUtil.animateShowElement($("#micMutedPopup"), show, 5000); + APP.UI.showCustomToolbarPopup('#micMutedPopup', show, 5000); } /** @@ -554,7 +554,7 @@ export default class SharedVideoManager { if(show) this.showMicMutedPopup(false); - UIUtil.animateShowElement($("#sharedVideoMutedPopup"), show, 5000); + APP.UI.showCustomToolbarPopup('#sharedVideoMutedPopup', show, 5000); } } diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 778c7ebcb..27c311467 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -1,4 +1,4 @@ -/* global APP, $, config, interfaceConfig, JitsiMeetJS */ +/* global AJS, APP, $, config, interfaceConfig, JitsiMeetJS */ import UIUtil from '../util/UIUtil'; import UIEvents from '../../../service/UI/UIEvents'; import SideContainerToggler from "../side_pannels/SideContainerToggler"; @@ -26,8 +26,8 @@ const buttonHandlers = { if (sharedVideoManager && sharedVideoManager.isSharedVideoVolumeOn() && !sharedVideoManager.isSharedVideoOwner()) { - UIUtil.animateShowElement( - $("#unableToUnmutePopup"), true, 5000); + APP.UI.showCustomToolbarPopup( + '#unableToUnmutePopup', true, 5000); } else { JitsiMeetJS.analytics.sendEvent('toolbar.audio.unmuted'); @@ -120,19 +120,19 @@ const defaultToolbarButtons = { shortcutDescription: "keyboardShortcuts.mute", popups: [ { - id: "micMutedPopup", - className: "loginmenu", - dataAttr: "[html]toolbar.micMutedPopup" + id: 'micMutedPopup', + className: 'loginmenu', + dataAttr: '[title]toolbar.micMutedPopup' }, { - id: "unableToUnmutePopup", - className: "loginmenu", - dataAttr: "[html]toolbar.unableToUnmutePopup" + id: 'unableToUnmutePopup', + className: 'loginmenu', + dataAttr: '[title]toolbar.unableToUnmutePopup' }, { - id: "talkWhileMutedPopup", - className: "loginmenu", - dataAttr: "[html]toolbar.talkWhileMutedPopup" + id: 'talkWhileMutedPopup', + className: 'loginmenu', + dataAttr: '[title]toolbar.talkWhileMutedPopup' } ], content: "Mute / Unmute", @@ -263,11 +263,14 @@ const defaultToolbarButtons = { id: 'toolbar_button_sharedvideo', tooltipKey: 'toolbar.sharedvideo', className: 'button icon-shared-video', - html: ` -` + popups: [ + { + id: 'sharedVideoMutedPopup', + className: 'loginmenu extendedToolbarPopup', + dataAttr: '[title]toolbar.sharedVideoMutedPopup', + dataAttrPosition: 'w' + } + ] }, 'sip': { id: 'toolbar_button_sip', @@ -358,6 +361,12 @@ Toolbar = { Toolbar._handleFullScreenToggled(isFullScreen); }); + APP.UI.addListener(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP, + (toolbarButtonID, popupID, show, timeout) => { + Toolbar._showCustomToolbarPopup( + toolbarButtonID, popupID, show, timeout); + }); + if(!APP.tokenData.isGuest) { $("#toolbar_button_profile").addClass("unclickable"); UIUtil.removeTooltip( @@ -724,17 +733,47 @@ Toolbar = { _addPopups(buttonElement, popups = []) { popups.forEach((popup) => { - let popupElement = document.createElement("ul"); + const popupElement = document.createElement('div'); popupElement.id = popup.id; popupElement.className = popup.className; - let liElement = document.createElement("li"); - liElement.setAttribute("data-i18n", popup.dataAttr); - popupElement.appendChild(liElement); + popupElement.setAttribute('data-i18n', popup.dataAttr); + + let gravity = 'n'; + if (popup.dataAttrPosition) + gravity = popup.dataAttrPosition; + popupElement.setAttribute('data-tooltip', gravity); + buttonElement.appendChild(popupElement); }); }, /** + * Show custom popup/tooltip for a specified button. + * @param popupSelectorID the selector id of the popup to show + * @param show true or false/show or hide the popup + * @param timeout the time to show the popup + */ + _showCustomToolbarPopup(popupSelectorID, show, timeout) { + + const gravity = $(popupSelectorID).attr('data-tooltip'); + AJS.$(popupSelectorID) + .tooltip({ + trigger: 'manual', + html: true, + gravity: gravity, + title: 'title'}); + if (show) { + AJS.$(popupSelectorID).tooltip('show'); + setTimeout(function () { + // hide the tooltip + AJS.$(popupSelectorID).tooltip('hide'); + }, timeout); + } else { + AJS.$(popupSelectorID).tooltip('hide'); + } + }, + +/** * Sets the toggled state of the given element depending on the isToggled * parameter. * diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index 30cac66b6..899436374 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -153,5 +153,10 @@ export default { /** * Indicates that a password is required for the call. */ - PASSWORD_REQUIRED: "UI.password_required" + PASSWORD_REQUIRED: "UI.password_required", + + /** + * Show custom popup/tooltip for a specified button. + */ + SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP: "UI.show_custom_toolbar_button_popup" };