From b7fccf50409693d98e71d46ccaaf1244f12e99b4 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 13 Oct 2016 16:15:20 +0300 Subject: [PATCH 1/7] Update styles for popover --- css/_base.scss | 1 + css/_variables.scss | 7 ++++++- css/_videolayout_default.scss | 9 +++++++-- css/themes/_light.scss | 8 +++++++- lang/main.json | 1 + modules/UI/UI.js | 1 + 6 files changed, 23 insertions(+), 4 deletions(-) diff --git a/css/_base.scss b/css/_base.scss index 5799760db..11c097596 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -184,6 +184,7 @@ form { } .link { + cursor: pointer; color: $linkFontColor; @include transition(color .1s ease-out); diff --git a/css/_variables.scss b/css/_variables.scss index f3b6a3751..a25b79774 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -1,3 +1,8 @@ +/** +* Theme +*/ +@import 'themes/main'; + /** * Style variables */ @@ -28,10 +33,10 @@ $tooltipBg: rgba(0,0,0, 0.7); // Toolbar $toolbarSelectBackground: rgba(0, 0, 0, .6); + $toolbarBadgeBackground: #165ECC; $toolbarBadgeColor: #FFFFFF; $toolbarToggleBackground: #12499C; -$splitterToolbarButtonLeftMargin: 0px; // Main controls $inputSemiBackground: rgba(132, 132, 132, .8); diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 9d599df6c..cb6f6c69c 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -275,8 +275,13 @@ .connection_info, .connection_info > table { text-align: left; - font-size: 11px; - color: #ffffff; + font-size: 12px; + font-weight: 400; + color: $auiDialogColor; + + td { + padding: 5px 0; + } } #localVideoContainer>span.status:hover, diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 672018aca..698fa738d 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -43,4 +43,10 @@ $labelFontWeight: 400; $hintFontSize: em(13, 14); $linkFontColor: #3572b0; $linkHoverFontColor: darken(#3572b0, 10%); -$dropdownColor: #333; \ No newline at end of file +$dropdownColor: #333; + +// Popover colors +$popoverArrowBorderColor: rgba(0, 0, 0, 0.25); +$popoverArrowBorderColorFallback: #999999; +$popoverBorderColor: rgba(0, 0, 0, 0.2); +$popoverBorderColorFallback: #cccccc; \ No newline at end of file diff --git a/lang/main.json b/lang/main.json index ec374f8e8..c3c67a07a 100644 --- a/lang/main.json +++ b/lang/main.json @@ -151,6 +151,7 @@ }, "connectionindicator": { + "header": "Connection data", "bitrate": "Bitrate:", "packetloss": "Packet loss:", "resolution": "Resolution:", diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 6a62d5042..e9ef917ab 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -758,6 +758,7 @@ UI.getRemoteVideoType = function (jid) { UI.connectionIndicatorShowMore = function(id) { VideoLayout.showMore(id); + return false; }; // FIXME check if someone user this From 83e7f23d0f462bc3de7fc276ad8f99f59e10978b Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 13 Oct 2016 16:16:13 +0300 Subject: [PATCH 2/7] Update Connection indicator and popover js --- modules/UI/util/JitsiPopover.js | 4 +- modules/UI/videolayout/ConnectionIndicator.js | 38 +++++++++---------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/modules/UI/util/JitsiPopover.js b/modules/UI/util/JitsiPopover.js index f99d57747..92267c11e 100644 --- a/modules/UI/util/JitsiPopover.js +++ b/modules/UI/util/JitsiPopover.js @@ -29,8 +29,8 @@ var JitsiPopover = (function () { this.element = element; this.template = '
' + - '
' + - '
'; + '
' + + '
'; var self = this; this.element.on("mouseenter", function () { self.elementIsHovered = true; diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js index f7056f9d1..765cd17d9 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") + "%"; } @@ -97,29 +97,29 @@ ConnectionIndicator.prototype.generateText = function () { var result = "" + "" + - "" + - "" + "" + - "" + "" + "" + - "" + "
" + + "" + translate("connectionindicator.bitrate") + "↓" + - downloadBitrate + " ↑" + + "↓" + + downloadBitrate + " ↑" + uploadBitrate + "
" + + "" + translate("connectionindicator.packetloss") + "" + packetLoss + "
" + + "" + translate("connectionindicator.resolution") + "" + resolutionStr + "
"; if(this.videoContainer.videoSpanId == "localVideoContainer") { - result += "
" + translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) + - "

"; + ""; } if (this.showMoreValue) { @@ -138,7 +138,7 @@ ConnectionIndicator.prototype.generateText = function () { if (!this.transport || this.transport.length === 0) { transport = "" + - "" + translate("connectionindicator.address") + "" + " N/A"; @@ -171,7 +171,7 @@ ConnectionIndicator.prototype.generateText = function () { var local_address_key = "connectionindicator.localaddress"; var remote_address_key = "connectionindicator.remoteaddress"; var localTransport = - "" + translate(local_address_key, {count: data.localIP.length}) + @@ -179,7 +179,7 @@ ConnectionIndicator.prototype.generateText = function () { ConnectionIndicator.getStringFromArray(data.localIP) + ""; transport = - "" + translate(remote_address_key, @@ -193,14 +193,14 @@ ConnectionIndicator.prototype.generateText = function () { transport += "" + "" + - "" + translate(key_remote, {count: this.transport.length}) + ""; localTransport += "" + "" + - "" + translate(key_local, {count: this.transport.length}) + @@ -213,7 +213,7 @@ ConnectionIndicator.prototype.generateText = function () { transport += ""; transport += localTransport + ""; transport +="" + - "" + + "" + translate("connectionindicator.transport") + "" + "" + this.transport[0].type + ""; @@ -222,17 +222,17 @@ ConnectionIndicator.prototype.generateText = function () { result += "" + "" + ""; result += transport + "
" + - "" + + "" + translate("connectionindicator.bandwidth") + "" + "" + - "↓" + + "↓" + downloadBandwidth + - " ↑" + + " ↑" + uploadBandwidth + "
"; } - + return result; }; From c54938374dcb9e564bff57e01333539e95fa9cf9 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 13 Oct 2016 16:16:44 +0300 Subject: [PATCH 3/7] Editions in jitsi popover styles --- css/_jitsi_popover.scss | 147 +++++++++++++++++++--------------------- 1 file changed, 69 insertions(+), 78 deletions(-) diff --git a/css/_jitsi_popover.scss b/css/_jitsi_popover.scss index 5936c87b2..411c9594b 100644 --- a/css/_jitsi_popover.scss +++ b/css/_jitsi_popover.scss @@ -8,98 +8,89 @@ min-width: 100px; padding: 1px; text-align: left; - color: #333333; - background-color: #ffffff; + color: $auiDialogColor; + background-color: $auiDialogContentBg; background-clip: padding-box; - border: 1px solid #cccccc; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 6px; + border: 1px solid $popoverBorderColorFallback; + border: 1px solid $popoverBorderColor; + 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: center; + } -.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; -} -.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; -} + &__icon { + margin-right: 5px; + } -.jitsipopover.black > .arrow:after -{ - border-top-color: rgba(0, 0, 0, 0.8); -} + &__green + { + @extend .jitsipopover__icon; + color: #4abd04; + } -.jitsiPopupmenuPadding { - height: 35px; - width: 100px; - position: absolute; - bottom: -35px; -} + &__orange + { + @extend .jitsipopover__icon; + color: #ffa800; + } -.jitsipopover_green -{ - color: #4abd04; -} + &__menu-padding { + height: 35px; + width: 100px; + position: absolute; + bottom: -35px; + } -.jitsipopover_orange -{ - color: #ffa800; -} + &__showmore + { + display: block; + text-align: center; + width: 90px; + margin: 10px auto; + } -.jitsipopover_blue -{ - color: #21B9FC; -} -.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; + &__clear { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + > .arrow { + border-width: 5px; + left: 50%; + margin-left: -5px; + border-bottom-width: 0; + border-top-color: $popoverArrowBorderColorFallback; + border-top-color: $popoverArrowBorderColor; + bottom: -5px; + @extend .jitsipopover__clear; + + &:after { + border-width: 5px; + content: " "; + bottom: 1px; + margin-left: -5px; + border-bottom-width: 0; + border-top-color: $auiDialogContentBg; + @extend .jitsipopover__clear; + } + } } From 26792625f23c93388cc6fcc7c5a4b2a7ca8355ec Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 13 Oct 2016 18:00:02 +0300 Subject: [PATCH 4/7] BEMificated classes and add title --- css/_jitsi_popover.scss | 4 +- modules/UI/util/JitsiPopover.js | 4 +- modules/UI/videolayout/ConnectionIndicator.js | 58 ++++++++++++++----- 3 files changed, 47 insertions(+), 19 deletions(-) diff --git a/css/_jitsi_popover.scss b/css/_jitsi_popover.scss index 411c9594b..b401086e8 100644 --- a/css/_jitsi_popover.scss +++ b/css/_jitsi_popover.scss @@ -21,7 +21,9 @@ margin-bottom: 35px; &__title { - text-align: center; + text-align: left; + margin: 0; + padding: 0; } &__content { diff --git a/modules/UI/util/JitsiPopover.js b/modules/UI/util/JitsiPopover.js index 92267c11e..24acae8de 100644 --- a/modules/UI/util/JitsiPopover.js +++ b/modules/UI/util/JitsiPopover.js @@ -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}); } }); diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js index 765cd17d9..2eaf7a485 100644 --- a/modules/UI/videolayout/ConnectionIndicator.js +++ b/modules/UI/videolayout/ConnectionIndicator.js @@ -95,21 +95,47 @@ ConnectionIndicator.prototype.generateText = function () { return `${width}x${height}`; }).join(', ') || 'N/A'; - var result = "" + - "" + - "" + - "" + - "" + - "" + - "" + - "" + - "" + - "
" + - translate("connectionindicator.bitrate") + "↓" + - downloadBitrate + " ↑" + - uploadBitrate + "
" + - translate("connectionindicator.packetloss") + "" + packetLoss + "
" + - translate("connectionindicator.resolution") + "" + resolutionStr + "
"; + let headerKey = 'connectionindicator.header'; + let result = ( + ` + + + + + + + + + + + + + + + +
+ ${translate(headerKey)} +
+ + ${translate("connectionindicator.bitrate")} + + + ↓ + ${downloadBitrate} + ↑ + ${uploadBitrate} +
+ + ${translate("connectionindicator.packetloss")} + + ${packetLoss}
+ + ${translate("connectionindicator.resolution")} + + + ${resolutionStr} +
`); if(this.videoContainer.videoSpanId == "localVideoContainer") { result += ""; } - + return result; }; From 3254bbaabbc3a05d595803edcb2cccf723292dc8 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Tue, 18 Oct 2016 12:41:35 +0300 Subject: [PATCH 5/7] Change styles in jitsi poppover --- css/_jitsi_popover.scss | 13 +++++-------- css/_videolayout_default.scss | 2 +- css/themes/_light.scss | 6 ++---- 3 files changed, 8 insertions(+), 13 deletions(-) diff --git a/css/_jitsi_popover.scss b/css/_jitsi_popover.scss index b401086e8..b46fcd155 100644 --- a/css/_jitsi_popover.scss +++ b/css/_jitsi_popover.scss @@ -8,11 +8,10 @@ min-width: 100px; padding: 1px; text-align: left; - color: $auiDialogColor; - background-color: $auiDialogContentBg; + color: $popoverFontColor; + background-color: $popoverBg; background-clip: padding-box; - border: 1px solid $popoverBorderColorFallback; - border: 1px solid $popoverBorderColor; + 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);*/ @@ -65,7 +64,6 @@ margin: 10px auto; } - &__clear { position: absolute; display: block; @@ -80,8 +78,7 @@ left: 50%; margin-left: -5px; border-bottom-width: 0; - border-top-color: $popoverArrowBorderColorFallback; - border-top-color: $popoverArrowBorderColor; + border-top-color: $popoverBg; bottom: -5px; @extend .jitsipopover__clear; @@ -91,7 +88,7 @@ bottom: 1px; margin-left: -5px; border-bottom-width: 0; - border-top-color: $auiDialogContentBg; + border-top-color: $popoverBg; @extend .jitsipopover__clear; } } diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index cb6f6c69c..ac84a2a2f 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -277,7 +277,7 @@ text-align: left; font-size: 12px; font-weight: 400; - color: $auiDialogColor; + color: $popoverFontColor; td { padding: 5px 0; diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 698fa738d..ca8fad396 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -46,7 +46,5 @@ $linkHoverFontColor: darken(#3572b0, 10%); $dropdownColor: #333; // Popover colors -$popoverArrowBorderColor: rgba(0, 0, 0, 0.25); -$popoverArrowBorderColorFallback: #999999; -$popoverBorderColor: rgba(0, 0, 0, 0.2); -$popoverBorderColorFallback: #cccccc; \ No newline at end of file +$popoverBg: #000; +$popoverFontColor: #ffffff; \ No newline at end of file From 9078596f3a7bfb3540a2667d1c93313380207e5f Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Tue, 18 Oct 2016 18:23:08 +0300 Subject: [PATCH 6/7] fix after rebase --- css/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/_variables.scss b/css/_variables.scss index a25b79774..bb06138cf 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -33,10 +33,10 @@ $tooltipBg: rgba(0,0,0, 0.7); // Toolbar $toolbarSelectBackground: rgba(0, 0, 0, .6); - $toolbarBadgeBackground: #165ECC; $toolbarBadgeColor: #FFFFFF; $toolbarToggleBackground: #12499C; +$splitterToolbarButtonLeftMargin: 0px; // Main controls $inputSemiBackground: rgba(132, 132, 132, .8); From c09e10a5840a0a710fd29ab0feb28afb73cac6d2 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Wed, 19 Oct 2016 17:57:16 +0300 Subject: [PATCH 7/7] updates in connection indicator styles --- css/_jitsi_popover.scss | 13 +++++----- css/_videolayout_default.scss | 23 ---------------- css/connection-info.scss | 26 +++++++++++++++++++ css/main.scss | 1 + modules/UI/videolayout/ConnectionIndicator.js | 23 +++++----------- 5 files changed, 40 insertions(+), 46 deletions(-) create mode 100644 css/connection-info.scss diff --git a/css/_jitsi_popover.scss b/css/_jitsi_popover.scss index b46fcd155..7df8ae868 100644 --- a/css/_jitsi_popover.scss +++ b/css/_jitsi_popover.scss @@ -32,9 +32,8 @@ text-align: center; } - &__icon { - margin-right: 5px; + margin-right: 2px; } &__green @@ -56,8 +55,7 @@ bottom: -35px; } - &__showmore - { + &__showmore { display: block; text-align: center; width: 90px; @@ -74,22 +72,23 @@ } > .arrow { - border-width: 5px; + 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; - @extend .jitsipopover__clear; + &:after { border-width: 5px; content: " "; bottom: 1px; margin-left: -5px; + @extend .jitsipopover__clear; border-bottom-width: 0; border-top-color: $popoverBg; - @extend .jitsipopover__clear; } } } diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index ac84a2a2f..56400e58d 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -261,29 +261,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: 12px; - font-weight: 400; - color: $popoverFontColor; - - td { - padding: 5px 0; - } -} - #localVideoContainer>span.status:hover, #localVideoContainer .displayname:hover { cursor: text; diff --git a/css/connection-info.scss b/css/connection-info.scss new file mode 100644 index 000000000..323ad8873 --- /dev/null +++ b/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; + } +} diff --git a/css/main.scss b/css/main.scss index cb9c295ed..1959a6edb 100644 --- a/css/main.scss +++ b/css/main.scss @@ -61,5 +61,6 @@ @import 'shortcuts/main'; @import 'buttons/button-control'; @import "modals/invite/invite"; +@import "connection-info"; /* Modules END */ \ No newline at end of file diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js index 2eaf7a485..f9744fa37 100644 --- a/modules/UI/videolayout/ConnectionIndicator.js +++ b/modules/UI/videolayout/ConnectionIndicator.js @@ -95,15 +95,8 @@ ConnectionIndicator.prototype.generateText = function () { return `${width}x${height}`; }).join(', ') || 'N/A'; - let headerKey = 'connectionindicator.header'; let result = ( - ` - - - + `
- ${translate(headerKey)} -
@@ -245,7 +236,7 @@ ConnectionIndicator.prototype.generateText = function () { } - result += "
@@ -111,10 +104,8 @@ ConnectionIndicator.prototype.generateText = function () { - ↓ - ${downloadBitrate} - ↑ - ${uploadBitrate} + ↓${downloadBitrate} + ↑${uploadBitrate}
" + + result += "
" + "" + "
" + "" + @@ -292,7 +283,7 @@ ConnectionIndicator.prototype.create = function () { this.connectionIndicatorContainer); this.popover = new JitsiPopover( $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"), - {content: "
" + + {content: "
" + APP.translation.translateString("connectionindicator.na") + "
", skin: "black"}); @@ -405,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( - `
${this.generateText()}
` + `
${this.generateText()}
` ); - APP.translation.translateElement($(".connection_info")); + APP.translation.translateElement($(".connection-info")); } };