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

updates in connection indicator styles

This commit is contained in:
Ilya Daynatovich 2016-10-19 17:57:16 +03:00
parent 9078596f3a
commit c09e10a584
5 changed files with 40 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/_jitsi_popover.scss
View File

@ -32,9 +32,8 @@
text-align: center; text-align: center;
} }
&__icon { &__icon {
margin-right: 5px; margin-right: 2px;
} }
&__green &__green
@ -56,8 +55,7 @@
bottom: -35px; bottom: -35px;
} }
&__showmore &__showmore {
{
display: block; display: block;
text-align: center; text-align: center;
width: 90px; width: 90px;
@ -74,22 +72,23 @@
} }
> .arrow { > .arrow {
border-width: 5px; border-width: 5px 2.5px 0 2.5px;
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;
@extend .jitsipopover__clear;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: $popoverBg; border-top-color: $popoverBg;
bottom: -5px; bottom: -5px;
@extend .jitsipopover__clear;
&:after { &:after {
border-width: 5px; border-width: 5px;
content: " "; content: " ";
bottom: 1px; bottom: 1px;
margin-left: -5px; margin-left: -5px;
@extend .jitsipopover__clear;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: $popoverBg; border-top-color: $popoverBg;
@extend .jitsipopover__clear;
} }
} }
} }

23
css/_videolayout_default.scss
View File

@ -261,29 +261,6 @@
height: 13px; height: 13px;
} }
.connection_info
{
float: left;
padding-bottom: 5px;
}
.connection_info > table
{
white-space: nowrap;
}
.connection_info, .connection_info > table
{
text-align: left;
font-size: 12px;
font-weight: 400;
color: $popoverFontColor;
td {
padding: 5px 0;
}
}
#localVideoContainer>span.status:hover, #localVideoContainer>span.status:hover,
#localVideoContainer .displayname:hover { #localVideoContainer .displayname:hover {
cursor: text; cursor: text;

26
css/connection-info.scss Normal file
View File

@ -0,0 +1,26 @@
%connection-info {
text-align: left;
font-size: 12px;
font-weight: 400;
color: $popoverFontColor;
td {
padding: 2px 0;
}
}
.connection-info
{
float: left;
padding-bottom: 5px;
@extend %connection-info;
> table {
white-space: nowrap;
@extend %connection-info;
}
td:nth-child(n-1) {
padding-left: 5px;
}
}

1
css/main.scss
View File

@ -61,5 +61,6 @@
@import 'shortcuts/main'; @import 'shortcuts/main';
@import 'buttons/button-control'; @import 'buttons/button-control';
@import "modals/invite/invite"; @import "modals/invite/invite";
@import "connection-info";
/* Modules END */ /* Modules END */

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

@ -95,15 +95,8 @@ ConnectionIndicator.prototype.generateText = function () {
return `${width}x${height}`; return `${width}x${height}`;
}).join(', ') || 'N/A'; }).join(', ') || 'N/A';
let headerKey = 'connectionindicator.header';
let result = ( let result = (
`<table style='width:100%'> `<table class="connection-info__container" style='width:100%'>
<tr>
<td>
<span class="jitsipopover__title"
data-i18n="">${translate(headerKey)}</span>
</td>
</tr>
<tr> <tr>
<td> <td>
<span data-i18n='connectionindicator.bitrate'> <span data-i18n='connectionindicator.bitrate'>
@ -111,10 +104,8 @@ ConnectionIndicator.prototype.generateText = function () {
</span> </span>
</td> </td>
<td> <td>
<span class='jitsipopover__green'>&darr;</span> <span class='jitsipopover__green'>&darr;</span>${downloadBitrate}
${downloadBitrate} <span class='jitsipopover__orange'>&uarr;</span>${uploadBitrate}
<span class='jitsipopover__orange'>&uarr;</span>
${uploadBitrate}
</td> </td>
</tr> </tr>
<tr> <tr>
@ -245,7 +236,7 @@ ConnectionIndicator.prototype.generateText = function () {
} }
result += "<table style='width:100%'>" + result += "<table class='connection-info__container' style='width:100%'>" +
"<tr>" + "<tr>" +
"<td>" + "<td>" +
"<span data-i18n='connectionindicator.bandwidth'>" + "<span data-i18n='connectionindicator.bandwidth'>" +
@ -292,7 +283,7 @@ ConnectionIndicator.prototype.create = function () {
this.connectionIndicatorContainer); this.connectionIndicatorContainer);
this.popover = new JitsiPopover( this.popover = new JitsiPopover(
$("#" + this.videoContainer.videoSpanId + " > .connectionindicator"), $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"),
{content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" + {content: "<div class=\"connection-info\" data-i18n='connectionindicator.na'>" +
APP.translation.translateString("connectionindicator.na") + "</div>", APP.translation.translateString("connectionindicator.na") + "</div>",
skin: "black"}); skin: "black"});
@ -405,9 +396,9 @@ ConnectionIndicator.prototype.updatePopoverData = function (force) {
// popover is visible or we force to do so. // popover is visible or we force to do so.
if(this.popover.popoverShown || force) { if(this.popover.popoverShown || force) {
this.popover.updateContent( this.popover.updateContent(
`<div class="connection_info">${this.generateText()}</div>` `<div class="connection-info">${this.generateText()}</div>`
); );
APP.translation.translateElement($(".connection_info")); APP.translation.translateElement($(".connection-info"));
} }
}; };