BEMificated classes and add title
This commit is contained in:
parent
c54938374d
commit
26792625f2
|
@ -21,7 +21,9 @@
|
||||||
margin-bottom: 35px;
|
margin-bottom: 35px;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
text-align: center;
|
text-align: left;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
|
|
|
@ -76,7 +76,7 @@ var JitsiPopover = (function () {
|
||||||
*/
|
*/
|
||||||
JitsiPopover.prototype.createPopover = function () {
|
JitsiPopover.prototype.createPopover = function () {
|
||||||
$("body").append(this.template);
|
$("body").append(this.template);
|
||||||
$(".jitsipopover > .jitsipopover-content").html(this.options.content);
|
$(".jitsipopover > .jitsipopover__content").html(this.options.content);
|
||||||
var self = this;
|
var self = this;
|
||||||
$(".jitsipopover").on("mouseenter", function () {
|
$(".jitsipopover").on("mouseenter", function () {
|
||||||
self.popoverIsHovered = true;
|
self.popoverIsHovered = true;
|
||||||
|
@ -103,7 +103,7 @@ var JitsiPopover = (function () {
|
||||||
$(".jitsipopover").css(
|
$(".jitsipopover").css(
|
||||||
{top: position.top, left: position.left, display: "table"});
|
{top: position.top, left: position.left, display: "table"});
|
||||||
$(".jitsipopover > .arrow").css({left: calcLeft});
|
$(".jitsipopover > .arrow").css({left: calcLeft});
|
||||||
$(".jitsipopover > .jitsiPopupmenuPadding").css(
|
$(".jitsipopover > .jitsipopover__menu-padding").css(
|
||||||
{left: calcLeft - 50});
|
{left: calcLeft - 50});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -95,21 +95,47 @@ ConnectionIndicator.prototype.generateText = function () {
|
||||||
return `${width}x${height}`;
|
return `${width}x${height}`;
|
||||||
}).join(', ') || 'N/A';
|
}).join(', ') || 'N/A';
|
||||||
|
|
||||||
var result = "<table style='width:100%'>" +
|
let headerKey = 'connectionindicator.header';
|
||||||
"<tr>" +
|
let result = (
|
||||||
"<td><span data-i18n='connectionindicator.bitrate'>" +
|
`<table style='width:100%'>
|
||||||
translate("connectionindicator.bitrate") + "</span></td>" +
|
<tr>
|
||||||
"<td><span class='jitsipopover__green'>↓</span>" +
|
<td>
|
||||||
downloadBitrate + " <span class='jitsipopover__orange'>↑</span>" +
|
<span class="jitsipopover__title"
|
||||||
uploadBitrate + "</td>" +
|
data-i18n="">${translate(headerKey)}</span>
|
||||||
"</tr><tr>" +
|
</td>
|
||||||
"<td><span data-i18n='connectionindicator.packetloss'>" +
|
</tr>
|
||||||
translate("connectionindicator.packetloss") + "</span></td>" +
|
<tr>
|
||||||
"<td>" + packetLoss + "</td>" +
|
<td>
|
||||||
"</tr><tr>" +
|
<span data-i18n='connectionindicator.bitrate'>
|
||||||
"<td><span data-i18n='connectionindicator.resolution'>" +
|
${translate("connectionindicator.bitrate")}
|
||||||
translate("connectionindicator.resolution") + "</span></td>" +
|
</span>
|
||||||
"<td>" + resolutionStr + "</td></tr></table>";
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class='jitsipopover__green'>↓</span>
|
||||||
|
${downloadBitrate}
|
||||||
|
<span class='jitsipopover__orange'>↑</span>
|
||||||
|
${uploadBitrate}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<span data-i18n='connectionindicator.packetloss'>
|
||||||
|
${translate("connectionindicator.packetloss")}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>${packetLoss}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<span data-i18n='connectionindicator.resolution'>
|
||||||
|
${translate("connectionindicator.resolution")}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
${resolutionStr}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>`);
|
||||||
|
|
||||||
if(this.videoContainer.videoSpanId == "localVideoContainer") {
|
if(this.videoContainer.videoSpanId == "localVideoContainer") {
|
||||||
result += "<a class=\"jitsipopover__showmore link\" " +
|
result += "<a class=\"jitsipopover__showmore link\" " +
|
||||||
|
@ -232,7 +258,7 @@ ConnectionIndicator.prototype.generateText = function () {
|
||||||
|
|
||||||
result += transport + "</table>";
|
result += transport + "</table>";
|
||||||
}
|
}
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue