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

Fix icon styles

This commit is contained in:
Ilya Daynatovich 2016-10-26 17:50:39 +03:00 committed by damencho
parent 698b3caeb8
commit 69b79b7687
4 changed files with 61 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/_mixins.scss
View File

@ -50,6 +50,15 @@
border-radius: 50%; border-radius: 50%;
} }
/**
* Absolute position the element at the top left corner
**/
@mixin topLeft() {
position: absolute;
top: 0;
left: 0;
}
@mixin absoluteAligning($sizeX, $sizeY) { @mixin absoluteAligning($sizeX, $sizeY) {
top: 50%; top: 50%;
left: 50%; left: 50%;

32
css/_videolayout_default.scss
View File

@ -306,37 +306,43 @@
line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder; line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
} }
.connection.connection_empty .connection {
position: relative;
margin: 0 auto;
width: 12px;
height: 8px;
&_empty
{ {
@include topLeft();
max-width: 12px;
width: 12px;
color: #8B8B8B;/*#FFFFFF*/ color: #8B8B8B;/*#FFFFFF*/
overflow: hidden; overflow: hidden;
} }
.connection.connection_lost &_lost
{ {
@include topLeft();
max-width: 12px;
width: 12px;
color: #8B8B8B; color: #8B8B8B;
overflow: visible; overflow: visible;
} }
.connection.connection_full &_full
{ {
@include topLeft();
max-width: 12px;
width: 12px;
color: #FFFFFF;/*#15A1ED*/ color: #FFFFFF;/*#15A1ED*/
overflow: hidden; overflow: hidden;
} }
}
.connection,
.icon-connection, .icon-connection,
.icon-connection-lost { .icon-connection-lost {
font-size: 6pt; font-size: 6pt;
line-height: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
}
.connection
{
position: absolute;
left: 0px;
top: 0px;
border: 0px;
} }
} }

4
modules/UI/util/UIUtil.js
View File

@ -414,10 +414,14 @@ const TOOLTIP_POSITIONS = {
indicatorSpan.className = 'indicator'; indicatorSpan.className = 'indicator';
indicatorSpan.id = indicatorId; indicatorSpan.id = indicatorId;
if(opts.content) {
indicatorSpan.innerHTML = opts.content; indicatorSpan.innerHTML = opts.content;
}
if (opts.tooltip) {
this.setTooltip(indicatorSpan, opts.tooltip, "top"); this.setTooltip(indicatorSpan, opts.tooltip, "top");
APP.translation.translateElement($(indicatorSpan)); APP.translation.translateElement($(indicatorSpan));
}
document.getElementById(videoSpanId) document.getElementById(videoSpanId)
.querySelector('.videocontainer__toptoolbar') .querySelector('.videocontainer__toptoolbar')

20
modules/UI/videolayout/ConnectionIndicator.js
View File

@ -249,7 +249,6 @@ ConnectionIndicator.prototype.showMore = function () {
function createIcon(classes, iconClass) { function createIcon(classes, iconClass) {
var icon = document.createElement("span"); var icon = document.createElement("span");
icon.classList.add("indicatoricon");
for(var i in classes) { for(var i in classes) {
icon.classList.add(classes[i]); icon.classList.add(classes[i]);
} }
@ -267,6 +266,7 @@ ConnectionIndicator.prototype.create = function () {
videoSpanId: this.videoContainer.videoSpanId, videoSpanId: this.videoContainer.videoSpanId,
indicatorId indicatorId
}); });
element.classList.add('show');
this.connectionIndicatorContainer = element; this.connectionIndicatorContainer = element;
let popoverContent = ( let popoverContent = (
@ -289,13 +289,19 @@ ConnectionIndicator.prototype.create = function () {
origShowFunc.call(this.popover); origShowFunc.call(this.popover);
}.bind(this); }.bind(this);
this.emptyIcon = this.connectionIndicatorContainer.appendChild( let connectionIconContainer = document.createElement('div');
createIcon(["connection", "connection_empty"], "icon-connection")); connectionIconContainer.className = 'connection indicatoricon';
this.fullIcon = this.connectionIndicatorContainer.appendChild(
createIcon(["connection", "connection_full"], "icon-connection"));
this.interruptedIndicator = this.connectionIndicatorContainer.appendChild( this.emptyIcon = connectionIconContainer.appendChild(
createIcon(["connection", "connection_lost"],"icon-connection-lost")); 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.interruptedIndicator).hide();
this.connectionIndicatorContainer.appendChild(connectionIconContainer);
}; };
/** /**