Merge pull request #1048 from BeatC/menu-restyle

Menu restyle

css/_connection-info.scss

@@ -12,7 +12,8 @@
 .connection-info
 {
     float: left;
-    padding-bottom: 5px;
+    padding: 5px;
+    padding-left: 0;
     @extend %connection-info;
 
     > table {
@@ -23,4 +24,20 @@
     td:nth-child(n-1) {
         padding-left: 5px;
     }
+
+    &__icon {
+        margin-right: 2px;
+    }
+
+    &__download
+    {
+        @extend .connection-info__icon;
+        color: $downloadConnectionIconColor;
+    }
+
+    &__upload
+    {
+        @extend .connection-info__icon;
+        color: $uploadConnectionIconColor;
+    }
 }

css/_jitsi_popover.scss

@@ -6,12 +6,10 @@
     display: none;
     max-width: 300px;
     min-width: 100px;
-    padding: 1px;
     text-align: left;
     color: $popoverFontColor;
     background-color: $popoverBg;
     background-clip: padding-box;
-    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);*/
@@ -19,35 +17,6 @@
     margin-top: -10px;
     margin-bottom: 35px;
 
-    &__title {
-        text-align: left;
-        margin: 0;
-        padding: 0;
-    }
-
-    &__content {
-        padding: em(5) em(10);
-        font-size: em(14);
-        white-space:pre-wrap;
-        text-align: center;
-    }
-
-    &__icon {
-        margin-right: 2px;
-    }
-
-    &__green
-    {
-        @extend .jitsipopover__icon;
-        color: #4abd04;
-    }
-
-    &__orange
-    {
-        @extend .jitsipopover__icon;
-        color: #ffa800;
-    }
-
     &__menu-padding {
         height: 35px;
         width: 100px;
@@ -62,33 +31,18 @@
         margin: 10px auto;
     }
 
-    &__clear {
+    > .arrow {
         position: absolute;
         display: block;
+        left: 50%;
+        bottom: -5px;
+        margin-left: -5px;
         width: 0;
         height: 0;
         border-color: transparent;
-        border-style: solid;
-    }
-
-    > .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;
+        border-style: solid;
-
+        border-width: 5px;
-
+        border-bottom-width: 0;
-        &:after {
-            border-width: 5px;
-            content: " ";
-            bottom: 1px;
-            margin-left: -5px;
-            @extend .jitsipopover__clear;
-            border-bottom-width: 0;
-            border-top-color: $popoverBg;
-        }
     }
 }

css/_popup_menu.scss

@@ -1,7 +1,7 @@
 /*Initialize*/
 ul.popupmenu {
-    padding: 0px 10px 0px 10px;
+    padding: 0;
-    margin: 0;
+    margin: 2px 0;
     bottom: 0;
     width: 100px;
     height: auto;
@@ -13,8 +13,7 @@ ul.popupmenu li {
 }
 
 ul.popupmenu li:hover {
-    background-color: rgba(256, 256, 256, .2);
+    background-color: $popupMenuSelectedItemBackground;
-    border-radius:3px;
 }
 
 /*Link Appearance*/

css/_variables.scss

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

css/themes/_light.scss

@@ -22,6 +22,12 @@ $primaryButtonFontWeight: 400;
 
 $buttonShadowColor: #192d4f;
 
+/**
+* Connection indicator
+**/
+$downloadConnectionIconColor: #4abd04;
+$uploadConnectionIconColor: #ffa800;
+
 /**
  * Dialog colors
  **/
@@ -48,3 +54,4 @@ $dropdownColor: #333;
 // Popover colors
 $popoverBg: #000;
 $popoverFontColor: #ffffff;
+$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);

modules/UI/util/JitsiPopover.js

@@ -8,17 +8,14 @@ var JitsiPopover = (function () {
      */
     function JitsiPopover(element, options)
     {
-        this.options = {
+        let { skin, content, hasArrow } = options;
-            skin: "white",
+        this.options = {};
-            content: ""
+        this.options.skin = skin || 'white';
-        };
+        this.options.content = content || '';
-        if(options)
+        this.options.hasArrow = true;
-        {
-            if(options.skin)
-                this.options.skin = options.skin;
 
-            if(options.content)
+        if (typeof(hasArrow) !== 'undefined') {
-                this.options.content = options.content;
+            this.options.hasArrow = false;
         }
 
         this.elementIsHovered = false;
@@ -27,10 +24,7 @@ var JitsiPopover = (function () {
 
         element.data("jitsi_popover", this);
         this.element = element;
-        this.template = ' <div class="jitsipopover ' + this.options.skin +
+        this.template = this.getTemplate();
-            '"><div class="arrow"></div>' +
-            '<div class="jitsipopover__content"></div>' +
-            '<div class="jitsipopover__menu-padding"></div></div>';
         var self = this;
         this.element.on("mouseenter", function () {
             self.elementIsHovered = true;
@@ -43,6 +37,22 @@ var JitsiPopover = (function () {
         });
     }
 
+    /**
+     * Returns template for popover
+     */
+    JitsiPopover.prototype.getTemplate = function () {
+        let arrow = '';
+        if (this.options.hasArrow) {
+            arrow = '<div class="arrow"></div>';
+        }
+        return  (
+            `<div class="jitsipopover ${this.options.skin}">
+                ${arrow}
+                <div class="jitsipopover__content"></div>
+            <div class="jitsipopover__menu-padding"></div></div>`
+        );
+    };
+
     /**
      * Shows the popover
      */

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='connection-info__download'>&darr;</span>" +
             (this.packetLoss.download !== null ?
                 this.packetLoss.download : "N/A") +
-            "% <span class='jitsipopover__orange'>&uarr;</span>" +
+            "% <span class='connection-info__upload'>&uarr;</span>" +
             (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
             "%";
     }
@@ -104,8 +104,8 @@ ConnectionIndicator.prototype.generateText = function () {
                     </span>
                 </td>
                 <td>
-                    <span class='jitsipopover__green'>&darr;</span>${downloadBitrate}
+                    <span class='connection-info__download'>&darr;</span>${downloadBitrate}
-                    <span class='jitsipopover__orange'>&uarr;</span>${uploadBitrate}
+                    <span class='connection-info__upload'>&uarr;</span>${uploadBitrate}
                 </td>
             </tr>
             <tr>
@@ -242,9 +242,9 @@ ConnectionIndicator.prototype.generateText = function () {
             "<span data-i18n='connectionindicator.bandwidth'>" +
             translate("connectionindicator.bandwidth") + "</span>" +
             "</td><td>" +
-            "<span class='jitsipopover__green'>&darr;</span>" +
+            "<span class='connection-info__download'>&darr;</span>" +
             downloadBandwidth +
-            " <span class='jitsipopover__orange'>&uarr;</span>" +
+            " <span class='connection-info__upload'>&uarr;</span>" +
             uploadBandwidth + "</td></tr>";
 
         result += transport + "</table>";

modules/UI/videolayout/RemoteVideo.js

@@ -75,14 +75,17 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
  * to display in the popup
  */
 RemoteVideo.prototype._initPopupMenu = function (popupMenuElement) {
-    this.popover = new JitsiPopover(
+    let options = {
-        $("#" + this.videoSpanId + " .remotevideomenu"),
+        content: popupMenuElement.outerHTML,
-        {   content: popupMenuElement.outerHTML,
+        skin: "black",
-            skin: "black"});
+        hasArrow: false
+    };
+    let element = $("#" + this.videoSpanId + " .remotevideomenu");
+    this.popover = new JitsiPopover(element, options);
 
     // override popover show method to make sure we will update the content
     // before showing the popover
-    var origShowFunc = this.popover.show;
+    let origShowFunc = this.popover.show;
     this.popover.show = function () {
         // update content by forcing it, to finish even if popover
         // is not visible