From a1b3c56de7e3ad9b6e723a1f7a4d9ec29b5fcb35 Mon Sep 17 00:00:00 2001 From: damencho Date: Wed, 15 Feb 2017 10:54:57 +0200 Subject: [PATCH] Uses tooltip to show custom popups for mute mic button/shared video button. --- conference.js | 3 +- css/_base.scss | 1 + css/_login_menu.scss | 50 ++------------- images/dropdownPointer.png | Bin 234 -> 0 bytes images/leftDropdownPointer.png | Bin 611 -> 0 bytes modules/UI/UI.js | 11 ++++ modules/UI/shared_video/SharedVideo.js | 4 +- modules/UI/toolbars/Toolbar.js | 81 ++++++++++++++++++------- service/UI/UIEvents.js | 7 ++- 9 files changed, 87 insertions(+), 70 deletions(-) delete mode 100644 images/dropdownPointer.png delete mode 100644 images/leftDropdownPointer.png 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 fcc7d03963c75be5a82da3d85c80e5c5f780132b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 234 zcmeAS@N?(olHy`uVBq!ia0vp^d_c^}!3HFmd}T9%6k~CayA#8@b22Z19JVBHcNd2L zAh=-f^2s2z1s;*b3=G`DAk4@xYmNj^kiEpy*OmP~6R&_dV~oKbQ=m|mr;B5V#`&qI zH}WJKHDMA3l8~wI}%e z<`su}bWI=s;}?~%4=`C4UG|q>gTe~DWM4fQ07gH diff --git a/images/leftDropdownPointer.png b/images/leftDropdownPointer.png deleted file mode 100644 index 2acd76ef471dc04bec67959125da5a6aab974399..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 611 zcmeAS@N?(olHy`uVBq!ia0vp^oIuRS!3HG%PBB{nq*&4&eH|GXHuiJ>Nn{1`6_P!I zd>I(3)EF2VS{N990fib~Fff!FFfhDIU|_JC!N4G1FlSew4N!u!z$3Dlfq`2Xgc%uT z&5>YWV2sQRi71Ki^|4CM&(%vz$xlkvtH>8?tx|+mh4pF`@Az>qBQba4#P5KT@vz;Drb zsraL2AdA;L)<^$$h*UDE-g6R7&`4tPGGX`_ufnR))zT<*`=W{?*MqK}#yP(&L>fd@ znN{~c4*Vehgl$KmgIQbx%ao(pvOe1dCNy4uXwb^i%&<(r -
  • - -` + 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" };