diff --git a/css/connection-info.scss b/css/_connection-info.scss similarity index 54% rename from css/connection-info.scss rename to css/_connection-info.scss index 323ad8873..eb0d406c4 100644 --- a/css/connection-info.scss +++ b/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; + } } diff --git a/css/_jitsi_popover.scss b/css/_jitsi_popover.scss index 7df8ae868..9efd0dadc 100644 --- a/css/_jitsi_popover.scss +++ b/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; - - - &:after { - border-width: 5px; - content: " "; - bottom: 1px; - margin-left: -5px; - @extend .jitsipopover__clear; - border-bottom-width: 0; - border-top-color: $popoverBg; - } + border-style: solid; + border-width: 5px; + border-bottom-width: 0; } } diff --git a/css/_popup_menu.scss b/css/_popup_menu.scss index 90c9dc752..069df31e6 100644 --- a/css/_popup_menu.scss +++ b/css/_popup_menu.scss @@ -1,7 +1,7 @@ /*Initialize*/ ul.popupmenu { - padding: 0px 10px 0px 10px; - margin: 0; + padding: 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); - border-radius:3px; + background-color: $popupMenuSelectedItemBackground; } /*Link Appearance*/ diff --git a/css/_variables.scss b/css/_variables.scss index fa560b004..0c8a54d33 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -1,8 +1,3 @@ -/** -* Theme -*/ -@import 'themes/main'; - /** * Style variables */ diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 630602d9b..8eadc8724 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -22,6 +22,12 @@ $primaryButtonFontWeight: 400; $buttonShadowColor: #192d4f; +/** +* Connection indicator +**/ +$downloadConnectionIconColor: #4abd04; +$uploadConnectionIconColor: #ffa800; + /** * Dialog colors **/ @@ -47,4 +53,5 @@ $dropdownColor: #333; // Popover colors $popoverBg: #000; -$popoverFontColor: #ffffff; \ No newline at end of file +$popoverFontColor: #ffffff; +$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2); \ No newline at end of file diff --git a/modules/UI/util/JitsiPopover.js b/modules/UI/util/JitsiPopover.js index 24acae8de..6331c647a 100644 --- a/modules/UI/util/JitsiPopover.js +++ b/modules/UI/util/JitsiPopover.js @@ -8,17 +8,14 @@ var JitsiPopover = (function () { */ function JitsiPopover(element, options) { - this.options = { - skin: "white", - content: "" - }; - if(options) - { - if(options.skin) - this.options.skin = options.skin; + let { skin, content, hasArrow } = options; + this.options = {}; + this.options.skin = skin || 'white'; + this.options.content = content || ''; + this.options.hasArrow = true; - if(options.content) - this.options.content = options.content; + if (typeof(hasArrow) !== 'undefined') { + this.options.hasArrow = false; } this.elementIsHovered = false; @@ -27,10 +24,7 @@ var JitsiPopover = (function () { element.data("jitsi_popover", this); this.element = element; - this.template = '
' + - '
' + - '
'; + this.template = this.getTemplate(); 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 = '
'; + } + return ( + `
+ ${arrow} +
+
` + ); + }; + /** * Shows the popover */ diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js index f9744fa37..f3de53b1e 100644 --- a/modules/UI/videolayout/ConnectionIndicator.js +++ b/modules/UI/videolayout/ConnectionIndicator.js @@ -80,10 +80,10 @@ ConnectionIndicator.prototype.generateText = function () { packetLoss = "N/A"; } else { - packetLoss = "↓" + + packetLoss = "↓" + (this.packetLoss.download !== null ? this.packetLoss.download : "N/A") + - "% ↑" + + "% ↑" + (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") + "%"; } @@ -104,8 +104,8 @@ ConnectionIndicator.prototype.generateText = function () { - ↓${downloadBitrate} - ↑${uploadBitrate} + ↓${downloadBitrate} + ↑${uploadBitrate} @@ -242,9 +242,9 @@ ConnectionIndicator.prototype.generateText = function () { "" + translate("connectionindicator.bandwidth") + "" + "" + - "↓" + + "↓" + downloadBandwidth + - " ↑" + + " ↑" + uploadBandwidth + ""; result += transport + ""; diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 6749de3af..a51b97cbd 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/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( - $("#" + this.videoSpanId + " .remotevideomenu"), - { content: popupMenuElement.outerHTML, - skin: "black"}); + let options = { + content: popupMenuElement.outerHTML, + 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