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

Add avatars in the user list

pull/1/head
yflory 2017-06-30 16:57:23 +02:00
parent b6944e6638
commit b153dda6ff
8 changed files with 175 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -104,6 +104,43 @@ body .userlist-drawer {
background: rgba(0,0,0,0.1);
margin: 2px 0;
font-size: 16px;
display: inline-flex;
align-items: center;
&.clickable {
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.3);
}
}
.default, media-tag {
display: inline-flex;
width: 50px;
height: 50px;
justify-content: center;
align-items: center;
margin-right: 5px;
border-radius: 10px / 6px;
overflow: hidden;
border: 1px solid black;
box-sizing: content-box;
}
.default {
.unselectable();
background: white;
color: black;
font-size: 40px;
}
media-tag {
max-height: 50px;
max-width: 50px;
img {
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none !important; // To override 'media-tag img' in slide.less
flex-shrink: 0;
}
}
}
}
}
@ -850,8 +887,10 @@ body .cryptpad-toolbar {
}
}
.cryptpad-toolbar-rightside {
height: 32px;
min-height: 32px;
overflow: hidden;
&:empty {
min-height: 0;
height: 0;
}
text-align: right;

10
customize.dist/translations/messages.fr.js
View File

@ -240,6 +240,16 @@ define(function () {
out.canvas_opacityLabel = "opacité: {0}";
out.canvas_widthLabel = "taille: {0}";
// Profile
out.profile_urlPlaceholder = 'URL';
out.profile_avatar = "Avatar";
out.profile_upload = " Importer un nouvel avatar";
out.profile_error = "Erreur lors de la création du profil : {0}";
out.profile_register = "Vous devez vous inscrire pour pouvoir créer un profil !";
out.profile_create = "Créer un profil";
out.profile_description = "Description";
out.profile_fieldSaved = 'Nouvelle valeur enregistrée: {0}';
// File manager
out.fm_rootName = "Documents";

11
customize.dist/translations/messages.js
View File

@ -241,7 +241,16 @@ define(function () {
out.canvas_opacity = "Opacity";
out.canvas_opacityLabel = "opacity: {0}";
out.canvas_widthLabel = "Width: {0}";
// Profile
out.profile_urlPlaceholder = 'URL';
out.profile_avatar = "Avatar";
out.profile_upload = " Upload a new avatar";
out.profile_error = "Error while creating your profile: {0}";
out.profile_register = "You have to sign up to create a profile!";
out.profile_create = "Create a profile";
out.profile_description = "Description";
out.profile_fieldSaved = 'New value saved: {0}';
// File manager

8
www/common/common-userlist.js
View File

@ -49,8 +49,10 @@ define(function () {
exp.myUserName = myUserNameTemp;
myData = {};
myData[exp.myNetfluxId] = {
name: exp.myUserName,
uid: Cryptpad.getUid(),
name: exp.myUserName,
uid: Cryptpad.getUid(),
avatar: Cryptpad.getAvatarUrl(),
profile: Cryptpad.getProfileUrl()
};
addToUserData(myData);
Cryptpad.setAttribute('username', exp.myUserName, function (err) {
@ -78,6 +80,8 @@ define(function () {
myData[exp.myNetfluxId] = {
name: "",
uid: Cryptpad.getUid(),
avatar: Cryptpad.getAvatarUrl(),
profile: Cryptpad.getProfileUrl()
};
addToUserData(myData);
onLocal();

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

@ -146,6 +146,16 @@ define([
}
return;
};
common.getProfileUrl = function () {
if (store && store.getProfile()) {
return store.getProfile().view;
}
};
common.getAvatarUrl = function () {
if (store && store.getProfile()) {
return store.getProfile().avatar;
}
};
var feedback = common.feedback = function (action, force) {
if (force !== true) {
@ -1168,61 +1178,70 @@ define([
'image/jpg',
'image/gif',
];
common.displayAvatar = function ($container, href) {
common.displayAvatar = function ($container, href, name, cb) {
var MutationObserver = window.MutationObserver;
$container.html('');
if (href) {
var parsed = common.parsePadUrl(href);
var secret = common.getSecrets('file', parsed.hash);
if (secret.keys && secret.channel) {
var cryptKey = secret.keys && secret.keys.fileKeyStr;
var hexFileName = common.base64ToHex(secret.channel);
var src = common.getBlobPathFromHex(hexFileName);
common.getFileSize(href, function (e, data) {
if (e) { return void console.error(e); }
if (typeof data !== "number") { return; }
if (common.bytesToMegabytes(data) > 0.5) { return; }
var $img = $('<media-tag>').appendTo($container);
$img.attr('src', src);
$img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
require(['/common/media-tag.js'], function (MediaTag) {
MediaTag.CryptoFilter.setAllowedMediaTypes(common.avatarAllowedTypes);
MediaTag($img[0]);
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList' && mutation.addedNodes.length) {
console.log(mutation);
if (mutation.addedNodes.length > 1 ||
mutation.addedNodes[0].nodeName !== 'IMG') {
$img.remove();
return;
//TODO display default avatar
}
var $image = $img.find('img');
var onLoad = function () {
var w = $image.width();
var h = $image.height();
if (w>h) {
$image.css('max-height', '100%');
$img.css('flex-direction', 'row');
return;
}
$image.css('max-width', '100%');
$img.css('flex-direction', 'column');
};
if ($image[0].complete) { onLoad(); }
$image.on('load', onLoad);
var displayDefault = function () {
var text = name.trim().length ? name.trim().slice(0,1) : '?';
var $avatar = $('<span>', {'class': 'default'}).text(text);
$container.append($avatar);
if (cb) { cb(); }
};
if (!href) { return void displayDefault(); }
var parsed = common.parsePadUrl(href);
var secret = common.getSecrets('file', parsed.hash);
if (secret.keys && secret.channel) {
var cryptKey = secret.keys && secret.keys.fileKeyStr;
var hexFileName = common.base64ToHex(secret.channel);
var src = common.getBlobPathFromHex(hexFileName);
common.getFileSize(href, function (e, data) {
if (e) {
displayDefault();
return void console.error(e);
}
if (typeof data !== "number") { return void displayDefault(); }
if (common.bytesToMegabytes(data) > 0.5) { return void displayDefault(); }
var $img = $('<media-tag>').appendTo($container);
$img.attr('src', src);
$img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
require(['/common/media-tag.js'], function (MediaTag) {
MediaTag.CryptoFilter.setAllowedMediaTypes(common.avatarAllowedTypes);
MediaTag($img[0]);
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList' && mutation.addedNodes.length) {
console.log(mutation);
if (mutation.addedNodes.length > 1 ||
mutation.addedNodes[0].nodeName !== 'IMG') {
$img.remove();
return void displayDefault();
}
});
});
observer.observe($img[0], {
attributes: false,
childList: true,
characterData: false
var $image = $img.find('img');
var onLoad = function () {
var w = $image.width();
var h = $image.height();
if (w>h) {
$image.css('max-height', '100%');
$img.css('flex-direction', 'row');
if (cb) { cb($img); }
return;
}
$image.css('max-width', '100%');
$img.css('flex-direction', 'column');
if (cb) { cb($img); }
};
if ($image[0].complete) { onLoad(); }
$image.on('load', onLoad);
}
});
});
observer.observe($img[0], {
attributes: false,
childList: true,
characterData: false
});
});
}
});
}
};

4
www/common/fsStore.js
View File

@ -211,6 +211,10 @@ define([
if (typeof(n) !== "string") { return; }
Cryptpad.changeDisplayName(n);
});
proxy.on('change', ['profile'], function () {
// Trigger userlist update when the avatar has changed
Cryptpad.changeDisplayName(proxy[Cryptpad.displayNameKey]);
});
proxy.on('change', [tokenKey], function () {
console.log('wut');
var localToken = tryParsing(localStorage.getItem(tokenKey));

24
www/common/toolbar2.js
View File

@ -149,6 +149,7 @@ define([
return $.inArray(i, b) > -1;
});
};
var avatars = {};
var updateUserList = function (toolbar, config) {
// Make sure the elements are displayed
var $userButtons = toolbar.userlist;
@ -189,7 +190,24 @@ define([
// Editors
editUsersNames.forEach(function (data) {
var name = data.name || Messages.anonymous;
var $span = $('<span>', {'title': name}).text(name);
var $span = $('<span>', {'title': name});
if (data.profile) {
$span.addClass('clickable');
$span.click(function () {
window.open('/profile/#' + data.profile);
});
}
if (data.avatar && avatars[data.avatar]) {
$span.append(avatars[data.avatar]);
$span.append(name);
} else {
Cryptpad.displayAvatar($span, data.avatar, name, function ($img) {
if (data.avatar && $img) {
avatars[data.avatar] = $img[0].outerHTML;
}
$span.append(name);
});
}
$span.data('uid', data.uid);
$editUsersList.append($span);
});
@ -197,9 +215,9 @@ define([
// Viewers
if (numberOfViewUsers > 0) {
var viewText = '<span class="viewer">';
var viewText = '<div class="viewer">';
var viewerText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
viewText += numberOfViewUsers + ' ' + viewerText + '</span>';
viewText += numberOfViewUsers + ' ' + viewerText + '</div>';
$editUsers.append(viewText);
}

28
www/profile/main.js
View File

@ -105,7 +105,7 @@ define([
if (err) { return void console.error(err); }
Cryptpad.whenRealtimeSyncs(realtime, function () {
lastVal = newVal;
Cryptpad.log('TODO: '+name+' saved');
Cryptpad.log(Messages._getKey('profile_fieldSaved', [newVal]));
editing = false;
});
});
@ -196,7 +196,7 @@ define([
cb();
};
var rt = APP.lm.realtime;
var placeholder = "URL"; //XXX
var placeholder = Messages.profile_urlPlaceholder;
createEditableInput($block, LINK_ID, placeholder, getValue, setValue, rt);
};
@ -209,7 +209,7 @@ define([
if (!APP.lm.proxy.avatar) {
$('<img>', {
src: '/customize/images/avatar.png',
title: 'Avatar', // XXX
title: Messages.profile_avatar,
alt: 'Avatar'
}).appendTo($span);
return;
@ -218,21 +218,20 @@ define([
if (APP.readOnly) { return; }
var $delButton = $('<button>', {'class': 'delete btn btn-danger fa fa-times'}); //XXX
var $delButton = $('<button>', {
'class': 'delete btn btn-danger fa fa-times',
title: Messages.fc_delete
});
$span.append($delButton);
$delButton.click(function () {
console.log('clicked');
var oldChanId = Cryptpad.hrefToHexChannelId(APP.lm.proxy.avatar);
Cryptpad.unpinPads([oldChanId], function (e) {
if (e) { Cryptpad.log(e); }
console.log('unpinned');
delete APP.lm.proxy.avatar;
delete Cryptpad.getProxy().profile.avatar;
Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
console.log('synced1');
var driveRt = Cryptpad.getStore().getProxy().info.realtime;
Cryptpad.whenRealtimeSyncs(driveRt, function () {
console.log('synced2');
displayAvatar();
});
});
@ -258,6 +257,7 @@ define([
Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
var driveRt = Cryptpad.getStore().getProxy().info.realtime;
Cryptpad.whenRealtimeSyncs(driveRt, function () {
Cryptpad.changeDisplayName();
displayAvatar();
});
});
@ -285,7 +285,7 @@ define([
accept: ".gif,.jpg,.jpeg,.png"
};
var $upButton = Cryptpad.createButton('upload', false, data);
$upButton.text(" Upload a new avatar");
$upButton.text(Messages.profile_upload);
$upButton.prepend($('<span>', {'class': 'fa fa-upload'}));
$block.append($upButton);
};
@ -300,6 +300,7 @@ define([
$div.html(val);
return;
}
$('<h3>').text(Messages.profile_description).insertBefore($block);
var $ok = $('<span>', {'class': 'ok fa fa-check', title: Messages.saved}).appendTo($block);
var $spinner = $('<span>', {'class': 'spin fa fa-spinner fa-pulse'}).appendTo($block);
@ -388,17 +389,18 @@ define([
if (e === 'E_OVER_LIMIT') {
Cryptpad.alert(Messages.pinLimitNotPinned, null, true);
}
return void Cryptpad.log('Error while creating your profile: ' + e); // XXX
return void Cryptpad.log(Messages._getKey('profile_error', [e]));
}
obj.profile.edit = Cryptpad.getEditHashFromKeys(channel, secret.keys);
obj.profile.view = Cryptpad.getViewHashFromKeys(channel, secret.keys);
obj.profile.name = APP.rt.proxy[Cryptpad.displayNameKey] || '';
Cryptpad.changeDisplayName();
andThen(obj.profile.edit);
});
};
if (!Cryptpad.isLoggedIn()) { // XXX
var $p = $('<p>').text('TODO: You have to register to create a profile');
if (!Cryptpad.isLoggedIn()) {
var $p = $('<p>').text(Messages.error_register);
var $a = $('<a>', {
href: '/register/'
});
@ -411,7 +413,7 @@ define([
}
var $create = $('<div>', {id: CREATE_ID});
var $button = $('<button>', {'class': 'btn btn-success'});
$button.text('TODO: create a profile?').click(todo).appendTo($create); // XXX
$button.text(Messages.profile_create).click(todo).appendTo($create);
APP.$container.append($create);
};