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

Connection indicator restyle

css/_base.scss

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

css/_jitsi_popover.scss

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

css/_variables.scss

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

css/_videolayout_default.scss

@@ -260,24 +260,6 @@
     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 .displayname:hover {
     cursor: text;

css/connection-info.scss

@@ -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;
+    }
+}

css/main.scss

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

css/themes/_light.scss

@@ -43,4 +43,8 @@ $labelFontWeight: 400;
 $hintFontSize: em(13, 14);
 $linkFontColor: #3572b0;
 $linkHoverFontColor: darken(#3572b0, 10%);
-$dropdownColor: #333;
+$dropdownColor: #333;
+
+// Popover colors
+$popoverBg: #000;
+$popoverFontColor: #ffffff;

lang/main.json

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

modules/UI/UI.js

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

modules/UI/util/JitsiPopover.js

@@ -29,8 +29,8 @@ var JitsiPopover = (function () {
         this.element = element;
         this.template = ' <div class="jitsipopover ' + this.options.skin +
             '"><div class="arrow"></div>' +
-            '<div class="jitsipopover-content"></div>' +
-            '<div class="jitsiPopupmenuPadding"></div></div>';
+            '<div class="jitsipopover__content"></div>' +
+            '<div class="jitsipopover__menu-padding"></div></div>';
         var self = this;
         this.element.on("mouseenter", function () {
             self.elementIsHovered = true;
@@ -76,7 +76,7 @@ var JitsiPopover = (function () {
      */
     JitsiPopover.prototype.createPopover = function () {
         $("body").append(this.template);
-        $(".jitsipopover > .jitsipopover-content").html(this.options.content);
+        $(".jitsipopover > .jitsipopover__content").html(this.options.content);
         var self = this;
         $(".jitsipopover").on("mouseenter", function () {
             self.popoverIsHovered = true;
@@ -103,7 +103,7 @@ var JitsiPopover = (function () {
                 $(".jitsipopover").css(
                     {top: position.top, left: position.left, display: "table"});
                 $(".jitsipopover > .arrow").css({left: calcLeft});
-                $(".jitsipopover > .jitsiPopupmenuPadding").css(
+                $(".jitsipopover > .jitsipopover__menu-padding").css(
                     {left: calcLeft - 50});
             }
         });

modules/UI/videolayout/ConnectionIndicator.js

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