Fix icon styles
This commit is contained in:
parent
698b3caeb8
commit
69b79b7687
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue