haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
parent 3bf8b7fbe2 436f3b9d9b
commit 0fa5aa48af
10 changed files with 79 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
conference.js
View File

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

18
css/_login_menu.scss
View File

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

28
css/_side_toolbar_container.scss
View File

@ -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%;
@ -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;
}
}
}
}

6
css/input-control/_input-control.scss
View File

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

27
index.html
View File

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

4
interface_config.js
View File

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

5
modules/UI/UI.js
View File

@ -1141,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);

14
modules/UI/authentication/LoginDialog.js
View File

@ -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',

18
modules/UI/toolbars/Toolbar.js
View File

@ -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) {
if (authIdentity) {
let selector = $('#toolbar_auth_identity');
if (authIdentity) {
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"});

9
modules/UI/util/UIUtil.js
View File

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