From 2b84a149fe2463dd114f1f6a2f30fd3481cc2108 Mon Sep 17 00:00:00 2001
From: hristoterezov <hristo@jitsi.org>
Date: Mon, 12 Sep 2016 14:43:34 -0500
Subject: [PATCH] fix(toolbar): Button popups

---
 css/_login_menu.scss           |  18 ++++++++++++++++--
 images/leftDropdownPointer.png | Bin 0 -> 611 bytes
 index.html                     |   4 ++--
 modules/UI/toolbars/Toolbar.js |  25 +++++++++++++++++++++++++
 4 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 images/leftDropdownPointer.png

diff --git a/css/_login_menu.scss b/css/_login_menu.scss
index c7ad327bb..5ddb6a956 100644
--- a/css/_login_menu.scss
+++ b/css/_login_menu.scss
@@ -1,6 +1,7 @@
 /*Initialize*/
 ul.loginmenu {
-    font-family: inherit;
+    font-family: $baseFontFamily;
+    line-height: normal;
     display:none;
     position: absolute;
     margin: 0;
@@ -55,4 +56,17 @@ a.disabled {
     position: absolute;
     top: -30px;
     left: 0px;
-}
\ No newline at end of file
+}
+
+.loginmenu.extendedToolbarPopup {
+    left: 55px;
+    top: 0px;
+}
+
+ul.loginmenu.extendedToolbarPopup:after {
+    content: url('../images/leftDropdownPointer.png');
+    display: block;
+    position: absolute;
+    top: 18px;
+    left: -7px;
+}
diff --git a/images/leftDropdownPointer.png b/images/leftDropdownPointer.png
new file mode 100644
index 0000000000000000000000000000000000000000..2acd76ef471dc04bec67959125da5a6aab974399
GIT binary patch
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><?s%BuYsjvbvb5lza6)JLb@`|l0Y?Z(&
ztblBgu)dN4SV>8?tx|+<fP!;=QL2Keo{64;k{y?Vf`Uy^N}5%WiyKrskY}ruQBqQ1
zrLSLJUanVete0Puu5V~*X{m2uq;F)T3sj+7T$xvrSfQI&tPC*(W{yj0adJ^+K}lwQ
zo&w0+#H9Sv5?duDkVS9+ac4<p8p5W$VyL%(9@GcP=o{)8=)=thYPA80TKN}crUGpS
znQv!k16GM52DQgVA7nX_V<0{SivqoB$7Q1r4>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<uR{MN-LKG-@S}R&1Vco
a&zKk(0?aG#%{QJ3ib_vcKbLh*2~7aWkG8A;

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index c8863d265..7159ce770 100644
--- a/index.html
+++ b/index.html
@@ -109,7 +109,7 @@
             </a>
             <span id="authentication" class="authentication" style="display: none">
                 <a class="button icon-avatar" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
-                <ul class="loginmenu">
+                <ul class="loginmenu extendedToolbarPopup">
                     <span class="loginmenuPadding"></span>
                     <li id="toolbar_auth_identity"></li>
                     <li id="toolbar_button_login">
@@ -131,7 +131,7 @@
             <a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
             <a class="button icon-share-doc" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="right" content="Shared document" data-i18n="[content]toolbar.etherpad"></a>
             <a class="button icon-shared-video" id="toolbar_button_sharedvideo" data-container="body" data-toggle="popover" data-placement="right" content="Share a YouTube video" data-i18n="[content]toolbar.sharedvideo" style="display: none">
-                <ul id="sharedVideoMutedPopup" class="loginmenu">
+                <ul id="sharedVideoMutedPopup" class="loginmenu extendedToolbarPopup">
                     <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
                 </ul>
             </a>
diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js
index 2b6ddbbdc..3186318df 100644
--- a/modules/UI/toolbars/Toolbar.js
+++ b/modules/UI/toolbars/Toolbar.js
@@ -184,6 +184,18 @@ const defaultToolbarButtons = {
             APP.conference.toggleAudioMuted();
         },
         shortcutDescription: "keyboardShortcuts.mute",
+        popups: [
+            {
+                id: "micMutedPopup",
+                className: "loginmenu",
+                dataAttr: "[html]toolbar.micMutedPopup"
+            },
+            {
+                id: "unableToUnmutePopup",
+                className: "loginmenu",
+                dataAttr: "[html]toolbar.unableToUnmutePopup"
+            }
+        ],
         content: "Mute / Unmute",
         i18n: "[content]toolbar.mute"
     },
@@ -704,9 +716,22 @@ const Toolbar = {
         buttonElement.setAttribute("data-container", "body");
         buttonElement.setAttribute("data-toggle", "popover");
         buttonElement.setAttribute("data-placement", "bottom");
+        this._addPopups(buttonElement, button.popups);
 
         document.getElementById("mainToolbar")
             .appendChild(buttonElement);
+    },
+
+    _addPopups(buttonElement, popups = []) {
+        popups.forEach((popup) => {
+            let popupElement = document.createElement("ul");
+            popupElement.id = popup.id;
+            popupElement.className = popup.className;
+            let liElement = document.createElement("li");
+            liElement.setAttribute("data-i18n", popup.dataAttr);
+            popupElement.appendChild(liElement);
+            buttonElement.appendChild(popupElement);
+        });
     }
 };