infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Select what we want to display in the toolbar

Browse Source
pull/1/head
yflory 8 years ago
parent 2afdc11327
commit 767ba8b549
9 changed files with 182 additions and 155 deletions
Show Stats Download Patch File Download Diff File

1
customize.dist/main.css
Unescape Escape View File

@ -380,6 +380,7 @@
padding: 5px; padding: 5px;
margin: 0; margin: 0;
white-space: normal; white-space: normal;
text-align: left;
} }
.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users { .dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users {
text-align: baseline; text-align: baseline;

1
customize.dist/src/less/dropdown.less
Unescape Escape View File

@ -67,6 +67,7 @@
padding: 5px; padding: 5px;
margin: 0; margin: 0;
white-space: normal; white-space: normal;
text-align: left;
&.cryptpad-dropdown-users { &.cryptpad-dropdown-users {
text-align:baseline; text-align:baseline;
.yourself, .anonymous, .viewer { .yourself, .anonymous, .viewer {

1
customize.dist/toolbar.css
Unescape Escape View File

@ -49,6 +49,7 @@
padding: 5px; padding: 5px;
margin: 0; margin: 0;
white-space: normal; white-space: normal;
text-align: left;
} }
.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users { .dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users {
text-align: baseline; text-align: baseline;

1
www/code/main.js
Unescape Escape View File

@ -375,6 +375,7 @@ define([
}); });
var config = { var config = {
displayed: ['useradmin', 'language', 'spinner', 'lag', 'state', 'share', 'userlist'],
userData: userData, userData: userData,
readOnly: readOnly, readOnly: readOnly,
ifrw: ifrw, ifrw: ifrw,

329
www/common/toolbar.js
Unescape Escape View File

@ -39,10 +39,6 @@ define([
var TITLE_CLS = Bar.constants.title = "cryptpad-title"; var TITLE_CLS = Bar.constants.title = "cryptpad-title";
var USER_CLS = Bar.constants.userAdmin = "cryptpad-user"; var USER_CLS = Bar.constants.userAdmin = "cryptpad-user";
/** Key in the localStore which indicates realtime activity should be disallowed. */
// TODO remove? will never be used in cryptpad
var LOCALSTORAGE_DISALLOW = Bar.constants.localstorageDisallow = 'cryptpad-disallow';
var SPINNER_DISAPPEAR_TIME = 3000; var SPINNER_DISAPPEAR_TIME = 3000;
var uid = function () { var uid = function () {
@ -79,16 +75,19 @@ define([
return $toolbar; return $toolbar;
}; };
var createSpinner = function ($container) { var createSpinner = function ($container, config) {
var $spinner = $('<span>', { if (config.displayed.indexOf('spinner') !== -1) {
id: uid(), var $spinner = $('<span>', {
'class': SPINNER_CLS + ' fa fa fa-spinner fa-pulse', id: uid(),
}).hide(); 'class': SPINNER_CLS + ' fa fa fa-spinner fa-pulse',
$container.prepend($spinner); }).hide();
return $spinner[0]; $container.prepend($spinner);
return $spinner[0];
}
}; };
var kickSpinner = function (spinnerElement) { var kickSpinner = function (spinnerElement) {
if (!spinnerElement) { return; }
$(spinnerElement).show(); $(spinnerElement).show();
if (spinnerElement.timeout) { clearTimeout(spinnerElement.timeout); } if (spinnerElement.timeout) { clearTimeout(spinnerElement.timeout); }
spinnerElement.timeout = setTimeout(function () { spinnerElement.timeout = setTimeout(function () {
@ -96,37 +95,45 @@ define([
}, SPINNER_DISAPPEAR_TIME); }, SPINNER_DISAPPEAR_TIME);
}; };
var createUserButtons = function ($userlistElement, readOnly, Cryptpad) { var createUserButtons = function ($userlistElement, config, readOnly, Cryptpad) {
// User list button // User list button
var dropdownConfig = { if (config.displayed.indexOf('userlist') !== -1) {
options: [{ if (!config.userData) {
tag: 'p', throw new Error("You must provide a `userData` object to display the userlist");
attributes: {'class': USERLIST_CLS}, }
}] // Entries displayed in the menu var dropdownConfig = {
}; options: [{
var $block = Cryptpad.createDropdown(dropdownConfig); tag: 'p',
$block.attr('id', 'userButtons'); attributes: {'class': USERLIST_CLS},
$userlistElement.append($block); }] // Entries displayed in the menu
};
var $block = Cryptpad.createDropdown(dropdownConfig);
$block.attr('id', 'userButtons');
$userlistElement.append($block);
}
// Share button // Share button
var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'}); if (config.displayed.indexOf('share') !== -1) {
var $span = $('<span>', {'class': 'large'}).append($shareIcon.clone()).append(' ' +Messages.shareButton); var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
var $spanSmall = $('<span>', {'class': 'small'}).append($shareIcon.clone()); var $span = $('<span>', {'class': 'large'}).append($shareIcon.clone()).append(' ' +Messages.shareButton);
var dropdownConfigShare = { var $spanSmall = $('<span>', {'class': 'small'}).append($shareIcon.clone());
text: $('<div>').append($span).append($spanSmall).html(), var dropdownConfigShare = {
options: [] text: $('<div>').append($span).append($spanSmall).html(),
}; options: []
var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare); };
$shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS); var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
$userlistElement.append($shareBlock); $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
$userlistElement.append($shareBlock);
}
}; };
var createUserList = function ($container, readOnly, Cryptpad) { var createUserList = function ($container, config, readOnly, Cryptpad) {
if (config.displayed.indexOf('userlist') === -1 && config.displayed.indexOf('share') === -1) { return; }
var $userlist = $('<div>', { var $userlist = $('<div>', {
'class': USER_LIST_CLS, 'class': USER_LIST_CLS,
id: uid(), id: uid(),
}); });
createUserButtons($userlist, readOnly, Cryptpad); createUserButtons($userlist, config, readOnly, Cryptpad);
$container.append($userlist); $container.append($userlist);
return $userlist[0]; return $userlist[0];
}; };
@ -167,84 +174,82 @@ define([
$stateElement.text(''); $stateElement.text('');
}; };
var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $userAdminElement) { var updateUserList = function (config, myUserName, userlistElement, userList, userData, readOnly, $userAdminElement) {
// Make sure the elements are displayed // Make sure the elements are displayed
var $userButtons = $(userlistElement).find("#userButtons"); var $userButtons = $(userlistElement).find("#userButtons");
$userButtons.attr('display', 'inline'); $userButtons.attr('display', 'inline');
var numberOfUsers = userList.length; if (config.displayed.indexOf('userlist') !== -1) {
var numberOfUsers = userList.length;
// If we are using old pads (readonly unavailable), only editing users are in userList. // If we are using old pads (readonly unavailable), only editing users are in userList.
// With new pads, we also have readonly users in userList, so we have to intersect with // With new pads, we also have readonly users in userList, so we have to intersect with
// the userData to have only the editing users. We can't use userData directly since it // the userData to have only the editing users. We can't use userData directly since it
// may contain data about users that have already left the channel. // may contain data about users that have already left the channel.
userList = readOnly === -1 ? userList : arrayIntersect(userList, Object.keys(userData)); userList = readOnly === -1 ? userList : arrayIntersect(userList, Object.keys(userData));
var numberOfEditUsers = userList.length; var numberOfEditUsers = userList.length;
var numberOfViewUsers = numberOfUsers - numberOfEditUsers; var numberOfViewUsers = numberOfUsers - numberOfEditUsers;
// Names of editing users // Names of editing users
var editUsersNames = getOtherUsers(myUserName, userList, userData); var editUsersNames = getOtherUsers(myUserName, userList, userData);
// Number of anonymous editing users // Number of anonymous editing users
var anonymous = numberOfEditUsers - editUsersNames.length; var anonymous = numberOfEditUsers - editUsersNames.length;
// Update the userlist // Update the userlist
var editUsersList = ''; var editUsersList = '';
if (readOnly !== 1) { if (readOnly !== 1) {
editUsersNames.unshift('<span class="yourself">' + Messages.yourself + '</span>'); editUsersNames.unshift('<span class="yourself">' + Messages.yourself + '</span>');
anonymous--; anonymous--;
} }
if (anonymous > 0) { if (anonymous > 0) {
var text = anonymous === 1 ? Messages.anonymousUser : Messages.anonymousUsers; var text = anonymous === 1 ? Messages.anonymousUser : Messages.anonymousUsers;
editUsersNames.push('<span class="anonymous">' + anonymous + ' ' + text + '</span>'); editUsersNames.push('<span class="anonymous">' + anonymous + ' ' + text + '</span>');
} }
if (numberOfViewUsers > 0) { if (numberOfViewUsers > 0) {
var viewText = '<span class="viewer">'; var viewText = '<span class="viewer">';
if (numberOfEditUsers > 0) { if (numberOfEditUsers > 0) {
editUsersNames.push(''); editUsersNames.push('');
viewText += Messages.and + ' '; viewText += Messages.and + ' ';
}
var viewerText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer;
viewText += numberOfViewUsers + ' ' + viewerText + '</span>';
editUsersNames.push(viewText);
}
if (editUsersNames.length > 0) {
editUsersList += editUsersNames.join('<br>');
} }
var viewerText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer;
viewText += numberOfViewUsers + ' ' + viewerText + '</span>';
editUsersNames.push(viewText);
}
if (editUsersNames.length > 0) {
editUsersList += editUsersNames.join('<br>');
}
var $usersTitle = $('<h2>').text(Messages.users); var $usersTitle = $('<h2>').text(Messages.users);
var $editUsers = $userButtons.find('.' + USERLIST_CLS); var $editUsers = $userButtons.find('.' + USERLIST_CLS);
$editUsers.html('').append($usersTitle).append(editUsersList); $editUsers.html('').append($usersTitle).append(editUsersList);
// Update the buttons // Update the buttons
var fa_caretdown = '<span class="fa fa-caret-down" style="font-family:FontAwesome;"></span>'; var fa_caretdown = '<span class="fa fa-caret-down" style="font-family:FontAwesome;"></span>';
var fa_editusers = '<span class="fa fa-users" style="font-family:FontAwesome;"></span>'; var fa_editusers = '<span class="fa fa-users" style="font-family:FontAwesome;"></span>';
var fa_viewusers = '<span class="fa fa-eye" style="font-family:FontAwesome;"></span>'; var fa_viewusers = '<span class="fa fa-eye" style="font-family:FontAwesome;"></span>';
var viewersText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer; var viewersText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer;
var editorsText = numberOfEditUsers > 1 ? Messages.editors : Messages.editor; var editorsText = numberOfEditUsers > 1 ? Messages.editors : Messages.editor;
// $userButtons.find('.userlist.edit').html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText + ' ' + fa_caretdown); var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText); var $spansmall = $('<span>', {'class': 'small'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
// $userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown); $userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
var $spansmall = $('<span>', {'class': 'small'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
$userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
// Change username button
var $userElement = $userAdminElement.find('.' + USERNAME_CLS);
$userElement.show();
if (readOnly === 1) {
//$userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>');
$userElement.addClass('ro').text(Messages.readonly);
} }
else {
var name = userData[myUserName] && userData[myUserName].name; if (config.displayed.indexOf('useradmin') !== -1) {
//var icon = '<span class="fa fa-user" style="font-family:FontAwesome;"></span>'; // Change username in useradmin dropdown
if (!name) { var $userElement = $userAdminElement.find('.' + USERNAME_CLS);
name = Messages.anonymous; $userElement.show();
if (readOnly === 1) {
$userElement.addClass(READONLY_CLS).text(Messages.readonly);
}
else {
var name = userData[myUserName] && userData[myUserName].name;
if (!name) {
name = Messages.anonymous;
}
$userElement.removeClass(READONLY_CLS).text(name);
} }
// $userElement.find("button").show();
// $userElement.find("button").html(icon + ' ' + name);
$userElement.removeClass('ro').text(name);
} }
}; };
@ -321,6 +326,7 @@ define([
}; };
var createUserAdmin = function ($topContainer, config, lagElement, Cryptpad) { var createUserAdmin = function ($topContainer, config, lagElement, Cryptpad) {
if (config.displayed.indexOf('useradmin') === -1 && config.displayed.indexOf('share') === -1) { return; }
var $lag = $(lagElement); var $lag = $(lagElement);
//TODO check if we should displayed that button and if we can (userName.setName, userName.lastName and userdata required) //TODO check if we should displayed that button and if we can (userName.setName, userName.lastName and userdata required)
@ -328,65 +334,77 @@ define([
'class': USER_CLS 'class': USER_CLS
}).appendTo($topContainer); }).appendTo($topContainer);
var $state = $('<span>', { if (config.displayed.indexOf('state') !== -1) {
'class': STATE_CLS var $state = $('<span>', {
}).text(Messages.synchronizing).appendTo($userContainer); 'class': STATE_CLS
}).text(Messages.synchronizing).appendTo($userContainer);
}
$userContainer.append($lag); if (config.displayed.indexOf('lag') !== -1) {
$userContainer.append($lag);
}
// Dropdown language selector if (config.displayed.indexOf('language') !== -1) {
Cryptpad.createLanguageSelector($userContainer); // Dropdown language selector
Cryptpad.createLanguageSelector($userContainer);
}
// User dropdown // User dropdown
var $displayedName = $('<span>', {'class': USERNAME_CLS}); if (config.displayed.indexOf('useradmin') !== -1) {
var accountName = null; //TODO Cryptpad.getStore().getAccountName() if (!config.userName || !config.userName.setName || !config.userName.lastName) {
var account = typeof accountName === "string"; throw new Error("You must provide a `userName` object containing `setName` (function) " +
var $userAdminContent = $('<p>'); "and `lastName` (object) if you want to display the user admin menu.")
if (account) { }
var $userAccount = $('<span>', {'class': 'userAccount'}).append('Account: ' + accountName); var $displayedName = $('<span>', {'class': USERNAME_CLS});
$userAdminContent.append($userAccount); var accountName = null; //TODO Cryptpad.getStore().getAccountName()
$userAdminContent.append($('<br>')); var account = typeof accountName === "string";
} var $userAdminContent = $('<p>');
var $userName = $('<span>', {'class': 'userDisplayName'}).append('Display name: ').append($displayedName.clone()); if (account) {
$userAdminContent.append($userName); var $userAccount = $('<span>', {'class': 'userAccount'}).append('Account: ' + accountName);
var options = [{ $userAdminContent.append($userAccount);
tag: 'p', $userAdminContent.append($('<br>'));
content: $userAdminContent.html() }
}, { var $userName = $('<span>', {'class': 'userDisplayName'}).append('Display name: ').append($displayedName.clone());
tag: 'a', $userAdminContent.append($userName);
attributes: {'class': 'changeUserName'}, var options = [{
content: 'Change username' tag: 'p',
}, { content: $userAdminContent.html()
tag: 'a', }, {
attributes: {'class': 'login'}, //TODO tag: 'a',
content: 'Login' attributes: {'class': 'changeUserName'},
}, { content: 'Change username'
tag: 'a', }, {
attributes: {'class': 'logout'}, //TODO tag: 'a',
content: 'Logout' attributes: {'class': 'login'}, //TODO
}]; content: 'Login'
var $icon = $('<span>', {'class': 'fa fa-user'}); }, {
var $button = $('<div>').append($icon).append($displayedName.clone()); tag: 'a',
if (account) { attributes: {'class': 'logout'}, //TODO
$button.append('(' + accountName + ')'); content: 'Logout'
} }];
var dropdownConfig = { var $icon = $('<span>', {'class': 'fa fa-user'});
text: $button.html(), // Button initial text var $button = $('<div>').append($icon).append($displayedName.clone());
options: options, // Entries displayed in the menu if (account) {
left: true, // Open to the left of the button $button.append('(' + accountName + ')');
}; }
var $userAdmin = Cryptpad.createDropdown(dropdownConfig); var dropdownConfig = {
$userContainer.append($userAdmin); text: $button.html(), // Button initial text
options: options, // Entries displayed in the menu
left: true, // Open to the left of the button
};
var $userAdmin = Cryptpad.createDropdown(dropdownConfig);
$userContainer.append($userAdmin);
$userAdmin.find('a.logout').click(function (e) { $userAdmin.find('a.logout').click(function (e) {
Cryptpad.logout(); Cryptpad.logout();
});
if (config.userName && config.userName.setName && config.userName.lastName) {
$userAdmin.find('a.changeUserName').click(function (e) {
Cryptpad.prompt(Messages.changeNamePrompt, config.userName.lastName.lastName || '', function (newName) {
config.userName.setName(newName);
});
}); });
if (config.userName && config.userName.setName && config.userName.lastName) {
$userAdmin.find('a.changeUserName').click(function (e) {
Cryptpad.prompt(Messages.changeNamePrompt, config.userName.lastName.lastName || '', function (newName) {
config.userName.setName(newName);
});
});
}
} }
return $userContainer; return $userContainer;
@ -474,19 +492,20 @@ define([
config = config || {}; config = config || {};
var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1; var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1;
var Cryptpad = config.common; var Cryptpad = config.common;
config.displayed = config.displayed || [];
var toolbar = createRealtimeToolbar($container); var toolbar = createRealtimeToolbar($container);
var userListElement = config.userData ? createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly, Cryptpad) : undefined; var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), config, readOnly, Cryptpad);
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad); var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS)); var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
var lagElement = createLagElement(); var lagElement = createLagElement();
var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS), config, lagElement, Cryptpad); var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS), config, lagElement, Cryptpad);
var spinner = createSpinner($userAdminElement); var spinner = createSpinner($userAdminElement, config);
var userData = config.userData; var userData = config.userData;
// readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode) // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
var saveElement; var saveElement;
var loadElement; var loadElement;
var $stateElement = $userAdminElement.find('.' + STATE_CLS); var $stateElement = toolbar.find('.' + STATE_CLS);
var connected = false; var connected = false;
@ -524,7 +543,7 @@ define([
if (users.indexOf(myUserName) !== -1) { connected = true; } if (users.indexOf(myUserName) !== -1) { connected = true; }
if (!connected) { return; } if (!connected) { return; }
checkSynchronizing(users, myUserName, $stateElement); checkSynchronizing(users, myUserName, $stateElement);
updateUserList(myUserName, userListElement, users, userData, readOnly, $userAdminElement); updateUserList(config, myUserName, userListElement, users, userData, readOnly, $userAdminElement);
}); });
} else { } else {
userList.change.push(function () { userList.change.push(function () {

1
www/drive/main.js
Unescape Escape View File

@ -1747,6 +1747,7 @@ define([
var userList = APP.userList = info.userList; var userList = APP.userList = info.userList;
APP.userName = {}; APP.userName = {};
var config = { var config = {
displayed: ['useradmin', 'language', 'spinner', 'lag', 'state'],
readOnly: readOnly, readOnly: readOnly,
ifrw: window, ifrw: window,
common: Cryptpad, common: Cryptpad,

1
www/pad/main.js
Unescape Escape View File

@ -568,6 +568,7 @@ define([
}); });
var config = { var config = {
displayed: ['useradmin', 'language', 'spinner', 'lag', 'state', 'share', 'userlist'],
userData: userData, userData: userData,
readOnly: readOnly, readOnly: readOnly,
ifrw: ifrw, ifrw: ifrw,

1
www/poll/main.js
Unescape Escape View File

@ -652,6 +652,7 @@ define([
}); });
var config = { var config = {
displayed: ['useradmin', 'language', 'spinner', 'lag', 'state', 'share', 'userlist'],
userData: userData, userData: userData,
readOnly: readOnly, readOnly: readOnly,
title: { title: {

1
www/slide/main.js
Unescape Escape View File

@ -418,6 +418,7 @@ define([
}); });
var config = { var config = {
displayed: ['useradmin', 'language', 'spinner', 'lag', 'state', 'share', 'userlist'],
userData: userData, userData: userData,
readOnly: readOnly, readOnly: readOnly,
ifrw: ifrw, ifrw: ifrw,

Write Preview
Loading…
Cancel
Save