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

Replace the username button by a dropdown menu

pull/1/head
yflory 2017-01-13 16:42:30 +01:00
parent 4adde0f0c0
commit 2afdc11327
11 changed files with 167 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/main.css
View File

@ -376,7 +376,7 @@
background: #bbb;
}
.dropdown-bar .dropdown-bar-content p {
width: 210px;
min-width: 160px;
padding: 5px;
margin: 0;
white-space: normal;

2
customize.dist/src/less/dropdown.less
View File

@ -63,7 +63,7 @@
}
p {
width: 210px;
min-width: 160px;
padding: 5px;
margin: 0;
white-space: normal;

17
customize.dist/src/less/toolbar.less
View File

@ -26,6 +26,8 @@
box-sizing: border-box;
padding: 0px 6px;
.fa {font-family: FontAwesome;}
.unselectable;
font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
@ -287,10 +289,17 @@
font-weight: bold;
text-transform: uppercase;
}
.cryptpad-toolbar-username {
line-height: 32px;
button {
line-height: initial;
.fa-user {
margin-right: 5px;
}
.cryptpad-user {
.buttonTitle {
.fa-user {
margin-right: 5px;
}
.cryptpad-toolbar-username {
margin-right: 5px;
}
}
}
.lag {

16
customize.dist/toolbar.css
View File

@ -45,7 +45,7 @@
background: #bbb;
}
.dropdown-bar .dropdown-bar-content p {
width: 210px;
min-width: 160px;
padding: 5px;
margin: 0;
white-space: normal;
@ -103,6 +103,9 @@
width: 100%;
z-index: 9001;
}
.cryptpad-toolbar .fa {
font-family: FontAwesome;
}
.cryptpad-toolbar a {
float: right;
}
@ -357,11 +360,14 @@
font-weight: bold;
text-transform: uppercase;
}
.cryptpad-toolbar-username {
line-height: 32px;
.fa-user {
margin-right: 5px;
}
.cryptpad-toolbar-username button {
line-height: initial;
.cryptpad-user .buttonTitle .fa-user {
margin-right: 5px;
}
.cryptpad-user .buttonTitle .cryptpad-toolbar-username {
margin-right: 5px;
}
.lag {
height: 15px !important;

21
www/code/main.js
View File

@ -366,6 +366,14 @@ define([
var onInit = config.onInit = function (info) {
userList = info.userList;
module.userName = {};
// The lastName is stored in an object passed to the toolbar so that when the user clicks on
// the "change display name" button, the prompt already knows his current name
getLastName(function (err, lastName) {
module.userName.lastName = lastName;
});
var config = {
userData: userData,
readOnly: readOnly,
@ -375,6 +383,10 @@ define([
defaultName: defaultName,
suggestName: suggestName
},
userName: {
setName: setName,
lastName: module.userName
},
common: Cryptpad
};
if (readOnly) {delete config.changeNameID; }
@ -392,15 +404,6 @@ define([
editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
}
// Store the object sent for the "change username" button so that we can update the field value correctly
var userNameButtonObject = module.userName = {};
/* add a "change username" button */
getLastName(function (err, lastName) {
userNameButtonObject.lastName = lastName;
var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
$userBlock.append($username);
});
/* add an export button */
var $export = Cryptpad.createButton('export', true, {}, exportText);
$rightside.append($export);

6
www/common/cryptpad-common.js
View File

@ -984,7 +984,9 @@ define([
return $container;
};
var createLanguageSelector = common.createLanguageSelector = function ($container, $block) {
// Provide $container if you want to put the generated block in another element
// Provide $initBlock if you already have the menu block and you want the content inserted in it
var createLanguageSelector = common.createLanguageSelector = function ($container, $initBlock) {
var options = [];
var languages = Messages._languages;
for (var l in languages) {
@ -1002,7 +1004,7 @@ define([
text: Messages.language, // Button initial text
options: options, // Entries displayed in the menu
left: true, // Open to the left of the button
container: $block // optional
container: $initBlock // optional
};
var $block = createDropdown(dropdownConfig);
$block.attr('id', 'language-selector');

72
www/common/toolbar.js
View File

@ -233,16 +233,18 @@ define([
var $userElement = $userAdminElement.find('.' + USERNAME_CLS);
$userElement.show();
if (readOnly === 1) {
$userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>');
//$userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>');
$userElement.addClass('ro').text(Messages.readonly);
}
else {
var name = userData[myUserName] && userData[myUserName].name;
var icon = '<span class="fa fa-user" style="font-family:FontAwesome;"></span>';
//var icon = '<span class="fa fa-user" style="font-family:FontAwesome;"></span>';
if (!name) {
name = Messages.anonymous;
}
$userElement.find("button").show();
$userElement.find("button").html(icon + ' ' + name);
// $userElement.find("button").show();
// $userElement.find("button").html(icon + ' ' + name);
$userElement.removeClass('ro').text(name);
}
};
@ -318,8 +320,9 @@ define([
$linkContainer.append($aTagSmall).append($aTagBig);
};
var createUserAdmin = function ($topContainer, lagElement, Cryptpad) {
var createUserAdmin = function ($topContainer, config, lagElement, Cryptpad) {
var $lag = $(lagElement);
//TODO check if we should displayed that button and if we can (userName.setName, userName.lastName and userdata required)
var $userContainer = $('<span>', {
'class': USER_CLS
@ -334,7 +337,57 @@ define([
// Dropdown language selector
Cryptpad.createLanguageSelector($userContainer);
var $usernameElement = $('<span>', {'class': USERNAME_CLS}).appendTo($userContainer);
// User dropdown
var $displayedName = $('<span>', {'class': USERNAME_CLS});
var accountName = null; //TODO Cryptpad.getStore().getAccountName()
var account = typeof accountName === "string";
var $userAdminContent = $('<p>');
if (account) {
var $userAccount = $('<span>', {'class': 'userAccount'}).append('Account: ' + accountName);
$userAdminContent.append($userAccount);
$userAdminContent.append($('<br>'));
}
var $userName = $('<span>', {'class': 'userDisplayName'}).append('Display name: ').append($displayedName.clone());
$userAdminContent.append($userName);
var options = [{
tag: 'p',
content: $userAdminContent.html()
}, {
tag: 'a',
attributes: {'class': 'changeUserName'},
content: 'Change username'
}, {
tag: 'a',
attributes: {'class': 'login'}, //TODO
content: 'Login'
}, {
tag: 'a',
attributes: {'class': 'logout'}, //TODO
content: 'Logout'
}];
var $icon = $('<span>', {'class': 'fa fa-user'});
var $button = $('<div>').append($icon).append($displayedName.clone());
if (account) {
$button.append('(' + accountName + ')');
}
var dropdownConfig = {
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) {
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);
});
});
}
return $userContainer;
};
@ -427,7 +480,7 @@ define([
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
var lagElement = createLagElement();
var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS), lagElement, Cryptpad);
var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS), config, lagElement, Cryptpad);
var spinner = createSpinner($userAdminElement);
var userData = config.userData;
// readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
@ -465,14 +518,11 @@ define([
}
// Update user list
if (config.userData) {
if (userData) {
userList.change.push(function (newUserData) {
var users = userList.users;
if (users.indexOf(myUserName) !== -1) { connected = true; }
if (!connected) { return; }
/*if (newUserData) { // Someone has changed his name/color
userData = newUserData;
}*/
checkSynchronizing(users, myUserName, $stateElement);
updateUserList(myUserName, userListElement, users, userData, readOnly, $userAdminElement);
});

55
www/drive/main.js
View File

@ -152,40 +152,16 @@ define([
});
};
var setName = APP.setName = function (newName) {
if (typeof(newName) !== 'string') { return; }
var myUserNameTemp = Cryptpad.fixHTML(newName.trim());
if(myUserNameTemp.length > 32) {
myUserNameTemp = myUserNameTemp.substr(0, 32);
}
var myUserName = myUserNameTemp;
Cryptpad.setAttribute('username', myUserName, function (err, data) {
if (err) {
logError("Couldn't set username", err);
return;
}
APP.userName.lastName = myUserName;
var $button = APP.$userNameButton;
var $span = $('<div>').append($button.find('span').clone()).html();
$button.html($span + myUserName);
});
};
var $userBlock = APP.$bar.find('.' + Toolbar.constants.username);
// Store the object sent for the "change username" button so that we can update the field value correctly
var userNameButtonObject = APP.userName = {};
/* add a "change username" button */
if (!APP.readOnly) {
getLastName(function (err, lastName) {
userNameButtonObject.lastName = lastName;
var $username = APP.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
$userBlock.append($username);
$username.append(lastName);
$username.show();
APP.userName.lastName = lastName;
APP.$displayName.text(lastName);
});
} else {
$userBlock.html('<span class="' + Toolbar.constants.readonly + '">' + Messages.readonly + '</span>');
APP.$displayName.html('<span class="' + Toolbar.constants.readonly + '">' + Messages.readonly + '</span>');
}
// FILE MANAGER
@ -1703,6 +1679,23 @@ define([
refresh();
};
var setName = APP.setName = function (newName) {
if (typeof(newName) !== 'string') { return; }
var myUserNameTemp = Cryptpad.fixHTML(newName.trim());
if(myUserNameTemp.length > 32) {
myUserNameTemp = myUserNameTemp.substr(0, 32);
}
var myUserName = myUserNameTemp;
Cryptpad.setAttribute('username', myUserName, function (err, data) {
if (err) {
logError("Couldn't set username", err);
return;
}
APP.userName.lastName = myUserName;
APP.$displayName.text(myUserName);
});
};
// don't initialize until the store is ready.
Cryptpad.ready(function () {
var storeObj = Cryptpad.getStore().getProxy && Cryptpad.getStore().getProxy().proxy ? Cryptpad.getStore().getProxy() : undefined;
@ -1752,17 +1745,23 @@ define([
});
var userList = APP.userList = info.userList;
APP.userName = {};
var config = {
readOnly: readOnly,
ifrw: window,
common: Cryptpad,
userName: {
setName: setName,
lastName: APP.userName
},
hideShare: true
};
var toolbar = APP.toolbar = info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config);
var $bar = APP.$bar;
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
var $userBlock = $bar.find('.' + Toolbar.constants.username);
var $userBlock = $bar.find('.' + Toolbar.constants.userAdmin);
APP.$displayName = $bar.find('.' + Toolbar.constants.username);
if (APP.homePageIframe) {
var $linkToMain = $bar.find('.cryptpad-link a');

21
www/pad/main.js
View File

@ -559,6 +559,14 @@ define([
var onInit = realtimeOptions.onInit = function (info) {
userList = info.userList;
module.userName = {};
// The lastName is stored in an object passed to the toolbar so that when the user clicks on
// the "change display name" button, the prompt already knows his current name
getLastName(function (err, lastName) {
module.userName.lastName = lastName;
});
var config = {
userData: userData,
readOnly: readOnly,
@ -568,6 +576,10 @@ define([
defaultName: defaultName,
suggestName: suggestName
},
userName: {
setName: setName,
lastName: module.userName
},
common: Cryptpad
};
if (readOnly) {delete config.changeNameID; }
@ -585,14 +597,7 @@ define([
editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
}
// Store the object sent for the "change username" button so that we can update the field value correctly
var userNameButtonObject = module.userName = {};
/* add a "change username" button */
getLastName(function (err, lastName) {
userNameButtonObject.lastName = lastName;
var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
$userBlock.append($username);
});
/* add an export button */
var $export = Cryptpad.createButton('export', true, {}, exportFile);

21
www/poll/main.js
View File

@ -643,6 +643,14 @@ define([
});
userList = APP.userList = info.userList;
APP.userName = {};
// The lastName is stored in an object passed to the toolbar so that when the user clicks on
// the "change display name" button, the prompt already knows his current name
getLastName(function (err, lastName) {
APP.userName.lastName = lastName;
});
var config = {
userData: userData,
readOnly: readOnly,
@ -651,6 +659,10 @@ define([
defaultName: defaultName,
suggestName: suggestName
},
userName: {
setName: setName,
lastName: APP.userName
},
ifrw: window,
common: Cryptpad,
};
@ -662,15 +674,6 @@ define([
var $editShare = $bar.find('.' + Toolbar.constants.editShare);
var $viewShare = $bar.find('.' + Toolbar.constants.viewShare);
// Store the object sent for the "change username" button so that we can update the field value correctly
var userNameButtonObject = APP.userName = {};
/* add a "change username" button */
getLastName(function (err, lastName) {
userNameButtonObject.lastName = lastName;
var $username = APP.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
$userBlock.append($username);
});
/* add a forget button */
var forgetCb = function (err, title) {
if (err) { return; }

21
www/slide/main.js
View File

@ -409,6 +409,14 @@ define([
var onInit = config.onInit = function (info) {
userList = info.userList;
module.userName = {};
// The lastName is stored in an object passed to the toolbar so that when the user clicks on
// the "change display name" button, the prompt already knows his current name
getLastName(function (err, lastName) {
module.userName.lastName = lastName;
});
var config = {
userData: userData,
readOnly: readOnly,
@ -418,6 +426,10 @@ define([
defaultName: defaultName,
suggestName: suggestName
},
userName: {
setName: setName,
lastName: module.userName
},
common: Cryptpad
};
if (readOnly) {delete config.changeNameID; }
@ -435,15 +447,6 @@ define([
editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
}
// Store the object sent for the "change username" button so that we can update the field value correctly
var userNameButtonObject = module.userName = {};
/* add a "change username" button */
getLastName(function (err, lastName) {
userNameButtonObject.lastName = lastName;
var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
$userBlock.append($username);
});
/* add an export button */
var $export = Cryptpad.createButton('export', true, {}, exportText);
$rightside.append($export);