diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index 079ceb60d..acaa13351 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -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 { diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 28b513095..2092d72cc 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -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); diff --git a/www/common/application_config_internal.js b/www/common/application_config_internal.js index 3be979f17..2993edc52 100644 --- a/www/common/application_config_internal.js +++ b/www/common/application_config_internal.js @@ -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; }); diff --git a/www/common/common-messaging.js b/www/common/common-messaging.js index 4a3eb2a91..1e6e26ce3 100644 --- a/www/common/common-messaging.js +++ b/www/common/common-messaging.js @@ -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; diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index d0ef0af3f..abf45b0bd 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -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; diff --git a/www/common/inner/access.js b/www/common/inner/access.js index 119714de3..0ba857a0a 100644 --- a/www/common/inner/access.js +++ b/www/common/inner/access.js @@ -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++; }); diff --git a/www/common/inner/common-mediatag.js b/www/common/inner/common-mediatag.js index e061667ce..21cb25e82 100644 --- a/www/common/inner/common-mediatag.js +++ b/www/common/inner/common-mediatag.js @@ -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 = ''; 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 = $('', { - '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(); } diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 098560548..5996940e4 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -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)... } } } diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 368d18139..add0ed693 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -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); diff --git a/www/pad/cursor.js b/www/pad/cursor.js index 5b4c60ad7..ae91c80f1 100644 --- a/www/pad/cursor.js +++ b/www/pad/cursor.js @@ -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; };