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); }; /**