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