web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Ability to update the username from the userlist

Browse Source
This commit is contained in:
yflory
2017-11-15 11:32:54 +01:00
parent bdd24ed14f
commit 014e12b5b5
3 changed files with 131 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
customize.dist/src/less2/include/toolbar.less
View File

@@ -102,6 +102,32 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: flex;
justify-content: space-between;
align-items: center;
}
.cp-toolbar-userlist-name-input {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: none;
border: none;
}
.cp-toolbar-userlist-name-value {
overflow: hidden;
flex: 1;
min-width: 0;
min-height: 0;
text-overflow: ellipsis;
}
.cp-toolbar-userlist-name-edit {
width: 20px;
font-size: 16px;
padding: 0;
border: none;
height: 20px;
cursor: pointer;
} }
.cp-toolbar-userlist-friend { .cp-toolbar-userlist-friend {
padding: 0; padding: 0;
@@ -126,6 +152,19 @@
background-color: darken(@bgcolor, 10%); background-color: darken(@bgcolor, 10%);
color: @color; color: @color;
} }
.cp-toolbar-userlist-name-input {
background-color: darken(@bg-color, 10%);
color: @color;
}
.cp-toolbar-userlist-name-edit {
color: contrast(@color,
lighten(@color, 20%),
darken(@color, 20%));
background: transparent;
&:hover {
color: @color;
}
}
.cp-toolbar-userlist-friend { .cp-toolbar-userlist-friend {
&:hover { &:hover {
color: darken(@color, 15%); color: darken(@color, 15%);

4
www/common/common-ui-elements.js
View File

@@ -591,8 +591,8 @@ define([
if (config.displayNameCls) { if (config.displayNameCls) {
var $userAdminContent = $('<p>'); var $userAdminContent = $('<p>');
if (accountName) { if (accountName) {
var $userAccount = $('<span>', {'class': 'userAccount'}).append(Messages.user_accountName + ': ' + Util.fixHTML(accountName)); var $userAccount = $('<span>', {'class': 'userAccount'}).append(Messages.user_accountName + ': ');
$userAdminContent.append($userAccount); $userAdminContent.append($userAccount).append(Util.fixHTML(accountName));
$userAdminContent.append($('<br>')); $userAdminContent.append($('<br>'));
} }
if (config.displayName) { if (config.displayName) {

118
www/common/toolbar3.js
View File

@@ -151,6 +151,18 @@ define([
}; };
var avatars = {}; var avatars = {};
var editingUserName = {
state: false
};
var setDisplayName = function (newName) {
Common.setDisplayName(newName, function (err) {
if (err) {
console.log("Couldn't set username");
console.error(err);
return;
}
});
};
var updateUserList = function (toolbar, config) { var updateUserList = function (toolbar, config) {
// Make sure the elements are displayed // Make sure the elements are displayed
var $userButtons = toolbar.userlist; var $userButtons = toolbar.userlist;
@@ -185,6 +197,16 @@ define([
var numberOfEditUsers = Object.keys(userData).length - duplicates; var numberOfEditUsers = Object.keys(userData).length - duplicates;
var numberOfViewUsers = viewers; var numberOfViewUsers = viewers;
// If the user was changing his username, do not reste the input, store the current value
// and cursor
if (editingUserName.state) {
var $input = $userlistContent.find('.cp-toolbar-userlist-name-input');
editingUserName.value = $input.val();
editingUserName.select = [$input[0].selectionStart, $input[0].selectionEnd];
}
// Update the userlist // Update the userlist
var $editUsers = $userlistContent.find('.' + USERLIST_CLS).html(''); var $editUsers = $userlistContent.find('.' + USERLIST_CLS).html('');
@@ -213,28 +235,71 @@ define([
var $span = $('<span>', {'class': 'cp-avatar'}); var $span = $('<span>', {'class': 'cp-avatar'});
var $rightCol = $('<span>', {'class': 'cp-toolbar-userlist-rightcol'}); var $rightCol = $('<span>', {'class': 'cp-toolbar-userlist-rightcol'});
var $nameSpan = $('<span>', {'class': 'cp-toolbar-userlist-name'}).text(name).appendTo($rightCol); var $nameSpan = $('<span>', {'class': 'cp-toolbar-userlist-name'}).text(name).appendTo($rightCol);
var isMe = data.curvePublic === user.curvePublic; var isMe = data.uid === user.uid;
if (Common.isLoggedIn() && data.curvePublic) { if (isMe) {
if (isMe) { $span.attr('title', Messages._getKey('userlist_thisIsYou', [
$span.attr('title', Messages._getKey('userlist_thisIsYou', [ name
name ]));
])); $nameSpan.html('');
$nameSpan.text(name); var $nameValue = $('<span>', {
} else if (!friends[data.curvePublic]) { 'class': 'cp-toolbar-userlist-name-value'
if (pendingFriends.indexOf(data.netfluxId) !== -1) { }).text(name).appendTo($nameSpan);
$('<span>', {'class': 'cp-toolbar-userlist-friend'}).text(Messages.userlist_pending) var $button = $('<button>', {
.appendTo($rightCol); 'class': 'fa fa-pencil cp-toolbar-userlist-name-edit',
} else { title: "TODO: Edit your username"
$('<span>', { }).appendTo($nameSpan);
'class': 'fa fa-user-plus cp-toolbar-userlist-friend', var $nameInput = $('<input>', {
'title': Messages._getKey('userlist_addAsFriendTitle', [ 'class': 'cp-toolbar-userlist-name-input'
name }).val(name).appendTo($rightCol);
]) $button.click(function (e) {
}).appendTo($rightCol).click(function (e) { e.stopPropagation();
e.stopPropagation(); $nameSpan.hide();
Common.sendFriendRequest(data.netfluxId); $nameInput.show().focus().select();
}); editingUserName.state = true;
editingUserName.oldName = $nameInput.val();
});
$nameInput.click(function (e) {
e.stopPropagation();
});
$nameInput.on('keydown', function (e) {
if (e.which === 13 || e.which === 27) {
$nameInput.hide();
$nameSpan.show();
$button.show();
editingUserName.state = false;
} }
if (e.which === 13) {
var newName = $nameInput.val(); // TODO clean
$nameValue.text(newName);
setDisplayName(newName);
return;
}
if (e.which === 27) {
$nameValue.text(editingUserName.oldName);
return;
}
});
if (editingUserName.state) {
$button.click();
$nameInput.val(editingUserName.value);
$nameInput[0].setSelectionRange(editingUserName.select[0],
editingUserName.select[1]);
setTimeout(function () { $nameInput.focus(); });
}
} else if (Common.isLoggedIn() && data.curvePublic && !friends[data.curvePublic]) {
if (pendingFriends.indexOf(data.netfluxId) !== -1) {
$('<span>', {'class': 'cp-toolbar-userlist-friend'}).text(Messages.userlist_pending)
.appendTo($rightCol);
} else {
$('<span>', {
'class': 'fa fa-user-plus cp-toolbar-userlist-friend',
'title': Messages._getKey('userlist_addAsFriendTitle', [
name
])
}).appendTo($rightCol).click(function (e) {
e.stopPropagation();
Common.sendFriendRequest(data.netfluxId);
});
} }
} }
if (data.profile) { if (data.profile) {
@@ -824,6 +889,9 @@ define([
userMenuCfg.displayName = 1; userMenuCfg.displayName = 1;
userMenuCfg.displayChangeName = 1; userMenuCfg.displayChangeName = 1;
} }
/*if (config.displayed.indexOf('userlist') !== -1) {
userMenuCfg.displayChangeName = 0;
}*/
Common.createUserAdminMenu(userMenuCfg); Common.createUserAdminMenu(userMenuCfg);
$userAdmin.find('button').attr('title', Messages.userAccountButton); $userAdmin.find('button').attr('title', Messages.userAccountButton);
@@ -837,13 +905,7 @@ define([
if (newName === null && typeof(lastName) === "string") { return; } if (newName === null && typeof(lastName) === "string") { return; }
if (newName === null) { newName = ''; } if (newName === null) { newName = ''; }
else { Common.feedback('NAME_CHANGED'); } else { Common.feedback('NAME_CHANGED'); }
Common.setDisplayName(newName, function (err) { setDisplayName(newName);
if (err) {
console.log("Couldn't set username");
console.error(err);
return;
}
});
}); });
}); });