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

Merge pull request #1007 from BeatC/connection-indicator-restyle 

Connection indicator restyle
This commit is contained in:
yanas 2016-10-20 11:08:51 -05:00 committed by GitHub
parent 8ca0943881 c09e10a584
commit 3bf8b7fbe2
11 changed files with 160 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/_base.scss
View File

@ -186,6 +186,7 @@ form {
} }
.link { .link {
cursor: pointer;
color: $linkFontColor; color: $linkFontColor;
@include transition(color .1s ease-out); @include transition(color .1s ease-out);

145
css/_jitsi_popover.scss
View File

@ -8,98 +8,87 @@
min-width: 100px; min-width: 100px;
padding: 1px; padding: 1px;
text-align: left; text-align: left;
color: #333333; color: $popoverFontColor;
background-color: #ffffff; background-color: $popoverBg;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #cccccc; border: 1px solid $popoverBg;
border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px;
border-radius: 6px;
/*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/ /*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/ /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/
white-space: normal; white-space: normal;
margin-top: -10px; margin-top: -10px;
margin-bottom: 35px; margin-bottom: 35px;
}
.jitsipopover.black &__title {
{ text-align: left;
background-color: rgba(0,0,0,0.8); margin: 0;
color: #ffffff; padding: 0;
} }
.jitsipopover-content { &__content {
padding: 9px 14px; padding: em(5) em(10);
font-size: 10pt; font-size: em(14);
white-space:pre-wrap; white-space:pre-wrap;
text-align: center; text-align: center;
} }
.jitsipopover > .arrow, &__icon {
.jitsipopover > .arrow:after { margin-right: 2px;
position: absolute; }
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.jitsipopover > .arrow { &__green
border-width: 11px; {
left: 50%; @extend .jitsipopover__icon;
margin-left: -11px; color: #4abd04;
border-bottom-width: 0; }
border-top-color: #999999;
border-top-color: rgba(0, 0, 0, 0.25);
bottom: -11px;
}
.jitsipopover > .arrow:after {
border-width: 10px;
content: " ";
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #ffffff;
}
.jitsipopover.black > .arrow:after &__orange
{ {
border-top-color: rgba(0, 0, 0, 0.8); @extend .jitsipopover__icon;
} color: #ffa800;
}
.jitsiPopupmenuPadding { &__menu-padding {
height: 35px; height: 35px;
width: 100px; width: 100px;
position: absolute; position: absolute;
bottom: -35px; bottom: -35px;
} }
.jitsipopover_green &__showmore {
{ display: block;
color: #4abd04; text-align: center;
} width: 90px;
margin: 10px auto;
}
.jitsipopover_orange &__clear {
{ position: absolute;
color: #ffa800; display: block;
} width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.jitsipopover_blue > .arrow {
{ border-width: 5px 2.5px 0 2.5px;
color: #21B9FC; left: 50%;
} margin-left: -5px;
@extend .jitsipopover__clear;
border-bottom-width: 0;
border-top-color: $popoverBg;
bottom: -5px;
.jitsipopover_showmore
{ &:after {
background-color: #21B9FC; border-width: 5px;
color: #ffffff; content: " ";
cursor: pointer; bottom: 1px;
border-radius: 3px; margin-left: -5px;
text-align: center; @extend .jitsipopover__clear;
width: 90px; border-bottom-width: 0;
height: 16px; border-top-color: $popoverBg;
padding-top: 4px; }
padding-left: 10px; }
padding-right: 10px;
margin: 15px auto 0px auto;
} }

5
css/_variables.scss
View File

@ -1,3 +1,8 @@
/**
* Theme
*/
@import 'themes/main';
/** /**
* Style variables * Style variables
*/ */

18
css/_videolayout_default.scss
View File

@ -260,24 +260,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: 11px;
color: #ffffff;
}
#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 */

4
css/themes/_light.scss
View File

@ -44,3 +44,7 @@ $hintFontSize: em(13, 14);
$linkFontColor: #3572b0; $linkFontColor: #3572b0;
$linkHoverFontColor: darken(#3572b0, 10%); $linkHoverFontColor: darken(#3572b0, 10%);
$dropdownColor: #333; $dropdownColor: #333;
// Popover colors
$popoverBg: #000;
$popoverFontColor: #ffffff;

1
lang/main.json
View File

@ -151,6 +151,7 @@
}, },
"connectionindicator": "connectionindicator":
{ {
"header": "Connection data",
"bitrate": "Bitrate:", "bitrate": "Bitrate:",
"packetloss": "Packet loss:", "packetloss": "Packet loss:",
"resolution": "Resolution:", "resolution": "Resolution:",

1
modules/UI/UI.js
View File

@ -764,6 +764,7 @@ UI.getRemoteVideoType = function (jid) {
UI.connectionIndicatorShowMore = function(id) { UI.connectionIndicatorShowMore = function(id) {
VideoLayout.showMore(id); VideoLayout.showMore(id);
return false;
}; };
// FIXME check if someone user this // FIXME check if someone user this

8
modules/UI/util/JitsiPopover.js
View File

@ -29,8 +29,8 @@ var JitsiPopover = (function () {
this.element = element; this.element = element;
this.template = ' <div class="jitsipopover ' + this.options.skin + this.template = ' <div class="jitsipopover ' + this.options.skin +
'"><div class="arrow"></div>' + '"><div class="arrow"></div>' +
'<div class="jitsipopover-content"></div>' + '<div class="jitsipopover__content"></div>' +
'<div class="jitsiPopupmenuPadding"></div></div>'; '<div class="jitsipopover__menu-padding"></div></div>';
var self = this; var self = this;
this.element.on("mouseenter", function () { this.element.on("mouseenter", function () {
self.elementIsHovered = true; self.elementIsHovered = true;
@ -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});
} }
}); });

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

@ -80,10 +80,10 @@ ConnectionIndicator.prototype.generateText = function () {
packetLoss = "N/A"; packetLoss = "N/A";
} else { } else {
packetLoss = "<span class='jitsipopover_green'>&darr;</span>" + packetLoss = "<span class='jitsipopover__green'>&darr;</span>" +
(this.packetLoss.download !== null ? (this.packetLoss.download !== null ?
this.packetLoss.download : "N/A") + this.packetLoss.download : "N/A") +
"% <span class='jitsipopover_orange'>&uarr;</span>" + "% <span class='jitsipopover__orange'>&uarr;</span>" +
(this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") + (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
"%"; "%";
} }
@ -95,31 +95,48 @@ 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 result = (
"<tr>" + `<table class="connection-info__container" style='width:100%'>
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.bitrate'>" + <tr>
translate("connectionindicator.bitrate") + "</span></td>" + <td>
"<td><span class='jitsipopover_green'>&darr;</span>" + <span data-i18n='connectionindicator.bitrate'>
downloadBitrate + " <span class='jitsipopover_orange'>&uarr;</span>" + ${translate("connectionindicator.bitrate")}
uploadBitrate + "</td>" + </span>
"</tr><tr>" + </td>
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.packetloss'>" + <td>
translate("connectionindicator.packetloss") + "</span></td>" + <span class='jitsipopover__green'>&darr;</span>${downloadBitrate}
"<td>" + packetLoss + "</td>" + <span class='jitsipopover__orange'>&uarr;</span>${uploadBitrate}
"</tr><tr>" + </td>
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.resolution'>" + </tr>
translate("connectionindicator.resolution") + "</span></td>" + <tr>
"<td>" + resolutionStr + "</td></tr></table>"; <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 += "<div class=\"jitsipopover_showmore\" " + result += "<a class=\"jitsipopover__showmore link\" " +
"onclick = \"APP.UI.connectionIndicatorShowMore('" + "onclick = \"APP.UI.connectionIndicatorShowMore('" +
// FIXME: we do not know local id when this text is generated // FIXME: we do not know local id when this text is generated
//this.id + "')\" data-i18n='connectionindicator." + //this.id + "')\" data-i18n='connectionindicator." +
"local')\" data-i18n='connectionindicator." + "local')\" data-i18n='connectionindicator." +
(this.showMoreValue ? "less" : "more") + "'>" + (this.showMoreValue ? "less" : "more") + "'>" +
translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) + translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) +
"</div><br />"; "</a>";
} }
if (this.showMoreValue) { if (this.showMoreValue) {
@ -138,7 +155,7 @@ ConnectionIndicator.prototype.generateText = function () {
if (!this.transport || this.transport.length === 0) { if (!this.transport || this.transport.length === 0) {
transport = "<tr>" + transport = "<tr>" +
"<td><span class='jitsipopover_blue' " + "<td><span " +
"data-i18n='connectionindicator.address'>" + "data-i18n='connectionindicator.address'>" +
translate("connectionindicator.address") + "</span></td>" + translate("connectionindicator.address") + "</span></td>" +
"<td> N/A</td></tr>"; "<td> N/A</td></tr>";
@ -171,7 +188,7 @@ ConnectionIndicator.prototype.generateText = function () {
var local_address_key = "connectionindicator.localaddress"; var local_address_key = "connectionindicator.localaddress";
var remote_address_key = "connectionindicator.remoteaddress"; var remote_address_key = "connectionindicator.remoteaddress";
var localTransport = var localTransport =
"<tr><td><span class='jitsipopover_blue' data-i18n='" + "<tr><td><span data-i18n='" +
local_address_key +"' data-i18n-options='" + local_address_key +"' data-i18n-options='" +
JSON.stringify({count: data.localIP.length}) + "'>" + JSON.stringify({count: data.localIP.length}) + "'>" +
translate(local_address_key, {count: data.localIP.length}) + translate(local_address_key, {count: data.localIP.length}) +
@ -179,7 +196,7 @@ ConnectionIndicator.prototype.generateText = function () {
ConnectionIndicator.getStringFromArray(data.localIP) + ConnectionIndicator.getStringFromArray(data.localIP) +
"</td></tr>"; "</td></tr>";
transport = transport =
"<tr><td><span class='jitsipopover_blue' data-i18n='" + "<tr><td><span data-i18n='" +
remote_address_key + "' data-i18n-options='" + remote_address_key + "' data-i18n-options='" +
JSON.stringify({count: data.remoteIP.length}) + "'>" + JSON.stringify({count: data.remoteIP.length}) + "'>" +
translate(remote_address_key, translate(remote_address_key,
@ -193,14 +210,14 @@ ConnectionIndicator.prototype.generateText = function () {
transport += "<tr>" + transport += "<tr>" +
"<td>" + "<td>" +
"<span class='jitsipopover_blue' data-i18n='" + key_remote + "<span data-i18n='" + key_remote +
"' data-i18n-options='" + "' data-i18n-options='" +
JSON.stringify({count: this.transport.length}) + "'>" + JSON.stringify({count: this.transport.length}) + "'>" +
translate(key_remote, {count: this.transport.length}) + translate(key_remote, {count: this.transport.length}) +
"</span></td><td>"; "</span></td><td>";
localTransport += "<tr>" + localTransport += "<tr>" +
"<td>" + "<td>" +
"<span class='jitsipopover_blue' data-i18n='" + key_local + "<span data-i18n='" + key_local +
"' data-i18n-options='" + "' data-i18n-options='" +
JSON.stringify({count: this.transport.length}) + "'>" + JSON.stringify({count: this.transport.length}) + "'>" +
translate(key_local, {count: this.transport.length}) + translate(key_local, {count: this.transport.length}) +
@ -213,21 +230,21 @@ ConnectionIndicator.prototype.generateText = function () {
transport += "</td></tr>"; transport += "</td></tr>";
transport += localTransport + "</td></tr>"; transport += localTransport + "</td></tr>";
transport +="<tr>" + transport +="<tr>" +
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.transport'>" + "<td><span data-i18n='connectionindicator.transport'>" +
translate("connectionindicator.transport") + "</span></td>" + translate("connectionindicator.transport") + "</span></td>" +
"<td>" + this.transport[0].type + "</td></tr>"; "<td>" + this.transport[0].type + "</td></tr>";
} }
result += "<table style='width:100%'>" + result += "<table class='connection-info__container' style='width:100%'>" +
"<tr>" + "<tr>" +
"<td>" + "<td>" +
"<span class='jitsipopover_blue' data-i18n='connectionindicator.bandwidth'>" + "<span data-i18n='connectionindicator.bandwidth'>" +
translate("connectionindicator.bandwidth") + "</span>" + translate("connectionindicator.bandwidth") + "</span>" +
"</td><td>" + "</td><td>" +
"<span class='jitsipopover_green'>&darr;</span>" + "<span class='jitsipopover__green'>&darr;</span>" +
downloadBandwidth + downloadBandwidth +
" <span class='jitsipopover_orange'>&uarr;</span>" + " <span class='jitsipopover__orange'>&uarr;</span>" +
uploadBandwidth + "</td></tr>"; uploadBandwidth + "</td></tr>";
result += transport + "</table>"; result += transport + "</table>";
@ -266,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"});
@ -379,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"));
} }
}; };