(Re-)implement default avatar using user initials

We use a embedded svg to scale the initials text to its container
size. The user is free to overwrite its initials in the profile form.

1 files changed, 21 insertions, 0 deletions

diff --git a/client/components/users/userAvatar.js b/client/components/users/userAvatar.js
index deae01cf..a02646c1 100644
--- a/client/components/users/userAvatar.js
+++ b/client/components/users/userAvatar.js
@@ -26,6 +26,18 @@ Template.userAvatar.helpers({
   }
 });
 
+Template.userAvatarInitials.helpers({
+  initials: function() {
+    var user = Users.findOne(this.userId);
+    return user && user.getInitials();
+  },
+
+  viewPortWidth: function() {
+    var user = Users.findOne(this.userId);
+    return (user && user.getInitials().length || 1) * 12;
+  }
+});
+
 BlazeComponent.extendComponent({
   template: function() {
     return 'changeAvatarPopup';
@@ -49,6 +61,12 @@ BlazeComponent.extendComponent({
     return avatarUrl === currentAvatarUrl;
   },
 
+  noAvatarUrl: function() {
+    var userProfile = Meteor.user().profile;
+    var avatarUrl = userProfile && userProfile.avatarUrl;
+    return ! avatarUrl;
+  },
+
   setAvatar: function(avatarUrl) {
     Meteor.users.update(Meteor.userId(), {
       $set: {
@@ -84,6 +102,9 @@ BlazeComponent.extendComponent({
         var avatarUrl = this.currentData().url(this.avatarUrlOptions());
         this.setAvatar(avatarUrl);
       },
+      'click .js-select-initials': function() {
+        this.setAvatar('');
+      },
       'click .js-delete-avatar': function() {
         Avatars.remove(this.currentData()._id);
       }