From 26792625f23c93388cc6fcc7c5a4b2a7ca8355ec Mon Sep 17 00:00:00 2001
From: Ilya Daynatovich <shupuercha@gmail.com>
Date: Thu, 13 Oct 2016 18:00:02 +0300
Subject: [PATCH] BEMificated classes and add title

---
 css/_jitsi_popover.scss                       |  4 +-
 modules/UI/util/JitsiPopover.js               |  4 +-
 modules/UI/videolayout/ConnectionIndicator.js | 58 ++++++++++++++-----
 3 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/css/_jitsi_popover.scss b/css/_jitsi_popover.scss
index 411c9594b..b401086e8 100644
--- a/css/_jitsi_popover.scss
+++ b/css/_jitsi_popover.scss
@@ -21,7 +21,9 @@
     margin-bottom: 35px;
 
     &__title {
-        text-align: center;
+        text-align: left;
+        margin: 0;
+        padding: 0;
     }
 
     &__content {
diff --git a/modules/UI/util/JitsiPopover.js b/modules/UI/util/JitsiPopover.js
index 92267c11e..24acae8de 100644
--- a/modules/UI/util/JitsiPopover.js
+++ b/modules/UI/util/JitsiPopover.js
@@ -76,7 +76,7 @@ var JitsiPopover = (function () {
      */
     JitsiPopover.prototype.createPopover = function () {
         $("body").append(this.template);
-        $(".jitsipopover > .jitsipopover-content").html(this.options.content);
+        $(".jitsipopover > .jitsipopover__content").html(this.options.content);
         var self = this;
         $(".jitsipopover").on("mouseenter", function () {
             self.popoverIsHovered = true;
@@ -103,7 +103,7 @@ var JitsiPopover = (function () {
                 $(".jitsipopover").css(
                     {top: position.top, left: position.left, display: "table"});
                 $(".jitsipopover > .arrow").css({left: calcLeft});
-                $(".jitsipopover > .jitsiPopupmenuPadding").css(
+                $(".jitsipopover > .jitsipopover__menu-padding").css(
                     {left: calcLeft - 50});
             }
         });
diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js
index 765cd17d9..2eaf7a485 100644
--- a/modules/UI/videolayout/ConnectionIndicator.js
+++ b/modules/UI/videolayout/ConnectionIndicator.js
@@ -95,21 +95,47 @@ ConnectionIndicator.prototype.generateText = function () {
         return `${width}x${height}`;
     }).join(', ') || 'N/A';
 
-    var result = "<table style='width:100%'>" +
-        "<tr>" +
-        "<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>" +
-        uploadBitrate + "</td>" +
-        "</tr><tr>" +
-        "<td><span data-i18n='connectionindicator.packetloss'>" +
-        translate("connectionindicator.packetloss") + "</span></td>" +
-        "<td>" + packetLoss  + "</td>" +
-        "</tr><tr>" +
-        "<td><span data-i18n='connectionindicator.resolution'>" +
-        translate("connectionindicator.resolution") + "</span></td>" +
-        "<td>" + resolutionStr + "</td></tr></table>";
+    let headerKey = 'connectionindicator.header';
+    let result = (
+        `<table style='width:100%'>
+            <tr>
+                <td>
+                    <span class="jitsipopover__title"
+                        data-i18n="">${translate(headerKey)}</span>
+                </td>
+            </tr>
+            <tr>
+                <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>
+                    ${uploadBitrate}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <span data-i18n='connectionindicator.packetloss'>
+                        ${translate("connectionindicator.packetloss")}
+                    </span>
+                </td>
+                <td>${packetLoss}</td>
+            </tr>
+            <tr>
+                <td>
+                    <span data-i18n='connectionindicator.resolution'>
+                        ${translate("connectionindicator.resolution")}
+                    </span>
+                </td>
+                <td>
+                    ${resolutionStr}
+                </td>
+            </tr>
+        </table>`);
 
     if(this.videoContainer.videoSpanId == "localVideoContainer") {
         result += "<a class=\"jitsipopover__showmore link\" " +
@@ -232,7 +258,7 @@ ConnectionIndicator.prototype.generateText = function () {
 
         result += transport + "</table>";
     }
-    
+
     return result;
 };