fix styles in connection indicators

This commit is contained in:
Ilya Daynatovich 2016-10-26 15:58:27 +03:00 committed by damencho
parent 323684c5fe
commit 698b3caeb8
2 changed files with 20 additions and 8 deletions

View File

@ -65,16 +65,20 @@
z-index: 1;
width: 100%;
box-sizing: border-box; // Includes the padding in the 100% width.
height: $thumbnailToolbarHeight;
padding: 0 5px 0 5px;
}
.videocontainer__toolbar {
bottom: 0;
padding: 0 5px 0 5px;
height: $thumbnailToolbarHeight;
}
.videocontainer__toptoolbar {
$toolbarPadding: 5px;
top: 0;
padding: $toolbarPadding;
padding-bottom: 0;
height: $thumbnailIndicatorSize + $toolbarPadding;
}
#remoteVideos .videocontainer.videoContainerFocused,
@ -277,6 +281,7 @@
}
.videocontainer__toptoolbar span.indicator {
position: relative;
font-size: 8pt;
text-align: center;
line-height: $thumbnailToolbarHeight;
@ -292,10 +297,13 @@
border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
.indicatoricon {
width: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
height: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
line-height: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
margin-left: 5px; // TOP toolbar padding;
position: absolute;
top: 50%;
left: 0;
@include transform(translateY(-50%));
width: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
}
.connection.connection_empty

View File

@ -498,10 +498,12 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
}
let indicatorSpanId = "dominantspeakerindicator";
let content = `<i id="indicatoricon"
' class="indicatoricon fa fa-bullhorn"></i>`;
let indicatorSpan = UIUtil.getVideoThumbnailIndicatorSpan({
videoSpanId: this.videoSpanId,
indicatorId: indicatorSpanId,
content: '<i id="indicatoricon" class="fa fa-bullhorn"></i>',
content,
tooltip: 'speaker'
});
@ -524,10 +526,12 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
}
let indicatorSpanId = "raisehandindicator";
let content = `<i id="indicatoricon"
class="icon-raised-hand indicatoricon"></i>`;
let indicatorSpan = UIUtil.getVideoThumbnailIndicatorSpan({
indicatorId: indicatorSpanId,
videoSpanId: this.videoSpanId,
content: '<i id="indicatoricon" class="icon-raised-hand"></i>',
content,
tooltip: 'raisedHand'
});