dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

many small improvements for animal avatars 

* more consistent scaling for animal avatars relative to the font-size of username's initials
* configurable emoji lists via AppConfig.emojiAvatars
* various comments from code review
* fixed a bug that caused the user admin menu button to not be redrawn on name changes
* guard against empty animal emojis in case the admin sets the list to []
This commit is contained in:
ansuz 2021-08-27 19:38:50 +05:30
parent c416303e1d
commit cd613f1037
10 changed files with 44 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
customize.dist/src/less2/include/avatar.less
View File

@ -5,6 +5,10 @@
) {
@avatar-width: @width;
@avatar-font-size: @width / 1.8;
// scale animal avatar to be somewhat larger, because:
// 1. emojis are wider than most latin characters
// 2. they should occupy the width of two average characters
@avatar-font-size-animal: @avatar-font-size * (6/5);
}
.avatar_main(@width: 30px) {
--LessLoader_require: LessLoader_currentFile();
@ -41,11 +45,7 @@
font-size: @avatar-font-size;
font-size: var(--avatar-font-size);
.animal {
font-size: 20px;
// scale animal avatar to be somewhat larger, because:
// 1. emojis are wider than most latin characters
// 2. they should occupy the width of two average characters
font-size: calc(var(--avatar-width) * (6/5));
font-size: @avatar-font-size-animal;
}
}
media-tag {

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

@ -855,10 +855,15 @@
span {
text-align: center;
width: 100%;
font-size: 40px;
.avatar_vars(72px);
font-size: @avatar-font-size;
display: inline-flex;
justify-content: center;
align-items: center;
.animal {
font-size: @avatar-font-size-animal;
}
}
&.cp-avatar {
.avatar_main(64px);

2
www/common/application_config_internal.js
View File

@ -208,5 +208,7 @@ define(function() {
// the driveless mode by changing the following value to "false"
AppConfig.allowDrivelessMode = true;
AppConfig.emojiAvatars = '🙈 🦀 🐞 🦋 🐬 🐋 🐢 🦉 🦆 🐧 🦡 🦘 🦨 🦦 🦥 🐼 🐻 🦝 🦓 🐄 🐷 🐐 🦙 🦒 🐘 🦏 🐁 🐹 🐰 🦫 🦔 🐨 🐱 🐺 👺 👹 👽 👾 🤖'.split(/\s+/);
return AppConfig;
});

2
www/common/common-messaging.js
View File

@ -18,7 +18,7 @@ define([
curvePublic: proxy.curvePublic,
notifications: Util.find(proxy, ['mailboxes', 'notifications', 'channel']),
avatar: proxy.profile && proxy.profile.avatar,
uid: proxy.uid,
uid: proxy.uid, // XXX test without this and see if it breaks things
};
if (hash === false) { delete data.channel; }
return data;

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

@ -1996,6 +1996,7 @@ define([
var to;
var oldUrl = '';
var oldUid;
var oldName;
var updateButton = function () {
var myData = metadataMgr.getUserData();
var privateData = metadataMgr.getPrivateData();
@ -2017,11 +2018,12 @@ define([
var newName = UI.getDisplayName(myData.name);
var url = myData.avatar;
$displayName.text(newName);
if ((accountName && oldUrl !== url) || !accountName && uid !== oldUid) {
if ((accountName && oldUrl !== url) || !accountName && uid !== oldUid || oldName !== newName) {
$avatar.html('');
Common.displayAvatar($avatar, url, newName, function ($img) {
oldUrl = url;
oldUid = uid;
oldName = newName;
$userAdmin.find('> button').removeClass('cp-avatar');
if ($img) { $userAdmin.find('> button').addClass('cp-avatar'); }
loadingAvatar = false;

1
www/common/inner/access.js
View File

@ -787,6 +787,7 @@ define([
// ie. if you have opened the access modal from within the pad
// its owner might be present or they might have left some data
// in the pad itself (as is the case of the uid in rich text comments)
// TODO or just implement "Acquaintances"
};
strangers++;
});

25
www/common/inner/common-mediatag.js
View File

@ -6,12 +6,13 @@ define([
'/common/hyperscript.js',
'/common/media-tag.js',
'/customize/messages.js',
'/customize/application_config.js',
'/bower_components/tweetnacl/nacl-fast.min.js',
'/bower_components/croppie/croppie.min.js',
'/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/croppie/croppie.css',
], function ($, Util, Hash, UI, h, MediaTag, Messages) {
], function ($, Util, Hash, UI, h, MediaTag, Messages, AppConfig) {
var MT = {};
var Nacl = window.nacl;
@ -49,7 +50,7 @@ define([
// TODO it would be nice to have "{0} is editing" instead of just their name
var html = '<span class="cp-cursor-avatar">';
if (cursor.avatar && avatars[cursor.avatar]) {
html += (cursor.avatar && avatars[cursor.avatar]) || '';
html += avatars[cursor.avatar];
} else if (animal_avatars[uid]) {
html += animal_avatars[uid] + ' ';
}
@ -87,18 +88,20 @@ define([
};
// https://emojipedia.org/nature/
var ANIMALS = '🙈 🦀 🐞 🦋 🐬 🐋 🐢 🦉 🦆 🐧 🦡 🦘 🦨 🦦 🦥 🐼 🐻 🦝 🦓 🐄 🐷 🐐 🦙 🦒 🐘 🦏 🐁 🐹 🐰 🦫 🦔 🐨 🐱 🐺 👺 👹 👽 👾 🤖'.split(/\s+/);
var ANIMALS = AppConfig.emojiAvatars || [];
var getRandomAnimal = function () {
var getRandomAnimal = function () { // XXX should never actually happen?
if (!ANIMALS.length) { return ''; }
return ANIMALS[Math.floor(Math.random() * ANIMALS.length)];
};
var getPseudorandomAnimal = MT.getPseudorandomAnimal = function (seed) {
if (!ANIMALS.length) { return ''; }
if (typeof(seed) !== 'string') { return getRandomAnimal(); }
seed = seed.replace(/\D/g, '').slice(0, 10);
seed = seed.replace(/\D/g, '').slice(0, 10); // XXX possible optimization for on-wire uid
seed = parseInt(seed);
if (!seed) { return getRandomAnimal(); }
return ANIMALS[seed % ANIMALS.length];
return ANIMALS[seed % ANIMALS.length] || '';
};
var getPrettyInitials = MT.getPrettyInitials = function (name) {
@ -123,29 +126,27 @@ define([
if (uid && animal_avatars[uid]) {
animal_avatar = animal_avatars[uid];
}
var animal = false;
name = (name || "").trim() || Messages.anonymous;
name = UI.getDisplayName(name);
var text;
if (name === Messages.anonymous && uid) {
if (ANIMALS.length && name === Messages.anonymous && uid) {
if (animal_avatar) {
text = animal_avatar;
} else {
text = animal_avatar = getPseudorandomAnimal(uid);
}
animal = true;
} else {
text = getPrettyInitials(name);
}
var $avatar = $('<span>', {
'class': 'cp-avatar-default' + (animal? ' animal': ''),
'class': 'cp-avatar-default' + (animal_avatar? ' animal': ''),
// XXX prevents screenreaders from trying to describe this
alt: '',
'aria-hidden': true,
}).text(text);
$container.append($avatar);
if (uid && animal) {
if (uid && animal_avatar) {
animal_avatars[uid] = animal_avatar;
}
if (cb) { cb(); }

5
www/kanban/app-kanban.less
View File

@ -160,11 +160,12 @@
.tools_unselectable();
cursor: default;
&.cp-cursor.cp-tippy-html {
.avatar_vars(20px);
background-color: var(--red);
// XXX figure out how to inherit this from avatar.less
font-size: 11px; // 20px / 1.8 as per avatar.less..
font-size: @avatar-font-size; //var(11px; // 20px / 1.8 as per avatar.less..
&.animal {
font-size: 14px; // 20px / 1.8 * (6/5)...
font-size: @avatar-font-size-animal; //14px; // 20px / 1.8 * (6/5)...
}
}
}

10
www/kanban/inner.js
View File

@ -99,12 +99,15 @@ define([
var name = UI.getDisplayName(cursor.name);
var l;
var l; // label?
var animal = '';
if (cursor.name === Messages.anonymous && typeof(cursor.uid) === 'string') {
l = MT.getPseudorandomAnimal(cursor.uid);
animal = '.animal';
} else {
if (l) {
animal = '.animal';
}
}
if (!l) {
l = MT.getPrettyInitials(name);
}
@ -1071,7 +1074,6 @@ define([
var kanban;
var $container = $('#cp-app-kanban-content');
var myData = framework._.cpNfInner.metadataMgr.getUserData();
var privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
if (!privateData.isEmbed) {
mkHelpMenu(framework);

6
www/pad/cursor.js
View File

@ -46,9 +46,11 @@ define([
// that means that emojis will use the system font that shows up in native tooltips
// so this might be of limited value/aesthetic appeal compared to other apps' cursors
var makeTippy = function (cursor) {
//return cursor.name;
if (typeof(cursor.uid) === 'string' && (!cursor.name || cursor.name === Messages.anonymous)) {
return MT.getPseudorandomAnimal(cursor.uid) + ' ' + Messages.anonymous;
var animal = MT.getPseudorandomAnimal(cursor.uid);
if (animal) {
return animal + ' ' + Messages.anonymous;
}
}
return cursor.name || Messages.anonymous;
};