diff --git a/android/app/build.gradle b/android/app/build.gradle index 51e942337..ac754c7e1 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -146,6 +146,8 @@ dependencies { compile "com.facebook.react:react-native:+" // From node_modules } +apply from: '../../node_modules/react-native-vector-icons/fonts.gradle' + // Run this once to be able to run the application with BUCK // puts all compile dependencies into folder libs for BUCK to use task copyDownloadableDepsToLibs(type: Copy) { diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index fbb444f1e..b781d869c 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -29,10 +29,12 @@ android:name=".MainActivity"> + + + - diff --git a/android/app/src/main/assets/fonts/FontAwesome.ttf b/android/app/src/main/assets/fonts/FontAwesome.ttf deleted file mode 100644 index f221e50a2..000000000 Binary files a/android/app/src/main/assets/fonts/FontAwesome.ttf and /dev/null differ diff --git a/react/features/base/fontIcons/fonts/jitsi.ttf b/android/app/src/main/assets/fonts/jitsi.ttf old mode 100755 new mode 100644 similarity index 100% rename from react/features/base/fontIcons/fonts/jitsi.ttf rename to android/app/src/main/assets/fonts/jitsi.ttf diff --git a/conference.js b/conference.js index 75e5c9e5f..2c722bcf2 100644 --- a/conference.js +++ b/conference.js @@ -419,19 +419,6 @@ class ConferenceConnector { } } -/** - * Sends statistics from APP.tokenData - */ -function sendTokenDataStats() { - let {server, group} = APP.tokenData; - if(server) { - APP.conference.logEvent("server." + server, 1); - } - if(group) { - APP.conference.logEvent("group", group); - } -} - /** * Disconnects the connection. * @returns resolved Promise. We need this in order to make the Promise.all @@ -512,7 +499,6 @@ export default { return JitsiMeetJS.init(config) .then(() => { setAnalyticsPermanentProperties(); - sendTokenDataStats(); return createInitialLocalTracksAndConnect(options.roomName); }).then(([tracks, con]) => { console.log('initialized with %s local tracks', tracks.length); @@ -1096,7 +1082,6 @@ export default { } ); - room.on(ConferenceEvents.USER_JOINED, (id, user) => { if (user.isHidden()) return; @@ -1759,8 +1744,11 @@ export default { hangup (requestFeedback = false) { APP.UI.hideRingOverLay(); let requestFeedbackPromise = requestFeedback - ? APP.UI.requestFeedback().catch(() => Promise.resolve()) - : Promise.resolve(); + ? APP.UI.requestFeedbackOnHangup() + // false - because the thank you dialog shouldn't be displayed + .catch(() => Promise.resolve(false)) + : Promise.resolve(true);// true - because the thank you dialog + //should be displayed // All promises are returning Promise.resolve to make Promise.all to // be resolved when both Promises are finished. Otherwise Promise.all // will reject on first rejected Promise and we can redirect the page @@ -1768,9 +1756,9 @@ export default { Promise.all([ requestFeedbackPromise, room.leave().then(disconnect, disconnect) - ]).then(() => { + ]).then(values => { APP.API.notifyReadyToClose(); - maybeRedirectToWelcomePage(); + maybeRedirectToWelcomePage(values[0]); }); } }; diff --git a/css/_base.scss b/css/_base.scss index 23dd329ad..9fea2a28b 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -186,6 +186,7 @@ form { } .link { + cursor: pointer; color: $linkFontColor; @include transition(color .1s ease-out); diff --git a/css/_connection-info.scss b/css/_connection-info.scss new file mode 100644 index 000000000..eb0d406c4 --- /dev/null +++ b/css/_connection-info.scss @@ -0,0 +1,43 @@ +%connection-info { + text-align: left; + font-size: 12px; + font-weight: 400; + color: $popoverFontColor; + + td { + padding: 2px 0; + } +} + +.connection-info +{ + float: left; + padding: 5px; + padding-left: 0; + @extend %connection-info; + + > table { + white-space: nowrap; + @extend %connection-info; + } + + 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 5936c87b2..9efd0dadc 100644 --- a/css/_jitsi_popover.scss +++ b/css/_jitsi_popover.scss @@ -6,100 +6,43 @@ display: none; max-width: 300px; 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-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; -} + &__menu-padding { + height: 35px; + width: 100px; + position: absolute; + bottom: -35px; + } -.jitsipopover-content { - padding: 9px 14px; - font-size: 10pt; - white-space:pre-wrap; - text-align: center; -} + &__showmore { + display: block; + text-align: center; + width: 90px; + margin: 10px auto; + } -.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; -} - -.jitsipopover.black > .arrow:after -{ - border-top-color: rgba(0, 0, 0, 0.8); -} - -.jitsiPopupmenuPadding { - height: 35px; - width: 100px; - position: absolute; - bottom: -35px; -} - -.jitsipopover_green -{ - color: #4abd04; -} - -.jitsipopover_orange -{ - color: #ffa800; -} - -.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; + > .arrow { + position: absolute; + display: block; + left: 50%; + bottom: -5px; + margin-left: -5px; + width: 0; + height: 0; + border-color: transparent; + border-top-color: $popoverBg; + border-style: solid; + border-width: 5px; + border-bottom-width: 0; + } } diff --git a/css/_login_menu.scss b/css/_login_menu.scss index fe2037849..1e51d72eb 100644 --- a/css/_login_menu.scss +++ b/css/_login_menu.scss @@ -31,24 +31,6 @@ 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 { - position: relative; -} - a.disabled { color: gray !important; pointer-events: none; @@ -73,4 +55,4 @@ ul.loginmenu.extendedToolbarPopup:after { position: absolute; top: 18px; left: -7px; -} +} \ No newline at end of file diff --git a/css/_mixins.scss b/css/_mixins.scss index 258a979a5..ba1dedb8d 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -19,11 +19,11 @@ } @mixin flex() { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; } /** @@ -45,53 +45,92 @@ } @mixin circle($diameter) { - width: $diameter; - height: $diameter; - border-radius: 50%; + width: $diameter; + height: $diameter; + border-radius: 50%; } @mixin absoluteAligning($sizeX, $sizeY) { - top: 50%; - left: 50%; - position: absolute; - @include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2})) + top: 50%; + left: 50%; + position: absolute; + @include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2})) } @mixin transform($func) { - -moz-transform: $func; - -ms-transform: $func; - -webkit-transform: $func; - -o-transform: $func; - transform: $func; + -moz-transform: $func; + -ms-transform: $func; + -webkit-transform: $func; + -o-transform: $func; + transform: $func; } @mixin transition($transition...) { - -moz-transition: $transition; - -o-transition: $transition; - -webkit-transition: $transition; - transition: $transition; -} - -@mixin box-shadow($type, $h, $y, $blur, $color) { - -webkit-box-shadow: $type $h $y $blur $color; - -moz-box-shadow: $type $h $y $blur $color; - box-shadow: $type $h $y $blur $color; + -moz-transition: $transition; + -o-transition: $transition; + -webkit-transition: $transition; + transition: $transition; } /** * Mixin styling placeholder **/ @mixin placeholder() { - $selectors: ( - "::-webkit-input-placeholder", - "::-moz-placeholder", - ":-moz-placeholder", - ":-ms-input-placeholder" - ); + $selectors: ( + "::-webkit-input-placeholder", + "::-moz-placeholder", + ":-moz-placeholder", + ":-ms-input-placeholder" + ); - @each $selector in $selectors { - #{$selector} { - @content; - } + @each $selector in $selectors { + #{$selector} { + @content; } + } +} + +@mixin box-shadow($h, $y, $blur, $color, $inset: false) { + @if $inset { + -webkit-box-shadow: inset $h $y $blur $color; + -moz-box-shadow: inset $h $y $blur $color; + box-shadow: inset $h $y $blur $color; + } @else { + -webkit-box-shadow: $h $y $blur $color; + -moz-box-shadow: $h $y $blur $color; + box-shadow: $h $y $blur $color; + } +} + +@mixin no-box-shadow { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +@mixin box-sizing($box-model) { + -webkit-box-sizing: $box-model; // Safari <= 5 + -moz-box-sizing: $box-model; // Firefox <= 19 + box-sizing: $box-model; +} + +@mixin border-radius($radius) { + -webkit-border-radius: $radius; + border-radius: $radius; + /* stops bg color from leaking outside the border: */ + background-clip: padding-box; +} + +@mixin opacity($opacity) { + opacity: $opacity; + $opacity-ie: $opacity * 100; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie); + filter: alpha(opacity=$opacity-ie); //IE8 +} + +@mixin text-truncate { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } \ No newline at end of file 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/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index cb7d7c0b6..c174a4c71 100644 --- a/css/_side_toolbar_container.scss +++ b/css/_side_toolbar_container.scss @@ -2,16 +2,15 @@ * Toolbar side panel main container element. */ #sideToolbarContainer { - display: inline-block; - position:absolute; - top: 0px; - left: $defaultToolbarSize; - width: 0; background-color: rgba(0,0,0,0.8); height: 100%; + left: $defaultToolbarSize; max-width: $sidebarWidth; - z-index: 800; overflow: hidden; + position: absolute; + top: 0; + width: 0; + z-index: 800; /** * Labels inside the side panel. @@ -23,9 +22,9 @@ /** * Form elements and blocks. */ - input, label, select, a, + input, select, a, .sideToolbarBlock, .input-control, .button-control { - display: inline-block; + display: block; margin-top: 15px; margin-left: 10%; width: 80%; @@ -34,8 +33,8 @@ /** * Specify colors for edit elements. */ - select, input[type="button"], input[type="text"], - input[type="reset"], input[type="submit"] { + select, input[type="button"], input[type="text"], input[type="reset"], + input[type="submit"] { color: $inputColor; background: $inputBackground; border: none; @@ -45,16 +44,18 @@ * Specify styling of elements inside a block. */ .sideToolbarBlock { - input, label, button, a, select { - margin-top: 5px; + input, button, a, select { margin-left: 0; + margin-top: 5px; width: 100%; } - - .startMutedLabel, - .followMeLabel { + input[type='checkbox'] { display: inline; - margin-top: 0; + width: auto !important; + > label { + margin-top: 5px; + width: 80%; + } } } @@ -72,36 +73,35 @@ /** * Titles and subtitles of inner containers. */ - > div.title, - div.subTitle { - text-align: left; - margin: 10px 0px 10px 0px; + div.title, div.subTitle { + margin: 10px 0; } /** * Main title size. */ - > div.title { + div.title { color: $defaultColor !important; - text-align: center; font-size: 16px; + text-align: center; } /** * Subtitle specific properties. */ - > div.subTitle { + div.subTitle { + color: $defaultSideBarFontColor !important; font-size: 11px; font-weight: 500; - color: $defaultSideBarFontColor !important; margin-left: 10%; + text-align: left; } /** * First element after a title. */ .first { - margin-top: 0px !important; + margin-top: 0 !important; } /** @@ -119,8 +119,28 @@ text-align: center; } -#startAudioMuted, -#startVideoMuted, -#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; + } + } + } } diff --git a/css/_toastr.scss b/css/_toastr.scss index df49ea3e3..4da961c11 100644 --- a/css/_toastr.scss +++ b/css/_toastr.scss @@ -7,206 +7,100 @@ * * Author: John Papa and Hans Fjällemark * Project: https://github.com/CodeSeven/toastr + * + * Last updated: October 13, 2016 */ -.toast-title { + +.toast-title, +.toast-message .nickname { font-weight: bold; + margin: 0 0 3px; + @include text-truncate; } + .toast-message { -ms-word-wrap: break-word; word-wrap: break-word; } + .toast-message a, -.toast-message label { - color: #ffffff; -} - -.toast-message .nickname { - font-weight: bold; -} - -.toast-message a:hover { - color: #cccccc; +.toast-message label, +.toast-message .connected, +.toast-message .disconnected { + color: $notificationLinkColor; text-decoration: none; } +.toast-message a:hover { + text-decoration: underline; +} + +.toast-message br { + display: none; +} + +// close button .toast-close-button { - position: relative; - right: -0.3em; - top: -0.3em; - float: right; + color: $notificationColor; + background: transparent; + font-size: 15px; - height: 15px; - width: 15px; - font-weight: bold; - color: #ffffff; - background: transparent !important; - -webkit-text-shadow: 0 1px 0 #ffffff; - text-shadow: 0 1px 0 #ffffff; - opacity: 0.8; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); - filter: alpha(opacity=80); + line-height: 1.2; + + height: 20px; + width: 20px; + padding: 0; + border: 0; + margin: -6px -10px 0 0; + float: right; + + cursor: pointer; + @include opacity(0.4); + /* Additional properties for button version + iOS requires the button element instead of an anchor tag. + If you want the anchor version, it requires `href="#"`. */ + -webkit-appearance: none; } .toast-close-button:hover, .toast-close-button:focus { - color: #ffffff; - text-decoration: none; - cursor: pointer; - opacity: 1; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - filter: alpha(opacity=100); + @include opacity(1); } -/*Additional properties for button version - iOS requires the button element instead of an anchor tag. - If you want the anchor version, it requires `href="#"`.*/ -button.toast-close-button { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; + + +.toast { + color: $notificationColor; + background-color: $notificationBackground; + + font-size: $notificationFontSize; + + padding: $notificationPadding; + border: 1px solid lighten($notificationBackground, 10%); + + @include border-radius($notificationBorderRadius); + @include box-shadow(1px, 1px, 2px, rgba(0,0,0,0.3)); + @include opacity($notificationOpacity); } -.toast-top-full-width { - top: 0; - right: 0; - width: 100%; -} -.toast-bottom-full-width { - bottom: 0; - right: 0; - width: 100%; -} -.toast-top-left { - top: 12px; - left: 12px; -} -.toast-top-right { - top: 12px; - right: 12px; -} -.toast-bottom-right { - right: 12px; - bottom: 12px; -} -.toast-bottom-left { - bottom: 12px; - left: 12px; + +.toast:hover { + @include opacity(1); } + #toast-container { position: fixed; - z-index: 1012; - /*overrides*/ - -} -#toast-container * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -#toast-container > div { - margin: 0 0 6px; - padding: 15px 15px 15px 15px; - width: 300px; - -moz-border-radius: 3px 3px 3px 3px; - -webkit-border-radius: 3px 3px 3px 3px; - border-radius: 3px 3px 3px 3px; - background-position: 15px center; - background-repeat: no-repeat; - -moz-box-shadow: 0 0 12px #999999; - -webkit-box-shadow: 0 0 12px #999999; - box-shadow: 0 0 12px #999999; - color: #ffffff; - opacity: 0.8; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); - filter: alpha(opacity=80); -} -#toast-container > :hover { - -moz-box-shadow: 0 0 12px #000000; - -webkit-box-shadow: 0 0 12px #000000; - box-shadow: 0 0 12px #000000; - opacity: 1; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - filter: alpha(opacity=100); - cursor: pointer; -} -#toast-container .toast-info, -#toast-container .toast-success, -#toast-container .toast-error, -#toast-container .toast-warning -{ - padding: 10px 10px 10px 10px !important; -} - -#toast-container.toast-top-full-width > div, -#toast-container.toast-bottom-full-width > div { - width: 100%; - margin: auto; -} -.toast { - background-color: #030303; -} -.toast-success { - background-color: #51a351; -} -.toast-error { - background-color: #bd362f; -} -.toast-info { - background-color: #2f96b4; -} -.toast-warning { - background-color: #f89406; -} -/*Responsive Design*/ -@media all and (max-width: 240px) { - #toast-container > div { - padding: 8px 8px 8px 8px; - width: 11em; - } - #toast-container .toast-close-button { - right: -0.2em; - top: -0.2em; - } -} -@media all and (min-width: 241px) and (max-width: 480px) { - #toast-container > div { - padding: 8px 8px 8px 8px; - width: 18em; - } - #toast-container .toast-close-button { - right: -0.2em; - top: -0.2em; - } -} -@media all and (min-width: 481px) and (max-width: 768px) { - #toast-container > div { - padding: 15px 15px 15px 15px; - width: 25em; - } + z-index: $notificationZ; } #toast-container.notification-bottom-right { - bottom: 140px; - right: 5px; + bottom: 135px; + right: 13px; } -#toast-container.notification-bottom-right-center { - right: 205px; +#toast-container * { + @include box-sizing(border-box); } -#toast-container .toast-info { - -webkit-box-shadow: none; - box-shadow: none; -} - -.toast-close-button { - right: -7px; - top: -19px; -} - -#toast-container .toast-info { - background-color: black; - border: 1px solid #3a3a3a; - width: 220px; - padding: 10px 10px 10px 50px; +#toast-container .toast { + width: 200px; + margin: 0 0 8px; } \ No newline at end of file diff --git a/css/_variables.scss b/css/_variables.scss index d77fcfcfd..0c8a54d33 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -58,6 +58,19 @@ $feedbackInputPlaceholderColor: #777; $rateStarLabelColor: #333; $rateStarDefault: #ccc; $rateStarActivity: #165ecc; +$rateStarSize: 34px; +$feedbackCancelFontColor: #333; + +// Notifications +$notificationFontSize: 13px; +$notificationColor: #FFFFFF; +$notificationBackground: $tooltipBg; +$notificationTitleColor: $notificationColor; +$notificationMessageColor: $notificationColor; +$notificationLinkColor: $notificationColor; +$notificationOpacity: 0.9; +$notificationPadding: 15px 20px; +$notificationBorderRadius: 4px; /** * Misc. @@ -72,6 +85,7 @@ $sidebarWidth: 200px; $tooltipsZ: 901; $toolbarZ: 900; $overlayZ: 800; +$notificationZ: 1012; /** * Font Colors TODO: Change colors when general dialogs are implemented. @@ -85,4 +99,13 @@ $auiPrimaryButtonBg: #3572b0; $auiPrimaryButtonHoverBg: #57647b; $auiPrimaryButtonColor: #fff; $auiIconColor: #707070; -$inputControlEmColor: #f29424; \ No newline at end of file +$inputControlEmColor: #f29424; +$linkFontColor: #489afe; +$linkHoverFontColor: #287ade; + +/** + * Forms + */ +$inputBg: #505F79; +$inputBgHover: #505F79; +$inputFontColor: #ECEEF1; \ No newline at end of file diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 3c19b40de..71879a7a8 100644 --- a/css/_videolayout_default.scss +++ b/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; diff --git a/css/aui-components/dropdown.scss b/css/aui-components/dropdown.scss new file mode 100644 index 000000000..930cfebe0 --- /dev/null +++ b/css/aui-components/dropdown.scss @@ -0,0 +1,48 @@ +form.aui { + .aui-select2-container { + background-color: transparent; + + > a { + margin: 0 auto !important; + width: 100% !important; + } + } +} + +.select2-results{ + &::-webkit-scrollbar { + background-color: transparent; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + &::-webkit-scrollbar-track-piece { + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #3572b0; + } +} + +.aui-select2-drop { + z-index: 901; +} + +.select2-drop-mask { + z-index: 900; +} + +//Dark theme +form.aui{ + //Placeholder + .aui-select2-container.input-container-dark { + a.select2-choice { + text-shadow: none; + } + } +} + +.aui-dropdown2.aui-style-default.dropdown-dark { + background-color: $defaultBackground; + border-color: transparent; +} diff --git a/css/buttons/_button-control.scss b/css/buttons/_button-control.scss index 7eaec2f92..3a2392c99 100644 --- a/css/buttons/_button-control.scss +++ b/css/buttons/_button-control.scss @@ -34,7 +34,7 @@ } &:active { - @include box-shadow(inset, 0, 0, 1px, $buttonShadowColor); + @include box-shadow(0, 0, 1px, $buttonShadowColor, true); } &_light { @@ -60,7 +60,7 @@ &_primary { background-color: $primaryButtonBackground; border: 1px solid $primaryButtonBackground; - color: $primaryButtonColor; + color: $primaryButtonColor !important; font-weight: $primaryButtonFontWeight; &:hover { 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/css/main.scss b/css/main.scss index cb9c295ed..c65ff91d9 100644 --- a/css/main.scss +++ b/css/main.scss @@ -61,5 +61,7 @@ @import 'shortcuts/main'; @import 'buttons/button-control'; @import "modals/invite/invite"; +@import "connection-info"; +@import 'aui-components/dropdown'; -/* Modules END */ \ No newline at end of file +/* Modules END */ diff --git a/css/modals/feedback/_feedback.scss b/css/modals/feedback/_feedback.scss index 279ec9071..881afb9cc 100644 --- a/css/modals/feedback/_feedback.scss +++ b/css/modals/feedback/_feedback.scss @@ -92,7 +92,7 @@ .star-btn { display: inline-block; color: $rateStarDefault; - font-size: 34px; + font-size: $rateStarSize; position: relative; cursor: pointer; outline: none; @@ -120,6 +120,10 @@ &-footer { background-color: $feedbackContentBg; border-top-color: transparent; + + .button-control { + color: $feedbackCancelFontColor; + } } } } \ No newline at end of file diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 3002d7125..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 **/ @@ -43,4 +49,9 @@ $labelFontWeight: 400; $hintFontSize: em(13, 14); $linkFontColor: #3572b0; $linkHoverFontColor: darken(#3572b0, 10%); -$dropdownColor: #333; \ No newline at end of file +$dropdownColor: #333; + +// Popover colors +$popoverBg: #000; +$popoverFontColor: #ffffff; +$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2); \ No newline at end of file diff --git a/index.html b/index.html index 9895f86c9..155c12aef 100644 --- a/index.html +++ b/index.html @@ -30,15 +30,15 @@ jitsi.org
-
-
-
- -
- +
+
+
+ +
+ -
+
@@ -103,23 +103,11 @@
+
- @@ -144,6 +132,7 @@ +
@@ -155,6 +144,18 @@
+
+

+
    +
  • +
  • + +
    • +
  • + +
    • +
+
@@ -179,37 +180,45 @@
- -
-
-
- - +
+
+
-
- - +
+
+
+ + +
+
+ + +
+
+ + +
-
- - +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
-
-
-
-
- - -
-
- - -
-
-
- - -
+
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/ios/jitsi-meet-react.xcodeproj/project.pbxproj b/ios/jitsi-meet-react.xcodeproj/project.pbxproj index 61e8a990b..5c681874d 100644 --- a/ios/jitsi-meet-react.xcodeproj/project.pbxproj +++ b/ios/jitsi-meet-react.xcodeproj/project.pbxproj @@ -143,7 +143,7 @@ 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = app/main.m; sourceTree = ""; }; 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; 22418656B14845609F953A42 /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNVectorIcons.xcodeproj; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = ""; }; - 2602576B1D0A7703001E3363 /* jitsi.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = jitsi.ttf; path = ../react/features/base/fontIcons/fonts/jitsi.ttf; sourceTree = ""; }; + 2602576B1D0A7703001E3363 /* jitsi.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = jitsi.ttf; path = ../android/app/src/main/assets/fonts/jitsi.ttf; sourceTree = ""; }; 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; }; 821D8ABD506944B4BDBB069B /* libRNVectorIcons.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNVectorIcons.a; sourceTree = ""; }; 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; }; diff --git a/lang/main.json b/lang/main.json index ecc548da6..776b5fae5 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 ef5e68fef..5b629b554 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 @@ -1045,15 +1046,20 @@ UI.updateDTMFSupport = function (isDTMFSupported) { }; /** - * Show user feedback dialog if its required or just show "thank you" dialog. - * @returns {Promise} when dialog is closed. + * Show user feedback dialog if its required and enabled after pressing the + * hangup button. + * @returns {Promise} Resolved with value - false if the dialog is enabled and + * resolved with true if the dialog is disabled or the feedback was already + * submitted. Rejected if another dialog is already displayed. This values are + * used to display or not display the thank you dialog from + * conference.maybeRedirectToWelcomePage method. */ -UI.requestFeedback = function () { +UI.requestFeedbackOnHangup = function () { if (Feedback.isVisible()) return Promise.reject(UIErrors.FEEDBACK_REQUEST_IN_PROGRESS); // Feedback has been submitted already. else if (Feedback.isEnabled() && Feedback.isSubmitted()) - return Promise.resolve(); + return Promise.resolve(true); else return new Promise(function (resolve) { if (Feedback.isEnabled()) { @@ -1061,10 +1067,10 @@ UI.requestFeedback = function () { // window and immidiately start the conference dispose timeout. if (Feedback.getFeedbackScore() > 0) { Feedback.openFeedbackWindow(); - resolve(); + resolve(false); } else { // Otherwise we'll wait for user's feedback. - Feedback.openFeedbackWindow(resolve); + Feedback.openFeedbackWindow(() => resolve(false)); } } else { // If the feedback functionality isn't enabled we show a thank @@ -1122,11 +1128,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 89f2b756d..8eb01d22f 100644 --- a/modules/UI/authentication/LoginDialog.js +++ b/modules/UI/authentication/LoginDialog.js @@ -8,13 +8,14 @@ function getPasswordInputHtml() { let placeholder = config.hosts.authdomain ? "user identity" : "user@domain.net"; + return ` -

- + - `; + class="input-control__input" + data-i18n="[placeholder]dialog.userPassword">`; } /** @@ -77,6 +78,7 @@ function LoginDialog(successCallback, cancelCallback) { const states = { login: { + titleKey: 'dialog.passwordRequired', html: getPasswordInputHtml(), buttons: loginButtons, focus: ':input:first', diff --git a/modules/UI/invite/InviteDialogView.js b/modules/UI/invite/InviteDialogView.js index b5b518e49..74e62e6ce 100644 --- a/modules/UI/invite/InviteDialogView.js +++ b/modules/UI/invite/InviteDialogView.js @@ -250,7 +250,7 @@ export default class InviteDialogView { $(removePassword).on('click', () => { this.model.setRoomUnlocked(); }); - let boundSetPassword = this.setPassword.bind(this); + let boundSetPassword = this._setPassword.bind(this); $(document).on('click', addPasswordBtn, boundSetPassword); let boundDisablePass = this.disableAddPassIfInputEmpty.bind(this); $(document).on('keypress', newPasswordInput, boundDisablePass); @@ -260,12 +260,16 @@ export default class InviteDialogView { $(newPasswordInput).on('keydown', (e) => { if (e.keyCode === ENTER_KEY) { e.stopPropagation(); - this.setPassword(); + this._setPassword(); } }); } - setPassword() { + /** + * Marking room as locked + * @private + */ + _setPassword() { let $passInput = $('#newPasswordInput'); let newPass = $passInput.val(); diff --git a/modules/UI/ring_overlay/RingOverlay.js b/modules/UI/ring_overlay/RingOverlay.js index d7aa47e52..a59b83871 100644 --- a/modules/UI/ring_overlay/RingOverlay.js +++ b/modules/UI/ring_overlay/RingOverlay.js @@ -9,11 +9,11 @@ import UIEvents from "../../../service/UI/UIEvents"; let overlay = null; /** - * Handler for UIEvents.LARGE_VIDEO_AVATAR_DISPLAYED event. + * Handler for UIEvents.LARGE_VIDEO_AVATAR_VISIBLE event. * @param {boolean} shown indicates whether the avatar on the large video is * currently displayed or not. */ -function onAvatarDisplayed(shown) { +function onAvatarVisible(shown) { overlay._changeBackground(shown); } @@ -112,6 +112,9 @@ class RingOverlay { $(`#${this._containerId}`).remove(); } + /** + * Stops the ringing and clears related timers. + */ _stopAudio() { if (this.interval) { clearInterval(this.interval); @@ -144,8 +147,8 @@ export default { } overlay = new RingOverlay(callee, disableRingingSound); - APP.UI.addListener(UIEvents.LARGE_VIDEO_AVATAR_DISPLAYED, - onAvatarDisplayed); + APP.UI.addListener(UIEvents.LARGE_VIDEO_AVATAR_VISIBLE, + onAvatarVisible); }, /** @@ -158,8 +161,8 @@ export default { } overlay.destroy(); overlay = null; - APP.UI.removeListener(UIEvents.LARGE_VIDEO_AVATAR_DISPLAYED, - onAvatarDisplayed); + APP.UI.removeListener(UIEvents.LARGE_VIDEO_AVATAR_VISIBLE, + onAvatarVisible); return true; }, diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js index 3c1e80067..b4cde7133 100644 --- a/modules/UI/side_pannels/settings/SettingsMenu.js +++ b/modules/UI/side_pannels/settings/SettingsMenu.js @@ -1,4 +1,5 @@ -/* global APP, $, JitsiMeetJS */ +/* global $, APP, AJS, interfaceConfig, JitsiMeetJS */ + import UIUtil from "../../util/UIUtil"; import UIEvents from "../../../../service/UI/UIEvents"; import languages from "../../../../service/translation/languages"; @@ -24,7 +25,7 @@ function generateLanguagesOptions(items, currentLang) { let attrsStr = UIUtil.attrsToString(attrs); return ``; - }).join('\n'); + }).join(''); } /** @@ -61,11 +62,57 @@ function generateDevicesOptions(items, selectedId, permissionGranted) { return options.join(''); } +/** + * Replace html select element to select2 custom dropdown + * + * @param {jQueryElement} $el native select element + * @param {function} onSelectedCb fired if item is selected + */ +function initSelect2($el, onSelectedCb) { + $el.auiSelect2({ + containerCssClass: 'input-container-dark', + dropdownCssClass: 'dropdown-dark', + minimumResultsForSearch: Infinity + }); + if (typeof onSelectedCb === 'function') { + $el.change(onSelectedCb); + } +} export default { init (emitter) { + //LANGUAGES BOX + if (UIUtil.isSettingEnabled('language')) { + const wrapperId = 'languagesSelectWrapper'; + const selectId = 'languagesSelect'; + const selectEl = AJS.$(`#${selectId}`); + let selectInput; + + selectEl.html(generateLanguagesOptions( + languages.getLanguages(), + APP.translation.getCurrentLanguage() + )); + initSelect2(selectEl, () => { + const val = selectEl.val(); + + selectInput[0].dataset.i18n = `languages:${val}`; + APP.translation.translateElement(selectInput); + emitter.emit(UIEvents.LANG_CHANGED, val); + }); + //find new selectInput element + selectInput = $(`#s2id_${selectId} .select2-chosen`); + //first select fix for languages options + selectInput[0].dataset.i18n = + `languages:${APP.translation.getCurrentLanguage()}`; + + APP.translation.translateElement(selectEl); + + UIUtil.showElement(wrapperId); + } + // DEVICES LIST if (UIUtil.isSettingEnabled('devices')) { - // DEVICES LIST + const wrapperId = 'deviceOptionsWrapper'; + JitsiMeetJS.mediaDevices.isDeviceListAvailable() .then((isDeviceListAvailable) => { if (isDeviceListAvailable && @@ -73,31 +120,21 @@ export default { this._initializeDeviceSelectionSettings(emitter); } }); + // Only show the subtitle if this isn't the only setting section. + if (interfaceConfig.SETTINGS_SECTIONS.length > 1) + UIUtil.showElement("deviceOptionsTitle"); - UIUtil.showElement("deviceOptionsTitle"); - UIUtil.showElement("devicesOptions"); + UIUtil.showElement(wrapperId); } - - if (UIUtil.isSettingEnabled('language')) { - //LANGUAGES BOX - let languagesBox = $("#languages_selectbox"); - languagesBox.html(generateLanguagesOptions( - languages.getLanguages(), - APP.translation.getCurrentLanguage() - )); - APP.translation.translateElement(languagesBox); - languagesBox.change(function () { - emitter.emit(UIEvents.LANG_CHANGED, languagesBox.val()); - }); - - UIUtil.showElement("languages_selectbox"); - } - + // MODERATOR if (UIUtil.isSettingEnabled('moderator')) { + const wrapperId = 'moderatorOptionsWrapper'; + // START MUTED $("#startMutedOptions").change(function () { let startAudioMuted = $("#startAudioMuted").is(":checked"); let startVideoMuted = $("#startVideoMuted").is(":checked"); + emitter.emit( UIEvents.START_MUTED_CHANGED, startAudioMuted, @@ -106,13 +143,13 @@ export default { }); // FOLLOW ME - $("#followMeOptions").change(function () { - let isFollowMeEnabled = $("#followMeCheckBox").is(":checked"); - emitter.emit( - UIEvents.FOLLOW_ME_ENABLED, - isFollowMeEnabled - ); + const followMeToggle = document.getElementById('followMeCheckBox'); + followMeToggle.addEventListener('change', () => { + const isFollowMeEnabled = followMeToggle.checked; + emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled); }); + + UIUtil.showElement(wrapperId); } }, @@ -147,7 +184,8 @@ export default { showStartMutedOptions (show) { if (show && UIUtil.isSettingEnabled('moderator')) { // Only show the subtitle if this isn't the only setting section. - if (!$("#moderatorOptionsTitle").is(":visible")) + if (!$("#moderatorOptionsTitle").is(":visible") + && interfaceConfig.SETTINGS_SECTIONS.length > 1) UIUtil.showElement("moderatorOptionsTitle"); UIUtil.showElement("startMutedOptions"); @@ -214,9 +252,9 @@ export default { * @param {{ deviceId, label, kind }[]} devices list of available devices */ changeDevicesList (devices) { - let $selectCamera= $('#selectCamera'), - $selectMic = $('#selectMic'), - $selectAudioOutput = $('#selectAudioOutput'), + let $selectCamera= AJS.$('#selectCamera'), + $selectMic = AJS.$('#selectMic'), + $selectAudioOutput = AJS.$('#selectAudioOutput'), $selectAudioOutputParent = $selectAudioOutput.parent(); let audio = devices.filter(device => device.kind === 'audioinput'), @@ -241,6 +279,8 @@ export default { videoPermissionGranted)) .prop('disabled', !video.length || !videoPermissionGranted); + initSelect2($selectCamera); + $selectMic .html(generateDevicesOptions( audio, @@ -248,6 +288,8 @@ export default { audioPermissionGranted)) .prop('disabled', !audio.length || !audioPermissionGranted); + initSelect2($selectMic); + if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) { $selectAudioOutput .html(generateDevicesOptions( @@ -258,14 +300,13 @@ export default { videoPermissionGranted || audioPermissionGranted)) .prop('disabled', !audioOutput.length || (!videoPermissionGranted && !audioPermissionGranted)); + initSelect2($selectAudioOutput); $selectAudioOutputParent.show(); } else { $selectAudioOutputParent.hide(); } - $('#devicesOptions').show(); - APP.translation.translateElement($('#settings_container option')); } }; diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 59e93b106..05f1fe92c 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -389,11 +389,9 @@ Toolbar = { * @param show true to show or false to hide */ showAuthenticateButton (show) { - if (UIUtil.isButtonEnabled('authentication') && show) { - $('#authentication').css({display: "inline"}); - } else { - $('#authentication').css({display: "none"}); - } + let display = show ? 'block' : 'none'; + + $('#authenticationContainer').css({display}); }, showEtherpadButton () { @@ -447,12 +445,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(''); } }, @@ -461,7 +461,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"}); @@ -473,7 +473,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/JitsiPopover.js b/modules/UI/util/JitsiPopover.js index f8addfee5..adaab6945 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 */ @@ -76,7 +86,7 @@ var JitsiPopover = (function () { */ JitsiPopover.prototype.createPopover = function () { $("body").append(this.template); - let popoverElem = $(".jitsipopover > .jitsipopover-content"); + let popoverElem = $(".jitsipopover > .jitsipopover__content"); popoverElem.html(this.options.content); APP.translation.translateElement(popoverElem); var self = this; @@ -105,7 +115,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/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/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js index f6259f403..43850adb1 100644 --- a/modules/UI/videolayout/ConnectionIndicator.js +++ b/modules/UI/videolayout/ConnectionIndicator.js @@ -78,10 +78,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") + "%"; } @@ -93,26 +93,40 @@ ConnectionIndicator.prototype.generateText = function () { return `${width}x${height}`; }).join(', ') || 'N/A'; - var result = "" + - "" + - "" + - "" + - "" + - "" + - "" + - "" + - "" + - "
↓" + - downloadBitrate + " ↑" + - uploadBitrate + "
" + packetLoss + "
" + resolutionStr + "
"; + let result = ( + ` + + + + + + + + + + + + +
+ + + ↓${downloadBitrate} + ↑${uploadBitrate} +
+ + ${packetLoss}
+ + + ${resolutionStr} +
`); if(this.videoContainer.videoSpanId == "localVideoContainer") { - result += "

"; + (this.showMoreValue ? "less" : "more") + "'>"; } if (this.showMoreValue) { @@ -131,7 +145,7 @@ ConnectionIndicator.prototype.generateText = function () { if (!this.transport || this.transport.length === 0) { transport = "" + - "" + " N/A"; } else { @@ -163,15 +177,17 @@ ConnectionIndicator.prototype.generateText = function () { var local_address_key = "connectionindicator.localaddress"; var remote_address_key = "connectionindicator.remoteaddress"; var localTransport = - " " + + JSON.stringify({count: data.localIP.length}) + + "'> " + ConnectionIndicator.getStringFromArray(data.localIP) + ""; transport = - " " + + JSON.stringify({count: data.remoteIP.length}) + + "'> " + ConnectionIndicator.getStringFromArray(data.remoteIP) + ""; @@ -180,14 +196,16 @@ ConnectionIndicator.prototype.generateText = function () { transport += "" + "" + - ""; + JSON.stringify({count: this.transport.length}) + + "'>"; localTransport += "" + "" + - ""; + JSON.stringify({count: this.transport.length}) + + "'>"; transport += ConnectionIndicator.getStringFromArray(data.remotePort); @@ -196,19 +214,20 @@ ConnectionIndicator.prototype.generateText = function () { transport += ""; transport += localTransport + ""; transport +="" + - "" + + "" + + "" + "" + this.transport[0].type + ""; } - result += "" + + result += "
" + "" + ""; result += transport + "
" + - "" + + "" + "" + - "↓" + + "↓" + downloadBandwidth + - " ↑" + + " ↑" + uploadBandwidth + "
"; @@ -247,8 +266,9 @@ ConnectionIndicator.prototype.create = function () { this.connectionIndicatorContainer); this.popover = new JitsiPopover( $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"), - {content: "
", - skin: "black"}); + {content: "
", + skin: "black"}); // override popover show method to make sure we will update the content // before showing the popover @@ -359,7 +379,7 @@ 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()}
` ); } }; diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 481afd520..b251d0290 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 diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js index f59e43cc0..b91f6542d 100644 --- a/modules/UI/videolayout/VideoContainer.js +++ b/modules/UI/videolayout/VideoContainer.js @@ -397,7 +397,7 @@ export class VideoContainer extends LargeContainer { this.$avatar.css("visibility", show ? "visible" : "hidden"); this.avatarDisplayed = show; - this.emitter.emit(UIEvents.LARGE_VIDEO_AVATAR_DISPLAYED, show); + this.emitter.emit(UIEvents.LARGE_VIDEO_AVATAR_VISIBLE, show); } /** diff --git a/react/features/base/fontIcons/Icon.js b/react/features/base/fontIcons/Icon.js index f230db5da..6a544d81b 100644 --- a/react/features/base/fontIcons/Icon.js +++ b/react/features/base/fontIcons/Icon.js @@ -2,7 +2,7 @@ // but the file's name and/or location (within the directory structure) don't // reflect that, it suggests the file is platform-independent. import { createIconSetFromIcoMoon } from 'react-native-vector-icons'; -import icoMoonConfig from './fonts/selection.json'; +import icoMoonConfig from './jitsi.json'; /** * Creates the Jitsi icon set from the ico moon project config file. diff --git a/react/features/base/fontIcons/fonts/fontawesome-webfont.eot b/react/features/base/fontIcons/fonts/fontawesome-webfont.eot deleted file mode 100644 index a30335d74..000000000 Binary files a/react/features/base/fontIcons/fonts/fontawesome-webfont.eot and /dev/null differ diff --git a/react/features/base/fontIcons/fonts/fontawesome-webfont.svg b/react/features/base/fontIcons/fonts/fontawesome-webfont.svg deleted file mode 100644 index 6fd19abcb..000000000 --- a/react/features/base/fontIcons/fonts/fontawesome-webfont.svg +++ /dev/null @@ -1,640 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/react/features/base/fontIcons/fonts/fontawesome-webfont.ttf b/react/features/base/fontIcons/fonts/fontawesome-webfont.ttf deleted file mode 100644 index d7994e130..000000000 Binary files a/react/features/base/fontIcons/fonts/fontawesome-webfont.ttf and /dev/null differ diff --git a/react/features/base/fontIcons/fonts/fontawesome-webfont.woff b/react/features/base/fontIcons/fonts/fontawesome-webfont.woff deleted file mode 100644 index 6fd4ede0f..000000000 Binary files a/react/features/base/fontIcons/fonts/fontawesome-webfont.woff and /dev/null differ diff --git a/react/features/base/fontIcons/fonts/fontawesome-webfont.woff2 b/react/features/base/fontIcons/fonts/fontawesome-webfont.woff2 deleted file mode 100644 index 5560193cc..000000000 Binary files a/react/features/base/fontIcons/fonts/fontawesome-webfont.woff2 and /dev/null differ diff --git a/react/features/base/fontIcons/fonts/jitsi.eot b/react/features/base/fontIcons/fonts/jitsi.eot deleted file mode 100755 index 264fbd136..000000000 Binary files a/react/features/base/fontIcons/fonts/jitsi.eot and /dev/null differ diff --git a/react/features/base/fontIcons/fonts/jitsi.svg b/react/features/base/fontIcons/fonts/jitsi.svg deleted file mode 100755 index 7b4ff3645..000000000 --- a/react/features/base/fontIcons/fonts/jitsi.svg +++ /dev/null @@ -1,40 +0,0 @@ - - - -Generated by IcoMoon - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/react/features/base/fontIcons/fonts/jitsi.woff b/react/features/base/fontIcons/fonts/jitsi.woff deleted file mode 100755 index 86cea65c6..000000000 Binary files a/react/features/base/fontIcons/fonts/jitsi.woff and /dev/null differ diff --git a/react/features/base/fontIcons/fonts/selection.json b/react/features/base/fontIcons/jitsi.json old mode 100755 new mode 100644 similarity index 100% rename from react/features/base/fontIcons/fonts/selection.json rename to react/features/base/fontIcons/jitsi.json diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index b92f0b4d8..ed2b492e5 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -118,8 +118,8 @@ export default { /** * Notifies that the avatar is displayed or not on the largeVideo. */ - LARGE_VIDEO_AVATAR_DISPLAYED: "UI.large_video_avatar_displayed", - + LARGE_VIDEO_AVATAR_VISIBLE: "UI.large_video_avatar_visible", + /** * Toggling room lock */