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

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

${passRequiredMsg}

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