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

Improve the toolbar UI with the username displayed

Browse Source
This commit is contained in:
yflory 2016-09-22 17:56:47 +02:00
parent 79884e2400
commit d46bd1af5c
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
customize.dist/toolbar.css
View File

@ -60,14 +60,6 @@
margin-right: 5px; margin-right: 5px;
padding-left: 5px; padding-left: 5px;
} }
.cryptpad-changeName {
float: left;
cursor: pointer;
}
.cryptpad-changeName button {
padding: 0;
margin-right: 5px;
}
.cryptpad-toolbar-leftside { .cryptpad-toolbar-leftside {
float: left; float: left;
} }
@ -88,3 +80,6 @@
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
.cryptpad-toolbar-username {
font-style: italic;
};

17
www/common/toolbar.js
View File

@ -27,6 +27,9 @@ define([
var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner'; var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner';
var USERNAME_CLS = Bar.constants.username = 'cryptpad-toolbar-username';
var READONLY_CLS = Bar.constants.readonly = 'cryptpad-readonly';
/** Key in the localStore which indicates realtime activity should be disallowed. */ /** Key in the localStore which indicates realtime activity should be disallowed. */
// TODO remove? will never be used in cryptpad // TODO remove? will never be used in cryptpad
var LOCALSTORAGE_DISALLOW = Bar.constants.localstorageDisallow = 'cryptpad-disallow'; var LOCALSTORAGE_DISALLOW = Bar.constants.localstorageDisallow = 'cryptpad-disallow';
@ -121,16 +124,16 @@ define([
return (i > 0) ? list.slice(0, -2) : list; return (i > 0) ? list.slice(0, -2) : list;
}; };
var createChangeName = function($container, userList, buttonID) { var createChangeName = function($container, buttonID) {
var $span = $('<span>', { var $span = $('<span>', {
id: uid(), id: uid(),
}); });
var $button = $('<button>', { var $button = $('<button>', {
id: buttonID, id: buttonID,
'class': USERNAME_BUTTON_GROUP, 'class': 'rightside-button',
}).text(Messages.changeNameButton); }).text(Messages.changeNameButton);
$(userList).append($button); $container.append($button);
$button.after($span); $button.after($span);
return $span[0]; return $span[0];
}; };
@ -157,7 +160,7 @@ define([
var innerHTML; var innerHTML;
var numberOfViewUsers = numberOfUsers - userList.length; var numberOfViewUsers = numberOfUsers - userList.length;
if (readOnly === 1) { if (readOnly === 1) {
innerHTML = '<span class="cryptpad-readonly">' + Messages.readonly + '</span>'; innerHTML = '<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>';
if (userList.length === 0) { if (userList.length === 0) {
innerHTML += Messages.nobodyIsEditing; innerHTML += Messages.nobodyIsEditing;
} else if (userList.length === 1) { } else if (userList.length === 1) {
@ -178,6 +181,9 @@ define([
} }
} }
innerHTML += getViewers(numberOfViewUsers); innerHTML += getViewers(numberOfViewUsers);
if (userData[myUserName] && userData[myUserName].name) {
innerHTML = '<span class="' + USERNAME_CLS + '">' + userData[myUserName].name + '</span> | ' + innerHTML;
}
listElement.innerHTML = innerHTML; listElement.innerHTML = innerHTML;
}; };
@ -226,7 +232,8 @@ define([
// Check if the user is allowed to change his name // Check if the user is allowed to change his name
if(changeNameID) { if(changeNameID) {
// Create the button and update the element containing the user list // Create the button and update the element containing the user list
userListElement = createChangeName($container, userListElement, changeNameID); //userListElement = createChangeName($container, userListElement, changeNameID);
createChangeName(toolbar.find('.' + RIGHTSIDE_CLS), changeNameID);
} }
var connected = false; var connected = false;