3 files changed, 70 insertions, 4 deletions
diff --git a/client/components/users/userAvatar.jade b/client/components/users/userAvatar.jade
index ebfa48ba..e551cab5 100644
--- a/client/components/users/userAvatar.jade
+++ b/client/components/users/userAvatar.jade
@@ -15,6 +15,23 @@ template(name="userAvatar")
           a.edit-avatar.js-change-avatar
             i.fa.fa-pencil
 
+template(name="userAvatarAssignee")
+  a.assignee.js-assignee(title="{{userData.profile.fullname}} ({{userData.username}})")
+    if userData.profile.avatarUrl
+      img.avatar.avatar-image(src="{{userData.profile.avatarUrl}}")
+    else
+      +userAvatarInitials(userId=userData._id)
+
+    if showStatus
+      span.assignee-presence-status(class=presenceStatusClassName)
+      span.assignee-type(class=assigneeType)
+
+    unless isSandstorm
+      if showEdit
+        if $eq currentUser._id userData._id
+          a.edit-avatar.js-change-avatar
+            i.fa.fa-pencil
+
 template(name="userAvatarInitials")
   svg.avatar.avatar-initials(viewBox="0 0 {{viewPortWidth}} 15")
     text(x="50%" y="13" text-anchor="middle")= initials
@@ -78,3 +95,18 @@ template(name="cardMemberPopup")
       if $eq currentUser._id user._id
         with currentUser
           li: a.js-edit-profile {{_ 'edit-profile'}}
+
+template(name="cardAssigneePopup")
+  .board-assignee-menu
+    .mini-profile-info
+      +userAvatar(userId=user._id showEdit=true)
+      .info
+        h3= user.profile.fullname
+        p.quiet @{{ user.username }}
+    ul.pop-over-list
+      if currentUser.isNotCommentOnly
+          li: a.js-remove-assignee {{_ 'remove-member-from-card'}}
+
+      if $eq currentUser._id user._id
+        with currentUser
+          li: a.js-edit-profile {{_ 'edit-profile'}}
diff --git a/client/components/users/userAvatar.js b/client/components/users/userAvatar.js
index 262a63af..7a2831b2 100644
--- a/client/components/users/userAvatar.js
+++ b/client/components/users/userAvatar.js
@@ -139,6 +139,13 @@ Template.cardMembersPopup.helpers({
     return _.contains(cardMembers, this.userId);
   },
 
+  isCardAssignee() {
+    const card = Template.parentData();
+    const cardAssignees = card.getAssignees();
+
+    return _.contains(cardAssignees, this.userId);
+  },
+
   user() {
     return Users.findOne(this.userId);
   },
@@ -166,3 +173,26 @@ Template.cardMemberPopup.events({
   },
   'click .js-edit-profile': Popup.open('editProfile'),
 });
+
+Template.cardAssigneesPopup.events({
+  'click .js-select-assignee'(event) {
+    const card = Cards.findOne(Session.get('currentCard'));
+    const assigneeId = this.userId;
+    card.toggleAssignee(assigneeId);
+    event.preventDefault();
+  },
+});
+
+Template.cardAssigneePopup.helpers({
+  user() {
+    return Users.findOne(this.userId);
+  },
+});
+
+Template.cardAssigneePopup.events({
+  'click .js-remove-assignee'() {
+    Cards.findOne(this.cardId).unassignAssignee(this.userId);
+    Popup.close();
+  },
+  'click .js-edit-profile': Popup.open('editProfile'),
+});
diff --git a/client/components/users/userAvatar.styl b/client/components/users/userAvatar.styl
index b962b01c..5fcd9f6c 100644
--- a/client/components/users/userAvatar.styl
+++ b/client/components/users/userAvatar.styl
@@ -2,7 +2,8 @@
 
 avatar-radius = 50%
 
-.member
+.member,
+.assignee
   border-radius: 3px
   display: block
   position: relative
@@ -32,7 +33,8 @@ avatar-radius = 50%
       height: 100%
       width: @height
 
-  .member-presence-status
+  .member-presence-status,
+  .assignee-presence-status
     background-color: #b3b3b3
     border: 1px solid #fff
     border-radius: 50%
@@ -79,7 +81,8 @@ avatar-radius = 50%
       color: white
 
 
-  &.add-member
+  &.add-member,
+  &.add-assignee
     display: flex
     align-items: center
     justify-content: center
@@ -111,7 +114,8 @@ avatar-radius = 50%
     p
       padding-top: 0
 
-  .member
+  .member,
+  .assignee
     width: 50px
     height: @width
     margin-right: 10px