Merge pull request #992 from kkrisstoff/task/make-extended-toolbar-dynamically-created

toolbar: authentication button changed
This commit is contained in:
yanas 2016-10-20 11:40:35 -05:00 committed by GitHub
commit 0fa5aa48af
10 changed files with 79 additions and 53 deletions

View File

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

View File

@ -31,24 +31,6 @@ ul.loginmenu:after {
left: 18px; 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 { a.disabled {
color: gray !important; color: gray !important;
pointer-events: none; pointer-events: none;
@ -73,4 +55,4 @@ ul.loginmenu.extendedToolbarPopup:after {
position: absolute; position: absolute;
top: 18px; top: 18px;
left: -7px; left: -7px;
} }

View File

@ -25,7 +25,7 @@
*/ */
input, label, select, a, input, label, select, a,
.sideToolbarBlock, .input-control, .button-control { .sideToolbarBlock, .input-control, .button-control {
display: inline-block; display: block;
margin-top: 15px; margin-top: 15px;
margin-left: 10%; margin-left: 10%;
width: 80%; width: 80%;
@ -124,3 +124,29 @@
#followMeCheckBox { #followMeCheckBox {
width: 13px !important; 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;
}
}
}
}

View File

@ -20,7 +20,11 @@
} }
&__input { &__input {
margin: 8px 0; margin-bottom: 8px;
&:last-child {
margin-bottom: inherit;
}
&::selection { &::selection {
background-color: $defaultDarkSelectionColor; background-color: $defaultDarkSelectionColor;

View File

@ -103,23 +103,11 @@
<span id="mainToolbar" class="toolbar"></span> <span id="mainToolbar" class="toolbar"></span>
</div> </div>
<div id="subject" class="hide"></div> <div id="subject" class="hide"></div>
<div id="extendedToolbar" class="toolbar"> <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"> <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"/> <img id="avatar" src="images/avatar2.png"/>
</a> </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"> <a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
<span class="badge-round"> <span class="badge-round">
<span id="numberOfParticipants"></span> <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-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-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></a>
<a class="button icon-feedback" id="feedbackButton"></a> <a class="button icon-feedback" id="feedbackButton"></a>
<div id="sideToolbarContainer"> <div id="sideToolbarContainer">
<div id="profile_container" class="sideToolbarContainer__inner"> <div id="profile_container" class="sideToolbarContainer__inner">
<div class="title" data-i18n="profile.title"></div> <div class="title" data-i18n="profile.title"></div>
@ -155,6 +144,18 @@
<label data-i18n="profile.setEmailLabel"></label> <label data-i18n="profile.setEmailLabel"></label>
<input type="text" id="setEmail" placeholder="Enter e-mail"> <input type="text" id="setEmail" placeholder="Enter e-mail">
</div> </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>
<div id="chat_container" class="sideToolbarContainer__inner"> <div id="chat_container" class="sideToolbarContainer__inner">
<div id="nickname"> <div id="nickname">

View File

@ -17,6 +17,10 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true, GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
APP_NAME: "Jitsi Meet", APP_NAME: "Jitsi Meet",
INVITATION_POWERED_BY: true, 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 // the toolbar buttons line is intentionally left in one line, to be able
// to easily override values or remove them using regex // to easily override values or remove them using regex
MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line

View File

@ -1141,11 +1141,12 @@ UI.notifyFocusLeft = function () {
* @param {string} [login] current login * @param {string} [login] current login
*/ */
UI.updateAuthInfo = function (isAuthEnabled, login) { UI.updateAuthInfo = function (isAuthEnabled, login) {
let showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled();
let loggedIn = !!login; let loggedIn = !!login;
Toolbar.showAuthenticateButton(isAuthEnabled); Toolbar.showAuthenticateButton(showAuth);
if (isAuthEnabled) { if (showAuth) {
Toolbar.setAuthenticatedIdentity(login); Toolbar.setAuthenticatedIdentity(login);
Toolbar.showLoginButton(!loggedIn); Toolbar.showLoginButton(!loggedIn);

View File

@ -8,16 +8,15 @@ function getPasswordInputHtml() {
let placeholder = config.hosts.authdomain let placeholder = config.hosts.authdomain
? "user identity" ? "user identity"
: "user@domain.net"; : "user@domain.net";
let passRequiredMsg = APP.translation.translateString(
"dialog.passwordRequired"
);
return ` return `
<h2 data-i18n="dialog.passwordRequired">${passRequiredMsg}</h2> <input name="username" type="text"
<input name="username" type="text" placeholder=${placeholder} autofocus> class="input-control__input"
placeholder=${placeholder} autofocus>
<input name="password" type="password" <input name="password" type="password"
class="input-control__input"
data-i18n="[placeholder]dialog.userPassword" data-i18n="[placeholder]dialog.userPassword"
placeholder="user password"> placeholder="user password">`;
`;
} }
/** /**
@ -80,6 +79,7 @@ function LoginDialog(successCallback, cancelCallback) {
const states = { const states = {
login: { login: {
title: APP.translation.translateString('dialog.passwordRequired'),
html: getPasswordInputHtml(), html: getPasswordInputHtml(),
buttons: loginButtons, buttons: loginButtons,
focus: ':input:first', focus: ':input:first',

View File

@ -391,11 +391,9 @@ Toolbar = {
* @param show <tt>true</tt> to show or <tt>false</tt> to hide * @param show <tt>true</tt> to show or <tt>false</tt> to hide
*/ */
showAuthenticateButton (show) { showAuthenticateButton (show) {
if (UIUtil.isButtonEnabled('authentication') && show) { let display = show ? 'block' : 'none';
$('#authentication').css({display: "inline"});
} else { $('#authenticationContainer').css({display});
$('#authentication').css({display: "none"});
}
}, },
showEtherpadButton () { showEtherpadButton () {
@ -449,12 +447,14 @@ Toolbar = {
* @param authIdentity identity name to be displayed. * @param authIdentity identity name to be displayed.
*/ */
setAuthenticatedIdentity (authIdentity) { setAuthenticatedIdentity (authIdentity) {
let selector = $('#toolbar_auth_identity');
if (authIdentity) { if (authIdentity) {
let selector = $('#toolbar_auth_identity');
selector.css({display: "list-item"}); selector.css({display: "list-item"});
selector.text(authIdentity); selector.text(authIdentity);
} else { } 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 * @param show <tt>true</tt> to show
*/ */
showLoginButton (show) { showLoginButton (show) {
if (UIUtil.isButtonEnabled('authentication') && show) { if (show) {
$('#toolbar_button_login').css({display: "list-item"}); $('#toolbar_button_login').css({display: "list-item"});
} else { } else {
$('#toolbar_button_login').css({display: "none"}); $('#toolbar_button_login').css({display: "none"});
@ -475,7 +475,7 @@ Toolbar = {
* @param show <tt>true</tt> to show * @param show <tt>true</tt> to show
*/ */
showLogoutButton (show) { showLogoutButton (show) {
if (UIUtil.isButtonEnabled('authentication') && show) { if (show) {
$('#toolbar_button_logout').css({display: "list-item"}); $('#toolbar_button_logout').css({display: "list-item"});
} else { } else {
$('#toolbar_button_logout').css({display: "none"}); $('#toolbar_button_logout').css({display: "none"});

View File

@ -204,6 +204,15 @@ const TOOLTIP_POSITIONS = {
return interfaceConfig.SETTINGS_SECTIONS.indexOf(name) !== -1; 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. * Shows the element given by id.
* *