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 []

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 {

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);

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;
 });

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;

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;

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++;
         });

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 = '<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(); }

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)...
                 }
             }
         }

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);
+            if (l) {
                 animal = '.animal';
-        } else {
+            }
+        }
+        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);

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;
         };