haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/_videolayout_default.scss
View File

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

8
modules/UI/videolayout/SmallVideo.js
View File

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