toolbar: authentication button changed

2016-10-08 00:47:43 +03:00 · 2016-10-08 00:47:43 +03:00 · 71475038ba
parent 8ca0943881
commit 71475038ba
6 changed files with 118 additions and 30 deletions
--- 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;
+        }
+    }
+}
--- 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%;
--- a/index.html
+++ b/index.html
@ -103,23 +103,12 @@
                <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-avatar authentication" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
            <a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
                <span class="badge-round">
                    <span id="numberOfParticipants"></span>
@ -144,7 +133,19 @@
            <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="authentication_container" class="auth_container">
+                    <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 id="profile_container" class="sideToolbarContainer__inner">
                    <div class="title" data-i18n="profile.title"></div>
                    <div class="sideToolbarBlock first">
--- 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.
 */
--- 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,
+        '<input id="' + inviteLinkId + '" type="text" '
+            + inviteAttributes + ' readonly/>',
+        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"});
        }
    },

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