From 69b79b7687016e379630da98c4bb74982bdbeb72 Mon Sep 17 00:00:00 2001
From: Ilya Daynatovich <shupuercha@gmail.com>
Date: Wed, 26 Oct 2016 17:50:39 +0300
Subject: [PATCH] Fix icon styles

---
 css/_mixins.scss                              |  9 +++
 css/_videolayout_default.scss                 | 58 ++++++++++---------
 modules/UI/util/UIUtil.js                     | 10 +++-
 modules/UI/videolayout/ConnectionIndicator.js | 20 ++++---
 4 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/css/_mixins.scss b/css/_mixins.scss
index ba1dedb8d..89ffa27c9 100644
--- a/css/_mixins.scss
+++ b/css/_mixins.scss
@@ -50,6 +50,15 @@
   border-radius: 50%;
 }
 
+/**
+* Absolute position the element at the top left corner
+**/
+@mixin topLeft() {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
 @mixin absoluteAligning($sizeX, $sizeY) {
   top: 50%;
   left: 50%;
diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 1f7b97434..107c02fcb 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -306,37 +306,43 @@
         line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
     }
 
-    .connection.connection_empty
-    {
-        color: #8B8B8B;/*#FFFFFF*/
-        overflow: hidden;
+    .connection {
+        position: relative;
+        margin: 0 auto;
+        width: 12px;
+        height: 8px;
+
+        &_empty
+        {
+            @include topLeft();
+            max-width: 12px;
+            width: 12px;
+            color: #8B8B8B;/*#FFFFFF*/
+            overflow: hidden;
+        }
+
+        &_lost
+        {
+            @include topLeft();
+            max-width: 12px;
+            width: 12px;
+            color: #8B8B8B;
+            overflow: visible;
+        }
+
+        &_full
+        {
+            @include topLeft();
+            max-width: 12px;
+            width: 12px;
+            color: #FFFFFF;/*#15A1ED*/
+            overflow: hidden;
+        }
     }
 
-    .connection.connection_lost
-    {
-        color: #8B8B8B;
-        overflow: visible;
-    }
-
-    .connection.connection_full
-    {
-        color: #FFFFFF;/*#15A1ED*/
-        overflow: hidden;
-    }
-
-    .connection,
     .icon-connection,
     .icon-connection-lost {
         font-size: 6pt;
-        line-height: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
-    }
-
-    .connection
-    {
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        border: 0px;
     }
 }
 
diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js
index ed9235c1f..8e7d74fc5 100644
--- a/modules/UI/util/UIUtil.js
+++ b/modules/UI/util/UIUtil.js
@@ -414,10 +414,14 @@ const TOOLTIP_POSITIONS = {
             indicatorSpan.className = 'indicator';
             indicatorSpan.id = indicatorId;
 
-            indicatorSpan.innerHTML = opts.content;
+            if(opts.content) {
+                indicatorSpan.innerHTML = opts.content;
+            }
 
-            this.setTooltip(indicatorSpan, opts.tooltip, "top");
-            APP.translation.translateElement($(indicatorSpan));
+            if (opts.tooltip) {
+                this.setTooltip(indicatorSpan, opts.tooltip, "top");
+                APP.translation.translateElement($(indicatorSpan));
+            }
 
             document.getElementById(videoSpanId)
                 .querySelector('.videocontainer__toptoolbar')
diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js
index f7836e95a..f4d670b8f 100644
--- a/modules/UI/videolayout/ConnectionIndicator.js
+++ b/modules/UI/videolayout/ConnectionIndicator.js
@@ -249,7 +249,6 @@ ConnectionIndicator.prototype.showMore = function () {
 
 function createIcon(classes, iconClass) {
     var icon = document.createElement("span");
-    icon.classList.add("indicatoricon");
     for(var i in classes) {
         icon.classList.add(classes[i]);
     }
@@ -267,6 +266,7 @@ ConnectionIndicator.prototype.create = function () {
         videoSpanId: this.videoContainer.videoSpanId,
         indicatorId
     });
+    element.classList.add('show');
     this.connectionIndicatorContainer = element;
 
     let popoverContent = (
@@ -289,13 +289,19 @@ ConnectionIndicator.prototype.create = function () {
         origShowFunc.call(this.popover);
     }.bind(this);
 
-    this.emptyIcon = this.connectionIndicatorContainer.appendChild(
-        createIcon(["connection", "connection_empty"], "icon-connection"));
-    this.fullIcon = this.connectionIndicatorContainer.appendChild(
-        createIcon(["connection", "connection_full"], "icon-connection"));
-    this.interruptedIndicator = this.connectionIndicatorContainer.appendChild(
-        createIcon(["connection", "connection_lost"],"icon-connection-lost"));
+    let connectionIconContainer = document.createElement('div');
+    connectionIconContainer.className = 'connection indicatoricon';
+
+
+    this.emptyIcon = connectionIconContainer.appendChild(
+        createIcon(["connection_empty"], "icon-connection"));
+    this.fullIcon = connectionIconContainer.appendChild(
+        createIcon(["connection_full"], "icon-connection"));
+    this.interruptedIndicator = connectionIconContainer.appendChild(
+        createIcon(["connection_lost"],"icon-connection-lost"));
+
     $(this.interruptedIndicator).hide();
+    this.connectionIndicatorContainer.appendChild(connectionIconContainer);
 };
 
 /**