Merge branch 'master' into kkrisstoff-task/dropdown-aui-changes

conference.js

@@ -1086,7 +1086,6 @@ export default {
             }
         );
 
-
         room.on(ConferenceEvents.USER_JOINED, (id, user) => {
             if (user.isHidden())
                 return;

css/_base.scss

@@ -186,6 +186,7 @@ form {
 }
 
 .link {
+    cursor: pointer;
     color: $linkFontColor;
     @include transition(color .1s ease-out);
 

css/_jitsi_popover.scss

@@ -8,98 +8,87 @@
     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: 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);*/
     white-space: normal;
     margin-top: -10px;
     margin-bottom: 35px;
-}
 
-.jitsipopover.black
-{
-    background-color: rgba(0,0,0,0.8);
-    color: #ffffff;
-}
+    &__title {
+        text-align: left;
+        margin: 0;
+        padding: 0;
+    }
 
-.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;
-}
+    &__icon {
+        margin-right: 2px;
+    }
 
-.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;
-}
+    &__green
+    {
+        @extend .jitsipopover__icon;
+        color: #4abd04;
+    }
 
-.jitsipopover.black > .arrow:after
-{
-    border-top-color: rgba(0, 0, 0, 0.8);
-}
+    &__orange
+    {
+        @extend .jitsipopover__icon;
+        color: #ffa800;
+    }
 
-.jitsiPopupmenuPadding {
-    height: 35px;
-    width: 100px;
-    position: absolute;
-    bottom: -35px;
-}
+    &__menu-padding {
+        height: 35px;
+        width: 100px;
+        position: absolute;
+        bottom: -35px;
+    }
 
-.jitsipopover_green
-{
-    color: #4abd04;
-}
+    &__showmore {
+        display: block;
+        text-align: center;
+        width: 90px;
+        margin: 10px auto;
+    }
 
-.jitsipopover_orange
-{
-    color: #ffa800;
-}
+    &__clear {
+        position: absolute;
+        display: block;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+    }
 
-.jitsipopover_blue
-{
-    color: #21B9FC;
-}
+    > .arrow {
+        border-width: 5px 2.5px 0 2.5px;
+        left: 50%;
+        margin-left: -5px;
+        @extend .jitsipopover__clear;
+        border-bottom-width: 0;
+        border-top-color: $popoverBg;
+        bottom: -5px;
 
-.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;
+
+        &:after {
+            border-width: 5px;
+            content: " ";
+            bottom: 1px;
+            margin-left: -5px;
+            @extend .jitsipopover__clear;
+            border-bottom-width: 0;
+            border-top-color: $popoverBg;
+        }
+    }
 }

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;
-}
+}

css/_side_toolbar_container.scss

@@ -24,7 +24,7 @@
      */
     input, select, a,
     .sideToolbarBlock, .input-control, .button-control {
-        display: inline-block;
+        display: block;
         margin-top: 15px;
         margin-left: 10%;
         width: 80%;
@@ -118,3 +118,29 @@
     width : auto !important;
     text-align: center;
 }
+
+/**
+ * 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;
+            }
+        }
+    }
+}

css/_variables.scss

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

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;

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;
+    }
+}

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;

css/main.scss

@@ -61,6 +61,7 @@
 @import 'shortcuts/main';
 @import 'buttons/button-control';
 @import "modals/invite/invite";
+@import "connection-info";
 @import 'aui-components/dropdown';
 
-/* Modules END */
+/* Modules END */

css/themes/_light.scss

@@ -43,4 +43,8 @@ $labelFontWeight: 400;
 $hintFontSize: em(13, 14);
 $linkFontColor: #3572b0;
 $linkHoverFontColor: darken(#3572b0, 10%);
-$dropdownColor: #333;
+$dropdownColor: #333;
+
+// Popover colors
+$popoverBg: #000;
+$popoverFontColor: #ffffff;

index.html

@@ -103,23 +103,11 @@
                 <span id="mainToolbar" class="toolbar"></span>
         </div>
         <div id="subject" class="hide"></div>
+
         <div id="extendedToolbar" class="toolbar">
             <a class="button" id="toolbar_button_profile" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile" content="Edit your profile">
                 <img id="avatar" src="images/avatar2.png"/>
             </a>
-            <span id="authentication" class="authentication" style="display: none">
-                <a class="button icon-avatar" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
-                <ul class="loginmenu extendedToolbarPopup">
-                    <span class="loginmenuPadding"></span>
-                    <li id="toolbar_auth_identity"></li>
-                    <li id="toolbar_button_login">
-                        <a class="authButton" data-i18n="toolbar.login"></a>
-                    </li>
-                    <li id="toolbar_button_logout">
-                        <a class="authButton" data-i18n="toolbar.logout"></a>
-                    </li>
-                </ul>
-            </span>
             <a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
                 <span class="badge-round">
                     <span id="numberOfParticipants"></span>
@@ -144,6 +132,7 @@
             <a class="button icon-raised-hand" id="toolbar_button_raisehand" shortcut="raiseHandPopover"></a>
             <a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></a>
             <a class="button icon-feedback" id="feedbackButton"></a>
+
             <div id="sideToolbarContainer">
                 <div id="profile_container" class="sideToolbarContainer__inner">
                     <div class="title" data-i18n="profile.title"></div>
@@ -155,6 +144,18 @@
                         <label data-i18n="profile.setEmailLabel"></label>
                         <input type="text" id="setEmail" placeholder="Enter e-mail">
                     </div>
+                    <div class="sideToolbarBlock auth_container" id="authenticationContainer">
+                        <p data-i18n="toolbar.authenticate"></p>
+                        <ul>
+                            <li id="toolbar_auth_identity"></li>
+                            <li id="toolbar_button_login">
+                                <a class="authButton" data-i18n="toolbar.login"></a>
+                            </li>
+                            <li id="toolbar_button_logout">
+                                <a class="authButton" data-i18n="toolbar.logout"></a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
                 <div id="chat_container" class="sideToolbarContainer__inner">
                     <div id="nickname">

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

lang/main.json

@@ -151,6 +151,7 @@
     },
     "connectionindicator":
     {
+        "header": "Connection data",
         "bitrate": "Bitrate:",
         "packetloss": "Packet loss:",
         "resolution": "Resolution:",

modules/UI/UI.js

@@ -764,6 +764,7 @@ UI.getRemoteVideoType = function (jid) {
 
 UI.connectionIndicatorShowMore = function(id) {
     VideoLayout.showMore(id);
+    return false;
 };
 
 // FIXME check if someone user this
@@ -1140,11 +1141,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);

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 `
-        <h2 data-i18n="dialog.passwordRequired">${passRequiredMsg}</h2>
-        <input name="username" type="text" placeholder=${placeholder} autofocus>
+        <input name="username" type="text" 
+               class="input-control__input"
+               placeholder=${placeholder} autofocus>
         <input name="password" type="password"
+               class="input-control__input"
                data-i18n="[placeholder]dialog.userPassword"
-               placeholder="user password">
-        `;
+               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',

modules/UI/toolbars/Toolbar.js

@@ -391,11 +391,9 @@ Toolbar = {
      * @param show <tt>true</tt> to show or <tt>false</tt> 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 () {
@@ -449,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('');
         }
     },
 
@@ -463,7 +463,7 @@ Toolbar = {
      * @param show <tt>true</tt> 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"});
@@ -475,7 +475,7 @@ Toolbar = {
      * @param show <tt>true</tt> 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"});

modules/UI/util/JitsiPopover.js

@@ -29,8 +29,8 @@ var JitsiPopover = (function () {
         this.element = element;
         this.template = ' <div class="jitsipopover ' + this.options.skin +
             '"><div class="arrow"></div>' +
-            '<div class="jitsipopover-content"></div>' +
-            '<div class="jitsiPopupmenuPadding"></div></div>';
+            '<div class="jitsipopover__content"></div>' +
+            '<div class="jitsipopover__menu-padding"></div></div>';
         var self = this;
         this.element.on("mouseenter", function () {
             self.elementIsHovered = true;
@@ -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});
             }
         });

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.
      *

modules/UI/videolayout/ConnectionIndicator.js

@@ -80,10 +80,10 @@ ConnectionIndicator.prototype.generateText = function () {
         packetLoss = "N/A";
     } else {
 
-        packetLoss = "<span class='jitsipopover_green'>&darr;</span>" +
+        packetLoss = "<span class='jitsipopover__green'>&darr;</span>" +
             (this.packetLoss.download !== null ?
                 this.packetLoss.download : "N/A") +
-            "% <span class='jitsipopover_orange'>&uarr;</span>" +
+            "% <span class='jitsipopover__orange'>&uarr;</span>" +
             (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
             "%";
     }
@@ -95,31 +95,48 @@ ConnectionIndicator.prototype.generateText = function () {
         return `${width}x${height}`;
     }).join(', ') || 'N/A';
 
-    var result = "<table style='width:100%'>" +
-        "<tr>" +
-        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.bitrate'>" +
-        translate("connectionindicator.bitrate") + "</span></td>" +
-        "<td><span class='jitsipopover_green'>&darr;</span>" +
-        downloadBitrate + " <span class='jitsipopover_orange'>&uarr;</span>" +
-        uploadBitrate + "</td>" +
-        "</tr><tr>" +
-        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.packetloss'>" +
-        translate("connectionindicator.packetloss") + "</span></td>" +
-        "<td>" + packetLoss  + "</td>" +
-        "</tr><tr>" +
-        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.resolution'>" +
-        translate("connectionindicator.resolution") + "</span></td>" +
-        "<td>" + resolutionStr + "</td></tr></table>";
+    let result = (
+        `<table class="connection-info__container" style='width:100%'>
+            <tr>
+                <td>
+                    <span data-i18n='connectionindicator.bitrate'>
+                        ${translate("connectionindicator.bitrate")}
+                    </span>
+                </td>
+                <td>
+                    <span class='jitsipopover__green'>&darr;</span>${downloadBitrate}
+                    <span class='jitsipopover__orange'>&uarr;</span>${uploadBitrate}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <span data-i18n='connectionindicator.packetloss'>
+                        ${translate("connectionindicator.packetloss")}
+                    </span>
+                </td>
+                <td>${packetLoss}</td>
+            </tr>
+            <tr>
+                <td>
+                    <span data-i18n='connectionindicator.resolution'>
+                        ${translate("connectionindicator.resolution")}
+                    </span>
+                </td>
+                <td>
+                    ${resolutionStr}
+                </td>
+            </tr>
+        </table>`);
 
     if(this.videoContainer.videoSpanId == "localVideoContainer") {
-        result += "<div class=\"jitsipopover_showmore\" " +
+        result += "<a class=\"jitsipopover__showmore link\" " +
             "onclick = \"APP.UI.connectionIndicatorShowMore('" +
             // FIXME: we do not know local id when this text is generated
             //this.id + "')\"  data-i18n='connectionindicator." +
             "local')\"  data-i18n='connectionindicator." +
                 (this.showMoreValue ? "less" : "more") + "'>" +
             translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) +
-            "</div><br />";
+            "</a>";
     }
 
     if (this.showMoreValue) {
@@ -138,7 +155,7 @@ ConnectionIndicator.prototype.generateText = function () {
 
         if (!this.transport || this.transport.length === 0) {
             transport = "<tr>" +
-                "<td><span class='jitsipopover_blue' " +
+                "<td><span " +
                 "data-i18n='connectionindicator.address'>" +
                 translate("connectionindicator.address") + "</span></td>" +
                 "<td> N/A</td></tr>";
@@ -171,7 +188,7 @@ ConnectionIndicator.prototype.generateText = function () {
             var local_address_key = "connectionindicator.localaddress";
             var remote_address_key = "connectionindicator.remoteaddress";
             var localTransport =
-                "<tr><td><span class='jitsipopover_blue' data-i18n='" +
+                "<tr><td><span data-i18n='" +
                 local_address_key +"' data-i18n-options='" +
                     JSON.stringify({count: data.localIP.length}) + "'>" +
                     translate(local_address_key, {count: data.localIP.length}) +
@@ -179,7 +196,7 @@ ConnectionIndicator.prototype.generateText = function () {
                 ConnectionIndicator.getStringFromArray(data.localIP) +
                 "</td></tr>";
             transport =
-                "<tr><td><span class='jitsipopover_blue' data-i18n='" +
+                "<tr><td><span data-i18n='" +
                 remote_address_key + "' data-i18n-options='" +
                     JSON.stringify({count: data.remoteIP.length}) + "'>" +
                     translate(remote_address_key,
@@ -193,14 +210,14 @@ ConnectionIndicator.prototype.generateText = function () {
 
             transport += "<tr>" +
                 "<td>" +
-                "<span class='jitsipopover_blue' data-i18n='" + key_remote +
+                "<span data-i18n='" + key_remote +
                 "' data-i18n-options='" +
                 JSON.stringify({count: this.transport.length}) + "'>" +
                 translate(key_remote, {count: this.transport.length}) +
                 "</span></td><td>";
             localTransport += "<tr>" +
                 "<td>" +
-                "<span class='jitsipopover_blue' data-i18n='" + key_local +
+                "<span data-i18n='" + key_local +
                 "' data-i18n-options='" +
                 JSON.stringify({count: this.transport.length}) + "'>" +
                 translate(key_local, {count: this.transport.length}) +
@@ -213,21 +230,21 @@ ConnectionIndicator.prototype.generateText = function () {
             transport += "</td></tr>";
             transport += localTransport + "</td></tr>";
             transport +="<tr>" +
-                "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.transport'>" +
+                "<td><span data-i18n='connectionindicator.transport'>" +
                 translate("connectionindicator.transport") + "</span></td>" +
                 "<td>" + this.transport[0].type + "</td></tr>";
 
         }
 
-        result += "<table  style='width:100%'>" +
+        result += "<table class='connection-info__container' style='width:100%'>" +
             "<tr>" +
             "<td>" +
-            "<span class='jitsipopover_blue' data-i18n='connectionindicator.bandwidth'>" +
+            "<span data-i18n='connectionindicator.bandwidth'>" +
             translate("connectionindicator.bandwidth") + "</span>" +
             "</td><td>" +
-            "<span class='jitsipopover_green'>&darr;</span>" +
+            "<span class='jitsipopover__green'>&darr;</span>" +
             downloadBandwidth +
-            " <span class='jitsipopover_orange'>&uarr;</span>" +
+            " <span class='jitsipopover__orange'>&uarr;</span>" +
             uploadBandwidth + "</td></tr>";
 
         result += transport + "</table>";
@@ -266,7 +283,7 @@ ConnectionIndicator.prototype.create = function () {
         this.connectionIndicatorContainer);
     this.popover = new JitsiPopover(
         $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"),
-        {content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" +
+        {content: "<div class=\"connection-info\" data-i18n='connectionindicator.na'>" +
             APP.translation.translateString("connectionindicator.na") + "</div>",
             skin: "black"});
 
@@ -379,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(
-            `<div class="connection_info">${this.generateText()}</div>`
+            `<div class="connection-info">${this.generateText()}</div>`
         );
-        APP.translation.translateElement($(".connection_info"));
+        APP.translation.translateElement($(".connection-info"));
     }
 };