Update Connection indicator and popover js

modules/UI/util/JitsiPopover.js

@@ -29,8 +29,8 @@ var JitsiPopover = (function () {
         this.element = element;
         this.template = ' <div class="jitsipopover ' + this.options.skin +
             '"><div class="arrow"></div>' +
-            '<div class="jitsipopover-content"></div>' +
-            '<div class="jitsiPopupmenuPadding"></div></div>';
+            '<div class="jitsipopover__content"></div>' +
+            '<div class="jitsipopover__menu-padding"></div></div>';
         var self = this;
         this.element.on("mouseenter", function () {
             self.elementIsHovered = true;

modules/UI/videolayout/ConnectionIndicator.js

@@ -80,10 +80,10 @@ ConnectionIndicator.prototype.generateText = function () {
         packetLoss = "N/A";
     } else {
 
-        packetLoss = "<span class='jitsipopover_green'>&darr;</span>" +
+        packetLoss = "<span class='jitsipopover__green'>&darr;</span>" +
             (this.packetLoss.download !== null ?
                 this.packetLoss.download : "N/A") +
-            "% <span class='jitsipopover_orange'>&uarr;</span>" +
+            "% <span class='jitsipopover__orange'>&uarr;</span>" +
             (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
             "%";
     }
@@ -97,29 +97,29 @@ ConnectionIndicator.prototype.generateText = function () {
 
     var result = "<table style='width:100%'>" +
         "<tr>" +
-        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.bitrate'>" +
+        "<td><span data-i18n='connectionindicator.bitrate'>" +
         translate("connectionindicator.bitrate") + "</span></td>" +
-        "<td><span class='jitsipopover_green'>&darr;</span>" +
-        downloadBitrate + " <span class='jitsipopover_orange'>&uarr;</span>" +
+        "<td><span class='jitsipopover__green'>&darr;</span>" +
+        downloadBitrate + " <span class='jitsipopover__orange'>&uarr;</span>" +
         uploadBitrate + "</td>" +
         "</tr><tr>" +
-        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.packetloss'>" +
+        "<td><span data-i18n='connectionindicator.packetloss'>" +
         translate("connectionindicator.packetloss") + "</span></td>" +
         "<td>" + packetLoss  + "</td>" +
         "</tr><tr>" +
-        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.resolution'>" +
+        "<td><span data-i18n='connectionindicator.resolution'>" +
         translate("connectionindicator.resolution") + "</span></td>" +
         "<td>" + resolutionStr + "</td></tr></table>";
 
     if(this.videoContainer.videoSpanId == "localVideoContainer") {
-        result += "<div class=\"jitsipopover_showmore\" " +
+        result += "<a class=\"jitsipopover__showmore link\" " +
             "onclick = \"APP.UI.connectionIndicatorShowMore('" +
             // FIXME: we do not know local id when this text is generated
             //this.id + "')\"  data-i18n='connectionindicator." +
             "local')\"  data-i18n='connectionindicator." +
                 (this.showMoreValue ? "less" : "more") + "'>" +
             translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) +
-            "</div><br />";
+            "</a>";
     }
 
     if (this.showMoreValue) {
@@ -138,7 +138,7 @@ ConnectionIndicator.prototype.generateText = function () {
 
         if (!this.transport || this.transport.length === 0) {
             transport = "<tr>" +
-                "<td><span class='jitsipopover_blue' " +
+                "<td><span " +
                 "data-i18n='connectionindicator.address'>" +
                 translate("connectionindicator.address") + "</span></td>" +
                 "<td> N/A</td></tr>";
@@ -171,7 +171,7 @@ ConnectionIndicator.prototype.generateText = function () {
             var local_address_key = "connectionindicator.localaddress";
             var remote_address_key = "connectionindicator.remoteaddress";
             var localTransport =
-                "<tr><td><span class='jitsipopover_blue' data-i18n='" +
+                "<tr><td><span data-i18n='" +
                 local_address_key +"' data-i18n-options='" +
                     JSON.stringify({count: data.localIP.length}) + "'>" +
                     translate(local_address_key, {count: data.localIP.length}) +
@@ -179,7 +179,7 @@ ConnectionIndicator.prototype.generateText = function () {
                 ConnectionIndicator.getStringFromArray(data.localIP) +
                 "</td></tr>";
             transport =
-                "<tr><td><span class='jitsipopover_blue' data-i18n='" +
+                "<tr><td><span data-i18n='" +
                 remote_address_key + "' data-i18n-options='" +
                     JSON.stringify({count: data.remoteIP.length}) + "'>" +
                     translate(remote_address_key,
@@ -193,14 +193,14 @@ ConnectionIndicator.prototype.generateText = function () {
 
             transport += "<tr>" +
                 "<td>" +
-                "<span class='jitsipopover_blue' data-i18n='" + key_remote +
+                "<span data-i18n='" + key_remote +
                 "' data-i18n-options='" +
                 JSON.stringify({count: this.transport.length}) + "'>" +
                 translate(key_remote, {count: this.transport.length}) +
                 "</span></td><td>";
             localTransport += "<tr>" +
                 "<td>" +
-                "<span class='jitsipopover_blue' data-i18n='" + key_local +
+                "<span data-i18n='" + key_local +
                 "' data-i18n-options='" +
                 JSON.stringify({count: this.transport.length}) + "'>" +
                 translate(key_local, {count: this.transport.length}) +
@@ -213,7 +213,7 @@ ConnectionIndicator.prototype.generateText = function () {
             transport += "</td></tr>";
             transport += localTransport + "</td></tr>";
             transport +="<tr>" +
-                "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.transport'>" +
+                "<td><span data-i18n='connectionindicator.transport'>" +
                 translate("connectionindicator.transport") + "</span></td>" +
                 "<td>" + this.transport[0].type + "</td></tr>";
 
@@ -222,17 +222,17 @@ ConnectionIndicator.prototype.generateText = function () {
         result += "<table  style='width:100%'>" +
             "<tr>" +
             "<td>" +
-            "<span class='jitsipopover_blue' data-i18n='connectionindicator.bandwidth'>" +
+            "<span data-i18n='connectionindicator.bandwidth'>" +
             translate("connectionindicator.bandwidth") + "</span>" +
             "</td><td>" +
-            "<span class='jitsipopover_green'>&darr;</span>" +
+            "<span class='jitsipopover__green'>&darr;</span>" +
             downloadBandwidth +
-            " <span class='jitsipopover_orange'>&uarr;</span>" +
+            " <span class='jitsipopover__orange'>&uarr;</span>" +
             uploadBandwidth + "</td></tr>";
 
         result += transport + "</table>";
     }
-
+    
     return result;
 };