From b7fccf50409693d98e71d46ccaaf1244f12e99b4 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 13 Oct 2016 16:15:20 +0300 Subject: [PATCH 1/9] 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/9] 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/9] 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/9] 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/9] 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/9] 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/9] 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")); } }; From 71475038bae352f5a6776196e478e6778fa66d9f Mon Sep 17 00:00:00 2001 From: Kostiantyn Pashura Date: Sat, 8 Oct 2016 00:47:43 +0300 Subject: [PATCH 8/9] toolbar: authentication button changed --- css/_login_menu.scss | 36 +++++++++------- css/_side_toolbar_container.scss | 2 +- index.html | 27 ++++++------ modules/UI/UI.js | 9 ++++ modules/UI/toolbars/Toolbar.js | 70 +++++++++++++++++++++++++++++++- service/UI/UIEvents.js | 4 ++ 6 files changed, 118 insertions(+), 30 deletions(-) diff --git a/css/_login_menu.scss b/css/_login_menu.scss index fe2037849..9f1d4a7a8 100644 --- a/css/_login_menu.scss +++ b/css/_login_menu.scss @@ -31,21 +31,8 @@ ul.loginmenu:after { left: 18px; } -li a.authButton{ - background-color: #06a5df; - padding-top: 3px; - padding-bottom: 3px; - padding-left: 29px; - padding-right: 29px; - border-radius: 4px; - cursor: pointer; -} -span.authentication:hover ul.loginmenu, ul.loginmenu:hover { - display:block !important; -} - -span.authentication { +.authentication { position: relative; } @@ -74,3 +61,24 @@ ul.loginmenu.extendedToolbarPopup:after { top: 18px; left: -7px; } + +//extended toolbar: Log In menu +.auth_container { + ul { + margin-top: 40px; + padding: 0; + + li a.authButton{ + width: 160px; + margin: 10px 20px; + background-color: #06a5df; + padding-top: 3px; + padding-bottom: 3px; + padding-left: 29px; + padding-right: 29px; + border-radius: 4px; + cursor: pointer; + box-sizing: border-box; + } + } +} \ No newline at end of file diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index cb7d7c0b6..f211001e0 100644 --- a/css/_side_toolbar_container.scss +++ b/css/_side_toolbar_container.scss @@ -25,7 +25,7 @@ */ input, label, select, a, .sideToolbarBlock, .input-control, .button-control { - display: inline-block; + display: block; margin-top: 15px; margin-left: 10%; width: 80%; diff --git a/index.html b/index.html index 46462e14b..0e5033141 100644 --- a/index.html +++ b/index.html @@ -103,23 +103,12 @@
+
- + @@ -144,7 +133,19 @@ +
+
+
    +
  • +
  • + +
    • +
  • + +
    • +
+
diff --git a/modules/UI/UI.js b/modules/UI/UI.js index d132e6b9f..bd19c6249 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -362,6 +362,8 @@ function registerListeners() { UI.addListener(UIEvents.TOGGLE_FULLSCREEN, UI.toggleFullScreen); + UI.addListener(UIEvents.TOGGLE_AUTHENTICATION, UI.toggleAuthentication); + UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat); UI.addListener(UIEvents.TOGGLE_SETTINGS, function () { @@ -722,6 +724,13 @@ UI.isFilmStripVisible = function () { return FilmStrip.isFilmStripVisible(); }; +/** + * Toggles authentication panel. + */ +UI.toggleAuthentication = function () { + UI.toggleSidePanel("authentication_container"); +}; + /** * Toggles chat panel. */ diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 3d346b163..4e9f211d0 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -6,7 +6,68 @@ import SideContainerToggler from "../side_pannels/SideContainerToggler"; let emitter = null; let Toolbar; +/** + * Opens the invite link dialog. + */ +function openLinkDialog () { + let inviteAttributes; + + if (roomUrl === null) { + inviteAttributes = 'data-i18n="[value]roomUrlDefaultMsg" value="' + + APP.translation.translateString("roomUrlDefaultMsg") + '"'; + } else { + inviteAttributes = "value=\"" + encodeURI(roomUrl) + "\""; + } + + let inviteLinkId = "inviteLinkRef"; + let focusInviteLink = function() { + $('#' + inviteLinkId) + .focus() + .select(); + }; + + let title = APP.translation.generateTranslationHTML("dialog.shareLink"); + APP.UI.messageHandler.openTwoButtonDialog( + null, title, null, + '', + false, "dialog.copy", + function (e, v) { + if (v && roomUrl) { + JitsiMeetJS.analytics.sendEvent('toolbar.invite.button'); + + focusInviteLink(); + + document.execCommand('copy'); + } + else { + JitsiMeetJS.analytics.sendEvent('toolbar.invite.cancel'); + } + }, + function (event) { + if (!roomUrl) { + if (event && event.target) { + $(event.target).find('button[value=true]') + .prop('disabled', true); + } + } + else { + focusInviteLink(); + } + }, + function (e, v, m, f) { + if(!v && !m && !f) + JitsiMeetJS.analytics.sendEvent('toolbar.invite.close'); + }, + 'Copy' // Focus Copy button. + ); +} + const buttonHandlers = { + "toolbar_button_authentication": function() { + JitsiMeetJS.analytics.sendEvent('toolbar.authentication.toggled'); + emitter.emit(UIEvents.TOGGLE_AUTHENTICATION); + }, "toolbar_button_profile": function () { JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled'); emitter.emit(UIEvents.TOGGLE_PROFILE); @@ -125,6 +186,11 @@ const buttonHandlers = { }; const defaultToolbarButtons = { + 'authentication': { + id: 'toolbar_button_authentication', + tooltipKey: 'toolbar.authenticate', + sideContainerId: 'authentication_container' + }, 'microphone': { id: 'toolbar_button_mute', tooltipKey: 'toolbar.mute', @@ -392,9 +458,9 @@ Toolbar = { */ showAuthenticateButton (show) { if (UIUtil.isButtonEnabled('authentication') && show) { - $('#authentication').css({display: "inline"}); + $('#toolbar_button_authentication').css({display: "inline"}); } else { - $('#authentication').css({display: "none"}); + $('#toolbar_button_authentication').css({display: "none"}); } }, diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index ed2b492e5..87ecbbb02 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -44,6 +44,10 @@ export default { * Notifies that the profile toolbar button has been clicked. */ TOGGLE_PROFILE: "UI.toggle_profile", + /** + * Notifies that the authentication toolbar button has been clicked. + */ + TOGGLE_AUTHENTICATION: "UI.toggle_authentication", /** * Notifies that a command to toggle the film strip has been issued. The * event may optionally specify a {Boolean} (primitive) value to assign to From 436f3b9d9b7d928ee88f5b7cb6c5d4081fd95d2d Mon Sep 17 00:00:00 2001 From: Kostiantyn Pashura Date: Wed, 12 Oct 2016 15:33:07 +0300 Subject: [PATCH 9/9] auth btn removed. login/logout --> Profile --- conference.js | 1 - css/_login_menu.scss | 26 -------- css/_side_toolbar_container.scss | 26 ++++++++ css/input-control/_input-control.scss | 6 +- index.html | 24 +++---- interface_config.js | 4 ++ modules/UI/UI.js | 14 +--- modules/UI/authentication/LoginDialog.js | 14 ++-- modules/UI/toolbars/Toolbar.js | 84 +++--------------------- modules/UI/util/UIUtil.js | 9 +++ service/UI/UIEvents.js | 4 -- 11 files changed, 75 insertions(+), 137 deletions(-) diff --git a/conference.js b/conference.js index 56e44ea26..cd2eef4c2 100644 --- a/conference.js +++ b/conference.js @@ -1086,7 +1086,6 @@ export default { } ); - room.on(ConferenceEvents.USER_JOINED, (id, user) => { if (user.isHidden()) return; diff --git a/css/_login_menu.scss b/css/_login_menu.scss index 9f1d4a7a8..1e51d72eb 100644 --- a/css/_login_menu.scss +++ b/css/_login_menu.scss @@ -31,11 +31,6 @@ ul.loginmenu:after { left: 18px; } - -.authentication { - position: relative; -} - a.disabled { color: gray !important; pointer-events: none; @@ -60,25 +55,4 @@ ul.loginmenu.extendedToolbarPopup:after { position: absolute; top: 18px; left: -7px; -} - -//extended toolbar: Log In menu -.auth_container { - ul { - margin-top: 40px; - padding: 0; - - li a.authButton{ - width: 160px; - margin: 10px 20px; - background-color: #06a5df; - padding-top: 3px; - padding-bottom: 3px; - padding-left: 29px; - padding-right: 29px; - border-radius: 4px; - cursor: pointer; - box-sizing: border-box; - } - } } \ No newline at end of file diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index f211001e0..f6b2adddf 100644 --- a/css/_side_toolbar_container.scss +++ b/css/_side_toolbar_container.scss @@ -124,3 +124,29 @@ #followMeCheckBox { width: 13px !important; } + +/** + * Profile + */ +.auth_container { + ul { + padding: 0; + + li { + list-style-type: none; + + a.authButton{ + width: 160px; + margin: 10px 20px; + padding: 3px 29px; + box-sizing: border-box; + background-color: #06a5df; + border-radius: 4px; + cursor: pointer; + color: $defaultColor; + text-decoration: none; + text-align: center; + } + } + } +} \ No newline at end of file diff --git a/css/input-control/_input-control.scss b/css/input-control/_input-control.scss index d9ab987db..238800612 100644 --- a/css/input-control/_input-control.scss +++ b/css/input-control/_input-control.scss @@ -20,7 +20,11 @@ } &__input { - margin: 8px 0; + margin-bottom: 8px; + + &:last-child { + margin-bottom: inherit; + } &::selection { background-color: $defaultDarkSelectionColor; diff --git a/index.html b/index.html index 0e5033141..3f3849b72 100644 --- a/index.html +++ b/index.html @@ -108,7 +108,6 @@ - @@ -135,17 +134,6 @@
-
-
    -
  • -
  • - -
    • -
  • - -
    • -
-
@@ -156,6 +144,18 @@
+
+

+
    +
  • +
  • + +
    • +
  • + +
    • +
+
diff --git a/interface_config.js b/interface_config.js index adff2c338..1e07ad678 100644 --- a/interface_config.js +++ b/interface_config.js @@ -17,6 +17,10 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true, APP_NAME: "Jitsi Meet", INVITATION_POWERED_BY: true, + /** + * If we should show authentication block in profile + */ + AUTHENTICATION_ENABLE: true, // the toolbar buttons line is intentionally left in one line, to be able // to easily override values or remove them using regex MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line diff --git a/modules/UI/UI.js b/modules/UI/UI.js index bd19c6249..adfe408bb 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -362,8 +362,6 @@ function registerListeners() { UI.addListener(UIEvents.TOGGLE_FULLSCREEN, UI.toggleFullScreen); - UI.addListener(UIEvents.TOGGLE_AUTHENTICATION, UI.toggleAuthentication); - UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat); UI.addListener(UIEvents.TOGGLE_SETTINGS, function () { @@ -724,13 +722,6 @@ UI.isFilmStripVisible = function () { return FilmStrip.isFilmStripVisible(); }; -/** - * Toggles authentication panel. - */ -UI.toggleAuthentication = function () { - UI.toggleSidePanel("authentication_container"); -}; - /** * Toggles chat panel. */ @@ -1149,11 +1140,12 @@ UI.notifyFocusLeft = function () { * @param {string} [login] current login */ UI.updateAuthInfo = function (isAuthEnabled, login) { + let showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled(); let loggedIn = !!login; - Toolbar.showAuthenticateButton(isAuthEnabled); + Toolbar.showAuthenticateButton(showAuth); - if (isAuthEnabled) { + if (showAuth) { Toolbar.setAuthenticatedIdentity(login); Toolbar.showLoginButton(!loggedIn); diff --git a/modules/UI/authentication/LoginDialog.js b/modules/UI/authentication/LoginDialog.js index e730e848a..6ee3606f3 100644 --- a/modules/UI/authentication/LoginDialog.js +++ b/modules/UI/authentication/LoginDialog.js @@ -8,16 +8,15 @@ function getPasswordInputHtml() { let placeholder = config.hosts.authdomain ? "user identity" : "user@domain.net"; - let passRequiredMsg = APP.translation.translateString( - "dialog.passwordRequired" - ); + return ` -

${passRequiredMsg}

- + - `; + placeholder="user password">`; } /** @@ -80,6 +79,7 @@ function LoginDialog(successCallback, cancelCallback) { const states = { login: { + title: APP.translation.translateString('dialog.passwordRequired'), html: getPasswordInputHtml(), buttons: loginButtons, focus: ':input:first', diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 4e9f211d0..01c02b31f 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -6,68 +6,7 @@ import SideContainerToggler from "../side_pannels/SideContainerToggler"; let emitter = null; let Toolbar; -/** - * Opens the invite link dialog. - */ -function openLinkDialog () { - let inviteAttributes; - - if (roomUrl === null) { - inviteAttributes = 'data-i18n="[value]roomUrlDefaultMsg" value="' + - APP.translation.translateString("roomUrlDefaultMsg") + '"'; - } else { - inviteAttributes = "value=\"" + encodeURI(roomUrl) + "\""; - } - - let inviteLinkId = "inviteLinkRef"; - let focusInviteLink = function() { - $('#' + inviteLinkId) - .focus() - .select(); - }; - - let title = APP.translation.generateTranslationHTML("dialog.shareLink"); - APP.UI.messageHandler.openTwoButtonDialog( - null, title, null, - '', - false, "dialog.copy", - function (e, v) { - if (v && roomUrl) { - JitsiMeetJS.analytics.sendEvent('toolbar.invite.button'); - - focusInviteLink(); - - document.execCommand('copy'); - } - else { - JitsiMeetJS.analytics.sendEvent('toolbar.invite.cancel'); - } - }, - function (event) { - if (!roomUrl) { - if (event && event.target) { - $(event.target).find('button[value=true]') - .prop('disabled', true); - } - } - else { - focusInviteLink(); - } - }, - function (e, v, m, f) { - if(!v && !m && !f) - JitsiMeetJS.analytics.sendEvent('toolbar.invite.close'); - }, - 'Copy' // Focus Copy button. - ); -} - const buttonHandlers = { - "toolbar_button_authentication": function() { - JitsiMeetJS.analytics.sendEvent('toolbar.authentication.toggled'); - emitter.emit(UIEvents.TOGGLE_AUTHENTICATION); - }, "toolbar_button_profile": function () { JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled'); emitter.emit(UIEvents.TOGGLE_PROFILE); @@ -186,11 +125,6 @@ const buttonHandlers = { }; const defaultToolbarButtons = { - 'authentication': { - id: 'toolbar_button_authentication', - tooltipKey: 'toolbar.authenticate', - sideContainerId: 'authentication_container' - }, 'microphone': { id: 'toolbar_button_mute', tooltipKey: 'toolbar.mute', @@ -457,11 +391,9 @@ Toolbar = { * @param show true to show or false to hide */ showAuthenticateButton (show) { - if (UIUtil.isButtonEnabled('authentication') && show) { - $('#toolbar_button_authentication').css({display: "inline"}); - } else { - $('#toolbar_button_authentication').css({display: "none"}); - } + let display = show ? 'block' : 'none'; + + $('#authenticationContainer').css({display}); }, showEtherpadButton () { @@ -515,12 +447,14 @@ Toolbar = { * @param authIdentity identity name to be displayed. */ setAuthenticatedIdentity (authIdentity) { + let selector = $('#toolbar_auth_identity'); + if (authIdentity) { - let selector = $('#toolbar_auth_identity'); selector.css({display: "list-item"}); selector.text(authIdentity); } else { - $('#toolbar_auth_identity').css({display: "none"}); + selector.css({display: "none"}); + selector.text(''); } }, @@ -529,7 +463,7 @@ Toolbar = { * @param show true to show */ showLoginButton (show) { - if (UIUtil.isButtonEnabled('authentication') && show) { + if (show) { $('#toolbar_button_login').css({display: "list-item"}); } else { $('#toolbar_button_login').css({display: "none"}); @@ -541,7 +475,7 @@ Toolbar = { * @param show true to show */ showLogoutButton (show) { - if (UIUtil.isButtonEnabled('authentication') && show) { + if (show) { $('#toolbar_button_logout').css({display: "list-item"}); } else { $('#toolbar_button_logout').css({display: "none"}); diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index daa1b3570..fe4d1f739 100644 --- a/modules/UI/util/UIUtil.js +++ b/modules/UI/util/UIUtil.js @@ -204,6 +204,15 @@ const TOOLTIP_POSITIONS = { return interfaceConfig.SETTINGS_SECTIONS.indexOf(name) !== -1; }, + /** + * Indicates if Authentication Section should be shown + * + * @returns {boolean} + */ + isAuthenticationEnabled: function() { + return interfaceConfig.AUTHENTICATION_ENABLE; + }, + /** * Shows the element given by id. * diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index 87ecbbb02..ed2b492e5 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -44,10 +44,6 @@ export default { * Notifies that the profile toolbar button has been clicked. */ TOGGLE_PROFILE: "UI.toggle_profile", - /** - * Notifies that the authentication toolbar button has been clicked. - */ - TOGGLE_AUTHENTICATION: "UI.toggle_authentication", /** * Notifies that a command to toggle the film strip has been issued. The * event may optionally specify a {Boolean} (primitive) value to assign to